1

I want to use WalletConnect in my web-based dapp using Javascript.

So I used Web3Modal to ask me the proper wallet to connect to.

I want it to show this menu:

enter image description here

I used this code to connect the proper wallet via the above menu:

const providerOptions = {
    walletconnect: {
        package: WalletConnectProvider.default,
        options: {
            rpc: {
                97: "https://rpc.ankr.com/bsc_testnet_chapel"
            },
            chainId: 97
        }
    }
};
const web3Modal = new Web3Modal.default({
    cacheProvider: true,
    providerOptions
});
let provider = await web3Modal.connect();
let web3 = new Web3(provider);

But it shows the menu as below:

enter image description here

1- How can I control the wallets displayed here?

2- How can I change this window properties, like background color and etc?

3- Do you know any complete document about WalletConnect specially Web3Modal?

1 Answer 1

1
  1. Normally, the wallets displayed in this list are all options fetched from the WalletConnect explorer API, filtered my whether the user's device has a particular of these wallets installed and active.

However, you can override this displayed list by setting up your own includeWalletIds and excludeWalletIds, for instance like that:

createWeb3Modal({
  //...
  excludeWalletIds: [
    '1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369',
    '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0'
  ]
})

OR

createWeb3Modal({
  //...
  includeWalletIds: [
    '1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369',
    '4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0'
  ]
})

See more information about it here: https://docs.walletconnect.com/web3modal/react/options#includewalletids.

  1. The Web3Modal component's interface provides optional theming controls. (https://docs.walletconnect.com/web3modal/react/theming#thememode) For instance, you can set the dark theme option as enabled, or customize the background color, font styles, border radius, etc., etc.:
createWeb3Modal({
  //...
  themeMode: 'light',
  themeVariables: {
      '--w3m-color-mix': '#00BB7F',
      '--w3m-color-mix-strength': 40
  }
})
  1. You can see the full list of customizable options that the WalletConnect connectors API allows here: https://docs.walletconnect.com/web3modal/react/options

The web3modal NPM package (https://www.npmjs.com/package/web3modal) has been deprecated, so you should consider upgrading to the new @web3modal/wagmi, @web3modal/react or @web3modal/core.

If you still want to use the legacy version for now, you can customize the colors and the theming with this function, calling it ON the instantiated Web3Modal.default object:

updateTheme(theme: string | ThemeColors): Promise<void>;
6
  • I used new Web3Modal.default , now how can I use createWeb3Modal? Before it? After it? Or instead of it? Commented May 28 at 8:25
  • I used all of the wallets without any exception. Why is it filtered for me? Commented May 28 at 8:27
  • @AlirezaZojaji, are you using the latest Web3Modal version? Or the legacy v2?
    – Mila A
    Commented May 28 at 8:47
  • @AlirezaZojaji, please also see my update above.
    – Mila A
    Commented May 28 at 8:57
  • 1
    I am using my latest version from:: cdn.jsdelivr.net/npm/[email protected]/dist/index.js Commented May 28 at 12:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.