use web3modal for polygon interactions

app/assets/v2/js/cart-ethereum-polygon.js

@@ -247,10 +247,10 @@ Vue.component('grantsCartEthereumPolygon', {
           ga('send', 'event', 'Grant Checkout', 'click', 'Person');
         }
 
-        if (web3.currentProvider && !web3.currentProvider.isMetaMask) {
-          _alert('Polygon Checkout is not supported on this wallet. Select another checkout option or switch to MetaMask.', 'danger');
-          return;
-        }
+        // if (web3.currentProvider && !web3.currentProvider.isMetaMask) {
+        //   _alert('Polygon Checkout is not supported on this wallet. Select another checkout option or switch to MetaMask.', 'danger');
+        //   return;
+        // }
 
         // Throw if invalid Gitcoin contribution percentage
         if (Number(this.gitcoinFactorRaw) < 0 || Number(this.gitcoinFactorRaw) > 99) {
@@ -266,8 +266,8 @@ Vue.component('grantsCartEthereumPolygon', {
           }
         });
 
-        if (!this.ethereum?.selectedAddress) {
-          _alert('Please unlock MetaMask to proceed with Polygon checkout', 'danger');
+        if (!selectedAccount) {
+          _alert('Please unlock your wallet provider to proceed with Polygon checkout', 'danger');
           return;
         }
 
@@ -293,7 +293,7 @@ Vue.component('grantsCartEthereumPolygon', {
         }
 
         indicateMetamaskPopup();
-        await setupPolygon(network = appCart.$refs.cart.network);
+        await switchChain(appCart.$refs.cart.network === 'mainnet' ? 137 : 80001);
 
         // Token approvals and balance checks from bulk checkout contract
         // (just checks data, does not execute approvals)

app/assets/v2/js/cart.js

@@ -1075,27 +1075,16 @@ Vue.component('grants-cart', {
       this.sendPaymentInfoEvent('eth');
       // Prompt web3 login if not connected
       if (!provider) {
-        await await onConnect();
+        await onConnect();
       }
 
       let networkName = getDataChains(this.networkId, 'chainId')[0] && getDataChains(this.networkId, 'chainId')[0].network;
 
-      if (networkName == 'mainnet' && this.networkId !== '1') {
-        // User MetaMask must be connected to Ethereum mainnet
-        try {
-          await ethereum.request({
-            method: 'wallet_switchEthereumChain',
-            params: [{ chainId: '0x1' }]
-          });
-        } catch (switchError) {
-          if (switchError.code === 4001) {
-            throw new Error('Please connect MetaMask to Ethereum network.');
-          } else if (switchError.code === -32002) {
-            throw new Error('Please respond to a pending MetaMask request.');
-          } else {
-            console.error(switchError);
-          }
-        }
+      // User's wallet must be connected to Ethereum mainnet or rinkeby
+      if (networkName == 'mainnet') {
+        await switchChain(1);
+      } else {
+        await switchChain(4);
       }
 
       if (typeof ga !== 'undefined') {
@@ -1260,19 +1249,11 @@ Vue.component('grants-cart', {
       }
     },
 
-    resetNetwork() {
-      if (this.nativeCurrency == 'MATIC') {
-        this.network = this.network == 'testnet' ? 'rinkeby' : 'mainnet';
-        this.networkId = this.networkId == '80001' ? '4' : '1';
-      }
-    },
-
     // Standard L1 checkout flow
     async standardCheckout() {
       try {
         // Setup -----------------------------------------------------------------------------------
         this.activeCheckout = 'standard';
-        this.resetNetwork();
         const userAddress = await this.initializeStandardCheckout();
 
         // Token approvals and balance checks (just checks data, does not execute approavals)

app/assets/v2/js/grants/ingest-missing-contributions.js

@@ -140,15 +140,11 @@ Vue.component('grants-ingest-contributions', {
           throw new Error('Please connect a wallet');
         }
 
-        if (!window.ethereum) {
-          throw new Error('Metamask is either not installed or blocked by a third party');
-        }
-
         // Parse out provided form inputs and verify them, but bypass address checks if user is staff
         ({ txHash, userAddress, checkoutType } = formParams);
 
         if (checkoutType === 'eth_polygon') {
-          await setupPolygon('mainnet'); // handles switching to polygon network + adding network config if doesn't exist
+          await switchChain(networkName === 'mainnet' ? 137 : 80001); // handles switching to polygon network + adding network config if doesn't exist
         }
 
         // If user entered an address, verify that it matches the user's connected wallet address

app/assets/v2/js/wallet.js

@@ -234,44 +234,43 @@ function displayProvider() {
   createImg(image);
 }
 
-async function setupPolygon(network = networkName) {
-  // Connect to Polygon network with MetaMask
-  let chainId = network === 'mainnet' ? '0x89' : '0x13881';
-  let rpcUrl = network === 'mainnet' ? 'https://polygon-rpc.com'
-    : 'https://rpc-mumbai.matic.today';
+async function switchChain(id) {
+  const web3 = new Web3(provider);
+  const providerName = window.Web3Modal.getInjectedProviderName();
+  const chainInfo = getDataChains(Number(id), 'chainId')[0];
+  const chainId = Web3.utils.numberToHex(chainInfo.chainId);
 
   try {
-    await ethereum.request({
+    await web3.currentProvider.request({
       method: 'wallet_switchEthereumChain',
       params: [{ chainId }]
     });
   } catch (switchError) {
     // This error code indicates that the chain has not been added to MetaMask
     if (switchError.code === 4902) {
-      let networkText = network === 'rinkeby' || network === 'goerli' ||
-        network === 'ropsten' || network === 'kovan' ? 'testnet' : network;
 
       try {
-        await ethereum.request({
+        await web3.currentProvider.request({
           method: 'wallet_addEthereumChain',
           params: [{
             chainId,
-            rpcUrls: [rpcUrl],
-            chainName: `Polygon ${networkText.replace(/\b[a-z]/g, (x) => x.toUpperCase())}`,
-            nativeCurrency: { name: 'MATIC', symbol: 'MATIC', decimals: 18 }
+            rpcUrls: chainInfo.rpc,
+            chainName: chainInfo.name,
+            nativeCurrency: chainInfo.nativeCurrency,
+            blockExplorerUrls: chainInfo.explorers && chainInfo.explorers.map(e => e.url)
           }]
         });
       } catch (addError) {
         if (addError.code === 4001) {
-          throw new Error('Please connect MetaMask to Polygon network.');
+          throw new Error(`Please connect ${providerName} to ${chainInfo.name} network.`);
         } else {
           console.error(addError);
         }
       }
     } else if (switchError.code === 4001) {
-      throw new Error('Please connect MetaMask to Polygon network.');
+      throw new Error(`Please connect ${providerName} to ${chainInfo.name} network.`);
     } else if (switchError.code === -32002) {
-      throw new Error('Please respond to a pending MetaMask request.');
+      throw new Error(`Please respond to a pending ${providerName} request.`);
     } else {
       console.error(switchError);
     }