feat: 更新 API 地址，添加充值渠道组件，优化钱包卡片以支持充值功能

src/locales/index.ts

@@ -5,6 +5,7 @@ import zhCN from "./zh-CN.json";
 export type MessageSchema = typeof enUS;
 
 const i18n = createI18n<MessageSchema, "en-US" | "zh-CN">({
+  legacy: false,
   locale: "en-US",
   fallbackLocale: "en-US",
   messages: {

src/views/user/components/recharge-channel.vue

@@ -0,0 +1,36 @@
+<script lang='ts' setup>
+import IcBaselineDataUsage from "~icons/ic/baseline-data-usage";
+import IcBaselineDownloading from "~icons/ic/baseline-downloading";
+</script>
+
+<template>
+  <div class="w-full h-200px p-20px flex justify-center flex-col gap-30px">
+    <div class="flex items-center gap-10px">
+      <i-ic-baseline-downloading class="text-2xl" />
+      <ion-label class="flex-1">
+        <h2>Chain recharge</h2>
+        <p class="w-80% text-sm">
+          Transfer crypto from on-chain wallet or exchange.
+        </p>
+      </ion-label>
+      <i-ic-round-arrow-forward-ios class="ml-auto color-text-400" />
+    </div>
+
+    <div class="flex items-center gap-10px">
+      <i-ic-baseline-data-saver-off class="text-2xl" />
+      <ion-label class="flex-1">
+        <h2>Fiat currency</h2>
+        <p class="w-80% text-sm">
+          Transfer fiat currency through bank or other financial institutions.
+        </p>
+      </ion-label>
+      <i-ic-round-arrow-forward-ios class="ml-auto color-text-400" />
+    </div>
+  </div>
+</template>
+
+<style lang='css' scoped>
+.list {
+  --background: transparent;
+}
+</style>

src/views/user/components/wallet-card.vue

@@ -1,11 +1,17 @@
 <script lang='ts' setup>
+import { modalController } from "@ionic/vue";
 import { client } from "@/api";
+import RechargeChannel from "./recharge-channel.vue";
 
 const { t } = useI18n();
 const { data } = await client.api.asset.balances.get();
 </script>
 
 <template>
+  <ion-modal class="recharge-channel-modal" trigger="open-modal" :initial-breakpoint="1" :breakpoints="[0]">
+    <RechargeChannel />
+  </ion-modal>
+
   <div class="mt-20px">
     <div class="grid grid-cols-2 gap-20px p-20px bg-[var(--ion-card-background)] rounded-t-6px">
       <div v-for="item in data" :key="item.assetCode" class="flex flex-col gap-4px">
@@ -20,9 +26,10 @@ const { data } = await client.api.asset.balances.get();
 
     <div class="px-10px pb-20px bg-[var(--ion-card-background)] rounded-b-6px">
       <ion-buttons class="gap-10px" expand="block">
-        <ion-button expand="block" fill="clear">
+        <ion-button id="open-modal" expand="block" fill="clear">
           {{ t("wallet.recharge") }}
         </ion-button>
+
         <ion-button expand="block" fill="clear">
           {{ t("wallet.withdraw") }}
         </ion-button>
@@ -31,4 +38,8 @@ const { data } = await client.api.asset.balances.get();
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.recharge-channel-modal {
+  --height: auto;
+}
+</style>