fix: <ConnectButton.Custom /> not displaying balance (#1760)

* chore: always show balance when using ConnectButton.Custom

* chore: force show balance for <ConnectButton.Custom>

* chore: ready before rendering component

* chore: render JSX component

* chore: tweak changelog

---------

Co-authored-by: Daniel Sinclair <d@niel.nyc>

.changeset/lazy-badgers-decide.md

@@ -0,0 +1,5 @@
+---
+"@rainbow-me/rainbowkit": patch
+---
+
+Fixed a bug where `account.displayBalance` for the `<ConnectButton.Custom>` component would sometimes be undefined.

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

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import {
   ResponsiveValue,
   mapResponsiveValue,
@@ -42,14 +42,17 @@ export function ConnectButton({
   const chains = useRainbowKitChains();
   const connectionStatus = useConnectionStatus();
   const { setShowBalance } = useShowBalance();
+  const [ready, setReady] = useState(false);
 
   const { i18n } = useContext(I18nContext);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   useEffect(() => {
     setShowBalance(showBalance);
+    if (!ready) setReady(true);
   }, [showBalance, setShowBalance]);
 
-  return (
+  return ready ? (
     <ConnectButtonRenderer>
       {({
         account,
@@ -263,7 +266,10 @@ export function ConnectButton({
                 background="accentColor"
                 borderRadius="connectButton"
                 boxShadow="connectButton"
-                className={touchableStyles({ active: 'shrink', hover: 'grow' })}
+                className={touchableStyles({
+                  active: 'shrink',
+                  hover: 'grow',
+                })}
                 color="accentColorForeground"
                 fontFamily="body"
                 fontWeight="bold"
@@ -284,6 +290,8 @@ export function ConnectButton({
         );
       }}
     </ConnectButtonRenderer>
+  ) : (
+    <></>
   );
 }
 

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

@@ -89,7 +89,7 @@ export function ConnectButtonRenderer({
     ? normalizeResponsiveValue(showBalance)[
         isMobile() ? 'smallScreen' : 'largeScreen'
       ]
-    : false;
+    : true;
   const { data: balanceData } = useBalance({
     address: shouldShowBalance ? address : undefined,
   });