From e6117d77d7f227144e8f747d272c864ffc5f5fe8 Mon Sep 17 00:00:00 2001
From: Vagner <vagner_domingues@hotmail.com>
Date: Sat, 12 Oct 2024 23:51:13 -0300
Subject: [PATCH] Fix single root element vue standards

---
 src/components/CustomModal/CustomModal.vue | 80 +++++++++++-----------
 src/views/HomeView.vue                     | 76 ++++++++++----------
 src/views/ManageBidsView.vue               | 50 +++++++-------
 src/views/SellerView.vue                   | 48 ++++++-------
 4 files changed, 131 insertions(+), 123 deletions(-)

diff --git a/src/components/CustomModal/CustomModal.vue b/src/components/CustomModal/CustomModal.vue
index f68de25..5fed482 100644
--- a/src/components/CustomModal/CustomModal.vue
+++ b/src/components/CustomModal/CustomModal.vue
@@ -17,50 +17,52 @@ if (props.isRedirectModal) {
 </script>
 
 <template>
-  <div
-    class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
-    v-if="!isRedirectModal"
-  >
-    <div class="modal px-5 text-center">
-      <p
-        class="text-black tracking-tighter leading-tight my-6 mx-2 text-justify"
-      >
-        <strong>ATENÇÃO!</strong>
-        A transação só será processada após inserir o código de autenticação.
-        Caso contrário não conseguiremos comprovar o seu depósito e não será
-        possível transferir os tokens para sua carteira.
-      </p>
-      <button
-        @click="$emit('close-modal')"
-        class="border-2 border-solid border-amber-400 mt-2"
-      >
-        Entendi
-      </button>
-    </div>
-  </div>
-  <div
-    class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm"
-    v-if="isRedirectModal"
-  >
-    <div class="modal px-5 text-center">
-      <p
-        class="text-black text-lg tracking-tighter leading-tight my-6 mx-2 text-justify font-semibold"
-      >
-        Retomar a última compra?
-      </p>
-      <div class="flex justify-around items-center px-2">
+  <div>
+    <div
+      class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
+      v-if="!isRedirectModal"
+    >
+      <div class="modal px-5 text-center">
+        <p
+          class="text-black tracking-tighter leading-tight my-6 mx-2 text-justify"
+        >
+          <strong>ATENÇÃO!</strong>
+          A transação só será processada após inserir o código de autenticação.
+          Caso contrário não conseguiremos comprovar o seu depósito e não será
+          possível transferir os tokens para sua carteira.
+        </p>
         <button
           @click="$emit('close-modal')"
-          class="border-2 border-solid border-white-400 mt-2 font-semibold"
+          class="border-2 border-solid border-amber-400 mt-2"
         >
-          Não
+          Entendi
         </button>
-        <button
-          @click="$emit('go-to-lock')"
-          class="border-2 border-solid border-white-400 mt-2 font-semibold"
+      </div>
+    </div>
+    <div
+      class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm"
+      v-if="isRedirectModal"
+    >
+      <div class="modal px-5 text-center">
+        <p
+          class="text-black text-lg tracking-tighter leading-tight my-6 mx-2 text-justify font-semibold"
         >
-          Sim
-        </button>
+          Retomar a última compra?
+        </p>
+        <div class="flex justify-around items-center px-2">
+          <button
+            @click="$emit('close-modal')"
+            class="border-2 border-solid border-white-400 mt-2 font-semibold"
+          >
+            Não
+          </button>
+          <button
+            @click="$emit('go-to-lock')"
+            class="border-2 border-solid border-white-400 mt-2 font-semibold"
+          >
+            Sim
+          </button>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index cecf312..05bb3ac 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -119,46 +119,48 @@ onMounted(async () => {
 </script>
 
 <template>
-  <SearchComponent
-    v-if="flowStep == Step.Search"
-    @token-buy="confirmBuyClick"
-  />
-  <CustomAlert
-    v-if="flowStep == Step.Search && showModal"
-    :type="'redirect'"
-    @close-alert="showModal = false"
-    @go-to-lock="flowStep = Step.Buy"
-  />
-  <CustomAlert
-    v-if="
-      flowStep == Step.List && showBuyAlert && !loadingLock && !loadingRelease
-    "
-    :type="'buy'"
-    @close-alert="showBuyAlert = false"
-  />
-  <div v-if="flowStep == Step.Buy">
-    <QrCodeComponent
-      :pixTarget="String(pixTarget)"
-      :tokenValue="tokenAmount"
-      @pix-validated="releaseTransaction"
-      v-if="!loadingLock"
+  <div>
+    <SearchComponent
+      v-if="flowStep == Step.Search"
+      @token-buy="confirmBuyClick"
     />
-    <LoadingComponent
-      v-if="loadingLock"
-      :message="'A transação está sendo enviada para a rede'"
+    <CustomAlert
+      v-if="flowStep == Step.Search && showModal"
+      :type="'redirect'"
+      @close-alert="showModal = false"
+      @go-to-lock="flowStep = Step.Buy"
     />
-  </div>
-  <div v-if="flowStep == Step.List">
-    <div class="flex flex-col gap-10" v-if="!loadingRelease">
-      <BuyConfirmedComponent
-        :tokenAmount="tokenAmount"
-        :is-current-step="flowStep == Step.List"
-        @make-another-transaction="flowStep = Step.Search"
+    <CustomAlert
+      v-if="
+        flowStep == Step.List && showBuyAlert && !loadingLock && !loadingRelease
+      "
+      :type="'buy'"
+      @close-alert="showBuyAlert = false"
+    />
+    <div v-if="flowStep == Step.Buy">
+      <QrCodeComponent
+        :pixTarget="String(pixTarget)"
+        :tokenValue="tokenAmount"
+        @pix-validated="releaseTransaction"
+        v-if="!loadingLock"
+      />
+      <LoadingComponent
+        v-if="loadingLock"
+        :message="'A transação está sendo enviada para a rede'"
+      />
+    </div>
+    <div v-if="flowStep == Step.List">
+      <div class="flex flex-col gap-10" v-if="!loadingRelease">
+        <BuyConfirmedComponent
+          :tokenAmount="tokenAmount"
+          :is-current-step="flowStep == Step.List"
+          @make-another-transaction="flowStep = Step.Search"
+        />
+      </div>
+      <LoadingComponent
+        v-if="loadingRelease"
+        :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
       />
     </div>
-    <LoadingComponent
-      v-if="loadingRelease"
-      :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
-    />
   </div>
 </template>
diff --git a/src/views/ManageBidsView.vue b/src/views/ManageBidsView.vue
index 8ee3444..c5f9f76 100644
--- a/src/views/ManageBidsView.vue
+++ b/src/views/ManageBidsView.vue
@@ -86,30 +86,32 @@ watch(networkName, async () => {
 </script>
 
 <template>
-  <CustomAlert
-    v-if="showAlert"
-    :type="'withdraw'"
-    @close-alert="showAlert = false"
-  />
-  <div class="page">
-    <div class="header" v-if="!loadingWithdraw && !walletAddress">
-      Por Favor Conecte Sua Carteira
-    </div>
-    <div class="header" v-if="!loadingWithdraw && walletAddress">
-      Gerenciar Ofertas
-    </div>
-    <div class="w-full max-w-4xl">
-      <ListingComponent
-        v-if="!loadingWithdraw && walletAddress"
-        :valid-deposits="depositList"
-        :wallet-transactions="transactionsList"
-        :active-lock-amount="activeLockAmount"
-        @deposit-withdrawn="callWithdraw"
-      ></ListingComponent>
-      <LoadingComponent
-        v-if="loadingWithdraw"
-        :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
-      />
+  <div>
+    <CustomAlert
+      v-if="showAlert"
+      :type="'withdraw'"
+      @close-alert="showAlert = false"
+    />
+    <div class="page">
+      <div class="header" v-if="!loadingWithdraw && !walletAddress">
+        Por Favor Conecte Sua Carteira
+      </div>
+      <div class="header" v-if="!loadingWithdraw && walletAddress">
+        Gerenciar Ofertas
+      </div>
+      <div class="w-full max-w-4xl">
+        <ListingComponent
+          v-if="!loadingWithdraw && walletAddress"
+          :valid-deposits="depositList"
+          :wallet-transactions="transactionsList"
+          :active-lock-amount="activeLockAmount"
+          @deposit-withdrawn="callWithdraw"
+        ></ListingComponent>
+        <LoadingComponent
+          v-if="loadingWithdraw"
+          :message="'A transação está sendo enviada para a rede. Em breve os tokens serão depositados em sua carteira.'"
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/views/SellerView.vue b/src/views/SellerView.vue
index f4381d6..dfd53d9 100644
--- a/src/views/SellerView.vue
+++ b/src/views/SellerView.vue
@@ -61,29 +61,31 @@ const sendNetwork = async () => {
 </script>
 
 <template>
-  <div v-if="flowStep == Step.Sell">
-    <WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
-    <LoadingComponent
-      v-if="loading"
-      :message="'A transação está sendo enviada para a rede.'"
-    />
-  </div>
-  <CustomAlert
-    v-if="flowStep == Step.Sell && showAlert"
-    :type="'sell'"
-    @close-alert="showAlert = false"
-  />
-  <div v-if="flowStep == Step.Network">
-    <SendNetwork
-      :pixKey="pixKeyBuyer"
-      :offer="Number(offerValue)"
-      :selected-token="etherStore.selectedToken"
-      v-if="!loading"
-      @send-network="sendNetwork"
-    />
-    <LoadingComponent
-      v-if="loading"
-      :message="'A transação está sendo enviada para a rede.'"
+  <div>
+    <div v-if="flowStep == Step.Sell">
+      <WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
+      <LoadingComponent
+        v-if="loading"
+        :message="'A transação está sendo enviada para a rede.'"
+      />
+    </div>
+    <CustomAlert
+      v-if="flowStep == Step.Sell && showAlert"
+      :type="'sell'"
+      @close-alert="showAlert = false"
     />
+    <div v-if="flowStep == Step.Network">
+      <SendNetwork
+        :pixKey="pixKeyBuyer"
+        :offer="Number(offerValue)"
+        :selected-token="etherStore.selectedToken"
+        v-if="!loading"
+        @send-network="sendNetwork"
+      />
+      <LoadingComponent
+        v-if="loading"
+        :message="'A transação está sendo enviada para a rede.'"
+      />
+    </div>
   </div>
 </template>