feat: Send flow sub components

src/internal/components/TextInput.tsx

@@ -20,10 +20,6 @@ type TextInputReact = {
   setValue?: (s: string) => void;
   value: string;
   inputValidator?: (s: string) => boolean;
-  /** autocomplete attribute handles browser autocomplete, defaults to 'off' */
-  autoComplete?: string;
-  /** data-1p-ignore attribute handles password manager autocomplete, defaults to true */
-  'data-1p-ignore'?: boolean;
 };
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputReact>(
@@ -41,8 +37,6 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputReact>(
       inputMode,
       value,
       inputValidator = () => true,
-      autoComplete = 'off',
-      'data-1p-ignore': data1pIgnore = true,
     },
     ref,
   ) => {
@@ -80,8 +74,8 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputReact>(
         onChange={handleChange}
         onFocus={onFocus}
         disabled={disabled}
-        autoComplete={autoComplete}
-        data-1p-ignore={data1pIgnore}
+        autoComplete="off" // autocomplete attribute handles browser autocomplete
+        data-1p-ignore={true} // data-1p-ignore attribute handles password manager autocomplete
       />
     );
   },

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

@@ -16,6 +16,7 @@ type AmountInputProps = {
   setCryptoAmount: (value: string) => void;
   exchangeRate: string;
   className?: string;
+  textClassName?: string;
 };
 
 export function AmountInput({
@@ -24,10 +25,11 @@ export function AmountInput({
   asset,
   selectedInputType,
   currency,
-  className,
   setFiatAmount,
   setCryptoAmount,
   exchangeRate,
+  className,
+  textClassName,
 }: AmountInputProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -105,6 +107,7 @@ export function AmountInput({
                 '[appearance:textfield]',
                 '[&::-webkit-inner-spin-button]:m-0 [&::-webkit-inner-spin-button]:appearance-none',
                 '[&::-webkit-outer-spin-button]:m-0 [&::-webkit-outer-spin-button]:appearance-none',
+                textClassName,
               )}
               value={value}
               onChange={handleAmountChange}
@@ -114,7 +117,11 @@ export function AmountInput({
               placeholder="0"
             />
             <div className="ml-1">
-              <CurrencyLabel ref={labelRef} label={currencyOrAsset} />
+              <CurrencyLabel
+                ref={labelRef}
+                label={currencyOrAsset}
+                className={textClassName}
+              />
             </div>
           </div>
         </div>
@@ -123,6 +130,7 @@ export function AmountInput({
       {/* Hidden span for measuring text width
           Without this span the input field would not adjust its width based on the text width and would look like this:
           [0.12--------Empty Space-------][ETH] - As you can see the currency symbol is far away from the inputed value
+
           With this span we can measure the width of the text in the input field and set the width of the input field to match the text width
           [0.12][ETH] - Now the currency symbol is displayed next to the input field
       */}

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

@@ -13,6 +13,7 @@ type AmountInputTypeSwitchPropsReact = {
   cryptoAmount: string;
   exchangeRate: number;
   exchangeRateLoading: boolean;
+  loadingDisplay?: React.ReactNode;
   currency: string;
   className?: string;
 };
@@ -26,6 +27,7 @@ export function AmountInputTypeSwitch({
   exchangeRate,
   exchangeRateLoading,
   currency,
+  loadingDisplay = <Skeleton className="h-[1.625rem]" />,
   className,
 }: AmountInputTypeSwitchPropsReact) {
   const iconSvg = useIcon({ icon: 'toggle' });
@@ -56,7 +58,7 @@ export function AmountInputTypeSwitch({
   }, [cryptoAmount, fiatAmount, selectedInputType, formatCrypto, currency]);
 
   if (exchangeRateLoading || !exchangeRate) {
-    return <Skeleton className="h-[1.625rem]" />;
+    return loadingDisplay;
   }
 
   return (

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

@@ -3,10 +3,11 @@ import { forwardRef } from 'react';
 
 type CurrencyLabelProps = {
   label: string;
+  className?: string;
 };
 
 export const CurrencyLabel = forwardRef<HTMLSpanElement, CurrencyLabelProps>(
-  ({ label }, ref) => {
+  ({ label, className }, ref) => {
     return (
       <span
         ref={ref}
@@ -15,6 +16,7 @@ export const CurrencyLabel = forwardRef<HTMLSpanElement, CurrencyLabelProps>(
           color.disabled,
           'flex items-center justify-center bg-transparent',
           'text-6xl leading-none outline-none',
+          className,
         )}
         data-testid="ockCurrencySpan"
       >

src/token/components/TokenBalance.test.tsx

@@ -0,0 +1,188 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { TokenBalance } from './TokenBalance';
+
+const mockToken = {
+  symbol: 'ETH',
+  address: '' as const,
+  chainId: 8453,
+  decimals: 18,
+  image: null,
+  name: 'Ethereum',
+  cryptoBalance: 1,
+  fiatBalance: 3300,
+};
+
+describe('TokenBalance', () => {
+  describe('Main TokenBalance component', () => {
+    it('renders as div when no onClick provided', () => {
+      render(<TokenBalance token={mockToken} />);
+      expect(screen.queryByRole('button')).toBeNull();
+    });
+
+    it('renders as button with onClick handler', () => {
+      const onClick = vi.fn();
+      render(<TokenBalance token={mockToken} onClick={onClick} />);
+
+      const button = screen.getByRole('button');
+      fireEvent.click(button);
+      expect(onClick).toHaveBeenCalledWith(mockToken);
+    });
+
+    it('applies custom classNames to the div container', () => {
+      const customClassNames = { container: 'custom-class' };
+      render(<TokenBalance token={mockToken} classNames={customClassNames} />);
+      expect(screen.getByTestId('ockTokenBalance')).toHaveClass(
+        customClassNames.container,
+      );
+    });
+
+    it('applies custom classNames to the button container', () => {
+      const customClassNames = { container: 'custom-class' };
+      const handleClick = vi.fn();
+      render(
+        <TokenBalance
+          token={mockToken}
+          onClick={handleClick}
+          classNames={customClassNames}
+        />,
+      );
+      expect(screen.getByTestId('ockTokenBalanceButton')).toHaveClass(
+        customClassNames.container,
+      );
+    });
+  });
+
+  describe('TokenBalanceContent', () => {
+    it('renders token details correctly', () => {
+      render(<TokenBalance token={mockToken} subtitle="Test subtitle" />);
+
+      expect(screen.getByText('Ethereum')).toBeInTheDocument();
+      expect(screen.getByText('0.000 ETH Test subtitle')).toBeInTheDocument();
+      expect(screen.getByText('$3,300.00')).toBeInTheDocument();
+    });
+
+    it('shows/hides token image based on showImage prop', () => {
+      const { rerender } = render(
+        <TokenBalance
+          token={mockToken}
+          showImage={true}
+          subtitle="Test subtitle"
+        />,
+      );
+      expect(screen.getByTestId('ockTokenImage_NoImage')).toBeInTheDocument();
+
+      rerender(
+        <TokenBalance
+          token={mockToken}
+          showImage={false}
+          subtitle="Test subtitle"
+        />,
+      );
+      expect(screen.queryByTestId('ockTokenImage_NoImage')).toBeNull();
+    });
+
+    it('renders subtitle when provided', () => {
+      const subtitle = '(50% of balance)';
+      render(<TokenBalance token={mockToken} subtitle={subtitle} />);
+      expect(screen.getByText(`0.000 ETH ${subtitle}`)).toBeInTheDocument();
+    });
+
+    it('renders action button when showAction is true', () => {
+      const onActionPress = vi.fn();
+      render(
+        <TokenBalance
+          token={mockToken}
+          actionText="Custom Action"
+          onActionPress={onActionPress}
+        />,
+      );
+
+      const actionButton = screen.getByRole('button', {
+        name: 'Custom Action',
+      });
+      expect(actionButton).toBeInTheDocument();
+
+      fireEvent.click(actionButton);
+      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',
+        tokenValue: 'custom-value',
+        fiatValue: 'custom-fiat',
+      };
+
+      render(<TokenBalance token={mockToken} classNames={customClassNames} />);
+
+      expect(screen.getByText('Ethereum')).toHaveClass('custom-name');
+      expect(screen.getByText('0.000 ETH')).toHaveClass('custom-value');
+      expect(screen.getByText('$3,300.00')).toHaveClass('custom-fiat');
+    });
+
+    it('applies custom class names to token elements when action is provided', () => {
+      const customClassNames = {
+        tokenName: 'custom-name',
+        tokenValue: 'custom-value',
+        action: 'custom-action',
+      };
+
+      render(
+        <TokenBalance
+          token={mockToken}
+          classNames={customClassNames}
+          onActionPress={() => {}}
+        />,
+      );
+
+      expect(screen.getByText('Ethereum')).toHaveClass('custom-name');
+      expect(screen.getByText('0.000 ETH')).toHaveClass('custom-value');
+      expect(screen.getByTestId('ockTokenBalanceAction')).toHaveClass(
+        'custom-action',
+      );
+    });
+
+    it('handles token with empty/null name', () => {
+      const tokenWithoutName = {
+        ...mockToken,
+        name: null as unknown as string,
+      };
+      render(
+        <TokenBalance token={tokenWithoutName} subtitle="Test subtitle" />,
+      );
+
+      const nameElement = screen.getByText('', {
+        selector: 'span.ock-font-family.font-semibold',
+      });
+      expect(nameElement).toBeInTheDocument();
+    });
+
+    it('handles token size prop correctly', () => {
+      const customSize = 60;
+      render(
+        <TokenBalance
+          token={mockToken}
+          tokenSize={customSize}
+          subtitle="Test subtitle"
+        />,
+      );
+      const imageContainer = screen.getByTestId('ockTokenImage_NoImage');
+      expect(imageContainer).toHaveStyle({
+        width: `${customSize}px`,
+        height: `${customSize}px`,
+        minWidth: `${customSize}px`,
+        minHeight: `${customSize}px`,
+      });
+    });
+  });
+});