From 163146a7f5d01065036b55ea85be120e3779269c Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Mon, 2 Jan 2023 19:11:43 -0300
Subject: [PATCH] add state to verify if is seller view and toggle want to buy
 or sell button on top bar

---
 src/components/TopBar.vue | 15 +++++----------
 src/store/ether.ts        |  4 ++++
 src/views/HomeView.vue    |  4 +++-
 src/views/SellerView.vue  |  4 ++++
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index c10585d..255f033 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import router from "@/router";
 import { storeToRefs } from "pinia";
 import { useEtherStore } from "../store/ether";
 import { ref } from "vue";
@@ -8,7 +7,7 @@ import blockchain from "../utils/blockchain";
 // Store reference
 const etherStore = useEtherStore();
 
-const { walletAddress, balance } = storeToRefs(etherStore);
+const { walletAddress, balance, sellerView } = storeToRefs(etherStore);
 
 const menuOpenToggle = ref<boolean>(false);
 const menuHoverToggle = ref<boolean>(false);
@@ -57,13 +56,9 @@ const closeMenu = () => {
       height="75"
     />
     <div class="flex gap-4 items-center">
-      <button
-        type="button"
-        class="default-button"
-        v-on:click="router.push('/seller')"
-      >
-        Quero vender
-      </button>
+      <RouterLink :to="sellerView ? '/' : '/seller'" class="default-button">
+        {{ sellerView ? "Quero comprar" : "Quero vender" }}
+      </RouterLink>
       <button
         type="button"
         v-if="!walletAddress"
@@ -259,7 +254,7 @@ header {
 }
 
 .default-button {
-  @apply px-4 py-2 rounded text-gray-50 font-semibold text-base;
+  @apply px-4 py-2 rounded text-gray-50 font-semibold text-base hover:bg-transparent;
 }
 
 .account-info {
diff --git a/src/store/ether.ts b/src/store/ether.ts
index b4c0556..55eefca 100644
--- a/src/store/ether.ts
+++ b/src/store/ether.ts
@@ -5,6 +5,7 @@ export const useEtherStore = defineStore("ether", {
     walletAddress: "",
     balance: "",
     loadingLock: false,
+    sellerView: false,
     // Depósitos válidos para compra
     depositsValidList: [] as any[],
     // Depósitos adicionados na blockchain
@@ -28,6 +29,9 @@ export const useEtherStore = defineStore("ether", {
     setLoadingLock(isLoadingLock: boolean) {
       this.loadingLock = isLoadingLock;
     },
+    setSellerView(sellerView: boolean) {
+      this.sellerView = sellerView;
+    },
     setDepositsValidList(depositsValidList: any[]) {
       this.depositsValidList = depositsValidList;
     },
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 46038c2..230582e 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -15,8 +15,10 @@ enum Step {
   List,
 }
 
-// States
 const etherStore = useEtherStore();
+etherStore.setSellerView(false);
+
+// States
 const { loadingLock, walletAddress, locksAddedList } = storeToRefs(etherStore);
 const flowStep = ref<Step>(Step.Search);
 const pixTarget = ref<string>("");
diff --git a/src/views/SellerView.vue b/src/views/SellerView.vue
index caff755..266c319 100644
--- a/src/views/SellerView.vue
+++ b/src/views/SellerView.vue
@@ -5,6 +5,7 @@ import ValidationComponent from "../components/LoadingComponent.vue";
 import blockchain from "../utils/blockchain";
 
 import { ref } from "vue";
+import { useEtherStore } from "@/store/ether";
 
 enum Step {
   Search,
@@ -12,6 +13,9 @@ enum Step {
   Network,
 }
 
+const etherStore = useEtherStore();
+etherStore.setSellerView(true);
+
 const flowStep = ref<Step>(Step.Sell);
 const loading = ref<boolean>(false);