feat: Native Send Component

src/api/getPriceQuote.ts

@@ -29,7 +29,7 @@ export async function getPriceQuote(
     );
     if (res.error) {
       return {
-        code: `${res.error.code}`,
+        code: String(res.error.code),
         error: 'Error fetching price quote',
         message: res.error.message,
       };
@@ -51,7 +51,7 @@ function validateGetPriceQuoteParams(params: GetPriceQuoteParams) {
     return {
       code: 'INVALID_INPUT',
       error: 'Invalid input: tokens must be an array of at least one token',
-      message: '',
+      message: 'Tokens must be an array of at least one token',
     };
   }
 

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/token/components/TokenBalance.test.tsx

@@ -112,7 +112,13 @@ describe('TokenBalance', () => {
       render(<TokenBalance token={mockToken} onActionPress={onActionPress} />);
 
       const actionButton = screen.getByRole('button', { name: 'Use max' });
-      fireEvent.keyDown(actionButton);
+      fireEvent.keyDown(actionButton, { key: 'Escape' });
+      expect(onActionPress).not.toHaveBeenCalled();
+
+      fireEvent.keyDown(actionButton, { key: ' ' });
+      expect(onActionPress).toHaveBeenCalled();
+
+      fireEvent.keyDown(actionButton, { key: 'Enter' });
       expect(onActionPress).toHaveBeenCalled();
     });
 

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 && (
+          <TokenBalanceActionButton
+            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 && (
+        <TokenBalanceActionButton
+          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,36 @@ function TokenBalanceContent({
     </div>
   );
 }
+
+function TokenBalanceActionButton({
+  actionText,
+  onActionPress,
+  className,
+}: Pick<TokenBalanceProps, 'actionText' | 'onActionPress'> & {
+  className?: string;
+}) {
+  return (
+    <button
+      type="button"
+      data-testid="ockTokenBalanceAction"
+      aria-label={actionText}
+      onClick={onActionPress}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          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,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;
+      }
+  );