assembly/composables/useNetwork.ts

132 lines
3.3 KiB
TypeScript
Raw Permalink Normal View History

2021-07-27 21:43:51 +00:00
import { computed, onMounted, ref, watch } from "@nuxtjs/composition-api";
import { useLocalStorage } from "vue-composable";
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";
import { useWeb3 } from "./useWeb3";
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();
const { account, networkName, refreshWeb3 } = useWeb3();
const { showNetworksMismatchDialog } = useModal();
const networkMismatch = computed(
() => networkName.value != activeNetworkId.value
);
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-08-18 20:20:45 +00:00
localStorage.setItem("network", activeNetworkId.value);
});
2021-07-27 21:43:51 +00:00
2021-08-18 20:20:45 +00:00
onMounted(() => {
if (activeNetworkId.value) {
return;
}
2021-07-27 21:43:51 +00:00
//@ts-ignore
2021-08-18 20:20:45 +00:00
activeNetworkId.value = localStorage.getItem("network") || "mainnet";
2021-07-27 21:43:51 +00:00
2021-08-18 20:20:45 +00:00
refreshWeb3();
});
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
};
}