The best way to connect a wallet 🌈 🧰
MIT License
2180ddd: Added Nest Wallet support with nestWallet
wallet connector
fea278a: The coinbaseWallet
wallet connector now has a preference
argument to control whether Smart Wallet is enabled and available for users. Preference based behavior is documented here.
Smart Wallet will be enabled by default with all
in early June, without a further upgrade.
Developers can test Smart Wallet with sepolia
and baseSepolia
chains today by setting smartWalletOnly
like so:
import { coinbaseWallet } from "@rainbow-me/rainbowkit/wallets";
// Enable Coinbase Smart Wallet for testing
coinbaseWallet.preference = "smartWalletOnly";
// You must manually specify your wallet list with `wallets` in
// `getDefaultConfig` or `connectorsForWallets` to assign the preference
const config = getDefaultConfig({
/* ... */
wallets: [
{
groupName: "Popular",
wallets: [coinbaseWallet],
},
],
/* ... */
});
Published by DanielSinclair 5 months ago
magicEdenWallet
wallet connectorprocess.env
polyfillPublished by DanielSinclair 5 months ago
82153ed: Upgraded compatible wagmi
and @coinbase/wallet-sdk
versions to support Coinbase Smart Wallet.
Smart Wallet enables users to create a new wallet in seconds with Passkeys, without installing an app or extension. Smart Wallet users can use the same account and address across all onchain apps with RainbowKit.
Smart Wallet and the underlying smart contract is fully compatible with Wagmi, but dApps need to ensure that their offchain signature validation is ERC-6492 compliant to support smart contract wallets. Follow this guide for more information.
Coinbase Wallet users on desktop and mobile will now interact with a new connection flow in RainbowKit alongside Smart Wallet.
90d6931: Introduced the Enhanced Provider to handle fallback resolutions when a Mainnet provider transport is unavailable.
ENS names for dApps without a Mainnet provider will now properly resolve. Additional conveniences will be soon be rolling out in RainbowKit.
Published by DanielSinclair 5 months ago
8841891: Added real-time balance fetching based on the Recent Transaction API. As a transaction is confirmed on-chain, the user's gas balance will be updated to reflect the transaction.
import { useAddRecentTransaction } from "@rainbow-me/rainbowkit";
export default () => {
const addRecentTransaction = useAddRecentTransaction();
return (
<button
onClick={() => {
addRecentTransaction({
hash: "0x...",
description: "...",
});
}}
>
Add recent transaction
</button>
);
};
Published by DanielSinclair 6 months ago
krakenWallet
wallet connectorPublished by DanielSinclair 6 months ago
compassWallet
wallet connectorcoinbaseWallet
wallet connector to Coinbase Wallet SDK v3 to temporarily mitigate breaking changes included an upcoming version of Wagmi.Published by DanielSinclair 7 months ago
connectorsForWallets
getDefaultConfig
return type to prevent indirect type annotation errors and better infer type for parameters from Wagmi's createConfig
.multiInjectedProviderDiscovery
was set to false
the roninWallet
would prevent showing Opening Ronin Wallet...
UI in the connect modal.zetachain
and zetachainAthensTestnet
testnet chainkaikasWallet
wallet connector and added klaytn
chain with klaytnBaobab
testnet support.Published by DanielSinclair 7 months ago
bybitWallet
wallet connectorgateWallet
wallet connectorbitverseWallet
wallet connectoroneInchWallet
wallet connectorPublished by DanielSinclair 7 months ago
blast
and blastSepolia
network supportWalletButton
and WalletButton.Custom
componentsPublished by DanielSinclair 7 months ago
RainbowButton
componentPublished by DanielSinclair 8 months ago
connectModalOpen
state for the useConnectModal
hook will now also encompass the Web3Modal modal presentation status for users that interact with walletConnectWallet
ChainNotConfiguredError
if mainnet
is not configured as a chain. This is happening when fetching ens name and ens avatar.WalletButton
componentPublished by DanielSinclair 8 months ago
showBalance
prop on <ConnectButton />
didn't accept a boolean, and had only accepted responsive modal values.ramperWallet
wallet connectorroninWallet
wallet connectorkresusWallet
wallet connectorbloomWallet
wallet connectorcoin98Wallet
wallet connectorronin
chainPublished by DanielSinclair 9 months ago
aa0269e: Breaking:
The wagmi and viem peer dependencies have reached 2.x.x
with breaking changes.
Follow the steps below to migrate.
1. Upgrade RainbowKit, wagmi
, and viem
to their latest versions
npm i @rainbow-me/rainbowkit@2 wagmi@2 [email protected]
2. Install @tanstack/react-query
peer dependency
With Wagmi v2, TanStack Query is now a required peer dependency.
Install it with the following command:
npm i @tanstack/react-query
3. Upgrade your RainbowKit and Wagmi configurations
import '@rainbow-me/rainbowkit/styles.css'
+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
import { mainnet } from 'wagmi/chains'
import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'
/* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
- appName: 'RainbowKit demo',
- projectId: 'YOUR_PROJECT_ID',
- chains,
- })
/* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])
- const { chains, publicClient } = configureChains(
- [mainnet, sepolia],
- [publicProvider(), publicProvider()],
- )
- const config = createConfig({
- autoConnect: true,
- publicClient,
- })
/* New API that includes Wagmi's createConfig and bundles getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+ appName: 'RainbowKit demo',
+ projectId: 'YOUR_PROJECT_ID',
+ chains: [mainnet],
+ transports: {
+ [mainnet.id]: http(),
+ },
+ })
+ const queryClient = new QueryClient()
const App = () => {
return (
- <WagmiConfig config={config}>
+ <WagmiProvider config={config}>
+ <QueryClientProvider client={queryClient}>
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
{/* Your App */}
</RainbowKitProvider>
+ </QueryClientProvider>
- </WagmiConfig>
+ </WagmiProvider>
)
}
You can read an in-depth migration guide here.
4. Check for breaking changes in wagmi
and viem
If you use wagmi
hooks and viem
actions in your dApp, you will need to follow the migration guides for v2:
Published by DanielSinclair 9 months ago
aa0269e: RainbowKit has reached v2 alongside wagmi, which includes breaking changes.
0.4.x
now requires @rainbow-me/rainbowkit
v2, specifically: 2.x.x
.
Published by DanielSinclair 9 months ago
aa0269e: Breaking:
The wagmi and viem peer dependencies have reached 2.x.x
with breaking changes.
Follow the steps below to migrate.
1. Upgrade Rainbow Button, wagmi
, and viem
to their latest versions**
npm i @rainbow-me/rainbow-button@2 wagmi@2 [email protected]
2. Install @tanstack/react-query
peer dependency
With Wagmi v2, TanStack Query is now a required peer dependency.
Install it with the following command:
npm i @tanstack/react-query
3. Upgrade your Rainbow Button and Wagmi configurations
RainbowConnector
is now rainbowConnector
, and requires appName
and no longer accepts the chains
parameter.
- import { RainbowConnector } from '@rainbow-me/rainbow-button'
+ import { rainbowConnector } from '@rainbow-me/rainbow-button'
import { createConfig } from 'wagmi'
const config = createConfig({
- connectors: [new RainbowConnector({ chains, projectId })],
+ connectors: [
+ rainbowConnector({
+ appName: "RainbowKit demo",
+ projectId: "YOUR_PROJECT_ID",
+ }),
+ ],
})
Follow the Wagmi v2 Migration Guide for additional configuration changes.
4. Check for breaking changes in wagmi
and viem
If you use wagmi
hooks and viem
actions in your dApp, you will need to follow the full migration guides for v2:
Published by DanielSinclair 9 months ago
Wrong network
errorsPublished by DanielSinclair 9 months ago
connectModalOpen
state incorrectly remained true
after a successful siwe
authentication. This fix ensures that connectModalOpen
shows the correct state.DownloadOptions
wallet step.DownloadOptions
wallet step to prevent incorrect wallet step switching.i18n-js
dependency to reduce RainbowKit bundle sizes.Published by DanielSinclair 10 months ago
7565fb2: Added uk-UA
and ua
locale support for the Ukranian language.
Reference our guide to learn more about Localization.
24b5a88: Improved support for NodeNext
module resolution to resolve "@rainbow-me/rainbowkit"' has no exported member 'RainbowKitProvider'
TypeScript warnings
5a184e9: Fixed a bug where eth_getBalance
would be called when showBalance
was set to false
. Optimized additional provider calls to fetch wallet balances only when a user interacts with the Account modal.
Published by DanielSinclair 10 months ago
Published by DanielSinclair 11 months ago
3feab0e6: Support for Wagmi 1.4.12
to mitigate a supply-chain attack on the @ledgerhq/connect-kit package. RainbowKit dApp's were not directly impacted, but dApps that used the LedgerConnector connector in earlier versions of Wagmi could have been. This issue has since been resolved by Ledger but the wagmi team is encouraging developers to upgrade Wagmi and RainbowKit out of an abundance of caution.
c9a8e469: Improved Korean localization. Thanks @Hyun2!
dba51779: Added support for arbitrumSepolia, baseSepolia, optimismSepolia, zoraSepolia testnet chains