rainbowkit

Patch Changes

• 62fd332: Include RainbowKit v0.6.x in peer dependency range

Minor Changes

• 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

Patch Changes

• 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

Patch Changes

• 52e2ad6: Fix MetaMask mobile browser detection and app installation instructions

Patch Changes

• Updated dependencies [12912b3]
• Updated dependencies [fcfc13d]
• Updated dependencies [3f9013f]
  • @rainbow-me/[email protected]

Patch Changes

• 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 });
  

Patch Changes

• 8060ccd: Add Optimism Goerli and Sepolia chain information now that they are first-class chains in Wagmi.
• 4dfe834: Provide download options for wallets with both browser extensions and mobile apps.
• 8060ccd: Fix small spelling mistake in the WalletConnect modal flow.

Minor Changes

• 737a1d6: Initial release.

Minor Changes

• 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.

Patch Changes

• 488c5a1: Fix error on desktop where selecting Coinbase Wallet while extension was installed would show you the wrong copy.

Patch Changes

• 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(),
    ]
  );
  

Patch Changes

• 1a4f2f7: Add a 'compact' modal size option for developers looking to use a simpler version of RainbowKit, available by setting the modalSize prop to "compact" on RainbowKitProvider.

Patch Changes

• aae3163: Fix error caused by attempting to prevent page scrolling when the body element's overflow is set to hidden.
• 948c036: Avoid switching chains after connecting if the user's wallet is already on a supported chain

Patch Changes

• 8dd5a74: Update wagmi to v0.6

Patch Changes

• 8dd5a74: Update wagmi peer dependency to include v0.6

Patch Changes

• fd08aa1: Avoid ENS requests when mainnet isn't in list of configured chains

Patch Changes

• 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>
        )}
      </>
    );
  };
  

Patch Changes

• 0213b52: Use consistent balance rounding logic between account button and modal

Patch Changes

• 3637bbb: Use Mainnet ENS name / avatar on other networks if available
• 3637bbb: Add a disconnect option to the switch network modal when connected to unsupported network

Minor Changes

• 6e25576: Update wagmi dependency to ^0.5.3

Minor Changes

• 08d189b: Updated wagmi peer dependency to 0.5.x

Patch Changes

• b2b46ef: Fix WalletConnect deep linking for wallets with custom URL schemes