Skip to main content

rainbowWallet

A wallet configurator for Rainbow Wallet which allows integrating the wallet with React.

Rainbow Wallet is an extension of our WalletConnect wallet which supports WCV2.

import { rainbowWallet } from "@thirdweb-dev/react";

const rainbowWalletConfig = rainbowWallet(options);

options​

projectId (recommended)

Your project's unique identifier that can be obtained at cloud.walletconnect.com.

Defaults to a common thirdweb projectId. We recommend getting your own projectId at cloud.walletconnect.com when launching your project.

import { rainbowWallet } from "@thirdweb-dev/react";

rainbowWallet(
  {
    projectId: "<PROJECT_ID>",
  },
);
recommended (optional)

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

rainbowWallet({
  recommended: true,
});

Usage with ConnectWallet​

To allow users to connect to this wallet using the ConnectWallet component, you can add it to ThirdwebProvider's supportedWallets prop.

<ThirdwebProvider
  supportedWallets={[rainbowWallet()]}
  clientId="your-client-id"
>
  <YourApp />
</ThirdwebProvider>

Usage with useConnect​

you can use the useConnect hook to programmatically connect to the wallet without using the ConnectWallet component.

The wallet also needs to be added in ThirdwebProvider's supportedWallets if you want the wallet to auto-connect on next page load.

const rainbowWalletConfig = rainbowWallet();

function App() {
  const connect = useConnect();

  const handleConnect = async () => {
    await connect(rainbowWalletConfig, connectOptions);
  };

  return <div> ... </div>;
}

connectOptions​

{ chainId?: number } | undefined
chainId (optional)

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";

export function YourApp() {
  return (
    <ThirdwebProvider supportedChains={[Polygon]} clientId="your-client-id">
      <App />
    </ThirdwebProvider>
  );
}