From 689a6f92e145f9cafdc2f26a72e3e11af5446e5b Mon Sep 17 00:00:00 2001
From: AricRedemption <aricredemption@gmail.com>
Date: Thu, 14 Mar 2024 16:37:56 +0800
Subject: [PATCH] chore: Update UI

---
 src/pages/wallet/AccountHeader.vue        |   5 +-
 src/pages/wallet/Asset.vue                |  11 +-
 src/pages/wallet/Token.vue                | 190 +++++++++++++++-------
 src/pages/wallet/components/AssetList.vue |   2 +-
 src/router.ts                             |  10 +-
 5 files changed, 143 insertions(+), 75 deletions(-)

diff --git a/src/pages/wallet/AccountHeader.vue b/src/pages/wallet/AccountHeader.vue
index f8aaee4..d0ff7bf 100644
--- a/src/pages/wallet/AccountHeader.vue
+++ b/src/pages/wallet/AccountHeader.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, inject } from 'vue'
+import { ref } from 'vue'
 import { FlexBox } from '@/components'
 import { useRouter } from 'vue-router'
 import { getNetwork } from '@/lib/network'
@@ -18,11 +18,8 @@ import {
   Drawer,
   DrawerClose,
   DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
   DrawerHeader,
   DrawerTitle,
-  DrawerTrigger,
 } from '@/components/ui/drawer'
 
 const { toast } = useToast()
diff --git a/src/pages/wallet/Asset.vue b/src/pages/wallet/Asset.vue
index 930aaf9..942108f 100644
--- a/src/pages/wallet/Asset.vue
+++ b/src/pages/wallet/Asset.vue
@@ -176,10 +176,13 @@ const toReceive = () => {
 
       <div class="mt-0.5 text-sm text-gray-primary">$ {{ assetUSD?.toNumber() }} USD</div>
 
-      <div class="space-x-1">
-        <div v-for="tag in tags" :key="tag.name" :class="['text-gray-primary', 'text-xs']">
-          {{ tag.name }}
-        </div>
+      <div
+        v-for="tag in tags"
+        :key="tag.name"
+        :style="`background-color:${tag.bg};color:${tag.color};`"
+        :class="['px-1.5', 'py-0.5', 'rounded', 'text-xs', 'inline-block', 'scale-75']"
+      >
+        {{ tag.name }}
       </div>
     </div>
 
diff --git a/src/pages/wallet/Token.vue b/src/pages/wallet/Token.vue
index 0080116..8380b6f 100644
--- a/src/pages/wallet/Token.vue
+++ b/src/pages/wallet/Token.vue
@@ -1,19 +1,20 @@
 <script lang="ts" setup>
+import Decimal from 'decimal.js'
 import { computed, ref } from 'vue'
+import { getTags } from '@/data/assets'
 import { getFTLogo } from '@/data/logos'
 import { type Asset } from '@/data/assets'
-import { isOfficialToken } from '@/lib/assets'
+import CopyIcon from '@/assets/icons/copy.svg'
 import { useRoute, useRouter } from 'vue-router'
+import AssetLogo from '@/components/AssetLogo.vue'
 import { useMVCTokenQuery } from '@/queries/tokens'
 import Activities from './components/Activities.vue'
-import { prettifyTokenBalance, prettifyTokenGenesis } from '@/lib/formatters'
-import {
-  CheckBadgeIcon,
-  ClipboardDocumentCheckIcon,
-  ClipboardDocumentListIcon,
-  ArrowUpRightIcon,
-  QrCodeIcon,
-} from '@heroicons/vue/24/solid'
+import SendPNG from '@/assets/icons-v3/send_detail.png'
+import { toast } from '@/components/ui/toast/use-toast'
+import { CheckBadgeIcon } from '@heroicons/vue/24/solid'
+import ReceivePNG from '@/assets/icons-v3/receive_detail.png'
+import { calcBalance, prettifyTokenGenesis } from '@/lib/formatters'
+import { useExchangeRatesQuery, getExchangeCoinType } from '@/queries/exchange-rates'
 
 const route = useRoute()
 const router = useRouter()
@@ -23,7 +24,13 @@ const address = route.params.address as string
 const genesis = route.params.genesis as string
 const enabled = computed(() => !!address && !!symbol && !!genesis)
 
-const { isLoading, data: token } = useMVCTokenQuery(ref(address), genesis, { enabled })
+const tags = computed(() => {
+  if (asset.value) {
+    return getTags(asset.value)
+  }
+})
+
+const { data: token } = useMVCTokenQuery(ref(address), genesis, { enabled })
 const asset = computed(() => {
   if (token.value) {
     return {
@@ -46,6 +53,36 @@ const asset = computed(() => {
   }
 })
 
+const rateEnabled = computed(() => {
+  if (asset.value) {
+    return !!address && !!symbol
+  }
+  return false
+})
+
+const coinType = computed(() => {
+  if (asset.value) {
+    return getExchangeCoinType(asset.value.symbol, asset.value.contract)
+  }
+})
+
+const { isLoading: isExchangeRateLoading, data: exchangeRate } = useExchangeRatesQuery(ref(symbol), coinType, {
+  enabled: rateEnabled,
+})
+
+const assetUSD = computed(() => {
+  if (isExchangeRateLoading.value) {
+    return
+  }
+  const usdRate = new Decimal(exchangeRate.value?.price || 0)
+  if (asset.value) {
+    if (asset.value?.balance) {
+      const balanceInStandardUnit = new Decimal(asset.value.balance?.total || 0).dividedBy(10 ** asset.value.decimal)
+      return usdRate.mul(balanceInStandardUnit)
+    }
+  }
+})
+
 const toSend = () => {
   router.push({
     name: 'send-token',
@@ -56,66 +93,103 @@ const toReceive = () => {
   router.push(`/wallet/receive?chain=mvc`)
 }
 
-const isCopied = ref(false)
 const copyGenesis = () => {
   navigator.clipboard.writeText(token.value!.genesis)
-  isCopied.value = true
+  toast({ title: `Token Contract ID Copied`, toastType: 'success', description: token.value!.genesis })
 }
 </script>
 
 <template>
-  <div class="mt-8 flex flex-col items-center">
-    <div v-if="isLoading" class="text-center text-gray-500 font-bold">Token Asset Loading...</div>
-
-    <template v-else-if="!!asset && !!token">
-      <!-- logo -->
-      <img v-if="asset?.logo" :src="asset.logo" alt="" class="h-20 w-20 rounded-full" />
-      <div v-else style="line-height: 80px" class="h-20 w-20 text-center rounded-full text-white text-3xl bg-[#1E2BFF]">
-        {{ symbol[0].toLocaleUpperCase() }}
+  <div class="flex flex-col items-center space-y-6 w-full" v-if="asset">
+    <div class="flex flex-col items-center">
+      <AssetLogo :logo="asset.logo" :chain="asset.chain" :symbol="asset.symbol" type="network" class="w-15" />
+
+      <div class="mt-3 text-2xl">
+        <span v-if="asset.balance"> {{ calcBalance(asset.balance.total, asset.decimal, asset.symbol) }}</span>
+        <span v-else>-- {{ asset.symbol }}</span>
+      </div>
+
+      <div class="mt-0.5 text-sm text-gray-primary">$ {{ assetUSD?.toNumber() }} USD</div>
+
+      <div
+        v-for="tag in tags"
+        :key="tag.name"
+        :style="`background-color:${tag.bg};color:${tag.color};`"
+        :class="['px-1.5', 'py-0.5', 'rounded', 'text-xs', 'inline-block', 'scale-75']"
+      >
+        {{ tag.name }}
       </div>
+    </div>
+
+    <div class="flex items-center justify-center gap-x-2">
+      <button @click="toSend" class="btn-blue-light">
+        <img :src="SendPNG" alt="Send" />
+        <span>Send</span>
+      </button>
+      <button @click="toReceive" class="btn-blue-primary">
+        <img :src="ReceivePNG" alt="Receive" />
+        <span>Receive</span>
+      </button>
+    </div>
 
-      <!-- token info -->
-      <div class="mt-4 flex flex-col items-center self-stretch">
-        <div class="mb-1 text-center text-xl">
-          {{ prettifyTokenBalance(token.confirmed + token.unconfirmed, token.decimal) + ' ' + token.symbol }}
-        </div>
-
-        <!-- Contract ID -->
-        <div class="mt-8 self-stretch">
-          <div class="text-xs text-gray-500">Token Contract ID</div>
-          <div class="flex items-center">
-            <CheckBadgeIcon class="mr-1 h-5 w-5 text-blue-500" v-if="token && isOfficialToken(token.genesis)" />
-            <div class="text-base text-gray-900">{{ prettifyTokenGenesis(token.genesis) }}</div>
-
-            <ClipboardDocumentCheckIcon class="ml-2 h-4 w-4 text-blue-500" v-if="isCopied" />
-            <button class="ml-2 text-gray-400 hover:text-gray-500" @click.stop="copyGenesis" type="button" v-else>
-              <ClipboardDocumentListIcon class="h-4 w-4" />
-            </button>
-          </div>
-        </div>
-
-        <!-- buttons -->
-        <div class="mt-4 grid grid-cols-2 gap-x-3 self-stretch">
-          <button class="button" @click="toSend">
-            <ArrowUpRightIcon class="mr-1 h-4 w-4" />
-            <span>Send</span>
-          </button>
-          <button class="button" @click="toReceive">
-            <QrCodeIcon class="mr-1 h-4 w-4" />
-            <span>Receive</span>
-          </button>
-        </div>
-
-        <Activities class="mt-8 self-stretch" v-if="asset" :asset="asset" :address="address" />
+    <div class="mt-8 self-stretch">
+      <div class="text-xs text-gray-500">Token Contract ID</div>
+      <div class="flex items-center">
+        <CheckBadgeIcon class="mr-1 h-5 w-5 text-blue-500" />
+        <div class="text-base text-gray-900">{{ prettifyTokenGenesis(asset.genesis!) }}</div>
+
+        <CopyIcon class="ml-2 cursor-pointer" @click.stop="copyGenesis" />
       </div>
-    </template>
+    </div>
 
-    <div v-else class="text-center text-gray-500 font-bold">No Token Asset.</div>
+    <div class="w-full">
+      <div class="-mx-4 h-11 bg-gray-light px-4 py-[13px] text-ss" v-if="false">
+        <DropdownMenu>
+          <DropdownMenuTrigger class="flex items-center justify-between w-full">
+            <div class="flex items-center gap-x-2">
+              <span>Time</span>
+              <SelectorIcon />
+            </div>
+            <FilterIcon />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" class="bg-white">
+            <DropdownMenuItem @select="null">Time</DropdownMenuItem>
+            <DropdownMenuItem @select="null">Other</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <Activities class="mt-8 self-stretch" :asset="asset" :exchangeRate="Number(exchangeRate)" :address="address" />
+    </div>
   </div>
+  <Loading v-else text="Asset Loading..." />
 </template>
 
-<style lang="css" scoped>
-.button {
-  @apply flex items-center justify-center rounded-md bg-btn-blue py-3 text-sm text-white;
+<style scoped lang="css">
+.btn {
+  @apply w-[119px] h-12 rounded-3xl flex items-center justify-center gap-x-2;
+}
+
+.btn-blue-light {
+  @apply btn bg-blue-light text-blue-primary;
+}
+
+.btn-blue-primary {
+  @apply btn bg-blue-primary text-white;
+}
+
+div[role='tablist'] {
+  @apply p-0 h-auto;
+}
+
+button[role='tab'] {
+  @apply flex flex-col items-center px-0 py-4 rounded-none border-b-2 border-transparent;
+}
+
+button[role='tab'][aria-selected='true'] {
+  @apply border-blue-primary;
+}
+
+div[role='tabpanel'] {
+  @apply px-3 py-4 mt-0;
 }
 </style>
diff --git a/src/pages/wallet/components/AssetList.vue b/src/pages/wallet/components/AssetList.vue
index bc3d88c..cf53112 100644
--- a/src/pages/wallet/components/AssetList.vue
+++ b/src/pages/wallet/components/AssetList.vue
@@ -57,7 +57,7 @@ function toToken(token: Asset, address: string) {
   router.push({
     name: 'token',
     params: { genesis: token.genesis, symbol: token.symbol, address },
-    query: { genesis: token.genesis, symbol: token.symbol, address },
+    // query: { genesis: token.genesis, symbol: token.symbol, address },
   })
 }
 </script>
diff --git a/src/router.ts b/src/router.ts
index 7a5a4e0..7e85726 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -239,6 +239,7 @@ const routes = [
         meta: {
           secondaryHeader: true,
           headerTitle: 'ASSET',
+          noFooter: true,
         },
       },
       {
@@ -412,14 +413,7 @@ const router = VueRouter.createRouter({
   routes,
 })
 
-const authPages = [
-  '/welcome',
-  '/welcome/import',
-  '/welcome/create',
-  '/lock',
-  '/accounts',
-  '/migrateV2',
-]
+const authPages = ['/welcome', '/welcome/import', '/welcome/create', '/lock', '/accounts', '/migrateV2']
 
 router.beforeEach(async (to, _, next) => {
   if (to.fullPath !== '/lock' && (await storage.get('locked'))) {