Merge pull request #16 from liftlearning/toggle-want-to-button

Toggle Want to (Buy/Sell) button

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 {

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;
     },

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>("");

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);