Fixed some reactivity for network selected.

This commit is contained in:
Filipe Soccol 2025-04-15 17:56:32 -03:00
parent 0186afe971
commit 1ec4780e14
5 changed files with 52 additions and 45 deletions

View File

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

View File

@ -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

View File

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

View File

@ -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,

View File

@ -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",