Skip to main content

Options

Following options can be passed to WalletConnectModal i.e.

new WalletConnectModal({
projectId: 'YOUR_PROJECT_ID'
})

projectId (required)

Your project's unique identifier that can be obtained at cloud.reown.com. Enables following functionalities within AppKit: wallet and chain logos, optional WalletConnect RPC, support for all wallets from WalletGuide and WalletConnect v2 support. Defaults to undefined.

projectId: string

chains (required)

Array of CAIP-2 compliant chains modal should work with.

chains: [
'eip155:1',
'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
'cosmos:cosmoshub-4',
'polkadot:91b171bb158e2d3848fa23a9f1c25182'
]

mobileWallets (optional)

You can define an array of custom mobile wallets. Note: you will also need to add appropriate wallet images in walletImages. Native link represents deeplinking URL like rainbow:// and Universal link represent webpage link that can redirect to the app or fallback page. Defaults to undefined.

mobileWallets: [
{
id: string,
name: string,
links: {
native: string
universal: string,
},
},
];

desktopWallets (optional)

You can define an array of custom desktop or web based wallets. Note: you will also need to add appropriate wallet images in walletImages. Native link represents deeplinking URL like ledgerlive:// and Universal link represents webpage link that can redirect to the app or fallback page. Defaults to undefined.

desktopWallets: [
{
id: string,
name: string,
links: {
native: string
universal: string,
},
},
];

walletImages (optional)

Array of wallet id's and their logo mappings. This will override default logos. Id's in this case can be: WalletGuide id's, wallet id's you provided in mobileWallets or desktopWallets and wagmi connector id's. Defaults to undefined.

walletImages: {
rainbow: "/images/rainbow.webp",
metaMask: "/images/metamask.webp",
};

explorerRecommendedWalletIds (optional)

Allows to override default recommended wallets that are fetched from WalletGuide. You can define an array of wallet ids you'd like to prioritise (order is respected). You can get these ids from the explorer link mentioned before by clicking on a copy icon of desired wallet card. If you want to completely disable recommended wallets, you can set this option to NONE. Defaults to undefined.

explorerRecommendedWalletIds: [
'1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369',
'4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0'
]
// -- or -- //
explorerRecommendedWalletIds: 'NONE'

explorerExcludedWalletIds (optional)

Allows to exclude wallets that are fetched from WalletGuide. You can define an array of wallet ids you'd like to exclude. You can get these ids from the explorer link mentioned before by clicking on a copy icon of desired wallet card. If you want to exclude all wallets, you can set this option to ALL, however if explorerRecommendedWalletIds were defined, they will still be fetched. Defaults to undefined.

explorerExcludedWalletIds: [
'1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369',
'4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0'
]
// -- or -- //
explorerExcludedWalletIds: 'ALL'

termsOfServiceUrl (optional)

String URL to your terms of service page, if specified will append special "legal info" footer to the modal. Defaults to undefined.

termsOfServiceUrl: 'https://example.com/terms-and-conditions'

privacyPolicyUrl (optional)

String URL to your privacy policy page, if specified will append special "legal info" footer to the modal. Defaults to undefined.

privacyPolicyUrl: 'https://example.com/privacy-policy'

enableExplorer (optional)

Option to enable or disable wallet fetching from WalletGuide. Defaults to true.

enableExplorer: false

themeMode (optional)

Puts AppKit into dark or light mode. Defaults to user's system preference.

themeMode: 'dark' | 'light'

themeVariables (optional)

Allows to override AppKit's css styles. See theming section for all available options.

themeVariables: {
"--w3m-font-family": "Roboto, sans-serif",
"--w3m-accent-color": "#F5841F",
// ...
};

enableAuthMode (optional)

Option to enable auth only mode for modal, will adjust which wallets are fetched from explorer. Defaults to false.

enableAuthMode: true