From 4ef5308f369650f8ba3f9370915ae588084e3dda Mon Sep 17 00:00:00 2001 From: brunoedcf Date: Fri, 13 Jan 2023 14:12:11 -0300 Subject: [PATCH] Adding request to user change network in wallet --- src/blockchain/addresses.ts | 56 +++++++++++++++ src/blockchain/provider.ts | 68 +++++++++++-------- src/blockchain/wallet.ts | 43 ++++++------ src/components/TopBar.vue | 15 ++-- src/utils/blockchain.ts | 11 ++- src/utils/smart_contract_files/goerli.json | 8 +++ .../smart_contract_files/polygon-mumbai.json | 8 +++ 7 files changed, 145 insertions(+), 64 deletions(-) create mode 100644 src/blockchain/addresses.ts create mode 100644 src/utils/smart_contract_files/goerli.json create mode 100644 src/utils/smart_contract_files/polygon-mumbai.json diff --git a/src/blockchain/addresses.ts b/src/blockchain/addresses.ts new file mode 100644 index 0000000..57cd4ac --- /dev/null +++ b/src/blockchain/addresses.ts @@ -0,0 +1,56 @@ +import { useEtherStore } from "@/store/ether"; +import { NetworkEnum } from "@/model/NetworkEnum"; + +const getTokenAddress = (): string => { + const etherStore = useEtherStore(); + + const possibleTokenAddresses: { [key: string]: string } = { + Ethereum: "0x294003F602c321627152c6b7DED3EAb5bEa853Ee", + Polygon: "0x294003F602c321627152c6b7DED3EAb5bEa853Ee", + Localhost: "0x5FbDB2315678afecb367f032d93F642f64180aa3", + }; + + return possibleTokenAddresses[etherStore.networkName]; +}; + +const getProviderUrl = (): string => { + const etherStore = useEtherStore(); + + const possibleProvidersUrls: { [key: string]: string } = { + Ethereum: import.meta.env.VITE_GOERLI_API_URL, + Polygon: import.meta.env.VITE_MUMBAI_API_URL, + Localhost: import.meta.env.VITE_GOERLI_API_URL, + }; + + return possibleProvidersUrls[etherStore.networkName]; +}; + +const possibleChains: { [key: string]: NetworkEnum } = { + "0x5": NetworkEnum.ethereum, + "5": NetworkEnum.ethereum, + "0x13881": NetworkEnum.polygon, + "80001": NetworkEnum.polygon, + "0x7a69": NetworkEnum.localhost, + "31337": NetworkEnum.localhost, +}; + +const network2Chain: { [key: string]: string } = { + Ethereum: "0x5", + Polygon: "0x13881", + Localhost: "0x7a69", +}; + +const isPossibleNetwork = (networkChain: string): boolean => { + if (Object.keys(possibleChains).includes(networkChain)) { + return true; + } + return false; +}; + +export { + getTokenAddress, + getProviderUrl, + possibleChains, + network2Chain, + isPossibleNetwork, +}; diff --git a/src/blockchain/provider.ts b/src/blockchain/provider.ts index 1f15297..3fd19be 100644 --- a/src/blockchain/provider.ts +++ b/src/blockchain/provider.ts @@ -1,19 +1,14 @@ -import { ethers } from "ethers"; import { useEtherStore } from "@/store/ether"; -import { NetworkEnum } from "@/model/NetworkEnum"; + import { updateWalletStatus } from "./wallet"; +import { + getProviderUrl, + isPossibleNetwork, + possibleChains, + network2Chain, +} from "./addresses"; -const getProviderUrl = (): string => { - const etherStore = useEtherStore(); - - const possibleProvidersUrls: { [key: string]: string } = { - Ethereum: import.meta.env.VITE_GOERLI_API_URL, - Polygon: import.meta.env.VITE_MUMBAI_API_URL, - Localhost: import.meta.env.VITE_GOERLI_API_URL, - }; - - return possibleProvidersUrls[etherStore.networkName]; -}; +import { ethers } from "ethers"; const getProvider = (): | ethers.providers.Web3Provider @@ -27,21 +22,17 @@ const getProvider = (): return new ethers.providers.Web3Provider(connection); // metamask provider }; -const connectProvider = async (): Promise => { +const connectProvider = async (): Promise => { const window_ = window as any; const connection = window_.ethereum; const provider = getProvider(); if (!(provider instanceof ethers.providers.Web3Provider)) { window.alert("Please, connect to metamask extension"); - return null; + return; } await updateWalletStatus(); - // await updateValidDeposits(); - // await updateDepositAddedEvents(); - // await updateLockAddedEvents(); - // await updateLockReleasedEvents(); listenToNetworkChange(connection); listenToWalletChange(connection); @@ -49,24 +40,43 @@ const connectProvider = async (): Promise => { const listenToWalletChange = (connection: any): void => { connection.on("accountsChanged", async () => { - await updateWalletStatus(); + console.log("Changed account!"); + updateWalletStatus(); }); }; const listenToNetworkChange = (connection: any) => { const etherStore = useEtherStore(); - const possibleNetworks: { [key: string]: NetworkEnum } = { - "0x5": NetworkEnum.ethereum, - "0x13881": NetworkEnum.polygon, - "0x7a69": NetworkEnum.localhost, - }; - connection.on("chainChanged", (networkChain: string) => { - if (Object.keys(possibleNetworks).includes(networkChain)) { - etherStore.setNetworkName(possibleNetworks[networkChain]); + console.log("Changed network!"); + + if (isPossibleNetwork(networkChain)) { + etherStore.setNetworkName(possibleChains[networkChain]); + updateWalletStatus(); + } else { + window.alert("Invalid chain!"); } }); }; -export { getProvider, connectProvider, listenToNetworkChange }; +const requestNetworkChange = async (network: string): Promise => { + try { + const window_ = window as any; + await window_.ethereum.request({ + method: "wallet_switchEthereumChain", + params: [{ chainId: network2Chain[network] }], // chainId must be in hexadecimal numbers + }); + } catch { + return false; + } + + return true; +}; + +export { + getProvider, + connectProvider, + listenToNetworkChange, + requestNetworkChange, +}; diff --git a/src/blockchain/wallet.ts b/src/blockchain/wallet.ts index bb8ac96..5aecd97 100644 --- a/src/blockchain/wallet.ts +++ b/src/blockchain/wallet.ts @@ -1,38 +1,33 @@ -import { ethers } from "ethers"; -import { getProvider } from "./provider"; -import blockchain from "../utils/blockchain"; import { useEtherStore } from "@/store/ether"; +import { getProvider } from "./provider"; +import { getTokenAddress, possibleChains } from "./addresses"; + import mockToken from "../utils/smart_contract_files/MockToken.json"; -import addresses from "../utils/smart_contract_files/localhost.json"; + +import { ethers } from "ethers"; +import { formatEther } from "ethers/lib/utils"; const updateWalletStatus = async () => { const etherStore = useEtherStore(); - const provider = getProvider(); + const provider = getProvider(); const signer = provider.getSigner(); - const contract = new ethers.Contract(addresses.token, mockToken.abi, signer); + + const { chainId } = await provider.getNetwork(); + etherStore.setNetworkName(possibleChains[chainId]); + + const mockTokenContract = new ethers.Contract( + getTokenAddress(), + mockToken.abi, + signer + ); const walletAddress = await provider.send("eth_requestAccounts", []); + const balance = await mockTokenContract.balanceOf(walletAddress[0]); - const balance = await contract.balanceOf(walletAddress[0]); - etherStore.setBalance(blockchain.formatBigNumber(balance)); + etherStore.setBalance(formatEther(balance)); etherStore.setWalletAddress(ethers.utils.getAddress(walletAddress[0])); }; -const updateWalletBalance = async () => { - const etherStore = useEtherStore(); - const provider = getProvider(); - - if (!provider) return; - - const signer = provider.getSigner(); - const contract = new ethers.Contract(addresses.token, mockToken.abi, signer); - - const walletAddress = await provider.send("eth_requestAccounts", []); - - const balance = await contract.balanceOf(walletAddress[0]); - etherStore.setBalance(blockchain.formatBigNumber(balance)); -}; - -export { updateWalletStatus, updateWalletBalance }; +export { updateWalletStatus }; diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue index 813027f..4ee89bc 100644 --- a/src/components/TopBar.vue +++ b/src/components/TopBar.vue @@ -3,7 +3,7 @@ import { storeToRefs } from "pinia"; import { useEtherStore } from "../store/ether"; import { ref } from "vue"; import { NetworkEnum } from "@/model/NetworkEnum"; -import { connectProvider } from "../blockchain/provider"; +import { connectProvider, requestNetworkChange } from "../blockchain/provider"; import ethereumImage from "../assets/ethereum.svg"; import polygonImage from "../assets/polygon.svg"; @@ -48,6 +48,11 @@ const closeMenu = () => { menuOpenToggle.value = false; }; +const networkChange = async (network: NetworkEnum) => { + const change = await requestNetworkChange(network); + if (change) etherStore.setNetworkName(network); +}; + const getNetworkImage = (networkName: NetworkEnum) => { let validImages = { Ethereum: ethereumImage, @@ -132,7 +137,7 @@ const getNetworkImage = (networkName: NetworkEnum) => {
Ethereum image {
Polygon image {
Localhost {
- MBRZ: {{ formatWalletBalance() }} + MBRL: {{ formatWalletBalance() }}
diff --git a/src/utils/blockchain.ts b/src/utils/blockchain.ts index 28056f6..5d2c2f6 100644 --- a/src/utils/blockchain.ts +++ b/src/utils/blockchain.ts @@ -8,7 +8,6 @@ import addresses from "./smart_contract_files/localhost.json"; // Mock wallets import import { wallets } from "./smart_contract_files/wallets.json"; import { getProvider } from "../blockchain/provider"; -import { updateWalletBalance, updateWalletStatus } from "../blockchain/wallet"; // Split tokens between wallets in wallets.json const splitTokens = async () => { @@ -28,7 +27,7 @@ const splitTokens = async () => { ethers.utils.parseEther("4000000.0") ); await tx.wait(); - updateWalletStatus(); + // updateWalletStatus(); } }; @@ -268,7 +267,7 @@ const addDeposit = async (tokenQty: Number, pixKey: String) => { ); await deposit.wait(); - await updateWalletStatus(); + // await updateWalletStatus(); await updateDepositAddedEvents(); await updateValidDeposits(); }; @@ -301,7 +300,7 @@ const mockDeposit = async (tokenQty: Number, pixKey: String) => { ); await deposit.wait(); - await updateWalletStatus(); + // await updateWalletStatus(); await updateValidDeposits(); await updateDepositAddedEvents(); }; @@ -316,7 +315,7 @@ const cancelDeposit = async (depositId: BigNumber): Promise => { const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer); await contract.cancelDeposit(depositId); - await updateWalletBalance(); + // await updateWalletBalance(); await updateValidDeposits(); return true; }; @@ -331,7 +330,7 @@ const withdrawDeposit = async (depositId: BigNumber): Promise => { const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer); await contract.withdraw(depositId, []); - await updateWalletBalance(); + // await updateWalletBalance(); await updateValidDeposits(); return true; }; diff --git a/src/utils/smart_contract_files/goerli.json b/src/utils/smart_contract_files/goerli.json new file mode 100644 index 0000000..53cafaa --- /dev/null +++ b/src/utils/smart_contract_files/goerli.json @@ -0,0 +1,8 @@ +{ + "signers": [ + "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266", + "0x70997970C51812dc3A010C7d01b50e0d17dc79C8" + ], + "p2pix": "0x5f3EFA9A90532914545CEf527C530658af87e196", + "token": "0x294003F602c321627152c6b7DED3EAb5bEa853Ee" +} \ No newline at end of file diff --git a/src/utils/smart_contract_files/polygon-mumbai.json b/src/utils/smart_contract_files/polygon-mumbai.json new file mode 100644 index 0000000..53cafaa --- /dev/null +++ b/src/utils/smart_contract_files/polygon-mumbai.json @@ -0,0 +1,8 @@ +{ + "signers": [ + "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266", + "0x70997970C51812dc3A010C7d01b50e0d17dc79C8" + ], + "p2pix": "0x5f3EFA9A90532914545CEf527C530658af87e196", + "token": "0x294003F602c321627152c6b7DED3EAb5bEa853Ee" +} \ No newline at end of file