Rainbow Wallet

The rainbowConfig 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 rainbowConfig = rainbowWallet({ ... });
 
// override metadata
rainbowConfig.meta.name = "..."; // change the name
rainbowConfig.meta.iconURL = "..."; // change the icon
 
// override connection UI
rainbowConfig.connectUI = RainbowConnectUI; // react component
 
// custom selection UI
rainbowConfig.selectUI = RainbowSelectUI; // react component
 

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

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

This projectId 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.

rainbowWallet({
  projectId: "your-wallet-connect-project-id",
});

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

rainbowWallet({
  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 supportedChains 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>
  );
}