fix: Updated UI and resolved existing bugs.

.gitignore

@@ -23,7 +23,6 @@ public/content.js
 *.njsproj
 *.sln
 *.sw?
-*.lock
 
 # Sentry Config File
 .env.sentry-build-plugin

package.json

@@ -63,7 +63,7 @@
     "randombytes": "^2.1.0",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
-    "vaul-vue": "^0.1.2",
+    "vaul-vue": "0.1.0",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6"
   },

src/App.vue

@@ -41,7 +41,7 @@ const backRouter = computed(() => {
     </div>
 
     <main
-      class="ext-app flex h-full w-full flex-col xs:relative xs:aspect-[1/2] xs:h-3/4 xs:w-auto xs:min-w-[25rem] xs:rounded-lg xs:border xs:border-gray-100 xs:bg-white xs:shadow-lg"
+      class="ext-app flex h-full w-full flex-col xs:relative xs:aspect-[1/2] xs:h-3/4 xs:w-auto xs:min-w-[25rem] xs:rounded-lg xs:border xs:border-gray-100 xs:bg-white xs:shadow-lg overflow-hidden"
     >
       <!-- Header -->
       <SecondaryHeader v-if="route.meta.secondaryHeader" :backRouter="backRouter">

src/components/AssetLogo.vue

@@ -11,7 +11,7 @@ const { logo, chain, symbol } = defineProps<{
   chain?: Chain
   symbol: string
   type: 'network' | 'activity'
-  flow?: 'Send' | 'Receive' | 'Transfer'
+  flow?: 'Send' | 'Receive' | 'Transfer' | string
 }>()
 </script>
 

src/components/FeeRateSelector.vue

@@ -64,7 +64,7 @@ const selectCustom = () => {
     </FlexBox>
     <Drawer v-model:open="open">
       <DrawerContent class="bg-white">
-        <DrawerHeader class="pt-1.5 pb-3.5">
+        <DrawerHeader class="pt-1.5 pb-3.5 py-4">
           <DrawerTitle class="text-center text-sm relative">
             <span>Select Fee Rate</span>
             <DrawerClose>

src/components/ResetModal.vue

@@ -60,20 +60,20 @@ const close = () => {
             <div class="flex flex-col gap-2 text-ss">
               <div class="p-3.5 bg-gray-secondary rounded-lg flex items-center gap-x-3">
                 <Checkbox id="tips1" v-model:checked="checked1" />
-                <p>We will not store or help you retrieve your password.</p>
+                <p>We do not store or assist in recovering your password.</p>
               </div>
               <div class="p-3.5 bg-gray-secondary rounded-lg flex items-center gap-x-3">
                 <Checkbox id="tips1" v-model:checked="checked2" />
                 <p>
-                  If you forget your password, you can reset your wallet. It is also possible to re-import the wallet
-                  using a mnemonic phrase or private key.
+                  If you forget your password, you can reset the wallet. You can also re-import the wallet using the
+                  mnemonic phrase or private key.
                 </p>
               </div>
               <div class="p-3.5 bg-gray-secondary rounded-lg flex items-center gap-x-3">
                 <Checkbox id="tips1" v-model:checked="checked3" />
                 <p>
-                  Note that resetting the wallet without backup will permanently lose all assets. Before resetting, be
-                  sure to back up all wallets.
+                  Please note that resetting the wallet without backup will permanently lose all assets. Before
+                  resetting, make sure to backup all wallets.
                 </p>
               </div>
             </div>

src/components/SeedPhrase.vue

@@ -13,16 +13,11 @@ defineProps({
     type: Function,
     required: false,
   },
-  noCopied: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
 })
 </script>
 
 <template>
-  <div :class="['grid grid-cols-2 gap-2 pr-3 -mr-3 overflow-y-auto max-h-[304px]', { 'no-copy': noCopied }]">
+  <div class="grid grid-cols-2 gap-2 pr-3 -mr-3 overflow-y-auto max-h-[304px]">
     <div class="flex items-center h-11 border-gray-soft border rounded-lg" v-for="(_, index) in words" :key="index">
       <div class="flex items-center justify-center w-7.5 h-full text-gray-primary bg-gray-secondary rounded-l-lg">
         {{ index + 1 }}
@@ -40,12 +35,3 @@ defineProps({
     </div>
   </div>
 </template>
-
-<style scoped>
-.no-copy {
-  -webkit-user-select: none; /* Safari */
-  -moz-user-select: none; /* Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
-}
-</style>

src/components/index.ts

@@ -12,7 +12,6 @@ import DeleteWallet from './DeleteWallet.vue'
 import PasswordInput from './PasswordInput.vue'
 import FeeRateSelector from './FeeRateSelector.vue'
 import VerifySeedPhrase from './VerifySeedPhrase.vue'
-import SwitchAddressModal from './SwitchAddressModal.vue'
 import AddressTypeSelector from './AddressTypeSelector.vue'
 
 export {
@@ -31,5 +30,4 @@ export {
   Avatar,
   LoadingIcon,
   DeleteWallet,
-  SwitchAddressModal
 }

src/components/ui/drawer/DrawerContent.vue

@@ -13,15 +13,18 @@ const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <DrawerPortal>
+  <DrawerPortal to="main">
     <DrawerOverlay />
     <DrawerContent
-      v-bind="forwarded" :class="cn(
-        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
-        props.class,
-      )"
+      v-bind="forwarded"
+      :class="
+        cn(
+          'absolute inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-white after:!h-0',
+          props.class
+        )
+      "
     >
-      <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <!-- <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" /> -->
       <slot />
     </DrawerContent>
   </DrawerPortal>

src/components/ui/drawer/DrawerOverlay.vue

@@ -14,5 +14,5 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <DrawerOverlay v-bind="delegatedProps" :class="cn('fixed inset-0 z-50 bg-black/80', props.class)" />
+  <DrawerOverlay v-bind="delegatedProps" :class="cn('absolute inset-0 z-50 bg-black/80', props.class)" />
 </template>

src/pages/nfts/components/TransactionResultModal.vue

@@ -52,9 +52,8 @@ const toResultTx = async () => {
 <template>
   <Modal :is-open="props.isOpenResult" @update:is-open="$emit('update:isOpenResult', $event)">
     <template #title v-if="result && result.status === 'failed'">
-      <div class="flex items-center gap-2">
-        <span class="text-gray-500">Transaction Failed</span>
-        <ExclamationTriangleIcon class="h-5 w-5 text-red-500"></ExclamationTriangleIcon>
+      <div class="flex items-center justify-center gap-2">
+        <span class="text-gray-500 text-lg font-bold">Transaction Failed</span>
       </div>
     </template>
     <template #title v-if="result && result.status === 'success'">

src/pages/settings/components/FTMerge.vue

@@ -15,7 +15,6 @@ import TransactionResultModal, { type TransactionResult } from '@/pages/wallet/c
 import { useIconsStore } from '@/stores/IconsStore'
 import { CoinCategory } from '@/queries/exchange-rates'
 
-const ftManager = ref()
 const operation = ref('')
 const loading = ref(false)
 const isRefresh = ref(true)
@@ -150,14 +149,24 @@ const { isLoading, data: mvcAssets } = useMVCAssetsQuery(address, {
 
 // TODO: Change computed
 watch(
-  [mvcAssets, ftManager, isRefresh, address],
-  async ([assets, manager, _isRefresh]) => {
-    if (manager && assets && _isRefresh && address) {
+  [mvcAssets, currentMVCWallet, isRefresh, address],
+  async ([assets, _currentMVCWallet, _isRefresh, _address]) => {
+    if (assets && _isRefresh && _address && _currentMVCWallet) {
       assetLoading.value = true
       const _assets: (FTAsset & { utxoCount: number })[] = []
       for (let asset of assets || []) {
         const { codeHash, genesis } = asset
-        await manager.api.getFungibleTokenUnspents(codeHash, genesis, address.value).then((data: any) => {
+        const network: API_NET = (await getNetwork()) as API_NET
+        const purse = _currentMVCWallet.getPrivateKey()
+        const apiHost = await getApiHost()
+        const manager = new FtManager({
+          network,
+          apiTarget: API_TARGET.MVC,
+          purse,
+          feeb: FEEB,
+          apiHost,
+        })
+        await manager.api.getFungibleTokenUnspents(codeHash, genesis, _address).then((data: any) => {
           _assets.push({
             ...asset,
             utxoCount: data.length,
@@ -176,29 +185,14 @@ watch(
 const hasMergeToken = computed(() => {
   return ftAsssets.value.some((asset) => asset.utxoCount > NeedToMergeCount)
 })
-
-watch(currentMVCWallet, async (_currentMVCWallet) => {
-  if (_currentMVCWallet) {
-    const network: API_NET = (await getNetwork()) as API_NET
-    const purse = _currentMVCWallet.getPrivateKey()
-    const apiHost = await getApiHost()
-    ftManager.value = new FtManager({
-      network,
-      apiTarget: API_TARGET.MVC,
-      purse,
-      feeb: FEEB,
-      apiHost,
-    })
-  }
-})
 </script>
 
 <template>
   <div class="min-h-full flex flex-col">
     <div class="text-2xl font-medium">FT Merge</div>
     <div class="mt-2 text-gray-primary text-xs">
-      Due to the technical characteristics of UTXO, when there are too many UTXOs of a certain token, problems such as
-      cycle failure will occur. The merge tool will automatically help you merge scattered UTXOs into one.
+      Due to the technical nature of UTXO, when there are too many UTXOs for a token, issues such as failure loops can
+      occur. The merging tool will automatically help you consolidate your scattered UTXOs into one.
     </div>
     <div class="py-4 flex gap-3 items-center">
       <Avatar :id="address" />

src/pages/wallet/AccountHeader.vue

@@ -93,7 +93,7 @@ const copy = (address: string, addressType: string, type: string) => {
       <ServiceMenu class="cursor-pointer" />
     </div>
   </div>
-  <Drawer v-model:open="isOpen" activeSnapPoint="#wallet">
+  <Drawer v-model:open="isOpen">
     <DrawerContent class="bg-white">
       <DrawerHeader>
         <DrawerTitle class="text-center relative">