From 1ec4780e144d1d8a9d41d74a7b7c57b63b2f13af Mon Sep 17 00:00:00 2001
From: Filipe Soccol <filipe.soccol@gmail.com>
Date: Tue, 15 Apr 2025 17:56:32 -0300
Subject: [PATCH] Fixed some reactivity for network selected.

---
 src/blockchain/__tests__/addresses.spec.ts | 14 +++----
 src/components/ToasterComponent.vue        | 44 +++++-----------------
 src/components/TopBar/TopBar.vue           | 15 +++++++-
 src/composables/useUser.ts                 |  9 +++--
 src/model/Networks.ts                      | 15 ++++++++
 5 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/src/blockchain/__tests__/addresses.spec.ts b/src/blockchain/__tests__/addresses.spec.ts
index 8ea10ec..82ebbc8 100644
--- a/src/blockchain/__tests__/addresses.spec.ts
+++ b/src/blockchain/__tests__/addresses.spec.ts
@@ -26,7 +26,7 @@ describe("addresses.ts functions", () => {
 
   it("getTokenAddress Ethereum", () => {
     const user = useUser();
-    user.setNetworkId(NetworkEnum.sepolia);
+    user.setNetworkId(11155111);
     expect(getTokenAddress(TokenEnum.BRZ)).toBe(
       "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
     );
@@ -34,7 +34,7 @@ describe("addresses.ts functions", () => {
 
   it("getTokenAddress Rootstock", () => {
     const user = useUser();
-    user.setNetworkId(NetworkEnum.rootstock);
+    user.setNetworkId(30);
     expect(getTokenAddress(TokenEnum.BRZ)).toBe(
       "0xfE841c74250e57640390f46d914C88d22C51e82e"
     );
@@ -48,7 +48,7 @@ describe("addresses.ts functions", () => {
 
   it("getP2PixAddress Ethereum", () => {
     const user = useUser();
-    user.setNetworkId(NetworkEnum.sepolia);
+    user.setNetworkId(11155111);
     expect(getP2PixAddress()).toBe(
       "0x2414817FF64A114d91eCFA16a834d3fCf69103d4"
     );
@@ -56,7 +56,7 @@ describe("addresses.ts functions", () => {
 
   it("getP2PixAddress Rootstock", () => {
     const user = useUser();
-    user.setNetworkId(NetworkEnum.rootstock);
+    user.setNetworkId(30);
     expect(getP2PixAddress()).toBe(
       "0x98ba35eb14b38D6Aa709338283af3e922476dE34"
     );
@@ -70,13 +70,13 @@ describe("addresses.ts functions", () => {
 
   it("getProviderUrl Ethereum", () => {
     const user = useUser();
-    user.setNetworkId(NetworkEnum.sepolia);
+    user.setNetworkId(11155111);
     expect(getProviderUrl()).toBe(import.meta.env.VITE_GOERLI_API_URL);
   });
 
   it("getProviderUrl Rootstock", () => {
     const user = useUser();
-    user.setNetworkId(NetworkEnum.rootstock);
+    user.setNetworkId(30);
     expect(getProviderUrl()).toBe(import.meta.env.VITE_ROOTSTOCK_API_URL);
   });
 
@@ -86,7 +86,7 @@ describe("addresses.ts functions", () => {
 
   it("isPossibleNetwork Returns", () => {
     const user = useUser();
-    user.setNetworkId(NetworkEnum.sepolia);
+    user.setNetworkId(11155111);
     expect(isPossibleNetwork(0x5 as NetworkEnum)).toBe(true);
     expect(isPossibleNetwork(5 as NetworkEnum)).toBe(true);
     expect(isPossibleNetwork(0x13881 as NetworkEnum)).toBe(true);
diff --git a/src/components/ToasterComponent.vue b/src/components/ToasterComponent.vue
index 31f23e7..6e9fb18 100644
--- a/src/components/ToasterComponent.vue
+++ b/src/components/ToasterComponent.vue
@@ -2,42 +2,19 @@
 import { ref, computed, watch, onMounted } from "vue";
 import { useOnboard } from "@web3-onboard/vue";
 import { Networks } from "../model/Networks";
-import { NetworkEnum } from "../model/NetworkEnum";
-import type { PropType } from "vue";
 import { useUser } from "@/composables/useUser";
 
-const props = defineProps({
-  targetNetwork: {
-    type: Object as PropType<NetworkEnum>,
-    default: NetworkEnum.sepolia,
-  },
-});
-
 const { connectedWallet } = useOnboard();
 const user = useUser();
-const { networkName } = user;
+const { networkId, networkName } = user;
 
 const isWrongNetwork = ref(false);
-const currentNetworkName = ref("");
-const targetNetworkName = computed(
-  () => Networks[props.targetNetwork as keyof typeof Networks].chainName
-);
+const targetNetworkName = computed(() => Networks[networkName.value].chainName);
 
 const checkNetwork = () => {
   if (connectedWallet.value) {
     const chainId = connectedWallet.value.chains[0].id;
-    const targetChainId =
-      Networks[props.targetNetwork as keyof typeof Networks].chainId;
-
-    isWrongNetwork.value =
-      chainId.toLowerCase() !== targetChainId.toLowerCase();
-
-    // Find current network name
-    Object.entries(Networks).forEach(([key, network]) => {
-      if (network.chainId === chainId) {
-        currentNetworkName.value = network.chainName;
-      }
-    });
+    isWrongNetwork.value = Number(chainId) !== networkId.value;
   } else {
     isWrongNetwork.value = false; // No wallet connected yet
   }
@@ -46,11 +23,13 @@ const checkNetwork = () => {
 const switchNetwork = async () => {
   try {
     if (connectedWallet.value && connectedWallet.value.provider) {
-      const targetChainId =
-        Networks[props.targetNetwork as keyof typeof Networks].chainId;
       await connectedWallet.value.provider.request({
         method: "wallet_switchEthereumChain",
-        params: [{ chainId: targetChainId }],
+        params: [
+          {
+            chainId: Networks[networkName.value].chainId,
+          },
+        ],
       });
     }
   } catch (error) {
@@ -59,8 +38,8 @@ const switchNetwork = async () => {
 };
 
 onMounted(checkNetwork);
-watch(connectedWallet, checkNetwork, { immediate: true });
-watch(networkName, checkNetwork, { immediate: true });
+watch(connectedWallet, checkNetwork);
+watch(networkId, checkNetwork, { immediate: true });
 </script>
 
 <template>
@@ -71,9 +50,6 @@ watch(networkName, checkNetwork, { immediate: true });
     >
       <div>
         <span class="font-bold">Wrong network!</span>
-        <span v-if="currentNetworkName"
-          >You are connected to {{ currentNetworkName }}.</span
-        >
         <span> Please switch to {{ targetNetworkName }}.</span>
       </div>
       <button
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index eb98578..6872b1c 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -16,7 +16,7 @@ import { connectProvider } from "@/blockchain/provider";
 
 // Use the new composable
 const user = useUser();
-const { walletAddress, sellerView } = user;
+const { walletAddress, sellerView, networkId } = user;
 
 const menuOpenToggle = ref<boolean>(false);
 const infoMenuOpenToggle = ref<boolean>(false);
@@ -40,6 +40,19 @@ watch(connectedWallet, async (newVal: any) => {
 });
 
 watch(connectedChain, (newVal: any) => {
+  // Check if connected chain is valid, otherwise default to Sepolia (NetworkEnum.SEPOLIA)
+  if (
+    !newVal ||
+    !Object.values(Networks).some(
+      (network) => Number(network.chainId) === Number(newVal.id)
+    )
+  ) {
+    console.log(
+      "Invalid or unsupported network detected, defaulting to Sepolia"
+    );
+    user.setNetworkId(user.networkId.value);
+    return;
+  }
   user.setNetworkId(newVal?.id);
 });
 
diff --git a/src/composables/useUser.ts b/src/composables/useUser.ts
index 2f43789..cfe7c9c 100644
--- a/src/composables/useUser.ts
+++ b/src/composables/useUser.ts
@@ -2,9 +2,11 @@ import { ref } from "vue";
 import { NetworkEnum, TokenEnum } from "../model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { Participant } from "../utils/bbPay";
+import { NetworkById } from "@/model/Networks";
 
 const walletAddress = ref("");
 const balance = ref("");
+const networkId = ref(11155111);
 const networkName = ref(NetworkEnum.sepolia);
 const selectedToken = ref(TokenEnum.BRZ);
 const loadingLock = ref(false);
@@ -29,9 +31,9 @@ export function useUser() {
     selectedToken.value = token;
   };
 
-  const setNetworkId = (network: NetworkEnum) => {
-    console.log("setNetworkId", network);
-    networkName.value = Number(network);
+  const setNetworkId = (network: string | number) => {
+    networkName.value = NetworkById(network) || NetworkEnum.sepolia;
+    networkId.value = Number(network);
   };
 
   const setLoadingLock = (isLoading: boolean) => {
@@ -73,6 +75,7 @@ export function useUser() {
     // State
     walletAddress,
     balance,
+    networkId,
     networkName,
     selectedToken,
     loadingLock,
diff --git a/src/model/Networks.ts b/src/model/Networks.ts
index 44660a9..5633124 100644
--- a/src/model/Networks.ts
+++ b/src/model/Networks.ts
@@ -1,5 +1,20 @@
 import { NetworkEnum } from "@/model/NetworkEnum";
 
+export const NetworkById = (
+  chainId: string | number
+): NetworkEnum | undefined => {
+  const normalizedChainId =
+    typeof chainId === "number" ? chainId : Number(chainId);
+
+  for (const [network, details] of Object.entries(Networks)) {
+    if (Number(details.chainId) === normalizedChainId) {
+      return network as unknown as NetworkEnum;
+    }
+  }
+
+  return undefined;
+};
+
 export const Networks = {
   [NetworkEnum.sepolia]: {
     chainId: "0xAA36A7",