WalletConnect

The walletConnectConfig contains the default config for metadata and UI. you can optionally choose to override the defaults to customize the wallet. Learn more about these configs

const walletConnectConfig = walletConnect({ ... });
 
// override metadata
walletConnectConfig.meta.name = "..."; // change the name
walletConnectConfig.meta.iconURL = "..."; // change the icon
 
// override connection UI
walletConnectConfig.connectUI = WalletConnectConnectUI; // react component
 
// custom selection UI
walletConnectConfig.selectUI = WalletConnectSelectUI; // react component
 

Once the config is ready, you can use it with ConnectWallet component or useConnect hook as shown below

// add to ThirdwebProvider to add it in ConnectWallet's modal
<ThirdwebProvider supportedWallets={[walletConnectConfig]} clientId="your-client-id"/>;
 
// or use it with useConnect hook
const connect = useConnect();
connect(walletConnectConfig, { ... });

Your project's unique identifier that can be obtained at cloud.walletconnect.com. It is highly recommended to use your own project id and only use the default one for testing purposes.

It Enables following functionalities within Web3Modal:

• wallet and chain logos,
• optional WalletConnect RPC,
• support for all wallets from our Explorer and WalletConnect v2 support.

Defaults to thirdweb's common project id.

import { WalletConnect } from "@thirdweb-dev/wallets";
 
const wallet = new WalletConnect({
  projectId: "<PROJECT_ID>",
});

Show this wallet as "recommended" in the ConnectWallet Modal.

walletConnect({
  recommended: true,
});

If chainId is provided, wallet will be connected and immediately switch to network with given chainId.

Chain object corresponding to this chainId from @thirdweb-dev/chains package must be specified in ThirdwebProvider's supportedWallets prop as shown below

import { Polygon } from "@thirdweb-dev/chains";
import { ThirdwebProvider } from "@thirdweb-dev/react-native";
 
export function YourApp() {
  return (
    <ThirdwebProvider
      supportedChains={[Polygon]}
      clientId="your-client-id"
    >
      <App />
    </ThirdwebProvider>
  );
}