apply network transition when change network on top bar

Co-authored-by: brunoedcf <brest.dallacosta@outlook.com>

src/components/TopBar.vue

@@ -2,7 +2,10 @@
 import { storeToRefs } from "pinia";
 import { useEtherStore } from "../store/ether";
 import { ref } from "vue";
+import { NetworkEnum } from "@/model/NetworkEnum";
 import blockchain from "../utils/blockchain";
+import ethereumImage from "../assets/ethereum.svg"
+import polygonImage from "../assets/polygon.svg"
 
 // Store reference
 const etherStore = useEtherStore();
@@ -44,6 +47,15 @@ const disconnectUser = () => {
 const closeMenu = () => {
   menuOpenToggle.value = false;
 };
+
+const getNetworkImage = (networkName: NetworkEnum) => {
+  let validImages = {
+    "Ethereum": ethereumImage,
+    "Polygon": polygonImage,
+  }
+
+  return validImages[networkName];
+}
 </script>
 
 <template>
@@ -59,15 +71,6 @@ const closeMenu = () => {
       <RouterLink :to="sellerView ? '/' : '/seller'" class="default-button">
         {{ sellerView ? "Quero comprar" : "Quero vender" }}
       </RouterLink>
-      <button
-        type="button"
-        v-if="!walletAddress"
-        class="border-amber-500 border-2 rounded default-button"
-        @click="connectMetaMask()"
-      >
-        Conectar carteira
-      </button>
-      <div v-if="walletAddress" class="account-info">
       <div class="flex flex-col">
         <div
           class="group top-bar-info cursor-pointer hover:bg-white"
@@ -78,7 +81,7 @@ const closeMenu = () => {
             ]
           "
           @mouseover="currencyMenuHoverToggle = true"
-            @mouseout="currencyMenuHoverToggle = false"
+          @mouseout="currencyMenuHoverToggle = false;"
           :style="{
             backgroundColor: currencyMenuOpenToggle
               ? '#F9F9F9'
@@ -87,7 +90,7 @@ const closeMenu = () => {
               : 'transparent',
           }"
         >
-            <img alt="Ethereum image" src="@/assets/ethereum.svg" />
+          <img alt="Choosed network image" :src="getNetworkImage(etherStore.networkName)" />
           <span
             class="default-text group-hover:text-gray-900"
             :style="{
@@ -98,7 +101,7 @@ const closeMenu = () => {
                 : 'rgb(249 250 251)',
             }"
           >
-              Ethereum
+            {{ etherStore.networkName }}
           </span>
           <img
             class="text-gray-900"
@@ -123,7 +126,10 @@ const closeMenu = () => {
         >
           <div class="mt-2">
             <div class="bg-white rounded-md z-10">
-                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
+              <div 
+                class="menu-button gap-2 px-4 rounded-md cursor-pointer"
+                @click="etherStore.setNetworkName(NetworkEnum.ethereum)"
+              >
                 <img
                   alt="Ethereum image"
                   width="20"
@@ -139,7 +145,10 @@ const closeMenu = () => {
               <div class="w-full flex justify-center">
                 <hr class="w-4/5" />
               </div>
-                <div class="menu-button gap-2 px-4 rounded-md cursor-pointer">
+              <div 
+                class="menu-button gap-2 px-4 rounded-md cursor-pointer"
+                @click="etherStore.setNetworkName(NetworkEnum.polygon)"
+              >
                 <img
                   alt="Polygon image"
                   width="20"
@@ -157,6 +166,15 @@ const closeMenu = () => {
           </div>
         </div>
       </div>
+      <button
+        type="button"
+        v-if="!walletAddress"
+        class="border-amber-500 border-2 rounded default-button"
+        @click="connectMetaMask()"
+      >
+        Conectar carteira
+      </button>
+      <div v-if="walletAddress" class="account-info">
         <div class="flex flex-col">
           <div
             class="top-bar-info cursor-pointer"

src/model/NetworkEnum.ts

@@ -0,0 +1,4 @@
+export enum NetworkEnum {
+    ethereum = "Ethereum",
+    polygon = "Polygon"
+};

src/store/ether.ts

@@ -1,9 +1,11 @@
+import { NetworkEnum } from "@/model/NetworkEnum";
 import { defineStore } from "pinia";
 
 export const useEtherStore = defineStore("ether", {
   state: () => ({
     walletAddress: "",
     balance: "",
+    networkName: NetworkEnum.ethereum,
     loadingLock: false,
     sellerView: false,
     // Depósitos válidos para compra
@@ -26,6 +28,9 @@ export const useEtherStore = defineStore("ether", {
     setBalance(balance: string) {
       this.balance = balance;
     },
+    setNetworkName(networkName: NetworkEnum) {
+      this.networkName = networkName;
+    },
     setLoadingLock(isLoadingLock: boolean) {
       this.loadingLock = isLoadingLock;
     },