chore: Update UI

src/components/AssetLogo.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import FlexBox from './FlexBox.vue'
 import { type Chain } from '@/lib/types'
+import { UseImage } from '@vueuse/components'
 import IncomeLogo from '@/assets/icons-v3/income.svg'
 import ExpenseLogo from '@/assets/icons-v3/expense.svg'
 import BTCNetworkLogo from '@/assets/icons-v3/network_btc.svg'
@@ -17,10 +18,13 @@ const { logo, chain, symbol } = defineProps<{
 
 <template>
   <div class="relative text-3xl">
-    <img v-if="logo" :src="logo" :alt="symbol" class="w-full aspect-square" />
-    <FlexBox ai="center" jc="center" v-else class="rounded-full aspect-square text-white bg-blue-primary">
-      {{ symbol[0].toLocaleUpperCase() }}
-    </FlexBox>
+    <UseImage :src="logo!" class="w-full aspect-square">
+      <template #error>
+        <div class="aspect-square flex items-center justify-center rounded-full text-white bg-blue-primary">
+          {{ symbol[0].toLocaleUpperCase() }}
+        </div>
+      </template>
+    </UseImage>
 
     <template v-if="type === 'network'">
       <BTCNetworkLogo v-if="chain === 'btc'" class="absolute bottom-0 right-0 w-6 h-6" />

src/components/ResetModal.vue

@@ -76,14 +76,17 @@ const disconnect = async () => {
             />
           </div>
 
-          <div class="grid grid-cols-2 gap-x-4">
-            <button class="reset-button border-gray-700 text-gray-700" @click="$emit('update:show', false)">
+          <div class="flex items-center justify-center gap-2">
+            <button
+              class="w-30 h-12 bg-blue-light text-blue-primary rounded-3xl text-ss"
+              @click="$emit('update:show', false)"
+            >
               Cancel
             </button>
             <button
               @click="disconnect"
               :disabled="!checkedAll"
-              class="reset-button border-red-600 bg-red-600 text-red-50"
+              class="w-30 h-12 bg-red-600 text-white rounded-3xl text-ss"
               :class="[checkedAll ? 'cursor-pointer' : 'cursor-not-allowed opacity-50 saturate-50']"
             >
               Reset

src/pages/wallet/Asset.vue

@@ -122,8 +122,6 @@ const toSend = () => {
 }
 
 const setAddressType = async (addressType: AddressType, _address: string) => {
-  console.log(addressType)
-
   const chain = asset.value!.chain as Chain
   await setV3AddressTypeStorage(chain, addressType)
   await updataWallet(chain)
@@ -190,18 +188,16 @@ const toReceive = () => {
       <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-if="balance">{{ calcBalance(balance.total, asset.decimal, asset.symbol) }}</span>
+        <span v-if="balance">{{ calcBalance(balance.total, asset.decimal, asset.symbol) }}</span>
         <span v-else>-- {{ asset.symbol }}</span>
+        <span class="text-gray-primary ml-2">≈ ${{ assetUSD?.toNumber().toFixed(2) }}</span>
       </div>
 
-      <div class="mt-0.5 text-sm text-gray-primary">$ {{ assetUSD?.toNumber().toFixed(2) }}</div>
-
       <div
         :key="tag.name"
         v-for="tag in tags"
         :style="`background-color:${tag.bg};color:${tag.color};`"
-        :class="['px-1.5', 'py-0.5', 'rounded', 'text-xs', 'inline-block', 'scale-75']"
+        :class="['px-1', 'py-0.5', 'rounded', 'text-xs', 'inline-block', 'mt-2']"
       >
         {{ tag.name }}
       </div>

src/pages/wallet/BRC20.vue

@@ -146,7 +146,6 @@ watch(assetUSD, (_assetUSD) => {
 
       <div class="mt-3 text-2xl">
         <span v-if="asset.balance">{{ calcBalance(asset.balance.total, asset.decimal, asset.symbol) }}</span>
-        <span v-else-if="balance">{{ calcBalance(balance.total, asset.decimal, asset.symbol) }}</span>
         <span v-else>-- {{ asset.symbol }}</span>
         <span class="text-gray-primary ml-2">≈ ${{ assetUSD?.toNumber().toFixed(2) }}</span>
       </div>

src/pages/wallet/Backup.vue

@@ -57,7 +57,7 @@ const next = async () => {
 </script>
 
 <template>
-  <div class="flex h-full flex-col">
+  <div class="flex min-h-full flex-col">
     <!-- TODO: put into secondary-header -->
     <div class="grid grid-cols-5 items-center h-15">
       <div class="col-span-1 flex items-center">
@@ -119,7 +119,7 @@ const next = async () => {
     </div>
 
     <!-- buttons -->
-    <div class="flex flex-col items-center justify-center mb-20 relative">
+    <div class="flex flex-col items-center justify-center py-10 relative">
       <button
         @click="next"
         :disabled="!password"

src/pages/wallet/Token.vue

@@ -82,15 +82,14 @@ const copyGenesis = () => {
       <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 class="text-gray-primary ml-2">≈ ${{ assetUSD?.toNumber().toFixed(2) }}</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"
+        v-for="tag in tags"
         :style="`background-color:${tag.bg};color:${tag.color};`"
-        :class="['px-1.5', 'py-0.5', 'rounded', 'text-xs', 'inline-block', 'scale-75']"
+        :class="['px-1', 'py-0.5', 'rounded', 'text-xs', 'inline-block', 'mt-2']"
       >
         {{ tag.name }}
       </div>

src/pages/wallet/components/AssetItem.vue

@@ -75,7 +75,7 @@ watch(
 
 <template>
   <div class="group relative transition hover:z-10">
-    <div class="flex gap-2 cursor-pointer items-center justify-between rounded-md bg-gray-100 px-4 py-4">
+    <div class="flex gap-2 cursor-pointer items-center justify-between rounded-md py-3">
       <!-- left part -->
       <div class="flex flex-shrink-0 items-center gap-x-3">
         <UseImage :src="asset.logo" v-if="asset.logo && asset.codeHash" class="h-10 w-10 rounded-md">