diff --git a/src/contexts/WalletContext.tsx b/src/contexts/WalletContext.tsx index 6f06d70..cfbf1c5 100644 --- a/src/contexts/WalletContext.tsx +++ b/src/contexts/WalletContext.tsx @@ -10,7 +10,12 @@ import { import Web3Modal from 'web3modal'; import { providerOptions } from 'web3/providerOptions'; import { isSupportedChain } from 'web3/helpers'; -import { DEFAULT_NETWORK, NETWORK_NAMES } from 'web3/constants'; +import { + BICONOMY_CHAINS, + DEFAULT_NETWORK, + ENS_CHAINS, + NETWORK_NAMES +} from 'web3/constants'; import { switchChainOnMetaMask } from 'web3/metamask'; export type WalletContextType = { @@ -39,7 +44,9 @@ export const WalletContext = createContext({ chainId: null, address: null, ensName: null, - connectWallet: async () => { return }, + connectWallet: async () => { + return; + }, disconnect: () => undefined, isConnecting: true, isConnected: false, @@ -60,16 +67,8 @@ const isMetamaskProvider = ( ) => provider?.connection?.url === 'metamask'; export const WalletProvider: React.FC = ({ children }) => { - const [ - { - provider, - biconomy, - chainId, - address, - ensName - }, - setWalletState - ] = useState({}); + const [{ provider, biconomy, chainId, address, ensName }, setWalletState] = + useState({}); const isConnected: boolean = useMemo( () => !!provider && !!address && !!chainId, @@ -82,7 +81,7 @@ export const WalletProvider: React.FC = ({ children }) => { const disconnect = useCallback(async () => { web3Modal.clearCachedProvider(); setWalletState({}); - window.location.reload(); + // window.location.reload(); }, []); const addMetaMaskListeners = useCallback( @@ -99,7 +98,7 @@ export const WalletProvider: React.FC = ({ children }) => { /** * Set the EIP-1193 Compliant web3 Provider with Signer in context - * + * * @param prov - the eip1193 object being set */ const setWalletProvider = useCallback(async (_provider) => { @@ -118,25 +117,29 @@ export const WalletProvider: React.FC = ({ children }) => { } network = DEFAULT_NETWORK; } - const biconomy = new window.Biconomy(_provider, { - strictMode: true, - apiKey: process.env.REACT_APP_BICONOMY_API, - debug: true - }); - try { - new Promise((resolve, reject) => { - biconomy - .onEvent(biconomy.READY, () => resolve(0)) - .onEvent(biconomy.ERROR, (err: Error) => reject(err)); - }); - } catch (err) { - // TODO: handle switch to non-metatransactions gracefully - throw new Error('Biconomy failed to connect'); + const biconomy = BICONOMY_CHAINS.includes(network) + ? new window.Biconomy(_provider, { + strictMode: true, + apiKey: process.env.REACT_APP_BICONOMY_API, + debug: true + }) + : null; + if (biconomy) { + try { + new Promise((resolve, reject) => { + biconomy + .onEvent(biconomy.READY, () => resolve(0)) + .onEvent(biconomy.ERROR, (err: Error) => reject(err)); + }); + } catch (err) { + // TODO: handle switch to non-metatransactions gracefully + throw new Error('Biconomy failed to connect'); + } } // TODO: Move to better location - const isPolygonChain = network === 137 || network === 80001; + const supportsENS = ENS_CHAINS.includes(network); const signerAddress = await ethersProvider.getSigner().getAddress(); - const signerName = !isPolygonChain + const signerName = supportsENS ? await ethersProvider.lookupAddress(signerAddress) : ''; setWalletState({ diff --git a/src/web3/constants.ts b/src/web3/constants.ts index 7f4ac0e..5c27521 100644 --- a/src/web3/constants.ts +++ b/src/web3/constants.ts @@ -4,6 +4,7 @@ const { REACT_APP_MAINNET_RPC: MAINNET_RPC, REACT_APP_RINKEBY_RPC: RINKEBY_RPC, REACT_APP_GOERLI_RPC: GOERLI_RPC, + REACT_APP_BATTLESHIP_GAME_CONTRACT_LOCAL: BATTLESHIP_GAME_CONTRACT_LOCAL, REACT_APP_BATTLESHIP_GAME_CONTRACT_GOERLI: BATTLESHIP_GAME_CONTRACT_GOERLI, REACT_APP_BATTLESHIP_GAME_CONTRACT_MUMBAI: BATTLESHIP_GAME_CONTRACT_MUMBAI, REACT_APP_BATTLESHIP_GAME_CONTRACT_POLYGON: BATTLESHIP_GAME_CONTRACT_POLYGON, @@ -29,10 +30,13 @@ type CurrencyInfo = { export const BATTLESHIP_GAME_CONTRACT: { [key: number]: string } = { 5: BATTLESHIP_GAME_CONTRACT_GOERLI || '', 137: BATTLESHIP_GAME_CONTRACT_POLYGON || '', + 1337: BATTLESHIP_GAME_CONTRACT_LOCAL || '', 80001: BATTLESHIP_GAME_CONTRACT_MUMBAI || '', } export const TESTNET_CHAIN_IDS = [4, 5, 42, 80001]; +export const BICONOMY_CHAINS = [4, 5, 137, 80001]; +export const ENS_CHAINS = [4, 5]; export const RPC_URLS: StringInfo = { 1: MAINNET_RPC || 'TODO', @@ -45,6 +49,7 @@ export const EXPLORER_URLS: StringInfo = { 4: 'https://rinkeby.etherscan.io', 5: 'https://goerli.etherscan.io', 137: 'https://polygonscan.com', + 1337: '', 80001: 'https://mumbai.polygonscan.com' }; @@ -65,6 +70,10 @@ export const NETWORK_CURRENCIES: CurrencyInfo = { name: 'Polygon', symbol: 'MATIC' }, + 1337: { + name: 'Localhost', + symbol: 'ETH' + }, 80001: { name: 'Polygon Mumbai', symbol: 'MATIC' @@ -82,6 +91,7 @@ export const SUBGRAPH_URLS: StringInfo = { 4: 'https://api.thegraph.com/subgraphs/name/ian-bright/zk_battleship_rinkeby', 5: 'https://api.thegraph.com/subgraphs/name/ian-bright/battlezips_goerli', 137: 'https://api.thegraph.com/subgraphs/name/ian-bright/battlezips_polygon', //placeholder + 1337: 'http://127.0.0.1:8000/subgraphs/name/ian-bright/zk-battleship-subgraph/graphql', 80001: 'https://api.thegraph.com/subgraphs/name/jp4g/battlezips-mumbai' }; @@ -90,6 +100,7 @@ export const NETWORK_NAMES: StringInfo = { 4: 'Rinkeby Testnet', 5: 'Goerli Testnet', 137: 'Polygon Mainnet', + 1337: 'Localhost', 80001: 'Polygon Mumbai Testnet' }; @@ -108,7 +119,7 @@ export const IPFS_CIDS: { [key: string]: IpfsInfo } = { } } -export const SUPPORTED_NETWORKS: number[] = [5, 137, 80001]; +export const SUPPORTED_NETWORKS: number[] = [5, 137, 1337, 80001]; export const DEFAULT_NETWORK = SUPPORTED_NETWORKS[2]; export const ABI = abi;