Multiple Web3Modal Instances.

modals.js

import Web3Modal from "web3modal";
import WalletConnect from "@walletconnect/web3-provider";
import CoinbaseWalletSDK from "@coinbase/wallet-sdk";
import Portis from "@portis/web3";

// Metmamask (Injected Provider) Web3Modal Instance
export const metamaskModal = new Web3Modal({
  cacheProvider: true, // optional
  providerOptions: {
    // Example with injected providers
    injected: {
      display: {
        name: "Injected",
        description: "Connect with the provider in your Browser"
      }
    }
  }
});

// CoinbaseWallet Web3Modal Instance
export const coinbaseWalletModal = new Web3Modal({
  disableInjectedProvider: true,
  cacheProvider: true, // optional
  providerOptions: {
    walletlink: {
      package: CoinbaseWalletSDK, // Required
      options: {
        appName: "My App", // Required
        infuraId: process.env.INFURA_ID // Required unless you provide a JSON RPC url; see `rpc` below
      }
    }
  }
});

// Other Web3Modal Instance
export const otherModal = new Web3Modal({
  disableInjectedProvider: true,
  cacheProvider: true, // optional
  providerOptions: {
    walletconnect: {
      package: WalletConnect, // required
      options: {
        infuraId: process.env.INFURA_ID // required
      }
    },
    portis: {
      package: Portis, // required
      options: {
        id: process.env.PORTIS_ID // required
      }
    }
  }
});