rainbowkit

9ce75a65: 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.

9ce75a65: The RainbowButton component is the simplest way to add support for Rainbow Wallet to dApps that use wagmi and prefer a more custom connector experience over RainbowKit.

1. Install @rainbow-me/rainbow-button and its peer dependencies

The package is compatible with Next.js, React, and Vite. Ensure that you follow peer dependency warnings.

npm install @rainbow-me/rainbow-button wagmi viem

2. Configure with Wagmi and install the RainbowButton

Pass an instance of the RainbowConnector to your Wagmi connector list, and wrap your app in the RainbowButtonProvider. Then drop-in the RainbowButton component into your wallet list.

import "@rainbow-me/rainbow-button/styles.css";
import {
  RainbowButtonProvider,
  RainbowConnector,
} from "@rainbow-me/rainbow-button";

const wagmiClient = createConfig({
  connectors: [new RainbowConnector({ chains, projectId })],
  publicClient,
});

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiConfig config={wagmiClient}>
      <RainbowButtonProvider>{/* Your App */}</RainbowButtonProvider>
    </WagmiConfig>
  );
}

export const YourApp = () => {
  return <RainbowButton />;
};

You can also use the RainbowButton.Custom component for custom implementations and styling.

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

3. And that's it!

Now your users can enjoy a seamless connection experience for Rainbow — without any maintenance or headaches.

A WalletButton component is also available in RainbowKit if you'd like to adopt support for additional wallets.

74ead9df: Tokenary Support

Example usage

import {
  getDefaultWallets,
  connectorsForWallets,
} from "@rainbow-me/rainbowkit";
import { tokenaryWallet } from "@rainbow-me/rainbowkit/wallets";
const { wallets } = getDefaultWallets({ appName, chains });
const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: "Other",
    wallets: [tokenaryWallet({ chains })],
  },
]);

94dce820: Fixed scroll bar inconsistencies in the Chain selector for large chain lists or when animating upon user interaction

39d81e93: Fixed a bug where the avatar loading indicator had used excessive CPU cycles

ef64a229: Improved desktop wallet download support

RainbowKit wallet connectors now support desktop download links and desktop
wallet instructions.

Dapps that utilize the Custom Wallets API can reference the updated docs here.

{
  downloadUrls: {
    windows: 'https://my-wallet/windows-app',
    macos: 'https://my-wallet/macos-app',
    linux: 'https://my-wallet/linux-app',
    desktop: 'https://my-wallet/desktop-app',
  }
}

We've also introduced a new 'connect' InstructionStepName type in the instructions API to provide wallet connection instructions.

return {
  connector,
  desktop: {
    getUri,
    instructions: {
      learnMoreUrl: 'https://my-wallet/learn-more',
      steps: [
        // ...
        {
          description: 'A prompt will appear for you to approve the connection to My Wallet.'
          step: 'connect',
          title: 'Connect',
        }
      ]
    },
  },
}

02e796c0: SafePal Wallet Support

Example usage

import {
  getDefaultWallets,
  connectorsForWallets,
} from "@rainbow-me/rainbowkit";
import { safepalWallet } from "@rainbow-me/rainbowkit/wallets";
const { wallets } = getDefaultWallets({ appName, chains });
const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: "Other",
    wallets: [safepalWallet({ projectId, chains })],
  },
]);

efb8566e: SubWallet Support

Example usage

import {
  getDefaultWallets,
  connectorsForWallets,
} from "@rainbow-me/rainbowkit";
import { subWallet } from "@rainbow-me/rainbowkit/wallets";
const { wallets } = getDefaultWallets({ appName, chains, projectId });
const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: "Other",
    wallets: [subWallet({ chains, projectId })],
  },
]);

4b7a44c8: Okto Support

Example usage

import {
  getDefaultWallets,
  connectorsForWallets,
} from "@rainbow-me/rainbowkit";
import { oktoWallet } from "@rainbow-me/rainbowkit/wallets";
const { wallets } = getDefaultWallets({ appName, projectId, chains });
const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: "Other",
    wallets: [oktoWallet({ projectId, chains })],
  },
]);

2c8abbb2: Zeal Support

Example usage

import {
  getDefaultWallets,
  connectorsForWallets,
} from "@rainbow-me/rainbowkit";
import { zealWallet } from "@rainbow-me/rainbowkit/wallets";
const { wallets } = getDefaultWallets({ appName, chains });
const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: "Other",
    wallets: [zealWallet({ chains })],
  },
]);

e41103fb: CLV Wallet Support

Example usage

import {
  getDefaultWallets,
  connectorsForWallets,
} from "@rainbow-me/rainbowkit";
import { clvWallet } from "@rainbow-me/rainbowkit/wallets";
const { wallets } = getDefaultWallets({ appName, chains });
const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: "Other",
    wallets: [clvWallet({ chains, projectId })],
  },
]);

b0022aea: Desig Wallet support

Example usage

import {
  getDefaultWallets,
  connectorsForWallets,
} from "@rainbow-me/rainbowkit";
import { desigWallet } from "@rainbow-me/rainbowkit/wallets";
const { wallets } = getDefaultWallets({ appName, chains, projectId });
const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: "Other",
    wallets: [desigWallet({ chains })],
  },
]);

b37f5d68: RainbowKit is now localized in 13 languages and counting 🌎

A user's preferred language is automatically detected and the wallet linking experience will be fully localized out of the box, including the ConnectButton. Developers can always customize the language selection or allow their users to choose a different language by passing a locale prop to RainbowKitProvider like so:

<RainbowKitProvider locale="zh-CN">

RainbowKit's localization support works even better alongside i18n support in Next.js, so that locale selection can be specifed with custom domains or a subpath like /zh-CN/. Reference our guide to learn more.

If you would like to see support for an additional language, please open a GitHub Discussion and we'll work to support it as soon as possible.

ad1f860e: Frame Support

Example usage

import {
  getDefaultWallets,
  connectorsForWallets,
} from '@rainbow-me/rainbowkit';
import { frameWallet } from '@rainbow-me/rainbowkit/wallets';
const { wallets } = getDefaultWallets({ appName, chains });
const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [frameWallet({ chains })],
  },
]);

c434ca7a: Enkrypt Wallet Support

Example usage

import {
  getDefaultWallets,
  connectorsForWallets,
} from '@rainbow-me/rainbowkit';
import { enkryptWallet } from '@rainbow-me/rainbowkit/wallets';
const { wallets } = getDefaultWallets({ appName, chains });
const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [enkryptWallet({ chains })],
  },
]);

67933ed5: Uniswap Wallet Support

Example usage

import {
  getDefaultWallets,
  connectorsForWallets,
} from '@rainbow-me/rainbowkit';
import { uniswapWallet } from '@rainbow-me/rainbowkit/wallets';
const { wallets } = getDefaultWallets({ appName, chains });
const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [uniswapWallet({ chains })],
  },
]);

60968a5f: OneKey Wallet Support

Example usage

import {
  getDefaultWallets,
  connectorsForWallets,
} from '@rainbow-me/rainbowkit';
import { oneKeyWallet } from '@rainbow-me/rainbowkit/wallets';
const { wallets } = getDefaultWallets({ appName, projectId, chains });
const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [oneKeyWallet({ chains })],
  },
]);

e7ae2571: Coin98 Wallet Support

Example usage

import {
  getDefaultWallets,
  connectorsForWallets,
} from '@rainbow-me/rainbowkit';
import { coin98Wallet } from '@rainbow-me/rainbowkit/wallets';
const { wallets } = getDefaultWallets({ appName, chains });
const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [coin98Wallet({ projectId, chains })],
  },
]);

7b31af24: FoxWallet Support

Example Usage

import {
  getDefaultWallets,
  connectorsForWallets,
} from '@rainbow-me/rainbowkit';
import { foxWallet } from '@rainbow-me/rainbowkit/wallets';
const { wallets } = getDefaultWallets({ appName, projectId, chains });
const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [foxWallet({ projectId, chains })],
  },
]);

42a0c3e5: Bifrost Wallet Support

Example usage

import {
  getDefaultWallets,
  connectorsForWallets,
} from '@rainbow-me/rainbowkit';
import { bifrostWallet } from '@rainbow-me/rainbowkit/wallets';
const { wallets } = getDefaultWallets({ appName, chains });
const connectors = connectorsForWallets([
  ...wallets,
  {
    groupName: 'Other',
    wallets: [bifrostWallet({ chains })],
  },
]);

eb319f3: Improved warnings and error handling for dApps with an invalid or missing projectId.

Improved the developer experience for RainbowKit examples and templates with a bundled development projectId. It is required that every dApp obtains a unique projectId before entering production to avoid throttling and issues for end users.

Read our WalletConnect v2 Migration Guide for more information.

86be3f0: Support for next-auth versions 4.21.0 and above.

Migration guide

1. Upgrade next-auth to ~4.22.0

2. In your next-auth providers async authorize(credentials) implementation, alter the parameters passed to getCsrfToken like so. Reference our example implementation here.

- const nonce = await getCsrfToken({ req });
+ const nonce = await getCsrfToken({ req: { headers: req.headers } });