Connecting dApps to web3 wallets

useWallets.js

import Web3 from 'web3';
import { providers } from 'ethers';

import detectEthereumProvider from '@metamask/detect-provider';
import WalletConnectProvider from '@walletconnect/web3-provider';
import CoinbaseWalletSDK from '@coinbase/wallet-sdk';

async function initialize(provider) {
  let provider = null;
  if (provider === 'metamask') {
    provider = await detectEthereumProvider();
  } else if(provider === 'walletConnect') {
    provider = new WalletConnectProvider({
      infuraId: ${INFURA_ID},
    });
  } else if(provider === 'coinbase') {
    const APP_NAME = 'My Awesome App';
    const APP_LOGO_URL = 'https://example.com/logo.png';
    const DEFAULT_ETH_JSONRPC_URL = 'https://mainnet.infura.io/v3/<YOUR_INFURA_API_KEY>';
    const DEFAULT_CHAIN_ID = 1;
    
    const coinbaseWallet = new CoinbaseWalletSDK({
      appName: APP_NAME,
      appLogoUrl: APP_LOGO_URL,
      darkMode: false
    });
    provider = coinbaseWallet.makeWeb3Provider(DEFAULT_ETH_JSONRPC_URL, DEFAULT_CHAIN_ID);
  }
  return provider;
}

export const connectWallet = async (wallet) => {
  // Web3 Provider
  const web3 = new Web3(initialize(wallet));
  // Ethers Provider
  const provider = new providers.Web3Provider(initialize(wallet));
  
  const accounts = await provider.request({ method: 'eth_requestAccounts' });
  const chainId = await provider.request({ method: 'eth_chainId' });
  const account = accounts[0];
  const signer = provider.getSigner();
}

// await connectWallet('metamask');
// await connectWallet('walletConnect');
// await connectWallet('coinbase');