Advanced

WalletButton

The new WalletButton component helps dApps with custom wallet list implementations adopt RainbowKit and all of it's maintenance-free benefits.

import { WalletButton } from '@rainbow-me/rainbowkit';

<WalletButton wallet="rainbow" />
<WalletButton wallet="metamask" />
<WalletButton wallet="coinbase" />

Like the ConnectButton, the WalletButton.Custom component is available for custom implementations and styling.

<WalletButton.Custom wallet="rainbow">
  {({ ready, connect }) => {
    return (
      <button
        type="button"
        disabled={!ready}
        onClick={connect}
      >
        Connect Rainbow
      </button>
    );
  }}
</WalletButton.Custom>

Most dApps are best served by the ConnectButton. Reference the docs here for more information about WalletButton adoption and usecases.

Press the buttons below to see what this RainbowKit entry point looks like.