The best way to connect a wallet 🌈 🧰
MIT License
Published by DanielSinclair 11 months ago
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.
Published by DanielSinclair 11 months ago
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.
Published by DanielSinclair 11 months ago
'use client'
directive for safe App Router usagenext-auth@5
. RainbowKit will support next-auth
v5 in a future release with improved App Router support.Published by DanielSinclair 11 months ago
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
Published by DanielSinclair 12 months ago
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',
}
]
},
},
}
Published by DanielSinclair 12 months ago
Authentication
flow for SIWEPublished by DanielSinclair about 1 year ago
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 })],
},
]);
Published by DanielSinclair about 1 year ago
zkSync
and zkSyncTestnet
network supportholesky
testnet supportPublished by DanielSinclair about 1 year ago
ESModule
projects related to i18n-js
Published by DanielSinclair about 1 year ago
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.
Published by DanielSinclair about 1 year ago
iconUrl
and iconBackground
during Chain customizationbitKeepWallet
connector in favor of bitgetWallet
. The BitKeep Wallet connector will continue to be available without breaking changes.Published by DanielSinclair about 1 year ago
~1.4.2
and viem to ~1.12.2
.Published by DanielSinclair about 1 year ago
1.4.x
and viem 1.10.x
peer dependencies.Published by DanielSinclair about 1 year ago
~1.4.0
and viem to ~1.10.0
.Published by DanielSinclair about 1 year ago
Published by DanielSinclair about 1 year ago
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 })],
},
]);
Published by DanielSinclair about 1 year ago
wagmi
, viem
, and next
in templates.base
network supportPublished by DanielSinclair about 1 year ago
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.
Published by DanielSinclair about 1 year ago
86be3f0: Support for next-auth
versions 4.21.0
and above.
Migration guide
Upgrade next-auth
to ~4.22.0
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 } });
Published by DanielSinclair over 1 year ago
base
chain supportArbitrum
and Optimism
for mainnet chains to simplify the chain switching experience