From e3ddb539913f19a2db29f88acd13b1c2cabfbf81 Mon Sep 17 00:00:00 2001
From: AricRedemption <aricredemption@gmail.com>
Date: Fri, 26 Apr 2024 16:03:18 +0800
Subject: [PATCH] fix: ft token send and inscribe api

---
 src/background.ts                             |   6 +-
 src/components/AssetLogo.vue                  |   2 +-
 src/lib/actions/btc/sign-message.ts           |   2 -
 src/lib/crypto.ts                             |   1 -
 src/lib/formatters.ts                         |   4 +-
 src/lib/utils.ts                              |   1 +
 src/pages/wallet/BRC20.vue                    |   2 +-
 src/pages/wallet/Send.vue                     |   1 -
 src/pages/wallet/SendToken.vue                | 226 +++++++++++-------
 src/pages/wallet/Transfer.vue                 |  11 +-
 src/pages/wallet/components/ActivityItem.vue  |  37 +--
 .../components/TransactionResultModal.vue     |  43 ++--
 src/router.ts                                 |   2 +-
 13 files changed, 183 insertions(+), 155 deletions(-)

diff --git a/src/background.ts b/src/background.ts
index 7af5f6f3..9f7e1a3d 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -4,9 +4,10 @@ import { network } from '@/lib/network'
 import actions from './data/query-actions'
 import browser from 'webextension-polyfill'
 import exActions from './data/extension-actions'
-import { getCurrentWalletId, hasWallets } from './lib/wallet'
 import { getAddress, getCurrentAccountId } from './lib/account'
 import { NOTIFICATION_HEIGHT, NOTIFICATION_WIDTH } from './data/config'
+import { getCurrentWalletId, hasWallets, getCurrentWallet } from './lib/wallet'
+import { Chain } from '@metalet/utxo-wallet-service'
 
 // const browser = window.browser as typeof chromex
 browser.runtime.onMessage.addListener(async (msg, sender) => {
@@ -80,7 +81,8 @@ browser.runtime.onMessage.addListener(async (msg, sender) => {
       if (actionName === 'InscribeTransfer') {
         const rawUrl = 'popup.html#/wallet/inscribe'
         let popupUrl = browser.runtime.getURL(rawUrl)
-        const address = await getAddress('btc')
+        const wallet = await getCurrentWallet(Chain.BTC)
+        const address = wallet.getAddress()
         popupUrl += `/${msg.params}/${address}`
         let top = 0
         let left = 0
diff --git a/src/components/AssetLogo.vue b/src/components/AssetLogo.vue
index d0e5e4d8..026b9406 100644
--- a/src/components/AssetLogo.vue
+++ b/src/components/AssetLogo.vue
@@ -12,7 +12,7 @@ const { logo, chain, symbol } = defineProps<{
   chain?: Chain
   symbol: string
   type: 'network' | 'activity'
-  flow?: 'Send' | 'Receive'
+  flow?: 'Send' | 'Receive' | 'Transfer'
 }>()
 </script>
 
diff --git a/src/lib/actions/btc/sign-message.ts b/src/lib/actions/btc/sign-message.ts
index f87be1b7..3aaca888 100644
--- a/src/lib/actions/btc/sign-message.ts
+++ b/src/lib/actions/btc/sign-message.ts
@@ -1,7 +1,5 @@
-import { getPrivateKey } from '@/lib/account'
 import { getCurrentWallet } from '@/lib/wallet'
 import { Chain } from '@metalet/utxo-wallet-service'
-import { Message, PrivateKey } from 'bitcore-lib'
 
 export async function process(message: string): Promise<string> {
   const wallet = await getCurrentWallet(Chain.BTC)
diff --git a/src/lib/crypto.ts b/src/lib/crypto.ts
index e86d3fd7..8daf7f43 100644
--- a/src/lib/crypto.ts
+++ b/src/lib/crypto.ts
@@ -345,7 +345,6 @@ export const payTransactions = async (
     }
 
     const addressObj = new mvc.Address(address, network)
-    console.log({ addressObj })
     // find out the total amount of the transaction (total output minus total input)
     const totalOutput = tx.outputs.reduce((acc, output) => acc + output.satoshis, 0)
     const totalInput = tx.inputs.reduce((acc, input) => acc + input.output!.satoshis, 0)
diff --git a/src/lib/formatters.ts b/src/lib/formatters.ts
index f3d8c9db..86569fad 100644
--- a/src/lib/formatters.ts
+++ b/src/lib/formatters.ts
@@ -15,8 +15,8 @@ export const prettifyTxId = (txId: string, useDigits = 6) => {
   return `${txId.slice(0, useDigits)}...${txId.slice(-useDigits)}`
 }
 
-export const prettifyAddress = (txId: string, useDigits = 6) => {
-  return `${txId.slice(0, useDigits)}...${txId.slice(-useDigits)}`
+export const prettifyAddress = (address: string, useDigits = 6) => {
+  return `${address.slice(0, useDigits)}...${address.slice(-useDigits)}`
 }
 
 export const prettifyBalance = (balance: number, symbol: string = 'SPACE'): string => {
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index b676eadd..fff083f3 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -26,6 +26,7 @@ export const goToTab = (path: string, created = false) => {
     router.push(path)
   } else {
     window.open(`${window.location.href.split('#')[0]}#${path}`, '_blank')
+    window.close()
   }
 }
 
diff --git a/src/pages/wallet/BRC20.vue b/src/pages/wallet/BRC20.vue
index feb536b2..d35a018a 100644
--- a/src/pages/wallet/BRC20.vue
+++ b/src/pages/wallet/BRC20.vue
@@ -161,7 +161,7 @@ watch(assetUSD, (_assetUSD) => {
     </div>
 
     <div class="flex items-center justify-center gap-x-2">
-      <RouterLink to="javascript:void(0);" class="btn-blue-light">
+      <RouterLink to="javascript:void(0);" class="btn-blue-light" v-if="false">
         <img :src="MintPNG" alt="Mint" />
         <span>Mint</span>
       </RouterLink>
diff --git a/src/pages/wallet/Send.vue b/src/pages/wallet/Send.vue
index 745c02a5..4ba84dfa 100644
--- a/src/pages/wallet/Send.vue
+++ b/src/pages/wallet/Send.vue
@@ -235,7 +235,6 @@ async function send() {
     <div class="space-y-4 w-full">
       <FlexBox d="col" ai="center" :gap="3">
         <AssetLogo :logo="asset?.logo" :symbol="symbol" :chain="asset.chain" type="network" class="w-15" />
-
         <div class="text-base">{{ symbol }}</div>
       </FlexBox>
 
diff --git a/src/pages/wallet/SendToken.vue b/src/pages/wallet/SendToken.vue
index 4a93486a..d05bc93e 100644
--- a/src/pages/wallet/SendToken.vue
+++ b/src/pages/wallet/SendToken.vue
@@ -1,32 +1,44 @@
 <script lang="ts" setup>
 import Decimal from 'decimal.js'
 import { ref, computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { getTags } from '@/data/assets'
+import { getNetwork } from '@/lib/network'
+import { useRoute, useRouter } from 'vue-router'
 import { API_NET, FtManager } from 'meta-contract'
-import { CircleStackIcon } from '@heroicons/vue/24/solid'
+import { useMVCTokenQuery } from '@/queries/tokens'
 import { useQueryClient } from '@tanstack/vue-query'
-
-import { getNetwork } from '@/lib/network'
-import { prettifyTokenBalance } from '@/lib/formatters'
-import { getAddress, getCurrentAccount, getPrivateKey } from '@/lib/account'
+import LoadingIcon from '@/components/LoadingIcon.vue'
 import type { TransactionResult } from '@/global-types'
-import { useMVCTokenQuery } from '@/queries/tokens'
-
-import Modal from '@/components/Modal.vue'
+import { useChainWalletsStore } from '@/stores/ChainWalletsStore'
+import { AssetLogo, Divider, FlexBox, Button } from '@/components'
 import TransactionResultModal from './components/TransactionResultModal.vue'
+import { Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader } from '@/components/ui/drawer'
 
 const route = useRoute()
+const router = useRouter()
 const symbol = ref(route.params.symbol as string)
 const genesis = ref(route.params.genesis as string)
 const address = ref(route.params.address as string)
 
-const queryClient = useQueryClient()
+const { currentMVCWallet } = useChainWalletsStore()
 
-const error = ref<Error>()
+const tags = computed(() => {
+  if (asset.value) {
+    return getTags(asset.value)
+  }
+})
+
+const queryClient = useQueryClient()
 
 // 用户拥有的代币资产
 const { isLoading, data: asset } = useMVCTokenQuery(address, genesis, {
-  enabled: computed(() => !!address.value && !genesis.value),
+  enabled: computed(() => !!address.value && !!genesis.value),
+})
+
+const balance = computed(() => {
+  if (asset.value) {
+    return new Decimal(asset.value.balance!.total).div(10 ** asset.value.decimal).toNumber()
+  }
 })
 
 // form
@@ -51,7 +63,7 @@ async function send() {
 
   operationLock.value = true
 
-  const privateKey = await getPrivateKey('mvc')
+  const privateKey = currentMVCWallet.value!.getPrivateKey()
 
   const network = await getNetwork()
 
@@ -92,7 +104,6 @@ async function send() {
     })
     .catch((err) => {
       isOpenConfirmModal.value = false
-      error.value = err.message
       if (err instanceof Error) {
         if (err.message === 'Too many token-utxos, should merge them to continue.') {
           transactionResult.value = {
@@ -101,11 +112,18 @@ async function send() {
             message: err.message,
             confirmText: 'Merge',
           }
+        } else {
+          transactionResult.value = {
+            router: 'ft-merge',
+            status: 'failed',
+            message: err.message,
+            confirmText: 'Merge',
+          }
         }
       } else {
         transactionResult.value = {
           status: 'failed',
-          message: err.message,
+          message: err?.message || err,
         }
       }
 
@@ -113,24 +131,15 @@ async function send() {
     })
   if (transferRes && transferRes.txid) {
     isOpenConfirmModal.value = false
-    transactionResult.value = {
-      chain: 'mvc',
-      status: 'success',
-      txId: transferRes.txid,
-      fromAddress: address.value,
-      toAdddress: recipient.value,
-      amount: amountInSats.value,
-      token: {
-        symbol: asset.value!.symbol,
-        decimal: asset.value!.decimal,
+    router.replace({
+      name: 'SendSuccess',
+      params: {
+        txId: transferRes.txid,
+        chain: 'mvc',
+        symbol: symbol.value,
+        amount: amount.value,
+        address: recipient.value,
       },
-    }
-
-    isOpenResultModal.value = true
-
-    // 刷新query
-    queryClient.invalidateQueries({
-      queryKey: ['tokens', { address: address.value }],
     })
   }
 
@@ -139,77 +148,108 @@ async function send() {
 </script>
 
 <template>
-  <div class="mt-8 flex flex-col items-center gap-y-8" v-if="asset && genesis">
+  <div class="space-y-6 h-full relative" v-if="asset && genesis">
     <TransactionResultModal v-model:is-open-result="isOpenResultModal" :result="transactionResult" />
-    <img :src="asset?.logo" alt="" class="h-16 w-16 rounded-xl" v-if="asset?.logo" />
-    <CircleStackIcon class="h-10 w-10 text-gray-300 transition-all group-hover:text-blue-500" v-else />
 
-    <div class="space-y-3 self-stretch">
-      <!-- address input -->
-      <input class="main-input w-full !rounded-xl !p-4 text-sm" placeholder="Recipient's address" v-model="recipient" />
+    <div class="space-y-4">
+      <FlexBox d="col" ai="center">
+        <AssetLogo :logo="asset?.logo" :symbol="symbol" :chain="asset.chain" type="network" class="w-15" />
+
+        <div class="mt-3 text-base">{{ symbol }}</div>
 
-      <!-- amount input -->
-      <div class="relative">
-        <input class="main-input w-full !rounded-xl !py-4 !pl-4 !pr-12 text-sm" placeholder="Amount" v-model="amount" />
-        <!-- unit -->
         <div
-          class="absolute right-0 top-0 flex h-full items-center justify-center text-right text-xs text-gray-500"
-          v-if="asset?.symbol"
+          :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']"
         >
-          <div class="border-l border-solid border-gray-500 px-4 py-1">{{ asset.symbol }}</div>
+          {{ tag.name }}
         </div>
-      </div>
-
-      <!-- balance -->
-      <div class="flex items-center gap-x-2 text-xs text-gray-500">
-        <div>Your Balance:</div>
-        <div v-if="isLoading">--</div>
-        <div v-else-if="asset">
-          {{ prettifyTokenBalance(asset.balance?.total || 0, asset.decimal) + ' ' + asset.symbol }}
-        </div>
-      </div>
+      </FlexBox>
+
+      <Divider />
     </div>
 
-    <!-- send -->
-    <button class="main-btn-bg w-full rounded-lg py-3 text-sm text-sky-100" @click="popConfirm">Send</button>
-
-    <Modal v-model:is-open="isOpenConfirmModal" title="Confirm">
-      <template #title>
-        <div class="text-black-primary text-center">Confirm Send</div>
-      </template>
-
-      <template #body>
-        <div class="mt-4 space-y-4">
-          <div class="space-y-1">
-            <div class="label">Amount</div>
-            <div class="value">{{ amount }} {{ asset?.symbol }}</div>
-          </div>
-          <div class="space-y-1">
-            <div class="label">Recipient Address</div>
-            <div class="value break-all text-sm">{{ recipient }}</div>
-          </div>
-          <!-- <div class="space-y-1">
-            <div class="label">Network Fee</div>
-            <div class="value">100 SPACE</div>
-          </div> -->
-        </div>
-      </template>
+    <div class="space-y-2">
+      <div>Receiver</div>
+      <textarea
+        v-model="recipient"
+        class="w-full rounded-lg p-3 text-xs border border-gray-soft focus:border-blue-primary focus:outline-none break-all"
+      />
+    </div>
+    <div class="space-y-2">
+      <FlexBox ai="center" jc="between">
+        <span>Amount</span>
+        <span class="text-gray-primary text-xs">
+          <span>Balance:</span>
+          <span v-if="balance">{{ balance }} {{ symbol }}</span>
+          <span v-else>--</span>
+        </span>
+      </FlexBox>
+      <input
+        min="0"
+        type="number"
+        step="0.00001"
+        :max="asset.balance!.total"
+        v-model="amount"
+        class="mt-2 w-full rounded-lg p-3 text-xs border border-gray-soft focus:border-blue-primary focus:outline-none"
+      />
+    </div>
 
-      <template #control>
-        <div v-if="operationLock">
-          <div class="w-full py-3 text-center text-sm text-gray-500">Operating...</div>
-        </div>
-        <div class="grid grid-cols-2 gap-x-4" v-else>
-          <button
-            class="w-full rounded-lg border border-primary-blue bg-white py-3 text-sm text-gray-700"
-            @click="isOpenConfirmModal = false"
-          >
-            Cancel
-          </button>
-          <button class="main-btn-bg w-full rounded-lg py-3 text-sm text-sky-100" @click="send">Confirm</button>
+    <Button
+      type="primary"
+      @click="isOpenConfirmModal = true"
+      :disabled="!recipient"
+      class="absolute bottom-4 left-1/2 -translate-x-1/2 w-61.5 h-12"
+      :class="!recipient || operationLock ? 'opacity-50 cursor-not-allowed' : undefined"
+    >
+      <FlexBox ai="center" :gap="1" v-if="operationLock">
+        <LoadingIcon />
+        <span>Loading...</span>
+      </FlexBox>
+      <span v-else>Next</span>
+    </Button>
+
+    <Drawer v-model:open="isOpenConfirmModal">
+      <DrawerContent class="bg-white">
+        <DrawerHeader>
+          <FlexBox d="col" ai="center" :gap="4">
+            <AssetLogo :logo="asset?.logo" :symbol="symbol" :chain="asset.chain" type="network" class="w-15" />
+            <div class="text-base">{{ amount }} {{ symbol }}</div>
+          </FlexBox>
+        </DrawerHeader>
+        <Divider class="mt-2" />
+        <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>
+          </FlexBox>
+          <FlexBox ai="center" jc="between">
+            <div class="text-gray-primary">To</div>
+            <div class="break-all w-[228px]">{{ recipient }}</div>
+          </FlexBox>
+          <FlexBox ai="center" jc="between">
+            <div class="text-gray-primary">Amount</div>
+            <div class="break-all">{{ amount }} {{ symbol }}</div>
+          </FlexBox>
         </div>
-      </template>
-    </Modal>
+        <DrawerFooter>
+          <FlexBox ai="center" jc="center" :gap="2">
+            <DrawerClose>
+              <Button type="light" class="w-[119px] h-12">Cancel</Button>
+            </DrawerClose>
+            <Button
+              @click="send"
+              type="primary"
+              :class="['w-[119px] h-12', { 'opacity-50 cursor-not-allowed space-x-1': operationLock }]"
+            >
+              <LoadingIcon v-if="operationLock" />
+              <span>Confirm</span>
+            </Button>
+          </FlexBox>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
   </div>
   <div v-else class="text-center text-gray-primary w-full py-3 text-base">Token can not found.</div>
 </template>
diff --git a/src/pages/wallet/Transfer.vue b/src/pages/wallet/Transfer.vue
index dfc4746a..e25a3966 100644
--- a/src/pages/wallet/Transfer.vue
+++ b/src/pages/wallet/Transfer.vue
@@ -57,14 +57,13 @@ const toInscribe = () => {
     <div>
       <div class="text-sm">Inscribe Transfer</div>
       <div class="text-gray-primary text-xs">You have to inscribe a TRANSFER inscription first.</div>
-      <FlexBox
-        ai="center"
-        jc="center"
-        class="bg-gray-secondary text-sm rounded-md h-12 mt-3 cursor-pointer"
+      <div
         @click="toInscribe"
+        class="flex items-center justify-center gap-2 bg-gray-secondary text-sm rounded-md h-12 mt-3 cursor-pointer border border-blue-primary bg-[rgba(23, 26, 255, 0.05)]"
       >
-        Available {{ tickersData.tokenBalance.availableBalance }} {{ symbol }}
-      </FlexBox>
+        <span class="text-gray-primary">Available</span>
+        <span>{{ tickersData.tokenBalance.availableBalance }} {{ symbol }}</span>
+      </div>
     </div>
   </FlexBox>
 </template>
diff --git a/src/pages/wallet/components/ActivityItem.vue b/src/pages/wallet/components/ActivityItem.vue
index c9700e34..3978a912 100644
--- a/src/pages/wallet/components/ActivityItem.vue
+++ b/src/pages/wallet/components/ActivityItem.vue
@@ -17,7 +17,13 @@ const props = defineProps<{
 
 const flow = computed(() => {
   const { outcome, income } = props.activity
-  return outcome > income ? 'Send' : 'Receive'
+  if (outcome > income) {
+    return 'Send'
+  } else if (income > outcome) {
+    return 'Receive'
+  } else {
+    return 'Transfer'
+  }
 })
 
 const isConfirmed = computed(() => {
@@ -40,7 +46,7 @@ const difference = computed(() => {
     display = `+${(income - outcome) / 10 ** decimal} ${symbol}`
     displayClass = 'text-green-700'
   } else {
-    display = '-'
+    display = `0 ${symbol}`
     displayClass = 'text-gray-500'
   }
 
@@ -70,7 +76,7 @@ const toActivityTx = async () => {
         :flow="flow"
       />
       <div>
-        <div :class="['flex items-center gap-x-2 text-sm', !isConfirmed ? 'text-orange-primary' : undefined]">
+        <div :class="['flex items-center gap-x-2 text-sm', { 'text-orange-primary': !isConfirmed }]">
           <span>{{ flow }}</span>
           <LoadingIcon v-if="!isConfirmed" class="text-orange-primary w-4 h-4" />
         </div>
@@ -78,7 +84,7 @@ const toActivityTx = async () => {
       </div>
     </FlexBox>
     <FlexBox d="col" ai="end">
-      <div class="text-sm">{{ difference.display }}</div>
+      <div :class="['text-sm', difference.displayClass]">{{ difference.display }}</div>
       <div
         @click="toActivityTx"
         :title="activity.txid"
@@ -88,27 +94,4 @@ const toActivityTx = async () => {
       </div>
     </FlexBox>
   </FlexBox>
-  <!-- <div class="w-full py-3">
-
-    <div class="flex items-center justify-between">
-      <div class="flex items-center gap-x-2 text-green-500" v-if="isConfirmed">
-        <div class="h-2 w-2 rounded-full bg-green-500"></div>
-        <div>Confirmed</div>
-      </div>
-
-      <div class="flex items-center gap-x-2 text-red-500" v-else>
-        <div class="h-2 w-2 rounded-full bg-red-500"></div>
-        <div>Unconfirmed</div>
-      </div>
-      <div :class="['text-sm text-gray-500']">{{ prettifyTimestamp(activity.time) }}</div>
-    </div>
-
-    <div :class="[difference.displayClass, 'text-right  text-lg ']">{{ difference.display }}</div>
-
-    <div class="flex items-center justify-end gap-x-2">
-      <div class="cursor-pointer text-xs text-gray-400 hover:underline" @click="toActivityTx">
-        {{ prettifyTxId(activity.txid) }}
-      </div>
-    </div>
-  </div> -->
 </template>
diff --git a/src/pages/wallet/components/TransactionResultModal.vue b/src/pages/wallet/components/TransactionResultModal.vue
index 32633c44..02cc2e52 100644
--- a/src/pages/wallet/components/TransactionResultModal.vue
+++ b/src/pages/wallet/components/TransactionResultModal.vue
@@ -3,12 +3,12 @@ import { PropType } from 'vue'
 import { toTx } from '@/lib/helpers'
 import { useRouter } from 'vue-router'
 import Copy from '@/components/Copy.vue'
-import Modal from '@/components/Modal.vue'
 import { type Chain } from '@/lib/types'
+import Modal from '@/components/Modal.vue'
 import { getBrowserHost } from '@/lib/host'
-import { prettifyTokenBalance } from '@/lib/formatters'
 import SuccessIcon from '@/assets/icons/success.svg?url'
 import { ExclamationTriangleIcon } from '@heroicons/vue/24/solid'
+import { prettifyTokenBalance, prettifyAddress, prettifyTxId } from '@/lib/formatters'
 
 const router = useRouter()
 
@@ -120,25 +120,33 @@ const toResultTxs = async (txId: string) => {
 
         <div class="flex justify-between">
           <div class="label">From</div>
-          <div class="text-xs flex gap-2">
-            <div class="truncate w-48 cursor-pointer" :title="result.fromAddress">{{ result.fromAddress }}</div>
+          <div class="text-xs flex items-center gap-2">
+            <div class="hover:underline hover:text-blue-primary cursor-pointer" :title="result.fromAddress">
+              {{ prettifyAddress(result.fromAddress) }}
+            </div>
             <Copy :text="result.fromAddress" />
           </div>
         </div>
 
         <div class="flex justify-between">
           <div class="label">To</div>
-          <div class="text-xs flex gap-2">
-            <div class="truncate w-48 cursor-pointer" :title="result.toAdddress">{{ result.toAdddress }}</div>
+          <div class="text-xs flex items-center gap-2">
+            <div class="hover:underline hover:text-blue-primary cursor-pointer" :title="result.toAdddress">
+              {{ prettifyAddress(result.toAdddress) }}
+            </div>
             <Copy :text="result.toAdddress" />
           </div>
         </div>
 
         <div class="flex justify-between">
           <div class="label">TxID</div>
-          <div class="text-xs flex gap-2">
-            <div class="hover:underline truncate w-48 cursor-pointer" @click="toResultTx" :title="result.txId">
-              {{ result.txId }}
+          <div class="text-xs flex items-center gap-2">
+            <div
+              class="hover:underline hover:text-blue-primary cursor-pointer"
+              @click="toResultTx"
+              :title="result.txId"
+            >
+              {{ prettifyTxId(result.txId) }}
             </div>
             <Copy :text="result.txId" />
           </div>
@@ -159,23 +167,22 @@ const toResultTxs = async (txId: string) => {
     </template>
 
     <template #control>
-      <div class="flex items-center justify-center gap-4" v-if="result && result.status === 'failed' && result.router">
-        <button
-          @click="closeModal"
-          class="box-border border border-gray-primary w-[133px] rounded-lg py-2.5 text-sm text-black-primary"
-        >
+      <div class="flex items-center justify-center gap-2" v-if="result && result.status === 'failed' && result.router">
+        <button @click="closeModal" class="w-30 rounded-3xl py-4 text-ss text-blue-primary bg-blue-light">
           Cancel
         </button>
         <button
-          class="main-btn-bg rounded-lg py-3 text-sm w-[133px] text-sky-100 px-4"
+          class="bg-blue-primary rounded-3xl py-4 text-ss w-30 text-white px-4"
           @click="$router.push({ name: (result as FailedResult).router })"
         >
           {{ result?.confirmText || 'Confirm' }}
         </button>
       </div>
-      <button v-else class="main-btn-bg w-full rounded-lg py-3 text-sm text-sky-100 outline-none" @click="ok">
-        {{ result?.confirmText || 'Confirm' }}
-      </button>
+      <div v-else class="flex justify-center">
+        <button class="w-61.5 rounded-3xl bg-blue-primary py-3 text-sm text-white outline-none" @click="ok">
+          {{ result?.confirmText || 'Confirm' }}
+        </button>
+      </div>
     </template>
   </Modal>
 </template>
diff --git a/src/router.ts b/src/router.ts
index 63060bb6..ab62b036 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -177,7 +177,7 @@ const routes = [
         },
       },
       {
-        path: '/wallet/send-token/:symbol/:genesis',
+        path: '/wallet/send-token/:symbol/:address/:genesis',
         component: () => import('./pages/wallet/SendToken.vue'),
         name: 'send-token',
         meta: {