chore: update UI

src/components/AssetLogo.vue

@@ -6,19 +6,19 @@ import ExpenseLogo from '@/assets/icons-v3/expense.svg'
 import BTCNetworkLogo from '@/assets/icons-v3/network_btc.svg'
 import MVCNetworkLogo from '@/assets/icons-v3/network_mvc.svg'
 
-const {
-  logo,
-  chain,
-  symbol,
-  logoSize = 'size-6',
-} = defineProps<{
-  logo?: string
-  chain?: Chain
-  symbol?: string
-  type?: 'network' | 'activity'
-  flow?: 'Send' | 'Receive' | 'Transfer' | string
-  logoSize?: string
-}>()
+withDefaults(
+  defineProps<{
+    logo?: string
+    chain?: Chain
+    symbol?: string
+    logoSize?: string
+    type?: 'network' | 'activity'
+    flow?: 'Send' | 'Receive' | 'Transfer' | string
+  }>(),
+  {
+    logoSize: 'size-6',
+  }
+)
 </script>
 
 <template>

src/components/Copy.vue

@@ -3,11 +3,16 @@ import { twMerge } from 'tailwind-merge'
 import CopyIcon from '@/assets/icons-v3/copy.svg'
 import { ClipboardStore } from '@/stores/ClipboardStore'
 
-const { text, title } = defineProps<{
-  text: string
-  title?: string
-  showContent?: boolean
-}>()
+withDefaults(
+  defineProps<{
+    text: string
+    title?: string
+    showContent?: boolean
+  }>(),
+  {
+    showContent: true,
+  }
+)
 </script>
 
 <template>

src/lib/actions/transfer.ts

@@ -8,7 +8,7 @@ import { API_NET, API_TARGET, FtManager, Wallet, mvc } from 'meta-contract'
 export type Receiver = {
   address: string
   amount: string
-  decimal:string
+  decimal?: string
 }
 export type TransferTask = {
   genesis?: string

src/pages/authorize/components/TransferRow.vue

@@ -3,25 +3,20 @@ import type { TransferTask, Receiver } from '@/lib/actions/transfer'
 import { shortestAddress } from '@/lib/formatters'
 import Decimal from 'decimal.js'
 
-const props = defineProps<{
+defineProps<{
   task: TransferTask
   receiver: Receiver
 }>()
 
-function prettyAmount(task: TransferTask, receiver: Receiver) {
-  // 如果没有genesis，说明是space，需要除以10^8
-  if (!task.genesis) {
-    return Number(receiver.amount) / 1e8 + ' SPACE'
-  }
-
-  return new Decimal(receiver.amount).div(10 ** Number(receiver.decimal)).toFixed()
+function prettyAmount(receiver: Receiver) {
+  return new Decimal(receiver.amount).div(10 ** Number(receiver?.decimal || 8)).toFixed(Number(receiver?.decimal || 8))
 }
 </script>
 
 <template>
   <tr>
     <td class="td-cell">{{ task.genesis ? 'Token' : 'SPACE' }}</td>
-    <td class="td-cell">{{ prettyAmount(task, receiver) }}</td>
+    <td class="td-cell">{{ prettyAmount(receiver) }}</td>
     <td class="td-cell" :title="receiver.address">{{ shortestAddress(receiver.address) }}</td>
   </tr>
 </template>

src/pages/wallet/AccountHeader.vue

@@ -51,10 +51,10 @@ getServiceNetwork().then((_serviceNetwork) => {
 })
 
 const { data: btcMetaidInfo } = useMetaidInfoQuery(btcAddress, {
-  enabled: computed(() => !!btcAddress),
+  enabled: computed(() => !!btcAddress.value),
 })
 const { data: mvcMetaidInfo } = useMetaidInfoQuery(mvcAddress, {
-  enabled: computed(() => !!mvcAddress && btcAddress.value !== mvcAddress.value),
+  enabled: computed(() => !!mvcAddress.value && btcAddress.value !== mvcAddress.value),
 })
 
 getNetwork().then((_network) => (network.value = _network))

src/pages/wallet/Bridge/components/BTCBridge.vue

@@ -23,7 +23,7 @@ import { calcBalance } from '@/lib/formatters'
 import { assetReqReturnType } from '@/queries/types/bridge'
 import { Protocol } from '@/lib/types/protocol'
 import { useRouter } from 'vue-router'
-import BridgeHistory from './bridge-history.vue'
+import BridgeHistory from './BridgeHistory.vue'
 
 const router = useRouter()
 const flippedControl = ref(false)

src/pages/wallet/Bridge/components/bridge-history.vue → src/pages/wallet/Bridge/components/BridgeHistory.vue

@@ -10,15 +10,20 @@
       </Button>
     </DialogTrigger>
 
-    <DialogContent class="w-md p-4 bg-white">
+    <DialogContent class="p-1 xs:p-4 bg-white rounded-xl">
       <DialogHeader>
         <DialogTitle class="text-xl">History</DialogTitle>
         <DialogClose class="right-0 top-0" />
       </DialogHeader>
 
       <Tabs v-model:value="activeKey" :default-value="items[0].key">
-        <TabsList>
-          <TabsTrigger v-for="item in items" :key="item.key" :value="item.key">
+        <TabsList class="gap-x-4">
+          <TabsTrigger
+            v-for="item in items"
+            :key="item.key"
+            :value="item.key"
+            class="p-0 data-[state=active]:shadow-none data-[state=active]:text-blue-primary data-[state=active]:underline data-[state=active]:underline-offset-4"
+          >
             {{ item.label }}
           </TabsTrigger>
         </TabsList>
@@ -32,11 +37,11 @@
 
 <script setup>
 import { ref, computed, watch } from 'vue'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogClose, DialogTrigger } from '@/components/ui/dialog'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import BridgeHistoryPanel from './bridge-history-panel.vue'
 import { Button } from '@/components/ui/button'
 import { FileClockIcon } from 'lucide-vue-next'
+import BridgeHistoryPanel from './BridgeHistoryPanel.vue'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogClose, DialogTrigger } from '@/components/ui/dialog'
 
 const props = defineProps({
   protocolType: {

src/pages/wallet/Bridge/components/bridge-history-panel.vue → src/pages/wallet/Bridge/components/BridgeHistoryPanel.vue

@@ -28,7 +28,7 @@
       <div class="border-b border-[#EBEBEB]/5 my-2" />
       <div class="flex items-center justify-between">
         <div class="left">
-          <span class="info">{{ item.amount }} {{ item.symbol }}</span>
+          <span class="info">{{ calcBalance(item.amount, item.decimals, item.symbol) }}</span>
         </div>
         <div class="right">{{ item.timestamp }}</div>
       </div>
@@ -51,6 +51,7 @@ import { ArrowRight } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
 import { Chain } from '@metalet/utxo-wallet-service'
 import { useChainWalletsStore } from '@/stores/ChainWalletsStore'
+import { calcBalance } from '@/lib/formatters'
 
 const props = defineProps({
   type: {

src/pages/wallet/Bridge/components/MRC20Bridge.vue

@@ -24,7 +24,7 @@ import { Protocol } from '@/lib/types/protocol'
 import { SwapType } from '@/queries/runes'
 import { useRouter } from 'vue-router'
 import { toast } from '@/components/ui/toast'
-import BridgeHistory from './bridge-history.vue'
+import BridgeHistory from './BridgeHistory.vue'
 
 const router = useRouter()
 const flippedControl = ref(false)

src/pages/wallet/MRC20.vue

@@ -126,15 +126,19 @@ const toSend = () => {
       <div class="flex items-center justify-between w-full">
         <div class="text-xs text-gray-500">Deployer</div>
         <div class="flex items-center gap-x-2">
-          <AssetLogo :logo="asset?.deployAvatar" :symbol="asset?.deployName" class="size-5 shrink-0 rounded-full text-xs" />
+          <AssetLogo
+            :logo="asset?.deployAvatar"
+            :symbol="asset?.deployName"
+            class="size-5 shrink-0 rounded-full text-xs"
+          />
           <span>{{ asset?.deployName || '--' }}</span>
         </div>
       </div>
       <div class="flex items-center justify-between w-full">
         <div class="text-xs text-gray-500">Token ID</div>
         <div class="flex items-center hover:text-blue-primary gap-x-2">
           <div class="text-base">{{ truncateStr(mrc20Id, 6) }}</div>
-          <CopyIcon :text="mrc20Id" :title="'Token ID Copied'" />
+          <CopyIcon :text="mrc20Id" title="Token ID Copied" />
         </div>
       </div>
     </div>

src/pages/wallet/SendToken.vue

@@ -15,6 +15,7 @@ import TransactionResultModal from './components/TransactionResultModal.vue'
 import { Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader } from '@/components/ui/drawer'
 import { useIconsStore } from '@/stores/IconsStore'
 import { CoinCategory } from '@/queries/exchange-rates'
+import { prettifyAddress } from '@/lib/formatters'
 
 const route = useRoute()
 const router = useRouter()
@@ -225,11 +226,11 @@ async function send() {
         <div class="p-4 space-y-4 text-ss">
           <FlexBox ai="center" jc="between">
             <div class="text-gray-primary">From</div>
-            <div class="break-all w-[228px]">{{ address }}</div>
+            <div class="break-all" :title="address">{{ prettifyAddress(address) }}</div>
           </FlexBox>
           <FlexBox ai="center" jc="between">
             <div class="text-gray-primary">To</div>
-            <div class="break-all w-[228px]">{{ recipient }}</div>
+            <div class="break-all" :title="recipient">{{ prettifyAddress(recipient) }}</div>
           </FlexBox>
           <FlexBox ai="center" jc="between">
             <div class="text-gray-primary">Amount</div>

src/pages/wallet/components/ActivityItem.vue

@@ -1,17 +1,17 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import Decimal from 'decimal.js'
 import { toTx } from '@/lib/helpers'
 import { FlexBox } from '@/components'
 import { type Chain } from '@/lib/types'
-import { FTAsset, type Asset } from '@/data/assets'
 import { getBrowserHost } from '@/lib/host'
 import AssetLogo from '@/components/AssetLogo.vue'
+import { useIconsStore } from '@/stores/IconsStore'
+import { FTAsset, type Asset } from '@/data/assets'
 import type { Activity } from '@/queries/activities'
 import LoadingIcon from '@/components/LoadingIcon.vue'
-import { prettifyTimestamp, prettifyTxId, truncateStr } from '@/lib/formatters'
-import { useIconsStore } from '@/stores/IconsStore'
 import { CoinCategory } from '@/queries/exchange-rates'
-import Decimal from 'decimal.js'
+import { prettifyTimestamp, prettifyTxId } from '@/lib/formatters'
 
 const props = defineProps<{
   asset: Asset
@@ -94,6 +94,7 @@ const toActivityTx = async () => {
         type="activity"
         class="w-[38px] text-lg"
         :flow="flow"
+        logo-size="size-4"
       />
       <div>
         <div :class="['flex items-center gap-x-2 text-sm', { 'text-orange-primary': !isConfirmed }]">

tailwind.config.cjs

@@ -12,6 +12,10 @@ module.exports = {
     },
 
     extend: {
+      spacing: {
+        4.5: "1.125rem",
+        7.5: "1.875rem",
+      },
       colors: {
         'black-primary': '#141416',
         'black-secondary': '#303133',