Fixed some reactivity for network selected.
This commit is contained in:
parent
0186afe971
commit
1ec4780e14
@ -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);
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
});
|
||||
|
||||
|
@ -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,
|
||||
|
@ -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",
|
||||
|
Loading…
x
Reference in New Issue
Block a user