From d5b632bc3a6cba22eeb34aaec6f170528ca8c12d Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Sat, 13 Dec 2025 21:16:01 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E4=BD=99=E9=A2=9D?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8C=96=E9=80=BB=E8=BE=91=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E9=92=B1=E5=8C=85=E5=8D=A1=E7=89=87=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=BB=A5=E6=98=BE=E7=A4=BA=E8=B5=84=E4=BA=A7=E4=BD=99=E9=A2=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/helper.ts                       | 15 ++++++++++-----
 src/views/user/components/wallet-card.vue | 18 +++---------------
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/utils/helper.ts b/src/utils/helper.ts
index 2799be1..3a943aa 100644
--- a/src/utils/helper.ts
+++ b/src/utils/helper.ts
@@ -1,6 +1,11 @@
-export function formatBalance(amount: MaybeRefOrGetter<number>, locale: Intl.LocalesArgument = "en-US"): ComputedRef<string> {
-  return computed(() => {
-    const balance = toValue(amount);
-    return `$${balance.toLocaleString(locale, { minimumFractionDigits: 0, maximumFractionDigits: 2 })}`;
-  });
+export function formatBalance(amount: MaybeRefOrGetter<number | string>, locale: Intl.LocalesArgument = "en-US"): string {
+  let value = toValue(amount);
+  if (!value) {
+    value = 0;
+  }
+  if (typeof value === "string" && !Number.isNaN(Number(value))) {
+    value = 0;
+  }
+
+  return value.toLocaleString(locale, { minimumFractionDigits: 0, maximumFractionDigits: 2 });
 }
diff --git a/src/views/user/components/wallet-card.vue b/src/views/user/components/wallet-card.vue
index 944d024..c39ad39 100644
--- a/src/views/user/components/wallet-card.vue
+++ b/src/views/user/components/wallet-card.vue
@@ -2,30 +2,18 @@
 import { client } from "@/api";
 
 const { t } = useI18n();
-
-const balance = ref(9999999);
-
-const formattedBalance = formatBalance(balance);
 const { data } = await client.api.asset.balances.get();
 </script>
 
 <template>
   <div class="mt-20px">
     <div class="grid grid-cols-2 gap-20px p-20px bg-[var(--ion-card-background)] rounded-t-6px">
-      <div class="flex flex-col gap-4px">
+      <div v-for="item in data" :key="item.assetCode" class="flex flex-col gap-4px">
         <div class="ion-text-uppercase text-xs color-text-400 font-500 tracking-0.4px">
-          {{ t('wallet.balance') }}
+          {{ item.assetCode }}
         </div>
         <div class="text-lg font-bold">
-          {{ formattedBalance }}
-        </div>
-      </div>
-      <div class="flex flex-col gap-4px">
-        <div class="ion-text-uppercase text-xs color-text-400 font-500 tracking-0.4px">
-          {{ t('wallet.balance') }}
-        </div>
-        <div class="text-lg font-bold">
-          {{ formattedBalance }}
+          {{ formatBalance(item.available) }}
         </div>
       </div>
     </div>