initial

apps/client/components/asset/card.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="asset-card" :class="{ 'is-active': isActive, 'is-disabled': disabled }">
+    <UiCoin
+      class="asset-card__coin"
+      :code="code"
+    />
+
+    <div class="asset-card__name-wrapper">
+      <p class="asset-card__code">
+        {{ code }}
+      </p>
+
+      <p class="asset-card__name">
+        {{ name }}
+      </p>
+    </div>
+
+    <div class="asset-card__money">
+      <p class="asset-card__balance">
+        <span
+          v-if="showConverted"
+          class="asset-card__converted"
+        >
+          {{ convertedBalance }}
+        </span>
+        <span>{{ balance }}</span>
+      </p>
+
+      <p
+        v-if="withdraw"
+        class="asset-card__withdraw"
+      >
+        <span
+          v-if="showConverted"
+          class="asset-card__converted"
+        >
+          {{ convertedWithdraw }}
+        </span>
+        <span>{{ withdraw }}</span>
+        <UiIconSUpRight class="asset-card__withdraw-icon" />
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type Decimal from 'decimal.js'
+
+interface Props {
+  code: string
+  name?: string
+  balance: Decimal.Value
+  withdraw?: Decimal.Value
+  rate: Decimal.Value
+  isActive?: boolean
+  disabled?: boolean
+}
+
+const props = defineProps<Props>()
+
+const showConverted = computed(() => !!props.rate && props.rate !== 1)
+const convertedBalance = computed(() => $money.fullFormat($money.convert(props.balance, props.rate), 'USDT'))
+const convertedWithdraw = computed(() => $money.fullFormat($money.convert(props.balance, props.rate), 'USDT'))
+</script>
+
+<style lang="scss">
+.asset-card {
+  display: grid;
+  grid-template-columns: auto 1fr 1fr;
+  align-items: center;
+  padding: 24px;
+  border-radius: 12px;
+  background-color: $clr-grey-100;
+  outline: 2px solid transparent;
+  outline-offset: -2px;
+  cursor: pointer;
+  transition: .2s ease-out;
+  transition-property: outline-color, background-color;
+  min-height: 97px;
+
+  &:hover {
+    outline-color: $clr-grey-300;
+  }
+
+  &.is-active,
+  &:active {
+    background-color: $clr-grey-200;
+  }
+
+  &.is-active {
+    outline-color: $clr-cyan-300;
+  }
+
+  &.is-disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+
+  &__name-wrapper {
+    min-width: 0;
+  }
+
+  &__coin {
+    margin-right: 16px;
+  }
+
+  &__code {
+    @include txt-l-sb;
+
+    text-transform: uppercase;
+  }
+
+  &__name {
+    @include txt-r-m;
+
+    margin-top: 2px;
+    color: $clr-grey-400;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__money {
+    text-align: right;
+  }
+
+  &__balance {
+    @include txt-l-sb;
+  }
+
+  &__withdraw {
+    @include txt-i-sb;
+
+    margin-top: 8px;
+  }
+
+  &__balance,
+  &__withdraw {
+    vertical-align: middle;
+    white-space: nowrap;
+
+    span {
+      vertical-align: middle;
+    }
+  }
+
+  &__withdraw-icon {
+    color: $clr-cyan-500;
+    margin-left: 4px;
+  }
+
+  &__converted {
+    @include txt-i-m;
+
+    vertical-align: middle;
+    color: $clr-grey-400;
+
+    &::after {
+      content: '/';
+      margin-inline: 4px;
+      color: $clr-grey-300;
+    }
+  }
+}
+</style>

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>