initial

apps/client/components/asset/sidebar.vue

@@ -0,0 +1,73 @@
+<template>
+  <Sidebar id="asset" class="asset-sidebar" @close="$emit('close')">
+    <UiCoin :code="asset.code" class="asset-sidebar__coin" />
+
+    <div>
+      <MoneyAmount class="asset-sidebar__balance" :value="asset.balance" :currency="asset.code" />
+    </div>
+
+    <div class="asset-sidebar__actions">
+      <UiButton type="ghost" size="small" icon="s-up-right" :href="`/create/withdraw/${projectId}/${asset.code}`">
+        Отправить
+      </UiButton>
+
+      <UiButton type="ghost" size="small" icon="s-down-left" :href="`/create/invoice/${projectId}`">
+        Получить
+      </UiButton>
+
+      <UiButton type="ghost" color="secondary" size="small" icon="s-exchange" disabled>
+        Обменять
+      </UiButton>
+    </div>
+  </Sidebar>
+</template>
+
+<script setup lang="ts">
+import { Sidebar } from '#components'
+
+defineProps({
+  projectId: {
+    type: String,
+    required: true,
+  },
+  asset: {
+    type: Object,
+    required: true,
+  },
+})
+
+defineEmits(['close'])
+</script>
+
+<style lang="scss">
+.asset-sidebar {
+  text-align: center;
+
+  &__coin {
+    border-radius: 9px;
+    height: 48px;
+    width: 48px;
+    margin-bottom: 16px;
+  }
+
+  &__balance {
+    @include h3('money-amount-value', true);
+  }
+
+  &__actions {
+    --button-ghost-primary-color: #{$clr-black};
+    --button-icon-color: #{$clr-cyan-500};
+    --button-icon-disabled-color: #{$clr-grey-400};
+
+    display: flex;
+    padding: 4px;
+    background-color: $clr-grey-100;
+    border-radius: 12px;
+    margin-top: 40px;
+
+    > * {
+      flex: 1;
+    }
+  }
+}
+</style>