From ef76de7a5c1b839694fc08b988ab5f6623d30742 Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Wed, 17 Dec 2025 15:52:24 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=8A=A0=E5=AF=86?=
 =?UTF-8?q?=E8=B4=A7=E5=B8=81=E5=9B=BE=E6=A0=87=E6=94=AF=E6=8C=81=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=B5=84=E4=BA=A7=E5=B1=95=E7=A4=BA=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                              |  4 ++
 package.json                                 |  1 +
 pnpm-lock.yaml                               | 10 +++++
 src/components/ui/avatar/index.vue           | 10 ++---
 src/config/crypto.ts                         | 13 +++++++
 src/views/user/components/asset-balance.vue  |  2 +-
 src/views/user/components/asset.vue          | 38 +++++++++++++++++++
 src/views/user/components/issuing-asset.vue  |  2 +-
 src/views/user/components/my-revenue.vue     |  2 +-
 src/views/user/components/trade-settings.vue |  2 +-
 src/views/user/components/user-info.vue      |  2 +-
 src/views/user/components/wallet-card.vue    | 40 ++++++++++++++------
 src/views/user/index.vue                     | 17 +++++----
 13 files changed, 111 insertions(+), 32 deletions(-)
 create mode 100644 src/config/crypto.ts
 create mode 100644 src/views/user/components/asset.vue

diff --git a/components.d.ts b/components.d.ts
index 88d5c43..7bd4c86 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -39,6 +39,8 @@ declare module 'vue' {
     IonRippleEffect: typeof import('@ionic/vue')['IonRippleEffect']
     IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
     IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
+    IonSegment: typeof import('@ionic/vue')['IonSegment']
+    IonSegmentButton: typeof import('@ionic/vue')['IonSegmentButton']
     IonSelect: typeof import('@ionic/vue')['IonSelect']
     IonSelectOption: typeof import('@ionic/vue')['IonSelectOption']
     IonTabBar: typeof import('@ionic/vue')['IonTabBar']
@@ -89,6 +91,8 @@ declare global {
   const IonRippleEffect: typeof import('@ionic/vue')['IonRippleEffect']
   const IonRouterOutlet: typeof import('@ionic/vue')['IonRouterOutlet']
   const IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
+  const IonSegment: typeof import('@ionic/vue')['IonSegment']
+  const IonSegmentButton: typeof import('@ionic/vue')['IonSegmentButton']
   const IonSelect: typeof import('@ionic/vue')['IonSelect']
   const IonSelectOption: typeof import('@ionic/vue')['IonSelectOption']
   const IonTabBar: typeof import('@ionic/vue')['IonTabBar']
diff --git a/package.json b/package.json
index af951d5..6e98304 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "^6.6.1",
     "@capacitor/cli": "8.0.0",
+    "@iconify-json/cryptocurrency-color": "^1.2.4",
     "@iconify-json/ic": "^1.2.4",
     "@iconify-json/material-icon-theme": "^1.2.44",
     "@iconify/vue": "^5.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 040f629..643d06e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,6 +87,9 @@ importers:
       '@capacitor/cli':
         specifier: 8.0.0
         version: 8.0.0
+      '@iconify-json/cryptocurrency-color':
+        specifier: ^1.2.4
+        version: 1.2.4
       '@iconify-json/ic':
         specifier: ^1.2.4
         version: 1.2.4
@@ -1106,6 +1109,9 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/cryptocurrency-color@1.2.4':
+    resolution: {integrity: sha512-8vjIfTAAMg0zo3/CdVWV7YjViY1L/q4TFfjROmqRPCRPhM6iVecW4TzMFS8hxm48S2Ge69SNM1yC8FmHT+jfHw==}
+
   '@iconify-json/ic@1.2.4':
     resolution: {integrity: sha512-pzPMmrZrBQuwT7nmtrYdkttun8KalRGgZPIL1Ny9KpF2zjRGIUPN+npTfuD3lrgO/OnSwAoJWuekQwBpt/Cqrw==}
 
@@ -5677,6 +5683,10 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
+  '@iconify-json/cryptocurrency-color@1.2.4':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/ic@1.2.4':
     dependencies:
       '@iconify/types': 2.0.0
diff --git a/src/components/ui/avatar/index.vue b/src/components/ui/avatar/index.vue
index 860a4c2..cfe5aa6 100644
--- a/src/components/ui/avatar/index.vue
+++ b/src/components/ui/avatar/index.vue
@@ -3,7 +3,7 @@
 <template>
   <ion-avatar v-bind="$attrs">
     <img
-      src="https://api.iconify.design/material-icon-theme:bruno.svg"
+      src="https://api.iconify.design/material-icon-theme:remix-light.svg"
       alt="Avatar"
     >
   </ion-avatar>
@@ -11,11 +11,7 @@
 
 <style lang='css' scoped>
 ion-avatar {
-  background-color: #7e5cff;
-}
-@media (prefers-color-scheme: dark) {
-  ion-avatar {
-    background-color: #7e5cff;
-  }
+  background-color: var(--ion-color-success);
+  padding: 10px;
 }
 </style>
diff --git a/src/config/crypto.ts b/src/config/crypto.ts
new file mode 100644
index 0000000..9bbc80b
--- /dev/null
+++ b/src/config/crypto.ts
@@ -0,0 +1,13 @@
+import CryptocurrencyColorGeneric from "~icons/cryptocurrency-color/generic";
+import CryptocurrencyColorTrx from "~icons/cryptocurrency-color/trx";
+import CryptocurrencyColorUsdt from "~icons/cryptocurrency-color/usdt";
+
+export const CryptoIcons = {
+  USDT: CryptocurrencyColorUsdt,
+  TRX: CryptocurrencyColorTrx,
+  OPTS: CryptocurrencyColorGeneric,
+};
+
+export function getCryptoIcon(symbol: string) {
+  return CryptoIcons[symbol as keyof typeof CryptoIcons] || CryptocurrencyColorGeneric;
+}
diff --git a/src/views/user/components/asset-balance.vue b/src/views/user/components/asset-balance.vue
index 0bd6ce7..f6b7f90 100644
--- a/src/views/user/components/asset-balance.vue
+++ b/src/views/user/components/asset-balance.vue
@@ -5,7 +5,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="mt-10">
+  <div>
     <ion-label class="text-xs font-medium text-text-300">
       {{ t("asset.balance.assetBalance") }}
     </ion-label>
diff --git a/src/views/user/components/asset.vue b/src/views/user/components/asset.vue
new file mode 100644
index 0000000..34c9f5a
--- /dev/null
+++ b/src/views/user/components/asset.vue
@@ -0,0 +1,38 @@
+<script lang='ts' setup>
+import { getCryptoIcon } from "@/config/crypto";
+
+const walletStore = useWalletStore();
+const { balances } = storeToRefs(walletStore);
+</script>
+
+<template>
+  <div>
+    <ion-label class="text-xs font-medium text-text-300">
+      Asset
+    </ion-label>
+    <ion-list lines="none" class="space-y-5 mt-2!">
+      <ion-item v-for="asset, i in balances" :key="i" class="">
+        <div class="flex items-center space-x-3 flex-1">
+          <component :is="getCryptoIcon(asset.assetCode)" class="w-8 h-8" />
+          <div class="space-y-1">
+            <div class="font-medium text-md">
+              {{ asset.assetCode }}
+            </div>
+            <div class="text-xs text-text-700 font-bold">
+              Total: ${{ asset.total }}
+            </div>
+          </div>
+        </div>
+        <div class="w-fit font-bold">
+          ${{ Number(asset.available) }}
+        </div>
+      </ion-item>
+    </ion-list>
+  </div>
+</template>
+
+<style lang='css' scoped>
+ion-item::part(native) {
+  --padding-start: 0;
+}
+</style>
diff --git a/src/views/user/components/issuing-asset.vue b/src/views/user/components/issuing-asset.vue
index 6340c03..76b75d8 100644
--- a/src/views/user/components/issuing-asset.vue
+++ b/src/views/user/components/issuing-asset.vue
@@ -5,7 +5,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="mt-10">
+  <div>
     <ion-label class="text-xs font-medium text-text-300">
       {{ t("asset.issue.issuingAsset") }}
     </ion-label>
diff --git a/src/views/user/components/my-revenue.vue b/src/views/user/components/my-revenue.vue
index a423e40..fb786e6 100644
--- a/src/views/user/components/my-revenue.vue
+++ b/src/views/user/components/my-revenue.vue
@@ -5,7 +5,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="mt-10">
+  <div>
     <ion-label class="text-xs font-medium text-text-300">
       {{ t("asset.revenue.myRevenue") }}
     </ion-label>
diff --git a/src/views/user/components/trade-settings.vue b/src/views/user/components/trade-settings.vue
index bd7df9c..9e00a5b 100644
--- a/src/views/user/components/trade-settings.vue
+++ b/src/views/user/components/trade-settings.vue
@@ -5,7 +5,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="mt-10">
+  <div>
     <ion-label class="text-xs font-medium text-text-300">
       {{ t('trade.title') }}
     </ion-label>
diff --git a/src/views/user/components/user-info.vue b/src/views/user/components/user-info.vue
index dfc16f0..6897007 100644
--- a/src/views/user/components/user-info.vue
+++ b/src/views/user/components/user-info.vue
@@ -43,7 +43,7 @@ const { user } = useAuth();
 .user-uid {
   color: var(--ion-text-secondary);
   display: flex;
-  align-items: end;
+  align-items: center;
   gap: 4px;
 }
 .link {
diff --git a/src/views/user/components/wallet-card.vue b/src/views/user/components/wallet-card.vue
index ea122b3..6c22e78 100644
--- a/src/views/user/components/wallet-card.vue
+++ b/src/views/user/components/wallet-card.vue
@@ -1,4 +1,5 @@
 <script lang='ts' setup>
+import { eyeOffOutline, eyeOutline } from "ionicons/icons";
 import IcRoundArrowCircleDown from "~icons/ic/round-arrow-circle-down";
 import IcRoundArrowCircleUp from "~icons/ic/round-arrow-circle-up";
 import RechargeChannel from "./recharge-channel.vue";
@@ -8,6 +9,10 @@ const router = useRouter();
 const walletStore = useWalletStore();
 const { balances } = storeToRefs(walletStore);
 const rechargeInstance = ref<ModalInstance>();
+const totalBalanceVisible = useStorage("total-balances-visible", true);
+const totalBalance = computed(() => {
+  return balances.value.reduce((acc, item) => acc + Number(item.available), 0);
+});
 
 function onCloseModal() {
   rechargeInstance.value?.$el.dismiss(null, "confirm");
@@ -22,21 +27,32 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="mt-5 shadow-md rounded-lg overflow-hidden">
-    <div class="grid grid-cols-1 gap-5 p-5 bg-(--ion-card-background)">
-      <div v-for="item in balances" :key="item.assetCode" class="flex flex-col gap-1">
-        <div class="uppercase text-xs text-text-400 font-medium tracking-[0.4px]">
-          {{ item.assetCode }}
-        </div>
-        <div class="text-lg font-bold">
-          {{ formatBalance(item.available) }}
-        </div>
+  <div class="flex flex-col gap-1">
+    <div class="text-sm text-gray-500 flex items-center gap-2" @click="totalBalanceVisible = !totalBalanceVisible">
+      <div>Est total value</div>
+      <ion-icon :icon="totalBalanceVisible ? eyeOffOutline : eyeOutline" />
+    </div>
+    <div class="flex items-end gap-2">
+      <div class="text-2xl font-bold">
+        {{ totalBalanceVisible ? totalBalance : Array(totalBalance.toString().length).fill("*").join("") }}
+      </div>
+      <div class="text-md font-bold">
+        USDT
       </div>
     </div>
   </div>
 
-  <div class="flex mt-7 gap-10">
-    <div id="open-recharge-modal" class="flex-col-center">
+  <div class="flex gap-10 w-full">
+    <ion-button id="open-recharge-modal" expand="full" color="success" shape="round" class="w-full min-h-10 h-10">
+      <IcRoundArrowCircleDown slot="start" />
+      {{ t("wallet.recharge") }}
+    </ion-button>
+
+    <ion-button expand="full" color="success" shape="round" class="w-full min-h-10 h-10" @click="handleWithdraw">
+      <IcRoundArrowCircleUp slot="start" />
+      {{ t("wallet.withdraw") }}
+    </ion-button>
+    <!-- <div id="open-recharge-modal" class="flex-col-center">
       <ion-ripple-effect />
       <ion-button shape="round" color="success" size="large">
         <IcRoundArrowCircleDown slot="icon-only" />
@@ -54,7 +70,7 @@ onMounted(() => {
       <div class="text-center mt-2 text-sm font-medium text-text-500">
         {{ t("wallet.withdraw") }}
       </div>
-    </div>
+    </div> -->
   </div>
 
   <ion-modal ref="rechargeInstance" class="recharge-channel-modal" trigger="open-recharge-modal" :initial-breakpoint="1" :breakpoints="[0, 1]">
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index 15ccef0..27c4959 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { notificationsOutline, scanOutline, settingsOutline } from "ionicons/icons";
-import AssetBalance from "./components/asset-balance.vue";
+import Asset from "./components/asset.vue";
 import IssuingAsset from "./components/issuing-asset.vue";
 import MyRevenue from "./components/my-revenue.vue";
-import PurchaseAsset from "./components/purchase-asset.vue";
 import TradeSettings from "./components/trade-settings.vue";
 import UserInfo from "./components/user-info.vue";
 import WalletCard from "./components/wallet-card.vue";
@@ -27,12 +26,14 @@ import WalletCard from "./components/wallet-card.vue";
       </ion-toolbar>
     </ion-header>
     <IonContent :fullscreen="true" class="ion-padding">
-      <UserInfo />
-      <WalletCard />
-      <IssuingAsset />
-      <!-- <PurchaseAsset /> -->
-      <MyRevenue />
-      <TradeSettings />
+      <div class="flex flex-col space-y-5">
+        <UserInfo />
+        <WalletCard />
+        <Asset />
+        <IssuingAsset />
+        <MyRevenue />
+        <TradeSettings />
+      </div>
     </IonContent>
   </IonPage>
 </template>