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/deposit/fiat.vue

@@ -1,5 +1,7 @@
 <script lang='ts' setup>
 import type { DepositFiatBody } from "@/api/types";
+import { toastController } from "@ionic/vue";
+import { client } from "@/api";
 import { AssetCodeEnum, PaymentChannelEnum } from "@/api/enum";
 
 const form = ref<DepositFiatBody>({
@@ -19,11 +21,24 @@ function validate(value: string) {
   if (value === "") {
     return false;
   }
-  const isEmailValid = emailPattern.test(form.value.amount);
+  const isNumber = numberPattern.test(value);
 
-  isEmailValid ? inputInstance.value?.$el.classList.add("ion-valid") : inputInstance.value?.$el.classList.add("ion-invalid");
+  isNumber ? inputInstance.value?.$el.classList.add("ion-valid") : inputInstance.value?.$el.classList.add("ion-invalid");
 
-  return isEmailValid;
+  return isNumber;
+}
+
+async function onSubmit() {
+  const { data, status } = await client.api.deposit.fiat.post(form.value);
+  if (status === 200) {
+    const toast = await toastController.create({
+      message: "Submission successful!",
+      duration: 1500,
+      position: "bottom",
+    });
+
+    await toast.present();
+  }
 }
 </script>
 
@@ -38,7 +53,7 @@ function validate(value: string) {
       </ion-toolbar>
     </IonHeader>
     <IonContent :fullscreen="true" class="ion-padding">
-      <div class="flex flex-col gap-10px">
+      <div class="flex flex-col gap-20px">
         <ui-input-label
           label="Recharge bank card account"
           model-value="74321329321312"
@@ -47,11 +62,22 @@ function validate(value: string) {
           disabled
         />
 
-        <ion-select v-model="form.assetCode" label="Select Currency" placeholder="Select One" label-placement="floating">
+        <ion-radio-group v-model="form.assetCode">
+          <ion-label class="text-sm">
+            Choose Currency
+          </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>
+        </ion-select> -->
 
         <ui-input-label
           ref="inputInstance"
@@ -59,10 +85,17 @@ function validate(value: string) {
           label="Amount"
           placeholder="Enter the amount"
           type="number"
+          inputmode="numeric"
           error-text="Please enter a valid amount."
           @ion-input="validate($event.target.value as string)"
           @ion-blur="markTouched"
         />
+
+        <ion-note>Please make sure to enter the correct amount. After submission, the funds will be credited to your account after review in the background.</ion-note>
+
+        <ion-button expand="block" @click="onSubmit">
+          Submit
+        </ion-button>
       </div>
     </IonContent>
   </ion-page>