From 6ba113ba86ce7df23fa94ff68985ba0be62bc811 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Wed, 18 Jan 2023 23:53:46 -0300
Subject: [PATCH] Add connect wallet button on seller view when wallet is not
 connected

---
 src/components/SellerSteps/WantSellComponent.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/SellerSteps/WantSellComponent.vue b/src/components/SellerSteps/WantSellComponent.vue
index 9b1ca63..4ac445c 100644
--- a/src/components/SellerSteps/WantSellComponent.vue
+++ b/src/components/SellerSteps/WantSellComponent.vue
@@ -3,8 +3,14 @@ import { ref } from "vue";
 import CustomButton from "../CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { decimalCount } from "@/utils/decimalCount";
+import { useEtherStore } from "@/store/ether";
+import { storeToRefs } from "pinia";
+import { connectProvider } from "@/blockchain/provider";
 
 // Reactive state
+const etherStore = useEtherStore();
+const { walletAddress } = storeToRefs(etherStore);
+
 const offer = ref<string | number>("");
 const pixKey = ref<string>("");
 
@@ -28,6 +34,11 @@ const handleInputEvent = (event: any): void => {
   }
   validDecimals.value = true;
 };
+
+const handleButtonClick = async (): Promise<void> => {
+  if (walletAddress.value) emit("approveTokens", { offer, pixKey });
+  else await connectProvider();
+};
 </script>
 
 <template>
@@ -90,8 +101,8 @@ const handleInputEvent = (event: any): void => {
         </div>
       </div>
       <CustomButton
-        :text="'Aprovar tokens'"
-        @buttonClicked="emit('approveTokens', { offer, pixKey })"
+        :text="walletAddress ? 'Aprovar tokens' : 'Conectar Carteira'"
+        @buttonClicked="handleButtonClick()"
       />
     </div>
   </div>