feat: SendProvider

src/wallet/components/wallet-advanced-send/components/SendAmountInput.test.tsx

@@ -1,11 +1,14 @@
 import { AmountInput } from '@/internal/components/amount-input/AmountInput';
 import { render } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 import { SendAmountInput } from './SendAmountInput';
-import { SendAmountInputTypeSwitch } from './SendAmountInputTypeSwitch';
+import { useSendContext } from './SendProvider';
 
 vi.mock('@/internal/components/amount-input/AmountInput');
 vi.mock('./SendAmountInputTypeSwitch');
+vi.mock('./SendProvider', () => ({
+  useSendContext: vi.fn(),
+}));
 
 const mockToken = {
   symbol: 'ETH',
@@ -18,36 +21,46 @@ const mockToken = {
   fiatBalance: 3300,
 };
 
+const defaultContext = {
+  selectedToken: mockToken,
+  cryptoAmount: '1.0',
+  handleCryptoAmountChange: vi.fn(),
+  fiatAmount: '2000',
+  handleFiatAmountChange: vi.fn(),
+  selectedInputType: 'crypto' as const,
+  setSelectedInputType: vi.fn(),
+  exchangeRate: 2000,
+  exchangeRateLoading: false,
+  className: 'test-class',
+  textClassName: 'test-text-class',
+};
+
 describe('SendAmountInput', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    (useSendContext as Mock).mockReturnValue(defaultContext);
   });
 
-  const defaultProps = {
-    selectedToken: mockToken,
-    cryptoAmount: '1.0',
-    handleCryptoAmountChange: vi.fn(),
-    fiatAmount: '2000',
-    handleFiatAmountChange: vi.fn(),
-    selectedInputType: 'crypto' as const,
-    setSelectedInputType: vi.fn(),
-    exchangeRate: 2000,
-    exchangeRateLoading: false,
-    className: 'test-class',
-    textClassName: 'test-text-class',
-  };
-
   it('passes correct props to AmountInput', () => {
-    render(<SendAmountInput {...defaultProps} />);
+    (useSendContext as Mock).mockReturnValue({
+      ...defaultContext,
+    });
+
+    render(
+      <SendAmountInput
+        className="test-class"
+        textClassName="test-text-class"
+      />,
+    );
     expect(AmountInput).toHaveBeenCalledWith(
       {
-        fiatAmount: defaultProps.fiatAmount,
-        cryptoAmount: defaultProps.cryptoAmount,
-        asset: defaultProps.selectedToken.symbol,
+        fiatAmount: defaultContext.fiatAmount,
+        cryptoAmount: defaultContext.cryptoAmount,
+        asset: defaultContext.selectedToken.symbol,
         currency: 'USD',
-        selectedInputType: defaultProps.selectedInputType,
-        setFiatAmount: defaultProps.handleFiatAmountChange,
-        setCryptoAmount: defaultProps.handleCryptoAmountChange,
+        selectedInputType: defaultContext.selectedInputType,
+        setFiatAmount: defaultContext.handleFiatAmountChange,
+        setCryptoAmount: defaultContext.handleCryptoAmountChange,
         exchangeRate: '2000',
         className: 'test-class',
         textClassName: 'test-text-class',
@@ -56,59 +69,34 @@ describe('SendAmountInput', () => {
     );
   });
 
-  it('passes correct props to SendAmountInputTypeSwitch', () => {
-    render(<SendAmountInput {...defaultProps} />);
-    expect(SendAmountInputTypeSwitch).toHaveBeenCalledWith(
-      {
-        selectedToken: defaultProps.selectedToken,
-        fiatAmount: defaultProps.fiatAmount,
-        cryptoAmount: defaultProps.cryptoAmount,
-        selectedInputType: defaultProps.selectedInputType,
-        setSelectedInputType: defaultProps.setSelectedInputType,
-        exchangeRate: defaultProps.exchangeRate,
-        exchangeRateLoading: defaultProps.exchangeRateLoading,
-      },
-      {},
-    );
-  });
-
   it('handles null/undefined values correctly', () => {
+    (useSendContext as Mock).mockReturnValue({
+      ...defaultContext,
+      selectedToken: null,
+      fiatAmount: null,
+      cryptoAmount: null,
+    });
+
     render(
       <SendAmountInput
-        {...defaultProps}
-        selectedToken={null}
-        fiatAmount={null}
-        cryptoAmount={null}
+        className="test-class"
+        textClassName="test-text-class"
       />,
     );
-
     expect(AmountInput).toHaveBeenCalledWith(
       {
         fiatAmount: '',
         cryptoAmount: '',
         asset: '',
         currency: 'USD',
         selectedInputType: 'crypto',
-        setFiatAmount: defaultProps.handleFiatAmountChange,
-        setCryptoAmount: defaultProps.handleCryptoAmountChange,
+        setFiatAmount: defaultContext.handleFiatAmountChange,
+        setCryptoAmount: defaultContext.handleCryptoAmountChange,
         exchangeRate: '2000',
         className: 'test-class',
         textClassName: 'test-text-class',
       },
       {},
     );
-
-    expect(SendAmountInputTypeSwitch).toHaveBeenCalledWith(
-      {
-        selectedToken: null,
-        fiatAmount: '',
-        cryptoAmount: '',
-        selectedInputType: defaultProps.selectedInputType,
-        setSelectedInputType: defaultProps.setSelectedInputType,
-        exchangeRate: defaultProps.exchangeRate,
-        exchangeRateLoading: defaultProps.exchangeRateLoading,
-      },
-      {},
-    );
   });
 });

src/wallet/components/wallet-advanced-send/components/SendAmountInput.tsx

@@ -1,29 +1,35 @@
 'use client';
 
 import { AmountInput } from '@/internal/components/amount-input/AmountInput';
-import type { SendAmountInputProps } from '../types';
 import { SendAmountInputTypeSwitch } from './SendAmountInputTypeSwitch';
+import { useSendContext } from './SendProvider';
+
+type SendAmountInputProps = {
+  className?: string;
+  textClassName?: string;
+};
 
 export function SendAmountInput({
-  selectedToken,
-  cryptoAmount,
-  handleCryptoAmountChange,
-  fiatAmount,
-  handleFiatAmountChange,
-  selectedInputType,
-  setSelectedInputType,
-  exchangeRate,
-  exchangeRateLoading,
   className,
   textClassName,
 }: SendAmountInputProps) {
+  const {
+    selectedToken,
+    cryptoAmount,
+    handleCryptoAmountChange,
+    fiatAmount,
+    handleFiatAmountChange,
+    selectedInputType,
+    exchangeRate,
+  } = useSendContext();
+
   return (
     <div className="flex h-full w-full flex-col justify-center">
       <AmountInput
         fiatAmount={fiatAmount ?? ''}
         cryptoAmount={cryptoAmount ?? ''}
         asset={selectedToken?.symbol ?? ''}
-        currency={'USD'}
+        currency="USD"
         selectedInputType={selectedInputType}
         setFiatAmount={handleFiatAmountChange}
         setCryptoAmount={handleCryptoAmountChange}
@@ -32,15 +38,7 @@ export function SendAmountInput({
         textClassName={textClassName}
       />
 
-      <SendAmountInputTypeSwitch
-        selectedToken={selectedToken ?? null}
-        fiatAmount={fiatAmount ?? ''}
-        cryptoAmount={cryptoAmount ?? ''}
-        selectedInputType={selectedInputType}
-        setSelectedInputType={setSelectedInputType}
-        exchangeRate={exchangeRate}
-        exchangeRateLoading={exchangeRateLoading}
-      />
+      <SendAmountInputTypeSwitch />
     </div>
   );
 }

src/wallet/components/wallet-advanced-send/components/SendAmountInputTypeSwitch.test.tsx

@@ -1,11 +1,15 @@
 import { Skeleton } from '@/internal/components/Skeleton';
 import { AmountInputTypeSwitch } from '@/internal/components/amount-input/AmountInputTypeSwitch';
 import { render } from '@testing-library/react';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 import { SendAmountInputTypeSwitch } from './SendAmountInputTypeSwitch';
+import { useSendContext } from './SendProvider';
 
 vi.mock('@/internal/components/Skeleton');
 vi.mock('@/internal/components/amount-input/AmountInputTypeSwitch');
+vi.mock('./SendProvider', () => ({
+  useSendContext: vi.fn(),
+}));
 
 const mockToken = {
   symbol: 'ETH',
@@ -18,88 +22,104 @@ const mockToken = {
   fiatBalance: 3300,
 };
 
+const defaultContext = {
+  selectedToken: mockToken,
+  cryptoAmount: '1.0',
+  fiatAmount: '2000',
+  selectedInputType: 'crypto' as const,
+  setSelectedInputType: vi.fn(),
+  exchangeRate: 2000,
+  exchangeRateLoading: false,
+};
+
 describe('SendAmountInputTypeSwitch', () => {
   beforeEach(() => {
     vi.clearAllMocks();
+    (useSendContext as Mock).mockReturnValue(defaultContext);
   });
 
-  const defaultProps = {
-    selectedToken: mockToken,
-    cryptoAmount: '1.0',
-    handleCryptoAmountChange: vi.fn(),
-    fiatAmount: '2000',
-    handleFiatAmountChange: vi.fn(),
-    selectedInputType: 'crypto' as const,
-    setSelectedInputType: vi.fn(),
-    exchangeRate: 2000,
-    exchangeRateLoading: false,
-    className: 'test-class',
-    textClassName: 'test-text-class',
-    loadingDisplay: <div>test-loading-display</div>,
-  };
-
   it('passes an error state when exchange rate is invalid', () => {
-    render(<SendAmountInputTypeSwitch {...defaultProps} exchangeRate={0} />);
+    const mockLoadingDisplay = <div>test-loading-display</div>;
+    (useSendContext as Mock).mockReturnValue({
+      ...defaultContext,
+      exchangeRate: 0,
+    });
+
+    render(<SendAmountInputTypeSwitch loadingDisplay={mockLoadingDisplay} />);
     expect(AmountInputTypeSwitch).toHaveBeenCalledWith(
       expect.objectContaining({
-        loadingDisplay: <div>test-loading-display</div>,
+        loadingDisplay: mockLoadingDisplay,
         exchangeRate: 0,
       }),
       {},
     );
   });
 
   it('shows skeleton when exchange rate is loading', () => {
-    render(
-      <SendAmountInputTypeSwitch
-        {...defaultProps}
-        exchangeRateLoading={true}
-      />,
-    );
+    (useSendContext as Mock).mockReturnValue({
+      ...defaultContext,
+      exchangeRateLoading: true,
+    });
+
+    render(<SendAmountInputTypeSwitch />);
     expect(Skeleton).toHaveBeenCalled();
   });
 
   it('passes correct props to AmountInput', () => {
-    render(<SendAmountInputTypeSwitch {...defaultProps} />);
+    const mockLoadingDisplay = <div>test-loading-display</div>;
+    (useSendContext as Mock).mockReturnValue(defaultContext);
+
+    render(
+      <SendAmountInputTypeSwitch
+        className="test-class"
+        loadingDisplay={mockLoadingDisplay}
+      />,
+    );
     expect(AmountInputTypeSwitch).toHaveBeenCalledWith(
       {
-        asset: defaultProps.selectedToken.symbol,
-        fiatAmount: defaultProps.fiatAmount,
-        cryptoAmount: defaultProps.cryptoAmount,
-        exchangeRate: defaultProps.exchangeRate,
-        exchangeRateLoading: false,
+        asset: defaultContext.selectedToken.symbol,
+        fiatAmount: defaultContext.fiatAmount,
+        cryptoAmount: defaultContext.cryptoAmount,
+        exchangeRate: defaultContext.exchangeRate,
+        exchangeRateLoading: defaultContext.exchangeRateLoading,
         currency: 'USD',
-        selectedInputType: defaultProps.selectedInputType,
-        setSelectedInputType: defaultProps.setSelectedInputType,
-        className: defaultProps.className,
-        loadingDisplay: defaultProps.loadingDisplay,
+        selectedInputType: defaultContext.selectedInputType,
+        setSelectedInputType: defaultContext.setSelectedInputType,
+        className: 'test-class',
+        loadingDisplay: <div>test-loading-display</div>,
       },
       {},
     );
   });
 
   it('handles null/undefined values correctly', () => {
-    render(
-      <SendAmountInputTypeSwitch
-        {...defaultProps}
-        selectedToken={null}
-        fiatAmount={null}
-        cryptoAmount={null}
-      />,
-    );
+    const mockSetSelectedInputType = vi.fn();
+    const mockLoadingDisplay = <div>test-loading-display</div>;
+
+    (useSendContext as Mock).mockReturnValue({
+      selectedToken: null,
+      fiatAmount: null,
+      cryptoAmount: null,
+      exchangeRate: 3300,
+      exchangeRateLoading: false,
+      selectedInputType: 'fiat',
+      setSelectedInputType: mockSetSelectedInputType,
+    });
+
+    render(<SendAmountInputTypeSwitch loadingDisplay={mockLoadingDisplay} />);
 
     expect(AmountInputTypeSwitch).toHaveBeenCalledWith(
       {
         asset: '',
         fiatAmount: '',
         cryptoAmount: '',
-        exchangeRate: defaultProps.exchangeRate,
-        exchangeRateLoading: defaultProps.exchangeRateLoading,
+        exchangeRate: 3300,
+        exchangeRateLoading: false,
         currency: 'USD',
-        selectedInputType: defaultProps.selectedInputType,
-        setSelectedInputType: defaultProps.setSelectedInputType,
-        className: defaultProps.className,
-        loadingDisplay: defaultProps.loadingDisplay,
+        selectedInputType: 'fiat',
+        setSelectedInputType: mockSetSelectedInputType,
+        className: undefined,
+        loadingDisplay: mockLoadingDisplay,
       },
       {},
     );