The best way to connect a wallet 🌈 🧰
MIT License
Published by markdalgleish over 2 years ago
Published by markdalgleish over 2 years ago
wagmi
peer dependency to 0.4.x
Published by markdalgleish over 2 years ago
Published by markdalgleish over 2 years ago
Published by markdalgleish over 2 years ago
chains
array to avoid presenting the "Wrong network" state immediately after connectingPublished by markdalgleish over 2 years ago
9d431fb: Update react-remove-scroll to v2.5.4 to fix an issue with scrollbar space preservation when the modal is opened.
More detail: https://github.com/theKashey/react-remove-scroll/issues/71.
11ed088: Abbreviate large account balances using standard k/m/b units, fixes cases where balances appeared in exponential notation.
Published by markdalgleish over 2 years ago
233a6d7: Breaking: Removed the chainId
parameter from createConnector
on the Wallet
type (Custom Wallets).
Note that all built-in wallets are using the new API. Most consumers will be unaffected. This change only affects consumers that have created/consumed custom wallets.
If you previously derived RPC URLs from the chainId
on createConnector
, you can now remove that logic as wagmi
now handles RPC URLs internally when used with configureChains
.
import { connectorsForWallets, wallet, Chain, Wallet } from '@rainbow-me/rainbowkit';
import { chain, configureChains } from 'wagmi';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';
export interface MyWalletOptions {
chains: Chain[];
}
-const chains = [chain.mainnet]
+const { chains } = configureChains(
+ [chain.mainnet],
+ [
+ alchemyProvider({ alchemyId: process.env.ALCHEMY_ID }),
+ publicProvider(),
+ ]
+);
export const rainbow = ({ chains }: MyWalletOptions): Wallet => ({
...
- createConnector: ({ chainId }) => {
+ createConnector: () => {
- const rpc = chains.reduce(
- (rpcUrlMap, chain) => ({
- ...rpcUrlMap,
- [chainId]: chain.rpcUrls.default,
- }),
- {}
- );
const connector = new WalletConnectConnector({
chains,
options: {
qrcode: false,
- rpc,
},
});
}
...
}
const connectors = connectorsForWallets([
{
groupName: 'Recommended',
wallets: [
rainbow({ chains }),
],
},
]);
Published by markdalgleish over 2 years ago
ce473cd: Fix WalletConnect in Brave when a large number of WalletConnect-based wallets have been configured
Brave’s fingerprint prevention logic silently blocks WebSocket connections if too many are opened in the same session. Since we create a fresh WalletConnect connector instance for each wallet, consumers that have configured a large number of wallets can inadvertently break the connection flow in Brave.
To fix this, we now share WalletConnect connector instances between wallets when the connectors are being provided with the same options.
Published by markdalgleish over 2 years ago
867067c: Improve deep linking support for WalletConnect-based wallets on iOS
We now store the wallet’s universal link URL in local storage so that WalletConnect can use it for deep linking. This is typically handled by the official WalletConnect modal, but we need to handle it ourselves when rendering custom QR codes within RainbowKit.
Published by markdalgleish over 2 years ago
fd5e8e7: Fix npm user agent detection
We try to detect the package manager being used for the init/create script but we were failing to detect npm correctly, instead falling through to using pnpm
, yarn
or npm
(in that order) depending on availability. The logic for detecting npm has now been fixed.
fd5e8e7: Fix install step in Yarn
The install
command for @rainbow-me/create-rainbowkit
was failing when using yarn create
because Yarn uses add
instead of install
, so we now use the correct command when Yarn is detected.
Published by markdalgleish over 2 years ago
node_modules
Published by markdalgleish over 2 years ago
chalk
dependencyCHANGELOG.md
when copying app templatesPublished by markdalgleish over 2 years ago
avatar
prop to RainbowKitProvider
to allow developers to provide their own custom avatar component.Published by markdalgleish over 2 years ago
Published by markdalgleish over 2 years ago
4be196e: Ensure Brave Wallet and Tokenary aren’t detected as MetaMask
Both Brave Wallet and Tokenary set window.ethereum.isMetaMask
to true
which causes issues with the logic for providing the fallback "Injected Wallet" option. Similar to wagmi, we now detect when MetaMask is being impersonated by these wallets.
7403fab: Add dialog overlay blurs to the theme
4be196e: Add Brave Wallet support
Brave Wallet is now included as part of the default set of wallets returned from getDefaultWallets
, but note that is only visible within the Brave browser to avoid prompting users to download an entirely different web browser.
Brave Wallet is also included as part of the wallet
object to support its usage in custom wallet lists, e.g. wallet.brave({ chains, shimDisconnect: true })
.
Published by nicoglennon over 2 years ago
disclaimer
to the appInfo
property in RainbowKitProvider
, which displays a custom disclaimer at the bottom of the connection modal's welcome screenPublished by markdalgleish over 2 years ago
c0c494a: Breaking: Updated the wagmi
peer dependency to ^0.4
& removed the configureChains
& apiProvider
exports.
You now need to use wagmi's configureChains function and providers.
wagmi
to ^0.4.2
npm i wagmi@^0.4.2
configureChains
import {
apiProvider,
- configureChains
} from '@rainbow-me/rainbowkit';
+import { configureChains } from 'wagmi';
apiProvider.alchemy
to alchemyProvider
-import {
- apiProvider,
-} from '@rainbow-me/rainbowkit';
import { configureChains } from 'wagmi';
+import { alchemyProvider } from 'wagmi/providers/alchemy';
const { chains, provider } = configureChains(
[chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.alchemy(process.env.ALCHEMY_ID)]
+ [alchemyProvider({ alchemyId: process.env.ALCHEMY_ID })]
);
apiProvider.infura
to infuraProvider
-import {
- apiProvider,
-} from '@rainbow-me/rainbowkit';
import { configureChains } from 'wagmi';
+import { infuraProvider } from 'wagmi/providers/infura';
const { chains, provider } = configureChains(
[chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
- [apiProvider.infura(process.env.INFURA_ID)]
+ [infuraProvider({ infuraId: process.env.INFURA_ID })]
);
apiProvider.jsonRpc
to jsonRpcProvider
-import {
- apiProvider,
-} from '@rainbow-me/rainbowkit';
import { configureChains } from 'wagmi';
+import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
const { chains, provider } = configureChains(
[chain.mainnet, chain.polygon],
[
- apiProvider.jsonRpc(chain => ({
- rpcUrl: `https://${chain.id}.example.com`,
- })),
+ jsonRpcProvider({
+ rpc: chain => ({
+ http: `https://${chain.id}.example.com`,
+ }),
+ }),
]
);
apiProvider.fallback
to publicProvider
-import {
- apiProvider,
-} from '@rainbow-me/rainbowkit';
import { configureChains } from 'wagmi';
+import { publicProvider } from 'wagmi/providers/public';
const { chains, provider } = configureChains(
[chain.mainnet, chain.polygon],
- [apiProvider.fallback()]
+ [publicProvider()]
);
Published by markdalgleish over 2 years ago
0b98497: Add Steakwallet to list of available wallets
Example usage:
import { wallet } from '@rainbow-me/rainbowkit';
const steakwallet = wallet.steak({ chains });
Published by nicoglennon over 2 years ago
85be3f8: Avatar image is now correctly centered, and background + emoji are hidden if image is present.
4062169: Add ethers
to peer dependencies to ensure consistent versioning with wagmi
We previously had a direct dependency on @ethersproject/providers
, but this meant that provider instances generated by RainbowKit could potentially clash with the version of Ethers.js installed alongside wagmi. To avoid this, we’re now relying on the ethers
peer dependency that wagmi already requires, ensuring that there's only ever a single copy of ethers
between them.
5224d54: Adds imToken to available wallets
b1b09c5: Add the label
prop to the ConnectButton
component to easily display a custom label on the button.
39fa4cb: Fix bug where click events were ignored on the edges of links/buttons due to scale transforms during hover/active states
127690a: Added an aria label to the x
button inside the dialog
5213855: Fix usage of quotes in custom theme font values
209aa43: Add line-height values to all text styles
be6ee16: Pin to exact versions of dependencies and reduce bundle size by inlining platform/browser checks from detect-browser
c4e7f67: Increase specificity of RainbowKit styles to avoid app styles overriding them
In order to avoid issues with CSS ordering and specificity, we've prepended a data attribute selector to all styles in RainbowKit. This ensures that low-specificity styles like CSS resets won't override RainbowKit styles if they're applied later in the document.
Published by nickbytes over 2 years ago
b785e31: Make getDefaultWallets
return an object containing connectors
and wallets
In order to streamline the setup process, the getDefaultWallets
function now returns an object containing both connectors
and wallets
properties. This means that most consumers will no longer need to use the connectorsForWallets
function, accessing the generated connectors
value instead.
Migration guide
-import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit';
+import { getDefaultWallets } from '@rainbow-me/rainbowkit';
-const wallets = getDefaultWallets({
+const { connectors } = getDefaultWallets({
/* ... */
});
-const connectors = connectorsForWallets(wallets);
If you were modifying the wallet list returned from getDefaultWallets
, you’ll need to destructure the wallets
property from the returned object.
import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit';
-const wallets = getDefaultWallets({
+const { wallets } = getDefaultWallets({
/* ... */
});
const connectors = connectorsForWallets(wallets);
0cad1ad: Uses wagmi's Metamask Connector instead of Injected Connector for RainbowKit's metmask wallet
353d2ef: Add support for custom accentColor
values to built-in themes and add an accentColorForeground
option to support custom text colors when rendered on top of the accent color
To enable this change, the built in blue
, green
, orange
, pink
, purple
and red
accent color presets are now provided by an accentColors
property on each theme function. If you were using the accentColor
option previously and want to maintain the existing behavior, you’ll need to make the following change:
darkTheme({
- accentColor: 'purple',
+ ...darkTheme.accentColors.purple,
});
Example usage
When using a custom accent color:
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider
theme={darkTheme({
accentColor: '#7b3fe4',
accentColorForeground: 'white',
})}
>
{/* Your App */}
</RainbowKitProvider>
);
};
When using a built-in accent color preset:
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider
theme={darkTheme({
...darkTheme.accentColors.purple,
})}
>
{/* Your App */}
</RainbowKitProvider>
);
};
e9a374e: You now pass the learnMoreUrl
as a property to the new appInfo
property instead of directly to RainbowkitProvider
. This appInfo
also exposes appName
to display your app's name in Rainbowkit.
2c79870: Reserve height of ConnectButton
during server/static render
In order to reduce layout shift during page load, the ConnectButton
component now renders its content in an invisible and inert state before mount.
e570773: Shrink bundled CSS size by using minified identifiers
We were previously publishing CSS with human-readable debug identifiers (class names, keyframes etc.), but these have now been replaced with their smaller hash-only versions, e.g. the .reset__iekbcc0
class is now .iekbcc0
.
While these identifiers have never been guaranteed to be stable between versions, it’s possible that some consumers may have been given a false sense of API stability due to these debug names. If you have any custom CSS overrides that break due to these changes, it’s recommended that you avoid referencing them entirely rather than updating them since they’re likely to change again without notice in future releases.
7ac6f61: Add icons to testnets
353d2ef: Fix accent color contrast issues with dark
/midnight
themes
When using the green
, orange
or pink
accent color presets, the foreground text color is now black rather than white to improve contrast.
353d2ef: Remove the yellow
accent color preset from built-in themes
Since the color value used for the yellow preset is unable to be made accessible consistently across all themes, it is now removed from the built-in theme APIs.
5444298: The mobile.getUri
& desktop.getUri
attributes are now async on the wallet connector API.
Before:
{
mobile: {
getUri: () => connector.getProvider().connector.uri
},
}
After
{
mobile: {
getUri: async () => (await connector.getProvider()).connector.uri;
}
}
77e74be: ConnectButton.Custom
no longer renders null
when unmounted.
In order to support custom loading indicators and/or hooks in your render function, ConnectButton.Custom
no longer renders null
internally before mount.
Migration guide
If you wish to maintain the existing behavior, a new mounted
boolean is passed to your render function which allows you to render null
manually when mounted
is false
.
import { ConnectButton } from '@rainbow-me/rainbowkit';
export default () => (
<ConnectButton.Custom>
{({
+ mounted,
...etc,
}) => {
+ if (!mounted) {
+ return null;
+ }
return <button>...</button>;
}}
</ConnectButton.Custom>
);
9e17b07: Hide the network switcher when only a single chain has been configured.
8a4b3fe: wagmi's CoinbaseWalletConnector handles injected and mobile/non-injected use cases now.
c927bd7: Adds Ledger Live to available wallets (using WC)
5444298: Updated the wagmi
peer dependency to ^0.3.0
.
[email protected]
has introduced breaking changes from 0.2.x
that you will need to be aware of when upgrading. See the migration guide to [email protected]
here.
In order to use wagmi
with RainbowKit, you will now need to create a wagmi client that you will pass to WagmiProvider
(instead of passing configuration directly).
Before:
import { WagmiProvider } from 'wagmi';
const App = () => {
return (
<WagmiProvider autoConnect connectors={connectors} provider={provider}>
<RainbowKitProvider chains={chains}>
<YourApp />
</RainbowKitProvider>
</WagmiProvider>
);
};
After:
import { createClient, WagmiProvider } from 'wagmi';
const wagmiClient = createClient({
autoConnect: true,
connectors,
provider,
});
const App = () => {
return (
<WagmiProvider client={wagmiClient}>
<RainbowKitProvider chains={chains}>
<YourApp />
</RainbowKitProvider>
</WagmiProvider>
);
};
Note: if you are using chains
from wagmi, the default network names are now designed to suitable for usage within the UI.
Before:
const chains = [
{ ...chain.mainnet, name: 'Ethereum' },
{ ...chain.polygonMainnet, name: 'Polygon' },
];
After:
const chains = [chain.mainnet, chain.polygon];
9d351d0: All wallet and chain icons are now included within the RainbowKit package.
In order to improve image loading performance and eliminate the dependency on remote URLs, all built-in wallet and chain icons are now included within the RainbowKit package itself as Base64 data URLs. Since this would typically have a negative impact on bundle size, all image loading is done via dynamic imports and deferred until after app hydration.
df6c310: Truncates long ENS names
792fd03: Add cool mode
13fa857: Add recent transaction support
You can now opt in to displaying recent transactions within RainbowKit’s account modal. Note that all transactions must be manually registered with RainbowKit in order to be displayed.
First enable the showRecentTransactions
option on RainbowKitProvider
.
import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider showRecentTransactions={true} {...etc}>
{/* ... */}
</RainbowKitProvider>
);
};
Transactions can then be registered with RainbowKit using the useAddRecentTransaction
hook.
import { useAddRecentTransaction } from '@rainbow-me/rainbowkit';
export default () => {
const addRecentTransaction = useAddRecentTransaction();
return (
<button
onClick={() => {
addRecentTransaction({
hash: '0x...',
description: '...',
});
}}
>
Add recent transaction
</button>
);
};
Once a transaction has been registered with RainbowKit, its status will be updated upon completion.
By default the transaction will be considered completed once a single block has been mined on top of the block in which the transaction was mined, but this can be configured by specifying a custom confirmations
value.
import { useAddRecentTransaction } from '@rainbow-me/rainbowkit';
export default () => {
const addRecentTransaction = useAddRecentTransaction();
return (
<button
onClick={() => {
addRecentTransaction({
hash: '0x...',
description: '...',
confirmations: 100,
});
}}
>
Add recent transaction
</button>
);
};
a1633cf: Load all illustrations asynchronously to keep them out of the main bundle
13fa857: Add support for pending transaction indicators to ConnectButton.Custom
After registering transactions using the new useAddRecentTransaction
hook, you can now choose to display a pending transaction indicator via the new account.hasPendingTransactions
property which is passed to your render function.
9d351d0: Update Wallet
API.
Note that this only affects consumers that have created custom wallets. All built-in wallets have been updated to use the new API.
iconUrl
property now optionally accepts an async function that returns a string (() => Promise<string>
). This is to support bundling lazy-loadable Base64 images in JavaScript when publishing to npm. All built-in wallets are now using this feature to delay loading of images until after app hydration.iconBackground
property has been added to improve the visual appearance of wallet icons while loading.createConnector().qrCode.iconUrl
property has been removed in order to simplify the API and the QR code UI logic since none of the built-in wallets made use of it, but it may be reintroduced in the future if deemed necessary.createConnector().desktop
to indicate the wallet has a desktop deeplink, which will then use createConnector().desktop.getUri()
for the URI.fb7c8ae: Add configureChains
API.
The configureChains
function allows you to configure your chains with a selected API provider (Alchemy, Infura, JSON RPC). This means you don't have to worry about deriving your own RPC URLs for each chain, and instantiating a Ethereum Provider.
configureChains
accepts 2 parameters: an array of chains
, and an array of API providers.
Learn more about configuring chains & API providers.
Before:
import {
RainbowKitProvider,
Chain,
getDefaultWallets,
} from '@rainbow-me/rainbowkit';
import { createClient, WagmiProvider, chain } from 'wagmi';
import { providers } from 'ethers';
const infuraId = process.env.INFURA_ID;
const provider = ({ chainId }: { chainId?: number }) =>
new providers.InfuraProvider(chainId, infuraId);
const chains: Chain[] = [
chain.mainnet,
chain.polygon,
chain.optimism,
chain.arbitrum,
];
const { connectors } = getDefaultWallets({
chains,
infuraId,
appName: 'My RainbowKit App',
jsonRpcUrl: ({ chainId }) => {
const rpcUrls = (chains.find(x => x.id === chainId) || chain.mainnet)
.rpcUrls;
return typeof rpcUrls.default === 'string'
? rpcUrls.default
: rpcUrls.default[0];
},
});
const wagmiClient = createClient({
autoConnect: true,
connectors,
provider,
});
const App = () => {
return (
<WagmiProvider client={wagmiClient}>
<RainbowKitProvider chains={chains}>
<YourApp />
</RainbowKitProvider>
</WagmiProvider>
);
};
After:
import {
apiProvider,
Chain,
configureChains,
getDefaultWallets,
RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { createClient, WagmiProvider, chain } from 'wagmi';
import { providers } from 'ethers';
const { chains, provider } = configureChains(
[chain.mainnet, chain.polygon, chain.optimism, chain.arbitrum],
[apiProvider.infura(process.env.INFURA_ID)]
);
const { connectors } = getDefaultWallets({
appName: 'My RainbowKit App',
chains,
});
const wagmiClient = createClient({
autoConnect: true,
connectors,
provider,
});
const App = () => {
return (
<WagmiProvider client={wagmiClient}>
<RainbowKitProvider chains={chains}>
<YourApp />
</RainbowKitProvider>
</WagmiProvider>
);
};
Note: If you prefer to use Alchemy, you can replace
apiProvider.infura
withapiProvider.alchemy
and a valid Alchemy ID.
26247ea: Update wagmi
peer dependency to ^0.2.0
3295746: Update Rainbowkit Theme
object.
Added:
shadows.walletLogo
Renamed:
colors.actionButtonText
is now colors.accentColorForeground
Removed:
borders.modalBorderWidth
9d351d0: Update RainbowKitChain
API.
Note that this only affects consumers that have customized chain metadata. All built-in chains have been updated to use the new API.
iconUrl
property now optionally accepts an async function that returns a string (() => Promise<string>
). This is to support bundling lazy-loadable Base64 images in JavaScript when publishing to npm. All built-in chains are now using this feature to delay loading of images until after app hydration.iconBackground
property has been added to improve the visual appearance of chain icons while loading.13fa857: RainbowKitProvider
must now be nested inside WagmiProvider
since it now makes use of wagmi hooks internally.