giekaton / php-metamask-user-login

Web3 passwordless user login with MetaMask and PHP
MIT License
129 stars 57 forks source link

Coinbase Support #13

Open alisaleem252 opened 2 years ago

alisaleem252 commented 2 years ago

It was very helpful, but i am unable to add support for coinbase.

const providerOptions = {
walletlink: {
      package: true,
      options: {
        appName: "My Awesome App", // Required
        infuraId: "", // Required unless you provide a JSON RPC url; see `rpc` below
        rpc: "", // Optional if `infuraId` is provided; otherwise it's required
        chainId: 1, // Optional. It defaults to 1 if not provided
        appLogoUrl: null, // Optional. Application logo image URL. favicon is used if unspecified
        darkMode: false // Optional. Use dark theme, defaults to false
      }
    }
  };

But i am unable to find a js library to include for WalletLink. Can we add support for Coinbase?

nitingupta-123 commented 1 year ago

Hello there,

I tried this way and it worked for me.

function web3ModalInit() {

  // Tell Web3modal what providers we have available.
  // Built-in web browser provider (only one can exist as a time)
  // like MetaMask, Brave or Opera is added automatically by Web3modal
  const INFURA_ID = "";
  const CHAIN_ID = 1;
  const providerOptions = {
    walletconnect: {
      package: WalletConnectProvider,
      options: {
        qrcode: true,
        rpc: {
          1: "https://cloudflare-eth.com/", // https://ethereumnodes.com/
          137 : "https://polygon-rpc.com/"
        },
      }
    },
    'custom-coinbase': {
      display: {
        name: 'Coinbase',
        description: 'Scan with WalletLink to connect',
      },
      options: {
        appName: 'app', // Your app name
        // networkUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`,
        chainId: CHAIN_ID,
        rpc: {
          1: "https://cloudflare-eth.com/",
          137 : "https://polygon-rpc.com/"
        },
      },
      package: WalletLink,
      connector: async (_, options) => {
        const { appName, networkUrl, chainId, rpc } = options
        const walletLink = new WalletLink({
          appName
        });
        const provider = walletLink.makeWeb3Provider(rpc, chainId);
        await provider.enable();
        return provider;
      },
    }
  };

  web3Modal = new Web3Modal({
    cacheProvider: false, // optional
    providerOptions, // required
    disableInjectedProvider: false, // optional. For MetaMask / Brave / Opera.
  });

}