Releases: rainbow-me/rainbowkit
@rainbow-me/rainbowkit-siwe-next-auth@0.4.0
Minor Changes
-
aa0269e: RainbowKit has reached v2 alongside wagmi, which includes breaking changes.
0.4.x
now requires@rainbow-me/rainbowkit
v2, specifically:2.x.x
.
@rainbow-me/rainbow-button@0.2.0
Minor Changes
-
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
, andviem
to their latest versions**npm i @rainbow-me/rainbow-button@2 wagmi@2 viem@2.x
2. Install
@tanstack/react-query
peer dependencyWith 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 nowrainbowConnector
, and requiresappName
and no longer accepts thechains
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
andviem
If you use
wagmi
hooks andviem
actions in your dApp, you will need to follow the full migration guides for v2:
@rainbow-me/rainbowkit@1.3.5
Patch Changes
- 2b0c7b3: Added missing i18n translations for
Wrong network
errors
@rainbow-me/rainbowkit@1.3.4
Patch Changes
- c0a644a: Fixed an issue that caused components to re-render on every window resize event. Now components will only re-render once the user has finished resizing their window.
- 41616b9: Fixed a bug where the
connectModalOpen
state incorrectly remainedtrue
after a successfulsiwe
authentication. This fix ensures thatconnectModalOpen
shows the correct state. - cf4955f: Fixed a bug where the back button wasn't showing on compact size modal when selecting
DownloadOptions
wallet step. - cf4955f: Removed back button for wide size modal entirely when selecting
DownloadOptions
wallet step to prevent incorrect wallet step switching. - e5f5f03: Removed external
i18n-js
dependency to reduce RainbowKit bundle sizes. - c0bd68e: Fixed a bug in the account modal transactions section where transactions that were not found or cancelled were incorrectly shown as 'pending' instead of 'failed'.
- a79609b: Fixed a bug that allowed users to hold-press or cursor select wallet icons on iOS, which interrupted the connection experience.
@rainbow-me/rainbowkit@1.3.3
Patch Changes
-
7565fb2: Added
uk-UA
andua
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 whenshowBalance
was set tofalse
. Optimized additional provider calls to fetch wallet balances only when a user interacts with the Account modal.
@rainbow-me/rainbowkit@1.3.2
Patch Changes
- 7ba94f4: Optimized bundle size for localization feature
@rainbow-me/rainbowkit@1.3.1
Patch Changes
3feab0e: 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.
c9a8e46: Improved Korean localization. Thanks @Hyun2!
dba5177: Added support for arbitrumSepolia, baseSepolia, optimismSepolia, zoraSepolia testnet chains
@rainbow-me/rainbowkit@1.3.0
Minor Changes
-
9ce75a6: 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
, theWalletButton.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.
@rainbow-me/rainbowkit-siwe-next-auth@0.3.3
@rainbow-me/rainbow-button@0.1.0
Minor Changes
-
9ce75a6: The
RainbowButton
component is the simplest way to add support for Rainbow Wallet to dApps that usewagmi
and prefer a more custom connector experience over RainbowKit.1. Install
@rainbow-me/rainbow-button
and its peer dependenciesThe 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 theRainbowButtonProvider
. Then drop-in theRainbowButton
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.