feat: Native Send Component

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

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/onchainkit",
-  "version": "0.36.9",
+  "version": "0.36.10",
   "type": "module",
   "repository": "https://github.com/coinbase/onchainkit.git",
   "license": "MIT",
@@ -79,7 +79,7 @@
     "tailwindcss": "^3.4.3",
     "tscpaths": "^0.0.9",
     "tsup": "^8.3.5",
-    "typescript": "^5.7.3",
+    "typescript": "~5.3.3",
     "vite": "^5.3.3",
     "vitest": "^3.0.5"
   },
@@ -140,12 +140,6 @@
       "import": "./esm/core/index.js",
       "default": "./esm/core/index.js"
     },
-    "./earn": {
-      "types": "./esm/earn/index.d.ts",
-      "module": "./esm/earn/index.js",
-      "import": "./esm/earn/index.js",
-      "default": "./esm/earn/index.js"
-    },
     "./fund": {
       "types": "./esm/fund/index.d.ts",
       "module": "./esm/fund/index.js",

src/internal/components/amount-input/AmountInput.tsx

@@ -15,6 +15,7 @@ type AmountInputProps = {
   setFiatAmount: (value: string) => void;
   setCryptoAmount: (value: string) => void;
   exchangeRate: string;
+  delayMs?: number;
   className?: string;
   textClassName?: string;
 };
@@ -28,6 +29,7 @@ export function AmountInput({
   setFiatAmount,
   setCryptoAmount,
   exchangeRate,
+  delayMs,
   className,
   textClassName,
 }: AmountInputProps) {
@@ -111,6 +113,7 @@ export function AmountInput({
               )}
               value={value}
               onChange={handleAmountChange}
+              delayMs={delayMs}
               inputValidator={isValidAmount}
               ref={inputRef}
               inputMode="decimal"

src/internal/hooks/useExchangeRate.tsx

@@ -22,7 +22,7 @@ export async function useExchangeRate({
     return;
   }
 
-  if (token.address === usdcToken.address) {
+  if (token.address.toLowerCase() === usdcToken.address.toLowerCase()) {
     setExchangeRate(1);
     return;
   }

src/token/components/TokenBalance.tsx

@@ -2,33 +2,59 @@ import { formatFiatAmount } from '@/internal/utils/formatFiatAmount';
 import { truncateDecimalPlaces } from '@/internal/utils/truncateDecimalPlaces';
 import { border, cn, color, text } from '@/styles/theme';
 import { TokenImage } from '@/token';
-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 && (
+          <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',
+              classNames?.action,
+            )}
+          >
+            {actionText}
+          </button>
         )}
-        data-testid="ockTokenBalanceButton"
-      >
-        <TokenBalanceContent
-          token={token}
-          {...contentProps}
-          classNames={classNames}
-        />
-      </button>
+      </div>
     );
   }
 
@@ -53,31 +79,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 +128,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,

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,27 @@ 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;
+        actionText?: never;
+      }
+    | {
+        /** Show an additional action button (eg. "Use max") */
+        onActionPress: () => void;
+        actionText?: string;
+      }
+  );

src/wallet/components/WalletAdvancedContent.tsx

@@ -8,6 +8,7 @@ import { useWalletAdvancedContext } from './WalletAdvancedProvider';
 import { WalletAdvancedQrReceive } from './WalletAdvancedQrReceive';
 import { WalletAdvancedSwap } from './WalletAdvancedSwap';
 import { useWalletContext } from './WalletProvider';
+import { Send } from './wallet-advanced-send/components/Send';
 
 export function WalletAdvancedContent({
   children,
@@ -23,7 +24,7 @@ export function WalletAdvancedContent({
     breakpoint,
   } = useWalletContext();
 
-  const { showQr, showSwap, tokenBalances, animations } =
+  const { activeFeature, tokenBalances, animations } =
     useWalletAdvancedContext();
 
   const handleBottomSheetClose = useCallback(() => {
@@ -38,15 +39,23 @@ export function WalletAdvancedContent({
   }, [isSubComponentClosing, setIsSubComponentOpen, setIsSubComponentClosing]);
 
   const content = useMemo(() => {
-    if (showQr) {
+    if (activeFeature === 'send') {
+      return (
+        <ContentWrapper>
+          <Send className={cn('h-full w-full border-none')} />
+        </ContentWrapper>
+      );
+    }
+
+    if (activeFeature === 'qr') {
       return (
         <ContentWrapper>
           <WalletAdvancedQrReceive classNames={classNames?.qr} />
         </ContentWrapper>
       );
     }
 
-    if (showSwap) {
+    if (activeFeature === 'swap') {
       return (
         <ContentWrapper>
           <WalletAdvancedSwap
@@ -75,7 +84,7 @@ export function WalletAdvancedContent({
     }
 
     return <ContentWrapper className="px-4 py-3">{children}</ContentWrapper>;
-  }, [showQr, showSwap, swappableTokens, tokenBalances, children, classNames]);
+  }, [activeFeature, swappableTokens, tokenBalances, children, classNames]);
 
   if (breakpoint === 'sm') {
     return (

src/wallet/components/WalletAdvancedProvider.tsx

@@ -2,7 +2,10 @@ import { RequestContext } from '@/core/network/constants';
 import { useValue } from '@/internal/hooks/useValue';
 import { usePortfolio } from '@/wallet/hooks/usePortfolio';
 import { type ReactNode, createContext, useContext, useState } from 'react';
-import type { WalletAdvancedContextType } from '../types';
+import type {
+  WalletAdvancedContextType,
+  WalletAdvancedFeature,
+} from '../types';
 import { useWalletContext } from './WalletProvider';
 
 type WalletAdvancedProviderReact = {
@@ -29,10 +32,9 @@ export function WalletAdvancedProvider({
 }: WalletAdvancedProviderReact) {
   const { address, isSubComponentClosing, showSubComponentAbove } =
     useWalletContext();
-  const [showSwap, setShowSwap] = useState(false);
-  const [isSwapClosing, setIsSwapClosing] = useState(false);
-  const [showQr, setShowQr] = useState(false);
-  const [isQrClosing, setIsQrClosing] = useState(false);
+  const [activeFeature, setActiveFeature] =
+    useState<WalletAdvancedFeature | null>(null);
+  const [isActiveFeatureClosing, setIsActiveFeatureClosing] = useState(false);
   const {
     data: portfolioData,
     refetch: refetchPortfolioData,
@@ -49,14 +51,10 @@ export function WalletAdvancedProvider({
   );
 
   const value = useValue({
-    showSwap,
-    setShowSwap,
-    isSwapClosing,
-    setIsSwapClosing,
-    showQr,
-    setShowQr,
-    isQrClosing,
-    setIsQrClosing,
+    activeFeature,
+    setActiveFeature,
+    isActiveFeatureClosing,
+    setIsActiveFeatureClosing,
     tokenBalances,
     portfolioFiatValue,
     isFetchingPortfolioData,

src/wallet/components/WalletAdvancedQrReceive.tsx

@@ -16,20 +16,24 @@
   classNames,
 }: WalletAdvancedQrReceiveProps) {
   const { address } = useWalletContext();
-  const { setShowQr, isQrClosing, setIsQrClosing } = useWalletAdvancedContext();
+  const {
+    setActiveFeature,
+    isActiveFeatureClosing,
+    setIsActiveFeatureClosing,
+  } = useWalletAdvancedContext();
   const [copyText, setCopyText] = useState('Copy');
   const [copyButtonText, setCopyButtonText] = useState('Copy address');
 
   const handleCloseQr = useCallback(() => {
-    setIsQrClosing(true);
-  }, [setIsQrClosing]);
+    setIsActiveFeatureClosing(true);
+  }, [setIsActiveFeatureClosing]);
 
   const handleAnimationEnd = useCallback(() => {
-    if (isQrClosing) {
-      setShowQr(false);
-      setIsQrClosing(false);
+    if (isActiveFeatureClosing) {
+      setActiveFeature(null);
+      setIsActiveFeatureClosing(false);
     }
-  }, [isQrClosing, setShowQr, setIsQrClosing]);
+  }, [isActiveFeatureClosing, setActiveFeature, setIsActiveFeatureClosing]);
 
   const resetAffordanceText = useCallback(() => {
     setTimeout(() => {
@@ -68,7 +72,7 @@
         'flex flex-col items-center justify-between',
         'h-full w-full',
         'px-4 pt-3 pb-4',
-        isQrClosing
+        isActiveFeatureClosing
           ? 'fade-out slide-out-to-left-5 animate-out fill-mode-forwards ease-in-out'
           : 'fade-in slide-in-from-left-5 linear animate-in duration-150',
         classNames?.container,