Options
- Web
- Android
- Flutter
- React Native
- Unity
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.walletconnect.com. Enables following functionalities within Web3Modal: wallet and chain logos, optional WalletConnect RPC, support for all wallets from WalletConnect explorer 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: WalletConnect explorer 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 WalletConnect explorer. 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 WalletConnect explorer. 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 WalletConnect explorer. Defaults to true
.
enableExplorer: false
themeMode (optional)
Puts Web3Modal into dark or light mode. Defaults to user's system preference.
themeMode: 'dark' | 'light'
themeVariables (optional)
Allows to override Web3Modal'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
projectId (required)
Your project’s unique identifier that can be obtained at cloud.walletconnect.com. Enables following functionalities within WalletConnectModal: wallet and chain logos, optional WalletConnect RPC, support for all v2 wallets from WalletConnect Explorer. Defaults to undefined
.
projectId: string
providerMetadata (required)
Object that contains metadata of your app
providerMetadata: {
name: string;
description: string;
url: string;
icons: string[];
redirect: {
native: string;
universal?: string;
}
};
sessionParams (optional)
Defaults to:
sessionParams = {
namespaces: {
eip155: {
methods: ['eth_sendTransaction', 'personal_sign'],
chains: ['eip155:1'],
events: ['chainChanged', 'accountsChanged'],
rpcMap: {}
}
}
}
relayUrl (optional)
Define a custom Relay Server URL. Defaults to "wss://relay.walletconnect.com"
onCopyClipboard (optional)
This function is intended to be called when the user wants to copy something to the clipboard, and allows you to add the necessary actions to copy the value to the Clipboard.
Now used in:
- Copy button in QR Code view
onCopyClipboard: (value: string) => void;
//example
const onCopyClipboard = (value: string) => {
Clipboard.setString(value);
};
explorerRecommendedWalletIds (optional)
Allows to override default recommended wallets that are fetched from WalletConnect Explorer. You can define an array of wallet ids you'd like to prioritize (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: string[] | 'NONE'
//example
explorerRecommendedWalletIds={[
'1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369',
'4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0'
]}
explorerExcludedWalletIds (optional)
Allows to exclude wallets that are fetched from WalletConnect Explorer. 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: string[] | 'ALL'
//example
explorerExcludedWalletIds={[
'1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369',
'4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0'
]}
accentColor (optional)
Allows to override WalletConnectModal's accent accentColor
accentColor: 'string' | undefined
//example
accentColor = '#9090FF'
Explorer recommended wallets
Allows to set default recommended wallets that are fetched from WalletConnect Explorer. You can define a list of wallets 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 your desired wallet card.
val recommendedWalletsIds = listOf<String>(
"1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
"4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0"
)
val initParams = Modal.Params.Init(core = CoreClient, recommendedWalletsIds = recommendedWalletsIds)
WalletConnectModal.initialize(
init = initParams,
onSuccess = {
// Callback will be called if initialization is successful
},
onError = { error ->
// Error will be thrown if there's an issue during initialization
}
)
Explorer excluded wallets
Allows to exclude wallets that are fetched from WalletConnect Explorer. 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 your desired wallet card.
val excludedWalletIds = listOf<String>(
"1ae92b26df02f0abca6304df07debccd18262fdf5fe82daa81593582dac9a369",
"4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0"
)
val initParams = Modal.Params.Init(core = CoreClient, excludedWalletIds = excludedWalletIds)
WalletConnectModal.initialize(
init = initParams,
onSuccess = {
// Callback will be called if initialization is successful
},
onError = { error ->
// Error will be thrown if there's an issue during initialization
}
)
Show installed wallets
Allows you to show the INSTALLED
label under the wallet icon in the list. To use this feature, you need to add selected wallets that you want to handle to AndroidManifest.xml
as a query. Specs: Android Specs
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<queries>
<package android:name="..."/>
</queries>
<application>
...
</application>
</manifest>
Web3App or projectId & PairingMetadata (required)
You must provide either a Web3App or a projectId and PairingMetadata. Providing the Web3App lets you register callbacks on the Web3App you'd like to use. Otherwise, we recommend just providing the projectId and PairingMetadata to the WalletConnectModalService directly.
final Web3App web3App = await Web3App.createInstance(
projectId: 'YOUR_PROJECT_ID',
metadata: const PairingMetadata(
name: 'Flutter Dapp Example',
description: 'Flutter Dapp Example',
url: 'https://www.walletconnect.com/',
icons: ['https://walletconnect.com/walletconnect-logo.png'],
redirect: Redirect(
native: 'flutterdapp://',
universal: 'https://www.walletconnect.com',
),
),
);
// Register callbacks on the Web3App you'd like to use
WalletConnectModalService service = WalletConnectModalService(
web3App: web3App,
);
or
WalletConnectModalService service = WalletConnectModalService(
projectId: projectId,
metadata: const PairingMetadata(
name: 'Flutter Dapp Example',
description: 'Flutter Dapp Example',
url: 'https://www.walletconnect.com/',
icons: ['https://walletconnect.com/walletconnect-logo.png'],
redirect: Redirect(
native: 'flutterdapp://',
universal: 'https://www.walletconnect.com',
),
),
);
requiredNamespaces (optional)
Defaults to null.
This is the initial set of namespaces that will be requested from the wallet.
You can change it at any time with the setRequiredNamespaces
method.
optionalNamespaces (optional)
Defaults to null.
This is the initial set of optional namespaces that will be requested from the wallet.
You can change it at any time with the setOptionalNamespaces
method.
recommendedWalletIds (optional)
Allows to override default recommended wallets that are fetched from WalletConnect Explorer. You can define an array of wallet ids you'd like to prioritize (order is respected). You can get these ids from the explorer link mentioned before by clicking on a copy icon of desired wallet card. Defaults to null
.
final Set<String> recommendedWalletIds = {
'c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96', // MetaMask
'4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0', // Trust
}
excludedWalletState & excludedWalletids (optional)
The excludedWalletState
Determines the state of the excluded wallets. Defaults to ExcludedWalletState.list
.
If the excludedWalletState
is ExcludedWalletState.list
, the excludedWalletIds
will be used to remove items from the list of wallets returned from the WalletConnect Explorer. If the excludedWalletState
is ExcludedWalletState.all
, all wallets will be excluded except for the ones defined in recommendedWalletIds
.
ConnectOptions
Session connection options
ConnectOptions = new ConnectOptions
{
RequiredNamespaces = new RequiredNamespaces
{
{
"eip155", new ProposedNamespace
{
Methods = new[]
{
"eth_sendTransaction",
"personal_sign",
"eth_signTypedData"
},
Chains = new[]
{
"eip155:1"
},
Events = new[]
{
"chainChanged",
"accountsChanged"
},
}
}
}
}
IncludedWalletIds
Allows to override default recommended wallets that are fetched from WalletConnect Explorer. You can define an array of wallet ids you'd like to prioritize (order is respected). You can get these ids from the explorer link mentioned before by clicking on a copy icon of desired wallet card. Defaults to null
.
IncludedWalletIds = new[]
{
"c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96", // MetaMask
"4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0", // Trust
}
ExcludedWalletIds
Allows to exclude wallets that are fetched from WalletConnect Explorer. 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. Defaults to null
.
ExcludedWalletIds = new[]
{
"c57ca95b47569778a828d19178114f4db188b89b763c899ba0be274e97267d96", // MetaMask
"4622a2b2d6af1c9844944291e5e7351a6aa24cd7b23099efac1b2fd875da31a0", // Trust
}
Was this helpful?