feat: add withdraw functionality and related enums

- Introduced WithdrawMethodEnum and ChainEnum in enum.ts for withdrawal methods and blockchain types.
- Updated types.ts to include WithdrawBody type for withdrawal requests.
- Created a new useResetRef composable for managing form state resets.
- Added a withdraw page with form handling in index.vue, including validation and submission logic.
- Integrated the new withdraw functionality into the wallet card component.
- Updated the main.ts file to include Pinia for state management.
- Created a wallet store to manage user balances.
- Modified the deposit page to improve user experience and validation.
- Added number pattern validation for input fields.
- Updated the router to include a new route for the withdraw page.
- Refactored input-label component styles for better layout.
- Added a new rules.ts file for future validation rules.

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

@@ -1,20 +1,41 @@
 <script lang='ts' setup>
+import { onIonViewDidEnter, onIonViewWillEnter } from "@ionic/vue";
 import { client } from "@/api";
 import RechargeChannel from "./recharge-channel.vue";
 
 const { t } = useI18n();
-const { data } = await client.api.asset.balances.get();
+const router = useRouter();
+const { state } = useWalletStore();
 const rechargeInstance = ref<ModalInstance>();
 
+async function init() {
+  const { data } = await client.api.asset.balances.get();
+  state.balances = data;
+}
 function onCloseModal() {
   rechargeInstance.value?.$el.dismiss(null, "confirm");
 }
+function handleWithdraw() {
+  router.push("/withdraw/index");
+}
+
+onMounted(() => {
+  init();
+});
+
+onIonViewWillEnter(() => {
+  init();
+});
+
+onIonViewDidEnter(() => {
+  init();
+});
 </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 v-for="item in data" :key="item.assetCode" class="flex flex-col gap-4px">
+  <div class="mt-20px shadow-md  rounded-6px">
+    <div class="grid grid-cols-2 gap-20px p-20px bg-[var(--ion-card-background)]">
+      <div v-for="item in state.balances" :key="item.assetCode" class="flex flex-col gap-4px">
         <div class="ion-text-uppercase text-xs color-text-400 font-500 tracking-0.4px">
           {{ item.assetCode }}
         </div>
@@ -24,26 +45,27 @@ function onCloseModal() {
       </div>
     </div>
 
-    <div class="px-10px pb-20px bg-[var(--ion-card-background)] rounded-b-6px">
+    <div class="px-10px pb-20px bg-[var(--ion-card-background)]">
       <ion-buttons class="gap-10px" expand="block">
-        <ion-button id="open-modal" expand="block" fill="clear">
+        <ion-button id="open-recharge-modal" expand="block" fill="clear">
           {{ t("wallet.recharge") }}
         </ion-button>
 
-        <ion-button expand="block" fill="clear">
+        <ion-button expand="block" fill="clear" @click="handleWithdraw">
           {{ t("wallet.withdraw") }}
         </ion-button>
       </ion-buttons>
     </div>
   </div>
 
-  <ion-modal ref="rechargeInstance" class="recharge-channel-modal" trigger="open-modal" :initial-breakpoint="1" :breakpoints="[0, 1]">
+  <ion-modal ref="rechargeInstance" class="recharge-channel-modal" trigger="open-recharge-modal" :initial-breakpoint="1" :breakpoints="[0, 1]">
     <RechargeChannel @close="onCloseModal" />
   </ion-modal>
 </template>
 
 <style scoped>
-.recharge-channel-modal {
+.recharge-channel-modal,
+.withdraw-channel-modal {
   --height: auto;
 }
 </style>