From d4f98133f5c7ddb8600073857fe7af1f255164a7 Mon Sep 17 00:00:00 2001
From: brunoedcf <brest.dallacosta@outlook.com>
Date: Sat, 26 Nov 2022 16:07:04 -0300
Subject: [PATCH] Adding 2 decimal places restrition to search tokens component
 input

---
 src/components/SearchComponent.vue | 24 +++++++++++++++++++++++-
 src/components/TopBar.vue          |  1 +
 src/views/MockView.vue             |  4 ++--
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/SearchComponent.vue b/src/components/SearchComponent.vue
index e2f376a..e978a4c 100644
--- a/src/components/SearchComponent.vue
+++ b/src/components/SearchComponent.vue
@@ -13,6 +13,7 @@ const { walletAddress, depositList } = storeToRefs(etherStore);
 const tokenValue = ref(0);
 const enableSelectButton = ref(false);
 const hasLiquidity = ref(true);
+const validDecimals = ref(true)
 const selectedDeposit = ref();
 
 const connectAccount = async () => {
@@ -24,9 +25,25 @@ const handleInputEvent = (event: any) => {
   const { value } = event.target;
 
   tokenValue.value = Number(value);
+
+  if (decimalCount(tokenValue.value) > 2){
+    validDecimals.value = false;
+    enableSelectButton.value = false;
+    return;
+  }
+  validDecimals.value = true;
+
   verifyLiquidity();
 };
 
+const decimalCount = (num: Number) => {
+   const numStr = String(num);
+   if (numStr.includes('.')) {
+      return numStr.split('.')[1].length;
+   };
+   return 0;
+}
+
 const verifyLiquidity = () => {
   enableSelectButton.value = false;
   selectedDeposit.value = null;
@@ -112,7 +129,12 @@ const emit = defineEmits(["tokenBuy"]);
             />
           </div>
         </div>
-        <div class="flex pt-2 justify-center" v-if="!hasLiquidity">
+        <div class="flex pt-2 justify-center" v-if="!validDecimals">
+          <span class="text-red-500 font-normal text-sm"
+            >Por favor utilize no máximo 2 casas decimais</span
+          >
+        </div>
+        <div class="flex pt-2 justify-center" v-else-if="!hasLiquidity">
           <span class="text-red-500 font-normal text-sm"
             >Atualmente não há liquidez nas redes para sua demanda</span
           >
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index c43399d..710503b 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -37,6 +37,7 @@ const formatWalletBalance = (): string => {
       src="@/assets/logo.svg"
       width="75"
       height="75"
+      @load="connectMetaMask()"
     />
     <div class="flex gap-4 items-center">
       <button type="button" class="default-button">Quero vender</button>
diff --git a/src/views/MockView.vue b/src/views/MockView.vue
index 31962f9..e8ed8f2 100644
--- a/src/views/MockView.vue
+++ b/src/views/MockView.vue
@@ -69,8 +69,8 @@ const mapDeposit = (depositId: BigNumber) => {
         :key="deposit['blockNumber']"
         @click="mapDeposit(deposit['args']['depositID'])"
       >
-        {{ deposit["args"]["0"] }} : MRBZ
-        {{ blockchain.formatEther(deposit["args"]["amount"]) }}
+        Address:<br>{{ deposit["args"]["0"] }}<br>
+        MRBZ: {{ blockchain.formatEther(deposit["args"]["amount"]) }}
       </li>
     </ul>
   </div>