feat: chain modal v2

.changeset/sweet-plants-joke.md

@@ -0,0 +1,40 @@
+---
+"@rainbow-me/rainbowkit": minor
+"example": patch
+"site": patch
+---
+
+`<ConnectButton>` now allows you to switch chains without having your wallet connected. 
+
+You just need to set `chainModalOnConnect` prop to `true` in `<RainbowKitProvider>` if you'd like to use the chain modal without having your wallet connected.
+
+With this update, the `<ConnectButton />` will display the chains even when only one chain is configured. You can disable this behaviour by setting `chainStatus` to `none`.
+
+**Example usage**
+
+```ts
+import "@rainbow-me/rainbowkit/styles.css";
+
+import { RainbowKitProvider, getDefaultConfig } from "@rainbow-me/rainbowkit";
+import { WagmiProvider } from "wagmi";
+import { mainnet } from "wagmi/chains";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const config = getDefaultConfig({
+ appName: "RainbowKit demo",
+ projectId: "YOUR_PROJECT_ID",
+ chains: [mainnet],
+});
+
+const queryClient = new QueryClient();
+
+const App = () => {
+ return (
+ <WagmiProvider config={config}>
+ <QueryClientProvider client={queryClient}>
+ <RainbowKitProvider chainModalOnConnect>{/* Your App */}</RainbowKitProvider>
+ </QueryClientProvider>
+ </WagmiProvider>
+ );
+};
+```

packages/example/pages/_app.tsx

@@ -299,6 +299,7 @@ function RainbowKitApp({
  const [coolModeEnabled, setCoolModeEnabled] = useState(false);
  const [modalSize, setModalSize] = useState<ModalSize>('wide');
  const [showDisclaimer, setShowDisclaimer] = useState(false);
+ const [chainModalOnConnect, setChainModalOnConnect] = useState(false);
  const [customAvatar, setCustomAvatar] = useState(false);
 
  const routerLocale = router.locale as Locale;
@@ -343,6 +344,7 @@ function RainbowKitApp({
  ...demoAppInfo,
  ...(showDisclaimer && { disclaimer: DisclaimerDemo }),
  }}
+ chainModalOnConnect={chainModalOnConnect}
  avatar={customAvatar ? CustomAvatar : undefined}
  locale={locale}
  coolMode={coolModeEnabled}
@@ -484,6 +486,27 @@ function RainbowKitApp({
  />
  </td>
  </tr>
+ <tr>
+ <td>
+ <label
+ htmlFor="chainModalOnConnect"
+ style={{ userSelect: 'none' }}
+ >
+ chainModalOnConnect
+ </label>
+ </td>
+ <td>
+ <input
+ checked={chainModalOnConnect}
+ id="chainModalOnConnect"
+ name="chainModalOnConnect"
+ onChange={(e) =>
+ setChainModalOnConnect(e.target.checked)
+ }
+ type="checkbox"
+ />
+ </td>
+ </tr>
  <tr>
  <td>modalSize</td>
  <td>

packages/rainbowkit/src/components/ChainModal/Chain.tsx

@@ -10,6 +10,7 @@ import { useRainbowKitChains } from '../RainbowKitProvider/RainbowKitChainContex
 import { Text } from '../Text/Text';
 
 interface ChainProps {
+ isConnected?: boolean;
  chainId: number;
  currentChainId: number;
  switchChain: ReturnType<typeof useSwitchChain>['switchChain'];
@@ -31,6 +32,7 @@ const Chain = ({
  name,
  iconBackground,
  idx,
+ isConnected,
 }: ChainProps) => {
  const mobile = isMobile();
  const { i18n } = useContext(I18nContext);
@@ -74,7 +76,7 @@ const Chain = ({
  )}
  <div>{name ?? name}</div>
  </Box>
- {isCurrentChain && (
+ {isCurrentChain && isConnected && (
  <Box
  alignItems="center"
  display="flex"

packages/rainbowkit/src/components/ChainModal/ChainModal.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useState } from 'react';
-import { useAccount, useDisconnect, useSwitchChain } from 'wagmi';
+import { useAccount, useChainId, useDisconnect, useSwitchChain } from 'wagmi';
 import { useConfig } from 'wagmi';
 import { isMobile } from '../../utils/isMobile';
 import { Box } from '../Box/Box';
@@ -23,7 +23,9 @@ export interface ChainModalProps {
 }
 
 export function ChainModal({ onClose, open }: ChainModalProps) {
- const { chainId } = useAccount();
+ const { chainId: connectedChainId, isConnected } = useAccount();
+ const currentChainId = useChainId();
+ const chainId = isConnected ? connectedChainId : currentChainId;
  const { chains } = useConfig();
  const [pendingChainId, setPendingChainId] = useState<number | null>(null);
  const { switchChain } = useSwitchChain({
@@ -102,6 +104,7 @@ export function ChainModal({ onClose, open }: ChainModalProps) {
  chainId={id}
  currentChainId={chainId}
  switchChain={switchChain}
+ isConnected={isConnected}
  chainIconSize={chainIconSize}
  isLoading={pendingChainId === id}
  src={iconUrl}

packages/rainbowkit/src/components/ConnectButton/ConnectButton.tsx

@@ -12,7 +12,11 @@ import { Avatar } from '../Avatar/Avatar';
 import { Box } from '../Box/Box';
 import { DropdownIcon } from '../Icons/Dropdown';
 import { I18nContext } from '../RainbowKitProvider/I18nContext';
-import { useRainbowKitChains } from '../RainbowKitProvider/RainbowKitChainContext';
+import {
+ useChainModalOnConnect,
+ useInitialChainId,
+ useRainbowKitChains,
+} from '../RainbowKitProvider/RainbowKitChainContext';
 import { useShowBalance } from '../RainbowKitProvider/ShowBalanceContext';
 import { ConnectButtonRenderer } from './ConnectButtonRenderer';
 
@@ -41,17 +45,34 @@ export function ConnectButton({
 }: ConnectButtonProps) {
  const chains = useRainbowKitChains();
  const connectionStatus = useConnectionStatus();
+ const chainModalOnConnect = useChainModalOnConnect();
  const { setShowBalance } = useShowBalance();
- const [ready, setReady] = useState(false);
-
+ const initialChainId = useInitialChainId();
  const { i18n } = useContext(I18nContext);
+ const [ready, setReady] = useState(false);
 
  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
  useEffect(() => {
  setShowBalance(showBalance);
  if (!ready) setReady(true);
  }, [showBalance, setShowBalance]);
 
+ const computeResponsiveChainStatus = () => {
+ if (typeof chainStatus === 'string') {
+ return chainStatus;
+ }
+
+ if (chainStatus) {
+ return normalizeResponsiveValue(chainStatus)[
+ isMobile() ? 'smallScreen' : 'largeScreen'
+ ];
+ }
+ };
+
+ const responsiveChainStatus = computeResponsiveChainStatus();
+
+ const isChainStatusHidden = responsiveChainStatus === 'none';
+
  return ready ? (
  <ConnectButtonRenderer>
  {({
@@ -62,9 +83,18 @@ export function ConnectButton({
  openChainModal,
  openConnectModal,
  }) => {
+ const isChainSwitchingDisabled =
+ ((initialChainId || !chainModalOnConnect) &&
+ connectionStatus !== 'connected') ||
+ connectionStatus === 'unauthenticated';
+
  const ready = mounted && connectionStatus !== 'loading';
  const unsupportedChain = chain?.unsupported ?? false;
 
+ const hasMultipleChains = chains.length > 1;
+ const canShowCurrentChain =
+ chain && (!isChainStatusHidden || hasMultipleChains);
+
  return (
  <Box
  display="flex"
@@ -78,98 +108,98 @@ export function ConnectButton({
  },
  })}
  >
- {ready && account && connectionStatus === 'connected' ? (
- <>
- {chain && (chains.length > 1 || unsupportedChain) && (
+ {ready && !isChainSwitchingDisabled && canShowCurrentChain && (
+ <Box
+ alignItems="center"
+ aria-label="Chain Selector"
+ as="button"
+ background={
+ unsupportedChain
+ ? 'connectButtonBackgroundError'
+ : 'connectButtonBackground'
+ }
+ borderRadius="connectButton"
+ boxShadow="connectButton"
+ className={touchableStyles({
+ active: 'shrink',
+ hover: 'grow',
+ })}
+ color={
+ unsupportedChain
+ ? 'connectButtonTextError'
+ : 'connectButtonText'
+ }
+ display={mapResponsiveValue(chainStatus, (value) =>
+ value === 'none' ? 'none' : 'flex',
+ )}
+ fontFamily="body"
+ fontWeight="bold"
+ gap="6"
+ key={
+ // Force re-mount to prevent CSS transition
+ unsupportedChain ? 'unsupported' : 'supported'
+ }
+ onClick={openChainModal}
+ paddingX="10"
+ paddingY="8"
+ testId={
+ unsupportedChain ? 'wrong-network-button' : 'chain-button'
+ }
+ transition="default"
+ type="button"
+ >
+ {unsupportedChain ? (
  <Box
  alignItems="center"
- aria-label="Chain Selector"
- as="button"
- background={
- unsupportedChain
- ? 'connectButtonBackgroundError'
- : 'connectButtonBackground'
- }
- borderRadius="connectButton"
- boxShadow="connectButton"
- className={touchableStyles({
- active: 'shrink',
- hover: 'grow',
- })}
- color={
- unsupportedChain
- ? 'connectButtonTextError'
- : 'connectButtonText'
- }
- display={mapResponsiveValue(chainStatus, (value) =>
- value === 'none' ? 'none' : 'flex',
- )}
- fontFamily="body"
- fontWeight="bold"
- gap="6"
- key={
- // Force re-mount to prevent CSS transition
- unsupportedChain ? 'unsupported' : 'supported'
- }
- onClick={openChainModal}
- paddingX="10"
- paddingY="8"
- testId={
- unsupportedChain ? 'wrong-network-button' : 'chain-button'
- }
- transition="default"
- type="button"
+ display="flex"
+ height="24"
+ paddingX="4"
  >
- {unsupportedChain ? (
+ {i18n.t('connect_wallet.wrong_network.label')}
+ </Box>
+ ) : (
+ <Box alignItems="center" display="flex" gap="6">
+ {chain.hasIcon ? (
  <Box
- alignItems="center"
- display="flex"
+ display={mapResponsiveValue(chainStatus, (value) =>
+ value === 'full' || value === 'icon'
+ ? 'block'
+ : 'none',
+ )}
  height="24"
- paddingX="4"
+ width="24"
  >
- {i18n.t('connect_wallet.wrong_network.label')}
+ <AsyncImage
+ alt={chain.name ?? 'Chain icon'}
+ background={chain.iconBackground}
+ borderRadius="full"
+ height="24"
+ src={chain.iconUrl}
+ width="24"
+ />
  </Box>
- ) : (
- <Box alignItems="center" display="flex" gap="6">
- {chain.hasIcon ? (
- <Box
- display={mapResponsiveValue(chainStatus, (value) =>
- value === 'full' || value === 'icon'
- ? 'block'
- : 'none',
- )}
- height="24"
- width="24"
- >
- <AsyncImage
- alt={chain.name ?? 'Chain icon'}
- background={chain.iconBackground}
- borderRadius="full"
- height="24"
- src={chain.iconUrl}
- width="24"
- />
- </Box>
- ) : null}
- <Box
- display={mapResponsiveValue(chainStatus, (value) => {
- if (value === 'icon' && !chain.iconUrl) {
- return 'block'; // Show the chain name if there is no iconUrl
- }
+ ) : null}
+ <Box
+ display={mapResponsiveValue(chainStatus, (value) => {
+ if (value === 'icon' && !chain.iconUrl) {
+ return 'block'; // Show the chain name if there is no iconUrl
+ }
 
- return value === 'full' || value === 'name'
- ? 'block'
- : 'none';
- })}
- >
- {chain.name ?? chain.id}
- </Box>
- </Box>
- )}
- <DropdownIcon />
+ return value === 'full' || value === 'name'
+ ? 'block'
+ : 'none';
+ })}
+ >
+ {chain.name ?? chain.id}
+ </Box>
  </Box>
  )}
+ <DropdownIcon />
+ </Box>
+ )}
 
+ {ready && account && connectionStatus === 'connected' ? (
+ <>
  {!unsupportedChain && (
  <Box
  alignItems="center"