assembly/composables/useNetwork.ts

138 lines
3.5 KiB
TypeScript
Raw Normal View History

2021-09-06 22:36:09 +00:00
import { computed, watchEffect, ref, watch } from "@nuxtjs/composition-api";
2021-07-21 20:53:46 +00:00
import MainnetSVG from "~/assets/icons/mainnet.svg?inline";
import PolygonSVG from "~/assets/icons/polygon.svg?inline";
2021-07-27 21:43:51 +00:00
import { useModal } from "./useModal";
import { useNotification } from "./useNotification";
2021-09-03 13:59:09 +00:00
import { useWeb3 } from "@instadapp/vue-web3";
2021-09-06 22:36:09 +00:00
import { useCookies } from "./useCookies";
2021-07-21 20:53:46 +00:00
export enum Network {
Mainnet = "mainnet",
Polygon = "polygon"
}
2021-07-28 21:38:15 +00:00
export const networks = [
2021-07-21 20:53:46 +00:00
{ id: "mainnet", chainId: 1, name: "Mainnet", icon: MainnetSVG },
2021-08-18 20:20:45 +00:00
{ id: "polygon", chainId: 137, name: "Polygon", icon: PolygonSVG }
2021-07-21 20:53:46 +00:00
];
2021-08-14 12:30:55 +00:00
export const activeNetworkId = ref<Network>();
2021-07-28 21:38:15 +00:00
export const activeNetwork = computed(
2021-07-21 20:53:46 +00:00
() => networks.find(n => n.id === activeNetworkId.value) || networks[0]
);
export function useNetwork() {
2021-07-27 21:43:51 +00:00
const { showWarning } = useNotification();
2021-08-31 19:23:47 +00:00
const { account, chainId } = useWeb3();
2021-07-27 21:43:51 +00:00
const { showNetworksMismatchDialog } = useModal();
2021-09-06 22:36:09 +00:00
const { get: getCookie, set: setCookie } = useCookies();
2021-07-27 21:43:51 +00:00
const networkMismatch = computed(
2021-08-31 19:23:47 +00:00
() => chainId.value != activeNetwork.value?.chainId
2021-07-27 21:43:51 +00:00
);
const checkForNetworkMismatch = () => {
if (networkMismatch.value) {
showNetworksMismatchDialog();
}
};
async function switchToMainnet() {
if (window.ethereum) {
const chainData = {
chainId: "0x1"
};
try {
await window.ethereum.request({
method: "wallet_switchEthereumChain",
params: [chainData]
});
} catch (error) {
return Promise.reject(error);
}
}
}
async function switchToPolygon() {
if (window.ethereum) {
const chainId = "0x89";
try {
await window.ethereum.request({
method: "wallet_switchEthereumChain",
params: [{ chainId }]
});
} catch (switchError) {
// 4902 error code indicates that the chain has not been added to MetaMask.
if (switchError.code === 4902) {
try {
const chainData = {
chainId,
chainName: "Matic(Polygon) Mainnet",
nativeCurrency: {
name: "Matic",
symbol: "MATIC",
decimals: 18
},
rpcUrls: ["https://rpc-mainnet.matic.network"],
blockExplorerUrls: ["https://polygonscan.com/"]
};
await window.ethereum.request({
method: "wallet_addEthereumChain",
params: [chainData, account.value]
});
} catch (addError) {
return Promise.reject(addError);
}
} else {
return Promise.reject(switchError);
}
}
}
}
async function switchNetwork() {
try {
if (activeNetworkId.value === "mainnet") {
await switchToMainnet();
} else {
await switchToPolygon();
}
return Promise.resolve();
} catch (error) {
showWarning("Failed to switch network");
return Promise.reject(error);
}
}
watch(activeNetworkId, () => {
2021-09-06 22:36:09 +00:00
setCookie("network", activeNetworkId.value);
2021-08-18 20:20:45 +00:00
});
2021-07-27 21:43:51 +00:00
2021-09-06 22:36:09 +00:00
watchEffect(() => {
2021-08-18 20:20:45 +00:00
if (activeNetworkId.value) {
return;
}
2021-07-27 21:43:51 +00:00
2021-09-06 22:36:09 +00:00
const savedNetwork = getCookie("network");
if ((Object.values(Network) as any[]).includes(savedNetwork)) {
activeNetworkId.value = savedNetwork as Network;
} else {
activeNetworkId.value = Network.Mainnet;
}
2021-08-31 19:23:47 +00:00
// refreshWeb3()
2021-08-18 20:20:45 +00:00
});
2021-07-27 21:43:51 +00:00
2021-07-21 20:53:46 +00:00
return {
2021-07-27 21:43:51 +00:00
networkMismatch,
2021-07-21 20:53:46 +00:00
networks,
activeNetworkId,
2021-07-27 21:43:51 +00:00
activeNetwork,
switchNetwork,
checkForNetworkMismatch
2021-07-21 20:53:46 +00:00
};
}