refactor: better TokenBalance

playground/nextjs-app-router/onchainkit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/onchainkit",
-  "version": "0.37.4",
+  "version": "0.37.5",
   "type": "module",
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",

src/token/components/TokenBalance.test.tsx

@@ -88,7 +88,12 @@ describe('TokenBalance', () => {
       expect(screen.getByText(`0.000 ETH ${subtitle}`)).toBeInTheDocument();
     });
 
-    it('renders action button when showAction is true', () => {
+    it('does not render action button when onActionPress is not provided', () => {
+      render(<TokenBalance token={mockToken} />);
+      expect(screen.queryByTestId('ockTokenBalanceAction')).toBeNull();
+    });
+
+    it('renders action button when onActionPress is provided', () => {
       const onActionPress = vi.fn();
       render(
         <TokenBalance
@@ -107,15 +112,6 @@ describe('TokenBalance', () => {
       expect(onActionPress).toHaveBeenCalled();
     });
 
-    it('handles keyboard events on action button', () => {
-      const onActionPress = vi.fn();
-      render(<TokenBalance token={mockToken} onActionPress={onActionPress} />);
-
-      const actionButton = screen.getByRole('button', { name: 'Use max' });
-      fireEvent.keyDown(actionButton);
-      expect(onActionPress).toHaveBeenCalled();
-    });
-
     it('applies custom class names to token elements when no action is provided', () => {
       const customClassNames = {
         tokenName: 'custom-name',

src/token/components/TokenBalance.tsx

@@ -2,33 +2,47 @@ import { formatFiatAmount } from '@/internal/utils/formatFiatAmount';
 import { truncateDecimalPlaces } from '@/internal/utils/truncateDecimalPlaces';
 import { border, cn, color, text } from '@/styles/theme';
 import { TokenImage } from '@/token/components/TokenImage';
-import { useCallback } from 'react';
+import { useMemo } from 'react';
 import { formatUnits } from 'viem';
 import type { TokenBalanceProps } from '../types';
 
 export function TokenBalance({
   token,
   onClick,
+  onActionPress,
+  actionText = 'Use max',
   classNames,
+  'aria-label': ariaLabel,
   ...contentProps
 }: TokenBalanceProps) {
   if (onClick) {
     return (
-      <button
-        type="button"
-        onClick={() => onClick(token)}
-        className={cn(
-          'flex w-full items-center justify-start gap-4 px-2 py-1',
-          classNames?.container,
+      <div className="relative">
+        <button
+          type="button"
+          aria-label={ariaLabel ?? `${token.name} token balance`}
+          onClick={() => onClick(token)}
+          className={cn(
+            'flex w-full items-center justify-start gap-4 px-2 py-1',
+            classNames?.container,
+          )}
+          data-testid="ockTokenBalanceButton"
+        >
+          <TokenBalanceContent
+            token={token}
+            classNames={classNames}
+            onActionPress={onActionPress}
+            {...contentProps}
+          />
+        </button>
+        {onActionPress && (
+          <ActionButton
+            actionText={actionText}
+            onActionPress={onActionPress}
+            className={classNames?.action}
+          />
         )}
-        data-testid="ockTokenBalanceButton"
-      >
-        <TokenBalanceContent
-          token={token}
-          {...contentProps}
-          classNames={classNames}
-        />
-      </button>
+      </div>
     );
   }
 
@@ -45,6 +59,13 @@ export function TokenBalance({
         {...contentProps}
         classNames={classNames}
       />
+      {onActionPress && (
+        <ActionButton
+          actionText={actionText}
+          onActionPress={onActionPress}
+          className={classNames?.action}
+        />
+      )}
     </div>
   );
 }
@@ -53,31 +74,26 @@ function TokenBalanceContent({
   token,
   subtitle,
   showImage = true,
-  actionText = 'Use max',
   onActionPress,
   tokenSize = 40,
   classNames,
 }: TokenBalanceProps) {
-  const formattedFiatValue = formatFiatAmount({
-    amount: token.fiatBalance,
-    currency: 'USD',
-  });
-
-  const formattedCryptoValue = truncateDecimalPlaces(
-    formatUnits(BigInt(token.cryptoBalance), token.decimals),
-    3,
+  const formattedFiatValue = useMemo(
+    () =>
+      formatFiatAmount({
+        amount: token.fiatBalance,
+        currency: 'USD',
+      }),
+    [token.fiatBalance],
   );
 
-  const handleActionPress = useCallback(
-    (
-      e:
-        | React.MouseEvent<HTMLDivElement, MouseEvent>
-        | React.KeyboardEvent<HTMLDivElement>,
-    ) => {
-      e.stopPropagation();
-      onActionPress?.();
-    },
-    [onActionPress],
+  const formattedCryptoValue = useMemo(
+    () =>
+      truncateDecimalPlaces(
+        formatUnits(BigInt(token.cryptoBalance), token.decimals),
+        3,
+      ),
+    [token.cryptoBalance, token.decimals],
   );
 
   return (
@@ -107,25 +123,7 @@ function TokenBalanceContent({
         </span>
       </div>
       <div className="text-right">
-        {onActionPress ? (
-          <div
-            role="button"
-            data-testid="ockTokenBalanceAction"
-            aria-label={actionText}
-            onClick={handleActionPress}
-            onKeyDown={handleActionPress}
-            className={cn(
-              text.label2,
-              color.primary,
-              border.radius,
-              'ml-auto cursor-pointer p-0.5 font-bold',
-              'border border-transparent hover:border-[--ock-line-primary]',
-              classNames?.action,
-            )}
-          >
-            {actionText}
-          </div>
-        ) : (
+        {!onActionPress && (
           <span
             className={cn(
               text.label2,
@@ -141,3 +139,31 @@ function TokenBalanceContent({
     </div>
   );
 }
+
+function ActionButton({
+  actionText,
+  onActionPress,
+  className,
+}: Pick<TokenBalanceProps, 'actionText' | 'onActionPress'> & {
+  className?: string;
+}) {
+  return (
+    <button
+      type="button"
+      data-testid="ockTokenBalanceAction"
+      aria-label={actionText}
+      onClick={onActionPress}
+      className={cn(
+        text.label2,
+        color.primary,
+        border.radius,
+        'cursor-pointer p-0.5 font-bold',
+        'border border-transparent hover:border-[--ock-line-primary]',
+        '-translate-y-1/2 absolute top-1/2 right-2',
+        className,
+      )}
+    >
+      {actionText}
+    </button>
+  );
+}

src/token/types.ts

@@ -130,12 +130,10 @@ export type TokenBalanceProps = {
   token: PortfolioTokenWithFiatValue;
   /** Subtitle to display next to the token name (eg. "available") */
   subtitle?: string;
-  /** Show the token image (default: true) */
-  showImage?: boolean;
   /** Click handler for the whole component*/
   onClick?: (token: PortfolioTokenWithFiatValue) => void;
-  /** Size of the token image in px (default: 40) */
-  tokenSize?: number;
+  /** Optional aria label for the component */
+  'aria-label'?: string;
   /** Optional additional CSS classes to apply to the component */
   classNames?: {
     container?: string;
@@ -146,13 +144,29 @@ export type TokenBalanceProps = {
   };
 } & (
   | {
-      /** Hide the action button (default)*/
-      actionText?: never;
-      onActionPress?: never;
+      /** Show the token image (default: true) */
+      showImage?: true;
+      /** Size of the token image in px (default: 40) */
+      tokenSize?: number;
     }
   | {
-      /** Show an additional action button (eg. "Use max") */
-      actionText?: string;
-      onActionPress: () => void;
+      /** Hide the token image */
+      showImage: false;
+      /** Size of the token image in px (default: 40) */
+      tokenSize?: never;
     }
-);
+) &
+  (
+    | {
+        /** Hide the action button (default)*/
+        onActionPress?: never;
+        /** Optional action button text (default: "Use max") */
+        actionText?: never;
+      }
+    | {
+        /** Action handler for the action button */
+        onActionPress: () => void;
+        /** Optional action button text (default: "Use max") */
+        actionText?: string;
+      }
+  );