feat: 添加加密货币图标支持，优化资产展示组件

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']

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",

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

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;
+  background-color: var(--ion-color-success);
-}
+  padding: 10px;
-@media (prefers-color-scheme: dark) {
-  ion-avatar {
-    background-color: #7e5cff;
-  }
 }
 </style>

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;
+}

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>

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>

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>

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>

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>

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 {

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="flex flex-col gap-1">
-    <div class="grid grid-cols-1 gap-5 p-5 bg-(--ion-card-background)">
+    <div class="text-sm text-gray-500 flex items-center gap-2" @click="totalBalanceVisible = !totalBalanceVisible">
-      <div v-for="item in balances" :key="item.assetCode" class="flex flex-col gap-1">
+      <div>Est total value</div>
-        <div class="uppercase text-xs text-text-400 font-medium tracking-[0.4px]">
+      <ion-icon :icon="totalBalanceVisible ? eyeOffOutline : eyeOutline" />
-          {{ item.assetCode }}
+    </div>
-        </div>
+    <div class="flex items-end gap-2">
-        <div class="text-lg font-bold">
+      <div class="text-2xl font-bold">
-          {{ formatBalance(item.available) }}
+        {{ totalBalanceVisible ? totalBalance : Array(totalBalance.toString().length).fill("*").join("") }}
-        </div>
+      </div>
+      <div class="text-md font-bold">
+        USDT
       </div>
     </div>
   </div>
 
-  <div class="flex mt-7 gap-10">
+  <div class="flex gap-10 w-full">
-    <div id="open-recharge-modal" class="flex-col-center">
+    <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]">

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 />
+      <div class="flex flex-col space-y-5">
-      <WalletCard />
+        <UserInfo />
-      <IssuingAsset />
+        <WalletCard />
-      <!-- <PurchaseAsset /> -->
+        <Asset />
-      <MyRevenue />
+        <IssuingAsset />
-      <TradeSettings />
+        <MyRevenue />
+        <TradeSettings />
+      </div>
     </IonContent>
   </IonPage>
 </template>