feat: Wallet Advanced Send (Fund Wallet)

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/api/getPriceQuote.test.ts

@@ -67,7 +67,7 @@ describe('getPriceQuote', () => {
     expect(result).toEqual({
       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/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/api/types.ts

@@ -397,15 +397,15 @@ export type GetPriceQuoteParams = {
 
 type PriceQuote = {
   /** The name of the token */
-  name: string | '';
+  name: string;
   /** The symbol of the token */
-  symbol: string | '';
+  symbol: string;
   /** The contract address of the token */
   contractAddress: Address | '';
   /** The price of the token */
-  price: string | '';
+  price: string;
   /** The timestamp of the price quote */
-  timestamp: number | 0;
+  timestamp: number;
 };
 
 /**

src/wallet/components/WalletAdvancedContent.test.tsx

@@ -42,6 +42,14 @@ vi.mock('./WalletAdvancedSwap', () => ({
   ),
 }));
 
+vi.mock('./wallet-advanced-send/components/Send', () => ({
+  Send: ({ className }: { className?: string }) => (
+    <div data-testid="ockWalletAdvancedSend" className={className}>
+      WalletAdvancedSend
+    </div>
+  ),
+}));
+
 vi.mock('./WalletProvider', () => ({
   useWalletContext: vi.fn(),
   WalletProvider: ({ children }: { children: React.ReactNode }) => (
@@ -267,6 +275,9 @@ describe('WalletAdvancedContent', () => {
     expect(
       screen.queryByTestId('ockWalletAdvancedSwap'),
     ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId('ockWalletAdvancedSend'),
+    ).not.toBeInTheDocument();
   });
 
   it('renders WalletAdvancedSwap when activeFeature is swap', () => {
@@ -286,6 +297,31 @@ describe('WalletAdvancedContent', () => {
     expect(
       screen.queryByTestId('ockWalletAdvancedQrReceive'),
     ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId('ockWalletAdvancedSend'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('renders WalletAdvancedSend when activeFeature is send', () => {
+    mockUseWalletAdvancedContext.mockReturnValue({
+      ...defaultMockUseWalletAdvancedContext,
+      activeFeature: 'send',
+    });
+
+    render(
+      <WalletAdvancedContent>
+        <div>WalletAdvancedContent</div>
+      </WalletAdvancedContent>,
+    );
+
+    expect(screen.getByTestId('ockWalletAdvancedSend')).toBeDefined();
+    expect(screen.queryByTestId('ockWalletAdvancedSend')).toBeInTheDocument();
+    expect(
+      screen.queryByTestId('ockWalletAdvancedQrReceive'),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId('ockWalletAdvancedSwap'),
+    ).not.toBeInTheDocument();
   });
 
   it('correctly maps token balances to the swap component', () => {

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,
@@ -38,6 +39,14 @@ export function WalletAdvancedContent({
   }, [isSubComponentClosing, setIsSubComponentOpen, setIsSubComponentClosing]);
 
   const content = useMemo(() => {
+    if (activeFeature === 'send') {
+      return (
+        <ContentWrapper>
+          <Send className={cn('h-full w-full border-none')} />
+        </ContentWrapper>
+      );
+    }
+
     if (activeFeature === 'qr') {
       return (
         <ContentWrapper>

src/wallet/components/WalletAdvancedTransactionActions.test.tsx

@@ -142,16 +142,19 @@ describe('WalletAdvancedTransactionActons', () => {
     expect(window.open).not.toHaveBeenCalled();
   });
 
-  it('opens the send page when the send button is clicked', () => {
+  it('sets activeFeature to send when the send button is clicked', () => {
+    mockUseWalletAdvancedContext.mockReturnValue(
+      defaultMockUseWalletAdvancedContext,
+    );
+
     render(<WalletAdvancedTransactionActions />);
 
     const sendButton = screen.getByRole('button', { name: 'Send' });
     fireEvent.click(sendButton);
 
-    expect(window.open).toHaveBeenCalledWith(
-      'https://wallet.coinbase.com',
-      '_blank',
-    );
+    expect(
+      defaultMockUseWalletAdvancedContext.setActiveFeature,
+    ).toHaveBeenCalledWith('send');
   });
 
   it('sets activeFeature to swap when the swap button is clicked', () => {

src/wallet/components/WalletAdvancedTransactionActions.tsx

@@ -80,8 +80,8 @@ export function WalletAdvancedTransactionActions({
 
   const handleSend = useCallback(() => {
     handleAnalyticsOptionSelected(WalletOption.Send);
-    window.open('https://wallet.coinbase.com', '_blank');
-  }, [handleAnalyticsOptionSelected]);
+    setActiveFeature('send');
+  }, [handleAnalyticsOptionSelected, setActiveFeature]);
 
   const handleSwap = useCallback(() => {
     handleAnalyticsOptionSelected(WalletOption.Swap);

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

@@ -0,0 +1,188 @@
+import { Skeleton } from '@/internal/components/Skeleton';
+import { render, screen } from '@testing-library/react';
+// import type { Address } from 'viem';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+// import { ETH_REQUIRED_FOR_SEND } from '../constants';
+import type { SendContextType } from '../types';
+import { Send } from './Send';
+// import { SendAddressSelection } from './SendAddressSelection';
+// import { SendAmountInput } from './SendAmountInput';
+// import { SendButton } from './SendButton';
+import { SendFundWallet } from './SendFundWallet';
+import { SendHeader } from './SendHeader';
+import { SendProvider, useSendContext } from './SendProvider';
+// import { SendTokenSelector } from './SendTokenSelector';
+
+// Mock all dependencies
+vi.mock('@/internal/components/Skeleton');
+vi.mock('@/internal/hooks/useTheme');
+// vi.mock('./SendAddressSelection');
+// vi.mock('./SendAmountInput');
+// vi.mock('./SendButton');
+vi.mock('./SendFundWallet');
+vi.mock('./SendHeader');
+vi.mock('./SendProvider', () => ({
+  SendProvider: vi.fn(({ children }) => (
+    <div data-testid="mock-send-provider">{children}</div>
+  )),
+  useSendContext: vi.fn(),
+}));
+vi.mock('./SendTokenSelector');
+
+// const mockSelectedtoken = {
+//   name: 'USD Coin',
+//   address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913' as Address,
+//   symbol: 'USDC',
+//   decimals: 6,
+//   image:
+//     'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjMZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2',
+//   chainId: 8453,
+//   cryptoBalance: 69,
+//   fiatBalance: 69,
+// };
+
+describe('Send', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders with SendProvider and applies correct classes', () => {
+    vi.mocked(useSendContext).mockReturnValue({
+      isInitialized: false,
+      ethBalance: 0,
+      selectedRecipientAddress: { value: null, display: '' },
+      selectedToken: null,
+    } as SendContextType);
+
+    render(<Send />);
+
+    expect(SendProvider).toHaveBeenCalled();
+    const sendContainer = screen.getByTestId('ockSend');
+    expect(sendContainer).toHaveClass('h-96 w-88 flex flex-col p-4');
+  });
+
+  it('applies custom className when provided', () => {
+    vi.mocked(useSendContext).mockReturnValue({
+      isInitialized: false,
+      ethBalance: 0,
+      selectedRecipientAddress: { value: null, display: '' },
+      selectedToken: null,
+    } as SendContextType);
+
+    render(<Send className="custom-class" />);
+
+    const sendContainer = screen.getByTestId('ockSend');
+    expect(sendContainer).toHaveClass('custom-class');
+  });
+
+  it('renders custom children when provided', () => {
+    const customChildren = (
+      <div data-testid="custom-children">Custom Content</div>
+    );
+    render(<Send>{customChildren}</Send>);
+
+    expect(screen.getByTestId('custom-children')).toBeInTheDocument();
+  });
+
+  describe('SendDefaultChildren', () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('renders skeleton when not initialized', () => {
+      vi.mocked(useSendContext).mockReturnValue({
+        isInitialized: false,
+        ethBalance: 0,
+        selectedRecipientAddress: { value: null, display: '' },
+        selectedToken: null,
+      } as SendContextType);
+
+      render(<Send />);
+
+      expect(Skeleton).toHaveBeenCalledWith(
+        expect.objectContaining({ className: 'h-full w-full' }),
+        {},
+      );
+    });
+
+    it('renders SendFundWallet when wallet has insufficient ETH', () => {
+      vi.mocked(useSendContext).mockReturnValue({
+        isInitialized: true,
+        ethBalance: 0,
+      } as SendContextType);
+
+      render(<Send />);
+
+      expect(SendHeader).toHaveBeenCalled();
+      expect(SendFundWallet).toHaveBeenCalled();
+      // expect(SendAddressSelection).not.toHaveBeenCalled();
+    });
+
+    it('renders a placeholder when wallet has sufficient ETH', () => {
+      vi.mocked(useSendContext).mockReturnValue({
+        isInitialized: true,
+        ethBalance: 0,
+      } as SendContextType);
+
+      render(<Send />);
+
+      expect(SendHeader).toHaveBeenCalled();
+      expect(screen.getByText('This wallet has ETH.')).toBeInTheDocument();
+    });
+
+    // it('renders SendAddressSelection when wallet has sufficient ETH', () => {
+    //   vi.mocked(useSendContext).mockReturnValue({
+    //     isInitialized: true,
+    //     ethBalance: ETH_REQUIRED_FOR_SEND + 0.0000000001, // de-minimis amount above ETH_REQUIRED_FOR_SEND
+    //     selectedRecipientAddress: { value: null, display: '' },
+    //     selectedToken: null,
+    //   } as SendContextType);
+
+    //   render(<Send />);
+
+    //   expect(SendHeader).toHaveBeenCalled();
+    //   expect(SendAddressSelection).toHaveBeenCalled();
+    //   expect(SendFundWallet).not.toHaveBeenCalled();
+    //   expect(SendTokenSelector).not.toHaveBeenCalled();
+    // });
+
+    // it('renders SendTokenSelector when recipient address is selected but token is not', () => {
+    //   vi.mocked(useSendContext).mockReturnValue({
+    //     isInitialized: true,
+    //     ethBalance: ETH_REQUIRED_FOR_SEND + 0.0000000001, // de-minimis amount above ETH_REQUIRED_FOR_SEND
+    //     selectedRecipientAddress: {
+    //       value: '0x1234567890123456789012345678901234567890' as Address,
+    //       display: '0x1234567890123456789012345678901234567890',
+    //     },
+    //     selectedToken: null,
+    //   } as SendContextType);
+
+    //   render(<Send />);
+
+    //   expect(SendHeader).toHaveBeenCalled();
+    //   expect(SendAddressSelection).toHaveBeenCalled();
+    //   expect(SendTokenSelector).toHaveBeenCalled();
+    //   expect(SendAmountInput).not.toHaveBeenCalled();
+    // });
+
+    // it('renders SendAmountInput and SendButton when both recipient and token are selected', () => {
+    //   vi.mocked(useSendContext).mockReturnValue({
+    //     isInitialized: true,
+    //     ethBalance: ETH_REQUIRED_FOR_SEND + 0.0000001,
+    //     selectedRecipientAddress: {
+    //       value: '0x1234567890123456789012345678901234567890' as Address,
+    //       display: '0x1234567890123456789012345678901234567890',
+    //     },
+    //     selectedToken: mockSelectedtoken,
+    //   } as SendContextType);
+
+    //   render(<Send />);
+
+    //   expect(SendHeader).toHaveBeenCalled();
+    //   expect(SendAddressSelection).toHaveBeenCalled();
+    //   expect(SendAmountInput).toHaveBeenCalled();
+    //   expect(SendTokenSelector).toHaveBeenCalled();
+    //   expect(SendButton).toHaveBeenCalled();
+    // });
+  });
+});