improve Donnation component and fix string format for the value in the wallet

src/views/creators/DonationButton.vue

@@ -26,13 +26,19 @@
         </div>
 
         <v-card-text>
-          <v-text-field v-model="tipAmount"
+          <v-text-field
-                        class="p-2"
+              v-model="tipAmount"
-                        label="Montant"
+              type="number"
-                        density="comfortable"
+              :min="0"
-                        variant="outlined"
+              class="p-2"
-                        hide-details
+              label="Montant"
-                        clearable
+              density="comfortable"
+              variant="outlined"
+              hide-details
+              clearable
+              inputmode="numeric"
+              @keydown="preventNonNumeric"
+              prepend-inner-icon="mdi-currency-usd"
           ></v-text-field>
 
           <v-textarea v-model="tipMessage"
@@ -139,7 +145,6 @@ function closeDialog() {
     checkout.destroy();
   }
 }
-
 async function goPay() {
   isPaymentDialogActive.value = true;
 
@@ -149,4 +154,13 @@ async function goPay() {
 
   await checkout.mount('#checkout');
 }
+
+function preventNonNumeric(event) {
+  const key = event.key;
+  const allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];
+
+  if (!/^\d$/.test(key) && !allowedKeys.includes(key)) {
+    event.preventDefault();
+  }
+}
 </script>

src/views/main/Wallet.vue

@@ -64,11 +64,8 @@ const formattedTransactions = computed(() => {
 });
 
 const formattedBalance = computed(() => {
-  const balanceStr = totalBalance.value.toString();
+  const balance = totalBalance.value.toString();
-  const balanceParts = balanceStr.split(".");
+  return `${balance} $`
-  const integerPart = balanceParts[0]
-  const decimalPart = balanceParts[1]
-  return integerPart + ',' + decimalPart + ' $';
 });
 
 const transactionCount = computed(() => userTransactions.value.length);