Web3Modal Support for Polygon Checkout

Purpose

The goal of this spike is to discover what needs to be true for gitcoin grants to use Web3Modal library for Polygon Checkout. This means moving away from the currently implementation that is hardcoded to work with only MetaMask.

How to

MetaMask injects an Ethereum Provider API via window.ethereum. This usage should be dropped in favour of Web3Modal and ethereum libraries to perfrom the following operations.

1. Instantiate Web3Modal with the desired provider options in /web/app/assets/v2/js/wallet.js#initWallet(). Coinbase Wallet configuration is described here https://github.com/Web3Modal/web3modal/blob/master/docs/providers/coinbasewallet.md

2. Connect to wallet by calling the connect function from the Web3Modal instance.

3. Initialize web3.js or ethers.js with the connected provider from Web3Modal because Web3Modal does not have built-in support for Ethereum interactions. For example with ethers.js

   ​​​​  const provider = await web3Modal.connect();
   ​​​​  const library = new ethers.providers.Web3Provider(provider);
   

4. Switch to Polygon network or add network configuration via ethers.js or web3.js if it does not exist in the user's wallet. Replace window.ethereum usages in the following files

   • /web/app/assets/v2/js/wallet.js#setupPolygon()
   • /web/app/assets/v2/js/cart.js#initializeStandardCheckout()
   • /web/app/assets/v2/js/wallet.js#setupPolygon()
   • /web/app/assets/v2/js/ingest-missing-contributions.js#ingest()

References

• Official Web3Modal Readme: https://github.com/Web3Modal/web3modal
• Coinbase Integration Guide: https://docs.cloud.coinbase.com/wallet-sdk/docs/web3modal
• React code example: https://codesandbox.io/s/web3modal-demo-j43b10?file=/src/App.js