fix: buttons

Author: Claudio La Barbera

src/components/views/Home.vue

@@ -22,6 +22,8 @@ const modalDescription = ref('');
 const min_bet = ref(1)
 const max_bet = ref(10);
 
+const loading = ref(false);
+
 let lastTransactionId = null;
 
 const openModal = () => {
@@ -54,14 +56,15 @@ const viewTransaction = () => {
 }
 
 const incrementAmount = () => {
-  if(amount.value + 0.1 <= max_bet) {
-    amount.value += 0.1;
+  console.log('increment');
+  if (amount.value + 0.1 <= (max_bet.value)) {
+    amount.value = (amount.value + 0.1)
   }
 }
 
 const decrementAmount = () => {
-  if(amount.value - 0.1 >= min_bet) {
-    amount.value -= 0.1;
+  if (amount.value - 0.1 >= (min_bet.value)) {
+    amount.value = (amount.value - 0.1)
   }
 }
 
@@ -73,9 +76,15 @@ onMounted(async () => {
   min_bet.value = config.min_bet;
   max_bet.value = config.max_bet;
 
-  amount.value = config.min_bet;
+  amount.value = parseFloat(config.min_bet);
 
   currentBalance.value = await store.telegram.getWalletBalance();
+
+  setInterval(async () => {
+    loading.value = true;
+    currentBalance.value = await store.telegram.getWalletBalance();
+    loading.value = false;
+  }, 3000);
 });
 </script>
 
@@ -96,25 +105,27 @@ onMounted(async () => {
           <div class="flex justify-center">
             <div class="relative flex items-center max-w-[8rem]">
 
-              <button type="button" @click="incrementAmount()" class="bg-blue-800 0 border-blue-900 rounded-s-lg p-3 h-11 mr-1">
+              <a @click="decrementAmount()"
+                class="bg-blue-800 0 border-blue-900 rounded-s-lg p-3 h-11 mr-1">
                 <svg class="w-3 h-3 text-white dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                   fill="none" viewBox="0 0 18 2">
                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                     d="M1 1h16" />
                 </svg>
-              </button>
+              </a>
 
               <input type="number" v-model="amount" data-input-counter aria-describedby="helper-text-explanation"
                 class="bg-blue-50 border-x-0 h-11 focus:border-none text-center text-gray-900 font-bold text-sm block w-full py-2.5"
                 placeholder="1" required />
 
-              <button type="button" @click="decrementAmount()" class="bg-blue-800 0 border-blue-900 rounded-e-lg p-3 h-11 ml-1">
+              <a @click="incrementAmount()"
+                class="bg-blue-800 0 border-blue-900 rounded-e-lg p-3 h-11 ml-1">
                 <svg class="w-3 h-3 text-white dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                   fill="none" viewBox="0 0 18 18">
                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                     d="M9 1v16M1 9h16" />
                 </svg>
-              </button>
+              </a>
 
             </div>
           </div>
@@ -132,7 +143,22 @@ onMounted(async () => {
 
         <div v-if="store.telegram.walletAccount" class="mt-8 text-xs">
           <div class="font-black uppercase text-[10px]">Your balance</div>
-          <div class="font-black text-lg">{{ currentBalance }} TON</div>
+          <div class="font-black text-lg">
+            <div class="flex justify-center">
+              <div>
+                {{ currentBalance }} TON
+              </div>
+              <div class="w-5">
+                <svg v-if="loading" class="animate-spin ml-3 h-7 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
+                  viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+                  </path>
+                </svg>
+              </div>
+            </div>
+          </div>
         </div>
 
         <div v-if="!store.telegram.walletAccount" class="mt-4 text-xs text-orange-500">