chore: Update UI

mvc-labs · Mar 26, 2024 · 6b6071e · 6b6071e
1 parent 72275ea
commit 6b6071e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/src/pages/wallet/Asset.vue b/src/pages/wallet/Asset.vue
@@ -220,7 +220,7 @@ const toTransfer = () => {
             <div
               :key="ticker.inscriptionId"
               v-for="ticker in tickersData.transferableList"
-              class="flex flex-col items-center rounded-md bg-white w-[100px] h-[100px] border border-[#D8D8D8] relative"
+              class="flex flex-col items-center rounded-md bg-white aspect-square border border-[#D8D8D8] relative"
             >
               <div class="mt-2.5 text-[#909399] text-sm">{{ ticker.ticker }}</div>
               <div class="mt-3 text-black-primary text-lg font-bold truncate">{{ ticker.amount }}</div>
@@ -234,19 +234,27 @@ const toTransfer = () => {
           </div>
           <div v-else class="w-full h-[142px] flex items-center justify-center text-[#999999]">Empty</div>
           <div class="text-[#303133] mt-3">
-            <div class="flex items-center justify-between">
+            <div class="flex items-center justify-between gap-2">
               <span class="text-base">Available</span>
-              <span class="text-lg" v-if="tickersData">
+              <span
+                class="text-lg truncate"
+                v-if="tickersData"
+                :title="
+                  Number(tickersData.tokenBalance.availableBalanceUnSafe)
+                    ? `${tickersData.tokenBalance.availableBalanceSafe} ${asset.symbol} + ${tickersData.tokenBalance.availableBalanceUnSafe} ${asset.symbol}`
+                    : `${tickersData.tokenBalance.availableBalanceSafe} ${asset.symbol}`
+                "
+              >
                 <span>{{ tickersData.tokenBalance.availableBalanceSafe }} {{ asset.symbol }}</span>
                 <span v-if="Number(tickersData.tokenBalance.availableBalanceUnSafe)" class="text-gray-primary">
-                  + {{ Math.abs(Number(tickersData.tokenBalance.availableBalanceUnSafe)) }} {{ asset.symbol }}</span
+                  + {{ Number(tickersData.tokenBalance.availableBalanceUnSafe) }} {{ asset.symbol }}</span
                 >
               </span>
               <span class="text-lg" v-else>--</span>
             </div>
             <div
-              v-if="tickersData && Number(tickersData.tokenBalance.availableBalanceUnSafe)"
               class="text-right text-sm text-gray-primary"
+              v-if="tickersData && Number(tickersData.tokenBalance.availableBalanceUnSafe)"
             >
               (Wait to be confirmed)
             </div>

diff --git a/src/pages/wallet/Transfer.vue b/src/pages/wallet/Transfer.vue
@@ -40,12 +40,12 @@ const toInscribe = () => {
     </div>
     <div class="flex flex-col gap-3 mt-[30px]">
       <div class="text-[#909399] text-base">TRANSFER Inscriptions ({{ tickersData.transferableList.length }})</div>
-      <div class="grid grid-cols-3 gap-2 w-full mt-3">
+      <div class="grid grid-cols-3 gap-2 mt-3">
         <div
           :key="ticker.inscriptionId"
           v-for="ticker in tickersData.transferableList"
           @click="toSendBRC20(ticker.inscriptionId, Number(ticker.amount))"
-          class="flex flex-col items-center rounded-md bg-white w-[100px] h-[100px] border border-[#D8D8D8] relative cursor-pointer"
+          class="flex flex-col items-center rounded-md bg-white aspect-square border border-[#D8D8D8] relative cursor-pointer"
         >
           <div class="mt-2.5 text-[#909399] text-sm">{{ ticker.ticker }}</div>
           <div class="mt-3 text-black-primary text-lg font-bold truncate">{{ ticker.amount }}</div>