Fix isChainSupported in BalanceButton (#346)

* Fix isChainSupported in BalanceButton * Fix chain logo bad loading * Fix "change in the order of Hooks"
family · Feb 13, 2024 · e565bfa · e565bfa
1 parent 5d27392
commit e565bfa
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/packages/connectkit/src/components/BalanceButton/index.tsx b/packages/connectkit/src/components/BalanceButton/index.tsx
@@ -53,7 +53,7 @@ export const Balance: React.FC<BalanceProps> = ({ hideIcon, hideSymbol }) => {
 
   const { address, chain } = useAccount();
   const chains = useChains();
-  const unsupported = useChainIsSupported(chain?.id);
+  const isChainSupported = useChainIsSupported(chain?.id);
 
   const queryClient = useQueryClient();
   const { data: blockNumber } = useBlockNumber({ watch: true });
@@ -105,7 +105,7 @@ export const Balance: React.FC<BalanceProps> = ({ hideIcon, hideSymbol }) => {
         >
           {!address || !isMounted || balance?.formatted === undefined ? (
             <Container>
-              {!hideIcon && <Chain />}
+              {!hideIcon && <Chain id={chain?.id} />}
               <span style={{ minWidth: 32 }}>
                 <PulseContainer>
                   <span style={{ animationDelay: '0ms' }} />
@@ -114,7 +114,7 @@ export const Balance: React.FC<BalanceProps> = ({ hideIcon, hideSymbol }) => {
                 </PulseContainer>
               </span>
             </Container>
-          ) : unsupported ? (
+          ) : !isChainSupported ? (
             <Container>
               {!hideIcon && <Chain id={chain?.id} />}
               <span style={{ minWidth: 32 }}>???</span>

diff --git a/packages/connectkit/src/hooks/useChainIsSupported.ts b/packages/connectkit/src/hooks/useChainIsSupported.ts
@@ -1,7 +1,7 @@
 import { useConfig } from 'wagmi';
 
 export function useChainIsSupported(chainId?: number): boolean | null {
-  if (!chainId) return false;
   const { chains } = useConfig();
+  if (!chainId) return false;
   return chains.some((x) => x.id === chainId);
 }