fix: unsupported chain flagging

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 1.7.1
+
+This update fixes a bug where the chain was incorrectly detected as unsupported when only one chain is configured.
+
+## Fixed
+
+- Chain being incorrectly detected as unsupported when only one chain is configured.
+
 # 1.7.0
 
 This update moves peer dependencies wagmi and viem up to their latest versions.

examples/nextjs-app/config.ts

@@ -5,8 +5,6 @@ import { mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';
 export const config = createConfig(
   getDefaultConfig({
     appName: 'ConnectKit Next.js demo',
-    //infuraId: process.env.NEXT_PUBLIC_INFURA_ID,
-    //alchemyId:  process.env.NEXT_PUBLIC_ALCHEMY_ID,
     chains: [mainnet, polygon, optimism, arbitrum],
     walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
   })

examples/nextjs-siwe/src/pages/_app.tsx

@@ -6,7 +6,6 @@ import { WagmiProvider, createConfig } from 'wagmi';
 
 const config = createConfig(
   getDefaultConfig({
-    alchemyId: process.env.NEXT_PUBLIC_ALCHEMY_ID,
     walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
     appName: 'My ConnectKit App',
   })

examples/testbench/src/components/Web3Provider.tsx

@@ -7,6 +7,7 @@ import { WagmiProvider, createConfig } from 'wagmi';
 import { defineChain, type Chain, http } from 'viem';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { mainnet } from 'viem/chains';
 
 const avalanche: Chain = defineChain({
   id: 43_114,
@@ -27,10 +28,16 @@ const avalanche: Chain = defineChain({
 });
 
 const ckConfig = getDefaultConfig({
-  chains: [avalanche],
+  /*
+  chains: [
+    mainnet,
+    //avalanche
+  ],
   transports: {
-    [avalanche.id]: http(avalanche.rpcUrls.default.http[0]),
+    [mainnet.id]: http(mainnet.rpcUrls.default.http[0]),
+    //[avalanche.id]: http(avalanche.rpcUrls.default.http[0]),
   },
+  */
   appName: 'ConnectKit testbench',
   appIcon: '/app.png',
   walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,

examples/testbench/src/pages/chains.tsx

@@ -25,8 +25,8 @@ const Home: NextPage = () => {
     return () => clearInterval(interval);
   }, []);
 
-  const { chain } = useAccount();
   const chains = useChains();
+  const { chain } = useAccount();
 
   if (!mounted) return null;
 
@@ -36,12 +36,7 @@ const Home: NextPage = () => {
         <div className="panel">
           <h1>Chains</h1>
           <h2>Connected to</h2>
-          <ChainIcon
-            id={chain?.id}
-            unsupported={Boolean(
-              chain && !chains.some((x) => x.id !== chain?.id)
-            )}
-          />
+          <ChainIcon id={chain?.id} />
           <h2>Configured/Supported Chains</h2>
           <div style={{ display: 'flex', gap: 8 }}>
             {chains.map((chain) => (
@@ -93,17 +88,19 @@ const Home: NextPage = () => {
               gap: 8,
             }}
           >
-            {allChains.map((chain) => (
-              <div
-                key={chain.id}
-                style={{ display: 'flex', gap: 8, alignItems: 'center' }}
-              >
-                <ChainIcon id={chain.id} size={42} />
-                <span>
-                  {chain.name} <code>{chain.id}</code>
-                </span>
-              </div>
-            ))}
+            {allChains
+              .sort((a, b) => a.id - b.id)
+              .map((chain) => (
+                <div
+                  key={chain.id}
+                  style={{ display: 'flex', gap: 8, alignItems: 'center' }}
+                >
+                  <ChainIcon id={chain.id} size={42} />
+                  <span>
+                    {chain.name} <code>{chain.id}</code>
+                  </span>
+                </div>
+              ))}
           </div>
         </div>
       </main>

examples/testbench/src/pages/index.tsx

@@ -20,7 +20,6 @@ import {
   useSendTransaction,
   useSignMessage,
   useSignTypedData,
-  useSimulateContract,
   useConnect,
   useDisconnect,
 } from 'wagmi';
@@ -103,12 +102,7 @@ const AccountInfo = () => {
             </tr>
             <tr>
               <td>Chain Supported</td>
-              <td>
-                {!chain ||
-                Boolean(chain && !chains.some((x) => x.id !== chain?.id))
-                  ? 'No'
-                  : 'Yes'}
-              </td>
+              <td>{chains.some((x) => x.id === chain?.id) ? 'Yes' : 'No'}</td>
             </tr>
             <tr>
               <td>Address</td>
@@ -318,12 +312,7 @@ const Home: NextPage = () => {
         <div className="panel">
           <h2>Chains</h2>
           <div style={{ display: 'flex', gap: 8 }}>
-            <ChainIcon
-              id={chain?.id}
-              unsupported={Boolean(
-                chain && !chains.some((x) => x.id !== chain?.id)
-              )}
-            />
+            <ChainIcon id={chain?.id} />
             <ChainIcon id={1} size={64} radius={6} />
             <ChainIcon id={1337} size={32} radius={0} />
             <ChainIcon id={2} unsupported />
@@ -364,12 +353,7 @@ const Home: NextPage = () => {
                     }}
                   >
                     {chain?.name}
-                    <ChainIcon
-                      id={chain?.id}
-                      unsupported={Boolean(
-                        chain && !chains.some((x) => x.id !== chain?.id)
-                      )}
-                    />
+                    <ChainIcon id={chain?.id} />
                     <Avatar address={address} size={12} />
                     {ensName ?? address}
                   </div>

packages/connectkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "connectkit",
-  "version": "1.7.0",
+  "version": "1.7.1",
   "author": "Family",
   "homepage": "https://docs.family.co/connectkit",
   "license": "BSD-2-Clause license",

packages/connectkit/src/components/BalanceButton/index.tsx

@@ -14,6 +14,7 @@ import { chainConfigs } from '../../constants/chainConfigs';
 import ThemedButton from '../Common/ThemedButton';
 import { nFormatter } from '../../utils';
 import { useChains } from '../../hooks/useChains';
+import { useChainIsSupported } from '../../hooks/useChainIsSupported';
 
 const Container = styled(motion.div)`
   display: flex;
@@ -52,6 +53,7 @@ export const Balance: React.FC<BalanceProps> = ({ hideIcon, hideSymbol }) => {
 
   const { address, chain } = useAccount();
   const chains = useChains();
+  const unsupported = useChainIsSupported(chain?.id);
 
   const queryClient = useQueryClient();
   const { data: blockNumber } = useBlockNumber({ watch: true });
@@ -112,7 +114,7 @@ export const Balance: React.FC<BalanceProps> = ({ hideIcon, hideSymbol }) => {
                 </PulseContainer>
               </span>
             </Container>
-          ) : Boolean(chain && !chains.some((x) => x.id !== chain?.id)) ? (
+          ) : unsupported ? (
             <Container>
               {!hideIcon && <Chain id={chain?.id} />}
               <span style={{ minWidth: 32 }}>???</span>

packages/connectkit/src/components/Common/Chain/index.tsx

@@ -10,6 +10,7 @@ import { AnimatePresence } from 'framer-motion';
 import { chainConfigs } from '../../../constants/chainConfigs';
 import Chains from '../../../assets/chains';
 import useIsMounted from '../../../hooks/useIsMounted';
+import { useChainIsSupported } from '../../../hooks/useChainIsSupported';
 
 const Spinner = (
   <svg
@@ -55,7 +56,15 @@ const Chain: React.FC<{
   unsupported?: boolean;
   radius?: number | string;
   size?: number | string;
-}> = ({ id, unsupported, radius = '50%', size = 24 }) => {
+}> = ({
+  id,
+  unsupported: controlledUnsupported,
+  radius = '50%',
+  size = 24,
+}) => {
+  const isChainSupported = useChainIsSupported(id);
+  const unsupported = controlledUnsupported ?? !isChainSupported;
+
   const chain = chainConfigs.find((c) => c.id === id);
   const isMounted = useIsMounted();
   if (!isMounted)

packages/connectkit/src/components/Common/ChainSelect/index.tsx

@@ -172,20 +172,10 @@ const ChainSelector: React.FC = () => {
           >
             {disabled ? (
               <Tooltip message={locales.chainNetwork} xOffset={-6} delay={0.01}>
-                <Chain
-                  id={chain?.id}
-                  unsupported={Boolean(
-                    chain && !chains.some((x) => x.id !== chain?.id)
-                  )}
-                />
+                <Chain id={chain?.id} />
               </Tooltip>
             ) : (
-              <Chain
-                id={chain?.id}
-                unsupported={Boolean(
-                  chain && !chains.some((x) => x.id !== chain?.id)
-                )}
-              />
+              <Chain id={chain?.id} />
             )}
             {!disabled && <ChevronDown style={{ top: 1, left: -3 }} />}
           </SwitchChainButton>

packages/connectkit/src/components/ConnectButton/index.tsx

@@ -21,7 +21,7 @@ import { AuthIcon } from '../../assets/icons';
 import { useSIWE } from '../../siwe';
 import useLocales from '../../hooks/useLocales';
 import { Chain } from 'viem';
-import { useChains } from '../../hooks/useChains';
+import { useChainIsSupported } from '../../hooks/useChainIsSupported';
 
 const contentVariants: Variants = {
   initial: {
@@ -124,7 +124,8 @@ const ConnectButtonRenderer: React.FC<ConnectButtonRendererProps> = ({
   const { open, setOpen } = useModal();
 
   const { address, isConnected, chain } = useAccount();
-  const chains = useChains();
+  const isChainSupported = useChainIsSupported(chain?.id);
+
   const { data: ensName } = useEnsName({
     chainId: 1,
     address: address,
@@ -148,7 +149,7 @@ const ConnectButtonRenderer: React.FC<ConnectButtonRendererProps> = ({
         show,
         hide,
         chain: chain,
-        unsupported: Boolean(chain && !chains.some((x) => x.id !== chain?.id)),
+        unsupported: !isChainSupported,
         isConnected: !!address,
         isConnecting: open, // Using `open` to determine if connecting as wagmi isConnecting only is set to true when an active connector is awaiting connection
         address: address,
@@ -175,7 +176,8 @@ function ConnectKitButtonInner({
   const { isSignedIn } = useSIWE();
 
   const { address, chain } = useAccount();
-  const chains = useChains();
+  const isChainSupported = useChainIsSupported(chain?.id);
+
   const { data: ensName } = useEnsName({
     chainId: 1,
     address: address,
@@ -214,7 +216,7 @@ function ConnectKitButtonInner({
                     <AuthIcon />
                   </motion.div>
                 )}
-                {Boolean(chain && !chains.some((x) => x.id !== chain?.id)) && (
+                {!isChainSupported && (
                   <UnsupportedNetworkContainer
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
@@ -331,7 +333,7 @@ export function ConnectKitButton({
   const context = useContext();
 
   const { isConnected, address, chain } = useAccount();
-  const chains = useChains();
+  const chainIsSupported = useChainIsSupported(chain?.id);
 
   function show() {
     context.setOpen(true);
@@ -346,8 +348,7 @@ export function ConnectKitButton({
 
   if (!isMounted) return null;
 
-  const shouldShowBalance =
-    showBalance && Boolean(chain && !chains.some((x) => x.id !== chain?.id));
+  const shouldShowBalance = showBalance && chainIsSupported;
   const willShowBalance = address && shouldShowBalance;
 
   return (

packages/connectkit/src/components/ConnectKit.tsx

@@ -29,6 +29,7 @@ import { isFamily } from '../utils/wallets';
 import { useConnector } from '../hooks/useConnectors';
 import { WagmiContext, useAccount } from 'wagmi';
 import { Web3ContextProvider } from './contexts/web3';
+import { useChainIsSupported } from '../hooks/useChainIsSupported';
 
 export const routes = {
   ONBOARDING: 'onboarding',
@@ -201,16 +202,15 @@ export const ConnectKitProvider = ({
   useEffect(() => setErrorMessage(null), [route, open]);
 
   // Check if chain is supported, elsewise redirect to switches page
-  const { chain } = useAccount();
+  const { chain, isConnected } = useAccount();
+  const isChainSupported = useChainIsSupported(chain?.id);
+
   useEffect(() => {
-    if (
-      opts.enforceSupportedChains &&
-      Boolean(chain && !chains.some((x) => x.id !== chain?.id))
-    ) {
+    if (isConnected && opts.enforceSupportedChains && !isChainSupported) {
       setOpen(true);
       setRoute(routes.SWITCHNETWORKS);
     }
-  }, [chain, route, open]);
+  }, [isConnected, isChainSupported, chain, route, open]);
 
   // Autoconnect to Family wallet if available
   useEffect(() => {

packages/connectkit/src/components/ConnectModal/demo.tsx

@@ -20,8 +20,8 @@ import { ConnectKitThemeProvider } from '../ConnectKitThemeProvider/ConnectKitTh
 
 import styled from './../../styles/styled';
 import { keyframes } from 'styled-components';
-import { useChains } from '../../hooks/useChains';
 import { Web3ContextProvider } from '../contexts/web3';
+import { useChainIsSupported } from '../../hooks/useChainIsSupported';
 
 const dist = 8;
 const shake = keyframes`
@@ -99,13 +99,15 @@ const ConnectModal: React.FC<{
   onClose,
 }) => {
   const context = useContext();
+
   const { isConnected, chain } = useAccount();
-  const chains = useChains();
+  const chainIsSupported = useChainIsSupported(chain?.id);
 
   //if chain is unsupported we enforce a "switch chain" prompt
   const closeable = !(
     context.options?.enforceSupportedChains &&
-    Boolean(chain && !chains.some((x) => x.id !== chain?.id))
+    isConnected &&
+    !chainIsSupported
   );
 
   const showBackButton =

packages/connectkit/src/components/ConnectModal/index.tsx

@@ -16,7 +16,7 @@ import SignInWithEthereum from '../Pages/SignInWithEthereum';
 
 import { getAppIcon, getAppName } from '../../defaultConfig';
 import { ConnectKitThemeProvider } from '../ConnectKitThemeProvider/ConnectKitThemeProvider';
-import { useChains } from '../../hooks/useChains';
+import { useChainIsSupported } from '../../hooks/useChainIsSupported';
 
 const customThemeDefault: object = {};
 
@@ -33,12 +33,13 @@ const ConnectModal: React.FC<{
 }) => {
   const context = useContext();
   const { isConnected, chain } = useAccount();
-  const chains = useChains();
+  const chainIsSupported = useChainIsSupported(chain?.id);
 
   //if chain is unsupported we enforce a "switch chain" prompt
   const closeable = !(
     context.options?.enforceSupportedChains &&
-    Boolean(chain && !chains.some((x) => x.id !== chain?.id))
+    isConnected &&
+    !chainIsSupported
   );
 
   const showBackButton =

packages/connectkit/src/components/Pages/MobileConnectors/index.tsx

@@ -21,7 +21,6 @@ import {
   WalletConfigProps,
   walletConfigs,
 } from '../../../wallets/walletConfigs';
-import wallet from '../../../assets/wallet';
 
 const MoreIcon = (
   <svg