save

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<WalletContextType>({
   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<WalletStateType>({});
+  const [{ provider, biconomy, chainId, address, ensName }, setWalletState] =
+    useState<WalletStateType>({});
 
   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({

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;