feat: optimize asset loading display

metalet-labs · May 17, 2024 · 26e3196 · 26e3196
1 parent 8aedfef
commit 26e3196
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 80 deletions.
diff --git a/src/data/assets.ts b/src/data/assets.ts
@@ -57,27 +57,24 @@ const tags: Tag[] = [
     bg: 'rgba(153,159,255,0.2)',
     color: '#787FFF',
   },
+  {
+    name: 'Runes',
+    bg: 'rgb(247, 147, 26, 0.2)',
+    color: '#FF981C',
+  },
 ]
 
 function getTagInfo(name: string): Tag | undefined {
   return tags.find((tag) => tag.name === name)
 }
 
-function getTags(asset: Asset): Tag[] {
+type Protocol = 'BRC-20' | 'MetaContract' | 'Runes'
+
+function getTags(protocol: Protocol): Tag[] {
   const tagList: Tag[] = []
-  if (asset?.contract) {
-    const contractTag = getTagInfo(asset.contract)
-    if (contractTag) {
-      tagList.push(contractTag)
-    }
-  } else if ((asset as RuneAsset)?.runeId) {
-    ;[
-      {
-        name: 'Runes',
-        bg: 'rgb(247, 147, 26, 0.2)',
-        color: '#FF981C',
-      },
-    ]
+  const contractTag = getTagInfo(protocol)
+  if (contractTag) {
+    tagList.push(contractTag)
   }
   return tagList
 }

diff --git a/src/pages/wallet/Asset.vue b/src/pages/wallet/Asset.vue
@@ -66,12 +66,6 @@ const balaceEnabled = computed(() => {
 
 const { isLoading, data: balance } = useBalanceQuery(address, symbol, { enabled: balaceEnabled })
 
-const tags = computed(() => {
-  if (asset.value) {
-    return getTags(asset.value)
-  }
-})
-
 const rateEnabled = computed(() => {
   if (asset.value) {
     return !!address.value && !!symbol.value
@@ -194,15 +188,6 @@ const toReceive = () => {
           ≈ ${{ assetUSD?.toNumber().toFixed(2) }}
         </span>
       </div>
-
-      <div
-        :key="tag.name"
-        v-for="tag in tags"
-        :style="`background-color:${tag.bg};color:${tag.color};`"
-        :class="['px-1', 'py-0.5', 'rounded', 'text-xs', 'inline-block', 'mt-2']"
-      >
-        {{ tag.name }}
-      </div>
     </div>
 
     <div class="flex items-center justify-center gap-x-2">

diff --git a/src/pages/wallet/BRC20.vue b/src/pages/wallet/BRC20.vue
@@ -12,6 +12,7 @@ import { SymbolTicker } from '@/lib/asset-symbol'
 import AssetLogo from '@/components/AssetLogo.vue'
 import { useIconsStore } from '@/stores/IconsStore'
 import EmptyIcon from '@/assets/icons-v3/empty.svg'
+import { Chain } from '@metalet/utxo-wallet-service'
 import Activities from './components/Activities.vue'
 import TickerList from './components/TickerList.vue'
 import { useBRC20AseetQuery } from '@/queries/brc20'
@@ -56,11 +57,7 @@ const availableBalanceSafe = computed(() => asset.value?.balance.availableBalanc
 
 const availableBalanceUnSafe = computed(() => asset.value?.balance.availableBalanceUnSafe)
 
-const tags = computed(() => {
-  if (asset.value) {
-    return getTags(asset.value)
-  }
-})
+const tags = getTags('BRC-20')
 
 const rateEnabled = computed(() => {
   if (asset.value) {
@@ -104,13 +101,13 @@ watch(assetUSD, (_assetUSD) => {
 </script>
 
 <template>
-  <div class="flex flex-col items-center space-y-6 w-full" v-if="asset">
+  <div class="flex flex-col items-center space-y-6 w-full">
     <div class="flex flex-col items-center">
-      <AssetLogo :logo="icon" :chain="asset.chain" :symbol="asset.symbol" type="network" class="w-15" />
+      <AssetLogo :logo="icon" :chain="Chain.BTC" :symbol="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>
+        <span v-if="asset?.balance">{{ calcBalance(asset.balance.total, asset.decimal, asset.symbol) }}</span>
+        <span v-else>-- {{ symbol }}</span>
         <span class="text-gray-primary ml-2" v-if="assetUSD !== undefined">≈ ${{ assetUSD.toFixed(2) }}</span>
       </div>
 
@@ -129,7 +126,7 @@ watch(assetUSD, (_assetUSD) => {
         <img :src="MintPNG" alt="Mint" />
         <span>Mint</span>
       </RouterLink>
-      <RouterLink :to="`/wallet/transfer/${asset.symbol}/${address}`" class="btn-blue-primary">
+      <RouterLink :to="`/wallet/transfer/${symbol}/${address}`" class="btn-blue-primary">
         <img :src="TransferPNG" alt="Transfer" />
         <span>Transfer</span>
       </RouterLink>
@@ -161,7 +158,7 @@ watch(assetUSD, (_assetUSD) => {
         </TabsContent>
         <TabsContent value="Available">
           <div v-if="availableBalanceUnSafe" class="grid grid-cols-3 gap-x-2 gap-y-4">
-            <Ticker :ticker="asset.symbol" :amount="availableBalanceUnSafe" />
+            <Ticker :ticker="symbol" :amount="availableBalanceUnSafe" />
           </div>
           <div v-else class="pt-6 pb-8">
             <EmptyIcon class="mx-auto" />
@@ -187,15 +184,16 @@ watch(assetUSD, (_assetUSD) => {
         </DropdownMenu>
       </div>
       <Activities
+        v-if="asset"
         class="mt-8 self-stretch"
         :asset="asset"
         :exchangeRate="Number(exchangeRate)"
         :address="address"
         :coinCategory="CoinCategory.BRC20"
       />
+      <LoadingText text="Activities Loading..." v-else />
     </div>
   </div>
-  <LoadingText v-else :text="`${symbol} details Loading...`" />
 </template>
 
 <style scoped lang="css">

diff --git a/src/pages/wallet/Rune.vue b/src/pages/wallet/Rune.vue
@@ -6,6 +6,7 @@ import { computed, ref, watch } from 'vue'
 import { updateAsset } from '@/lib/balance'
 import { calcBalance } from '@/lib/formatters'
 import { useRoute, useRouter } from 'vue-router'
+import { Chain } from '@metalet/utxo-wallet-service'
 import AssetLogo from '@/components/AssetLogo.vue'
 import { useIconsStore } from '@/stores/IconsStore'
 import Activities from './components/Activities.vue'
@@ -19,18 +20,15 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
 
 const route = useRoute()
 const router = useRouter()
+const symbol = route.params.symbol as string
 const runeId = ref<string>(route.params.runeId as string)
 const address = computed(() => route.params.address as string)
 
 const { isLoading: isRuneDetailLoading, data: asset } = useRuneDetailQuery(address, runeId, {
   enabled: computed(() => !!address.value && !!runeId.value),
 })
 
-const tags = computed(() => {
-  if (asset.value) {
-    return getTags(asset.value)
-  }
-})
+const tags = getTags('Runes')
 
 const assetUSD = computed(() => {
   const usdRate = new Decimal(0)
@@ -61,14 +59,13 @@ const toSend = () => {
 </script>
 
 <template>
-  <LoadingText text="Rune Asset Loading..." v-if="isRuneDetailLoading" />
-  <div class="flex flex-col items-center space-y-6 w-full" v-else-if="asset">
+  <div class="flex flex-col items-center space-y-6 w-full">
     <div class="flex flex-col items-center">
-      <AssetLogo :logo="logo" :chain="asset.chain" :symbol="asset.symbol" type="network" class="w-15" />
+      <AssetLogo :logo="logo" :chain="Chain.BTC" :symbol="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>
+        <span v-if="asset?.balance">{{ calcBalance(asset.balance.total, asset.decimal, asset.symbol) }}</span>
+        <span v-else>-- {{ symbol }}</span>
         <span class="text-gray-primary ml-2" v-if="assetUSD !== undefined">
           ≈ ${{ assetUSD?.toNumber().toFixed(2) }}
         </span>
@@ -87,8 +84,8 @@ const toSend = () => {
     <div class="flex items-center justify-center gap-x-2">
       <button
         @click="toMint"
-        :disabled="!asset.mintable"
-        :class="['btn-blue-light', { 'opacity-50 cursor-not-allowed': !asset.mintable }]"
+        :disabled="!asset?.mintable || false"
+        :class="['btn-blue-light', { 'opacity-50 cursor-not-allowed': !asset?.mintable || false }]"
       >
         <PencilIcon class="w-3" />
         <span>Mint</span>
@@ -116,15 +113,16 @@ const toSend = () => {
         </DropdownMenu>
       </div>
       <Activities
+        v-if="asset"
         class="mt-8 self-stretch"
         :asset="asset"
         :exchangeRate="0"
         :address="address"
         :coinCategory="CoinCategory.Rune"
       />
+      <LoadingText text="Activities Loading..." v-else />
     </div>
   </div>
-  <LoadingText text="No Rune Asset Found." v-else />
 </template>
 
 <style scoped lang="css">

diff --git a/src/pages/wallet/SendBRC20.vue b/src/pages/wallet/SendBRC20.vue
@@ -41,11 +41,7 @@ const {
   data: asset,
 } = useBRC20AseetQuery(address, symbol, { enabled: tickerEnabled })
 
-const tags = computed(() => {
-  if (asset.value) {
-    return getTags(asset.value)
-  }
-})
+const tags = getTags('BRC-20')
 
 const recipient = ref('')
 const operationLock = ref(false)

diff --git a/src/pages/wallet/SendToken.vue b/src/pages/wallet/SendToken.vue
@@ -27,11 +27,7 @@ const logo = computed(() => getIcon(CoinCategory.MetaContract, route.params.gene
 
 const { currentMVCWallet } = useChainWalletsStore()
 
-const tags = computed(() => {
-  if (asset.value) {
-    return getTags(asset.value)
-  }
-})
+const tags = getTags('MetaContract')
 
 const queryClient = useQueryClient()
 

diff --git a/src/pages/wallet/Token.vue b/src/pages/wallet/Token.vue
@@ -2,12 +2,14 @@
 import Decimal from 'decimal.js'
 import { computed, ref } from 'vue'
 import { getTags } from '@/data/assets'
+import { LoadingText } from '@/components'
 import { useRoute, useRouter } from 'vue-router'
 import CopyIcon from '@/assets/icons-v3/copy.svg'
 import AssetLogo from '@/components/AssetLogo.vue'
 import { useIconsStore } from '@/stores/IconsStore'
 import { useMVCTokenQuery } from '@/queries/tokens'
 import Activities from './components/Activities.vue'
+import { Chain } from '@metalet/utxo-wallet-service'
 import ArrowUpIcon from '@/assets/icons-v3/arrow-up.svg'
 import { toast } from '@/components/ui/toast/use-toast'
 import { CheckBadgeIcon } from '@heroicons/vue/24/solid'
@@ -26,11 +28,7 @@ const enabled = computed(() => !!address && !!symbol && !!genesis)
 const { getIcon } = useIconsStore()
 const icon = computed(() => getIcon(CoinCategory.MetaContract, route.params.genesis as string) || '')
 
-const tags = computed(() => {
-  if (asset.value) {
-    return getTags(asset.value)
-  }
-})
+const tags = getTags('MetaContract')
 
 const { data: asset } = useMVCTokenQuery(ref(address), ref(genesis), { enabled })
 
@@ -79,13 +77,13 @@ const copyGenesis = () => {
 </script>
 
 <template>
-  <div class="flex flex-col items-center space-y-6 w-full" v-if="asset">
+  <div class="flex flex-col items-center space-y-6 w-full">
     <div class="flex flex-col items-center">
-      <AssetLogo :logo="icon" :chain="asset.chain" :symbol="asset.symbol" type="network" class="w-15" />
+      <AssetLogo :logo="icon" :chain="Chain.MVC" :symbol="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>
+        <span v-if="asset?.balance">{{ calcBalance(asset.balance.total, asset.decimal, asset.symbol) }}</span>
+        <span v-else>-- {{ symbol }}</span>
         <span v-if="assetUSD !== undefined" class="text-gray-primary ml-2">
           ≈ ${{ assetUSD?.toNumber().toFixed(2) }}
         </span>
@@ -112,11 +110,11 @@ const copyGenesis = () => {
       </button>
     </div>
 
-    <div class="mt-8 self-stretch">
+    <div class="mt-8 self-stretch" v-if="asset?.genesis">
       <div class="text-xs text-gray-500">Token Contract ID</div>
       <div class="flex items-center hover:text-blue-primary">
         <CheckBadgeIcon class="mr-1 h-5 w-5 text-blue-500" />
-        <div class="text-base">{{ prettifyTokenGenesis(asset.genesis!) }}</div>
+        <div class="text-base">{{ prettifyTokenGenesis(asset.genesis) }}</div>
         <CopyIcon class="ml-2 cursor-pointer w-[22px]" @click.stop="copyGenesis" />
       </div>
     </div>
@@ -137,16 +135,18 @@ const copyGenesis = () => {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
+
       <Activities
+        v-if="asset"
         class="mt-8 self-stretch"
         :asset="asset"
         :exchangeRate="Number(exchangeRate)"
         :address="address"
         :coinCategory="CoinCategory.MetaContract"
       />
+      <LoadingText v-else text="Activities Loading..." />
     </div>
   </div>
-  <Loading v-else text="Asset Loading..." />
 </template>
 
 <style scoped lang="css">

diff --git a/src/pages/wallet/components/Runes/RuneList.vue b/src/pages/wallet/components/Runes/RuneList.vue
@@ -23,8 +23,8 @@ const runes = computed(() => (data.value ? data.value.pages.flatMap((page) => pa
 
 function toRune(asset: RuneAsset, address: string) {
   router.push({
-    name: 'rune',
-    params: { runeId: asset.runeId, address, name: asset.tokenName },
+    name: 'rune-detail',
+    params: { runeId: asset.runeId, address, name: asset.tokenName, symbol: asset.symbol },
   })
 }
 </script>

diff --git a/src/router.ts b/src/router.ts
@@ -289,9 +289,9 @@ const routes = [
         },
       },
       {
-        path: '/wallet/rune/:name/:runeId/:address',
+        path: '/wallet/rune/:name/:symbol/:runeId/:address',
         component: () => import('./pages/wallet/Rune.vue'),
-        name: 'rune',
+        name: 'rune-detail',
         props: true,
         meta: {
           secondaryHeader: true,