feat: 添加货币选择模态框，优化用户体验

src/views/deposit/fiat.vue

@@ -1,8 +1,11 @@
 <script lang='ts' setup>
 import type { DepositFiatBody } from "@/api/types";
-import { loadingController, toastController } from "@ionic/vue";
+import { loadingController, modalController, toastController } from "@ionic/vue";
+import { chevronForwardOutline } from "ionicons/icons";
 import { client, safeClient } from "@/api";
 import { AssetCodeEnum, PaymentChannelEnum } from "@/api/enum";
+import { getCryptoIcon } from "@/config/crypto";
+import SelectCurrency from "../withdraw/components/select-currency.vue";
 
 const { t } = useI18n();
 
@@ -30,6 +33,20 @@ function validate(value: string) {
 
   return isNumber;
 }
+async function openSelectCurrency() {
+  const modal = await modalController.create({
+    component: SelectCurrency,
+    componentProps: {
+      onSelect: (code: string) => {
+        form.value.assetCode = code;
+      },
+    },
+    breakpoints: [0, 0.8],
+    initialBreakpoint: 0.8,
+    handle: true,
+  });
+  await modal.present();
+}
 
 async function onSubmit() {
   const loading = await loadingController.create({
@@ -70,22 +87,19 @@ async function onSubmit() {
           disabled
         />
 
-        <ion-radio-group v-model="form.assetCode">
-          <ion-label class="text-sm">
+        <ion-label class="block text-sm font-medium">
           {{ t("recharge.fiat.chooseCurrency") }}
         </ion-label>
-          <ion-item v-for="item in AssetCodeEnum" :key="item">
-            <ion-radio :value="item" justify="space-between">
-              {{ item }}
-            </ion-radio>
-          </ion-item>
-        </ion-radio-group>
-
-        <!-- <ion-select v-model="form.assetCode" label="Select Currency" placeholder="Select One" label-placement="floating">
-          <ion-select-option v-for="item in AssetCodeEnum" :key="item" :value="item">
-            {{ item }}
-          </ion-select-option>
-        </ion-select> -->
+        <div
+          class="flex items-center justify-between bg-faint rounded-2xl p-4 cursor-pointer"
+          @click="openSelectCurrency"
+        >
+          <div class="flex items-center gap-3">
+            <component :is="getCryptoIcon(form.assetCode)" class="w-8 h-8" />
+            <span class="text-base font-medium">{{ form.assetCode }}</span>
+          </div>
+          <ion-icon :icon="chevronForwardOutline" class="text-text-400" />
+        </div>
 
         <ui-input-label
           ref="inputInstance"