The best way to connect a wallet 🌈 🧰
MIT License
Published by markdalgleish about 2 years ago
Published by markdalgleish about 2 years ago
c944ddc: Allow custom wallets to automatically hide themselves based on the availability of other wallets in the list. This can be achieved via the new optional hidden
function on the Wallet
type.
Example usage
This is an example of a custom wallet that hides itself if another injected connector is available.
import type Wallet from '@rainbow-me/rainbowkit';
import { InjectedConnector } from 'wagmi/connectors/injected';
const myCustomWallet: Wallet = {
hidden: ({ wallets }) => {
return wallets.some(
wallet =>
wallet.installed &&
(wallet.connector instanceof InjectedConnector ||
wallet.id === 'coinbase')
);
},
...etc,
};
c944ddc: Add installed
property to wallet.coinbase
to support detecting whether Coinbase Wallet SDK's injected connector is available
c944ddc: Automatically hide "Injected Wallet" option if another injected wallet in the list is available
Migration guide
Previously we provided instructions for manually calculating whether the "Injected Wallet" option should be visible.
const needsInjectedWalletFallback =
typeof window !== 'undefined' &&
window.ethereum &&
!window.ethereum.isMetaMask &&
!window.ethereum.isCoinbaseWallet;
const connectors = connectorsForWallets([
{
groupName: 'Suggested',
wallets: [
wallet.rainbow({ chains }),
wallet.metaMask({ chains }),
wallet.coinbase({ appName: 'My RainbowKit App', chains }),
wallet.metaMask({ chains }),
...(needsInjectedWalletFallback ? [wallet.injected({ chains })] : []),
],
},
]);
This manual logic should no longer be needed since it's now handled automatically, meaning that the previous example could be simplified in the following way.
const connectors = connectorsForWallets([
{
groupName: 'Suggested',
wallets: [
wallet.rainbow({ chains }),
wallet.metaMask({ chains }),
wallet.coinbase({ appName: 'My RainbowKit App', chains }),
wallet.metaMask({ chains }),
wallet.injected({ chains }),
],
},
]);
In addition, since the "Injected Wallet" option is only rendered when necessary based on the end user's browser environment, it's recommended that you place it at the start of the list to ensure it's visible.
const connectors = connectorsForWallets([
{
groupName: 'Suggested',
wallets: [
wallet.injected({ chains }),
wallet.rainbow({ chains }),
wallet.metaMask({ chains }),
wallet.coinbase({ appName: 'My RainbowKit App', chains }),
wallet.metaMask({ chains }),
],
},
]);
c944ddc: Move the "Injected Wallet" fallback option to the start of the default wallet list when present
This option is only presented when an injected wallet is available that isn't handled by another wallet in the list, which means that it's the option most likely to be selected by the end user. As a result, we now give it the highest priority in the list returned from getDefaultWallets
.
c944ddc: Ensure TokenPocket is not detected as MetaMask
Published by markdalgleish about 2 years ago
Published by markdalgleish about 2 years ago
Published by markdalgleish about 2 years ago
12912b3: Fix the @rainbow-me/rainbowkit/styles.css
import for Jest, and other tooling that doesn't support the exports
field in package.json
.
Jest currently has issues when importing RainbowKit styles due to lack of support for the exports
field, which we use to publicly alias @rainbow-me/rainbowkit/dist/index.css
as @rainbow-me/rainbowkit/styles.css
. To fix this, we now include a styles.css
directory in the RainbowKit package containing a package.json
file whose main
field points to "../dist/index.css"
.
fcfc13d: Improve accessibility in Chain switcher button
3f9013f: Rename Steakwallet to Omni and leave steak
as a deprecated wallet.
import { wallet } from '@rainbow-me/rainbowkit';
const omni = wallet.omni({ chains });
Published by nicoglennon about 2 years ago
Published by markdalgleish about 2 years ago
Published by markdalgleish about 2 years ago
737a1d6: Added support for authentication.
RainbowKit now provides first-class support for Sign-In with Ethereum and NextAuth.js via the @rainbow-me/rainbowkit-siwe-next-auth
package, as well as lower-level APIs for integrating with custom back-ends and message formats.
For more information on how to integrate this feature into your application, check out the full RainbowKit authentication guide.
Migration guide for custom ConnectButton implementations
If you're using ConnectButton.Custom
and want to make use of authentication, you'll want to update the logic in your render prop to use the new authenticationStatus
property, which is either "loading"
(during initial page load), "unauthenticated"
or "authenticated"
.
For example, if you wanted to display the "Connect Wallet" state when the user has connected their wallet but haven't authenticated, you can calculate the state in the following way:
<ConnectButton.Custom>
{({
account,
chain,
openAccountModal,
openChainModal,
openConnectModal,
authenticationStatus,
mounted,
}) => {
const ready = mounted && authenticationStatus !== 'loading';
const connected =
ready &&
account &&
chain &&
(!authenticationStatus || authenticationStatus === 'authenticated');
return (
<div
{...(!ready && {
'aria-hidden': true,
'style': {
opacity: 0,
},
})}
>
{/* etc... */}
</div>
);
}}
</ConnectButton.Custom>
For a more complete example and API documentation, check out the custom ConnectButton documentation.
Published by markdalgleish about 2 years ago
4333995: Support filtering chains before passing them to RainbowKitProvider
.
This is particularly useful if you're building an L2-only project and you want mainnet to be available for resolving ENS details but you don't want it to be listed in the chain selector.
Example usage
This example uses Polygon while supporting ENS from mainnet.
const {
chains: [, ...chains], // Omit first chain (mainnet), get the rest
provider,
webSocketProvider,
} = configureChains(
[chain.mainnet, chain.polygon],
[
alchemyProvider({ apiKey: '_gg7wSSi0KMBsdKnGVfHDueq6xMB9EkC' }),
publicProvider(),
]
);
Published by nicoglennon about 2 years ago
modalSize
prop to "compact"
on RainbowKitProvider
.Published by markdalgleish about 2 years ago
Published by markdalgleish over 2 years ago
Published by markdalgleish over 2 years ago
Published by markdalgleish over 2 years ago
Published by markdalgleish over 2 years ago
4857e75: Fix duplicate wallets in connect modal after hot module reloading
c6a1033: Added initialChain
prop to RainbowKitProvider
RainbowKit (as of v0.3.2) automatically connects to the first chain in the chains
array passed to RainbowKitProvider
. This behavior can now be customized via the initialChain
prop.
The initial chain can be configured using a chain ID.
<RainbowKitProvider chains={chains} initialChain={1}>
As a convenience, you can also pass a chain object.
<RainbowKitProvider chains={chains} initialChain={chain.mainnet}>
396308f: Added Hooks for programmatically opening modals
The following Hooks are now provided to allow the programmatic opening of modals anywhere in your application.
useConnectModal
useAccountModal
useChainModal
Each of these Hooks returns an object with a function for opening its respective modal. Note that the returned functions will be undefined if your application is not in the required state for the modal to be open.
Example usage
import {
useConnectModal,
useAccountModal,
useChainModal,
} from '@rainbow-me/rainbowkit';
export const YourApp = () => {
const { openConnectModal } = useConnectModal();
const { openAccountModal } = useAccountModal();
const { openChainModal } = useChainModal();
return (
<>
{openConnectModal && (
<button onClick={openConnectModal} type="button">
Open Connect Modal
</button>
)}
{openAccountModal && (
<button onClick={openAccountModal} type="button">
Open Account Modal
</button>
)}
{openChainModal && (
<button onClick={openChainModal} type="button">
Open Chain Modal
</button>
)}
</>
);
};
Published by markdalgleish over 2 years ago
Published by markdalgleish over 2 years ago
Published by markdalgleish over 2 years ago
wagmi
dependency to ^0.5.3
Published by markdalgleish over 2 years ago
wagmi
peer dependency to 0.5.x
Published by markdalgleish over 2 years ago