Add support for displaying custom token address

examples/testbench/src/pages/index.tsx

@@ -62,6 +62,14 @@ const languages: SelectProps[] = [
   { label: 'Chinese', value: 'zh-CN' },
 ];
 
+// USDC addresses for each chain
+const customTokenAddresses = {
+  [wagmiChains.mainnet.id]: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+  [wagmiChains.polygon.id]: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
+  [wagmiChains.optimism.id]: '0x7f5c764cbc14f9669b88837ca1490cca17c31607',
+  [wagmiChains.arbitrum.id]: '0xFF970A61A04b1cA14834A43f5dE4533eBDDB5CC8',
+} as const;
+
 const AccountInfo = () => {
   const {
     address,
@@ -280,7 +288,7 @@ const Home: NextPage = () => {
       <main>
         <div className="panel">
           <h2>Connect Button</h2>
-          <ConnectKitButton label={label} />
+          <ConnectKitButton showBalance={!hideBalance} label={label} />
           {isConnected && (
             <button onClick={handleDisconnect}>Disconnect</button>
           )}
@@ -588,6 +596,19 @@ const Home: NextPage = () => {
             })
           }
         />
+        <Checkbox
+          label="customTokenAddress"
+          value="customTokenAddress"
+          checked={options.customTokenAddress !== undefined}
+          onChange={() =>
+            setOptions({
+              ...options,
+              customTokenAddress: options.customTokenAddress
+                ? undefined
+                : customTokenAddresses,
+            })
+          }
+        />
         <Select
           label="walletConnectCTA"
           value={options.walletConnectCTA as string}

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

@@ -9,9 +9,10 @@ import { useAccount, useBalance, useNetwork } from 'wagmi';
 import useIsMounted from '../../hooks/useIsMounted';
 
 import Chain from '../Common/Chain';
-import supportedChains from '../../constants/supportedChains';
+import supportedChains, { ChainIds } from '../../constants/supportedChains';
 import ThemedButton from '../Common/ThemedButton';
 import { nFormatter } from '../../utils';
+import { useContext } from '../ConnectKit';
 
 const Container = styled(motion.div)`
   display: flex;
@@ -47,14 +48,21 @@ type BalanceProps = {
 export const Balance: React.FC<BalanceProps> = ({ hideIcon, hideSymbol }) => {
   const isMounted = useIsMounted();
   const [isInitial, setIsInitial] = useState(true);
+  const context = useContext();
 
   const { address } = useAccount();
   const { chain } = useNetwork();
 
+  const customTokenAddress =
+    context?.options?.customTokenAddress && chain
+      ? context.options.customTokenAddress[chain.id as ChainIds]
+      : undefined;
+
   const { data: balance } = useBalance({
     address,
     chainId: chain?.id,
     watch: true,
+    ...(customTokenAddress && { token: customTokenAddress }),
   });
 
   const currentChain = supportedChains.find((c) => c.id === chain?.id);
@@ -112,11 +120,13 @@ export const Balance: React.FC<BalanceProps> = ({ hideIcon, hideSymbol }) => {
             </Container>
           ) : (
             <Container>
-              {!hideIcon && <Chain id={chain?.id} />}
+              {!hideIcon && !customTokenAddress ? (
+                <Chain id={chain?.id} />
+              ) : null}
               <span style={{ minWidth: 32 }}>
                 {nFormatter(Number(balance?.formatted))}
               </span>
-              {!hideSymbol && ` ${balance?.symbol}`}
+              {!hideSymbol || customTokenAddress ? ` ${balance?.symbol}` : null}
             </Container>
           )}
         </motion.div>

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

@@ -80,7 +80,11 @@ const ChainSelectList = ({
         <ChainButtons>
           {chains.map((x) => {
             const c = supportedChains.find((ch) => ch.id === x.id);
+
+            if (!c) return;
+
             const ch = { ...c, ...x };
+
             return (
               <ChainButton
                 key={`${ch?.id}-${ch?.name}`}

packages/connectkit/src/components/ConnectKit.tsx

@@ -21,6 +21,7 @@ import { ThemeProvider } from 'styled-components';
 import { useThemeFont } from '../hooks/useGoogleFont';
 import { useNetwork } from 'wagmi';
 import { SIWEContext } from './../siwe';
+import { ChainIds } from '../constants/supportedChains';
 import { useChains } from '../hooks/useChains';
 import {
   useConnectCallback,
@@ -88,6 +89,7 @@ export type ConnectKitOptions = {
   ethereumOnboardingUrl?: string;
   walletOnboardingUrl?: string;
   disableSiweRedirect?: boolean; // Disable redirect to SIWE page after a wallet is connected
+  customTokenAddress?: Partial<Record<ChainIds, `0x${string}`>>;
   overlayBlur?: number; // Blur the background when the modal is open
 };
 
@@ -147,6 +149,7 @@ export const ConnectKitProvider: React.FC<ConnectKitProviderProps> = ({
     ethereumOnboardingUrl: undefined,
     walletOnboardingUrl: undefined,
     disableSiweRedirect: false,
+    customTokenAddress: undefined,
   };
 
   const opts: ConnectKitOptions = Object.assign({}, defaultOptions, options);

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

@@ -39,6 +39,7 @@ import CopyToClipboard from '../../Common/CopyToClipboard';
 import { AnimatePresence } from 'framer-motion';
 import { useThemeContext } from '../../ConnectKitThemeProvider/ConnectKitThemeProvider';
 import useLocales from '../../../hooks/useLocales';
+import { ChainIds } from '../../../constants/supportedChains';
 
 const Profile: React.FC<{ closeModal?: () => void }> = ({ closeModal }) => {
   const context = useContext();
@@ -55,8 +56,15 @@ const Profile: React.FC<{ closeModal?: () => void }> = ({ closeModal }) => {
     chainId: 1,
     address: address,
   });
+
+  const customTokenAddress =
+    context?.options?.customTokenAddress && chain
+      ? context.options.customTokenAddress[chain.id as ChainIds]
+      : undefined;
+
   const { data: balance } = useBalance({
     address,
+    ...(customTokenAddress && { token: customTokenAddress }),
     //watch: true,
   });
 

packages/connectkit/src/constants/supportedChains.tsx

@@ -1,8 +1,7 @@
 import { ReactNode } from 'react';
 import Logos from './../assets/chains';
 
-type Chain = { id: number; name: string; logo: ReactNode };
-const supportedChains: Chain[] = [
+const supportedChains = [
   {
     id: 1,
     name: 'Ethereum',
@@ -233,6 +232,8 @@ const supportedChains: Chain[] = [
     name: 'IoTeX Testnet',
     logo: <Logos.IoTeX testnet />,
   },
-];
+] as const;
+
+export type ChainIds = typeof supportedChains[number]['id'];
 
 export default supportedChains;