Implement Fund Card component

playground/nextjs-app-router/components/Demo.tsx

@@ -7,7 +7,8 @@ import { useContext, useEffect, useState } from 'react';
 import DemoOptions from './DemoOptions';
 import BuyDemo from './demo/Buy';
 import CheckoutDemo from './demo/Checkout';
-import FundDemo from './demo/Fund';
+import FundButtonDemo from './demo/FundButton';
+import FundCardDemo from './demo/FundCard';
 import IdentityDemo from './demo/Identity';
 import { IdentityCardDemo } from './demo/IdentityCard';
 import NFTCardDemo from './demo/NFTCard';
@@ -24,8 +25,9 @@ import WalletDefaultDemo from './demo/WalletDefault';
 import WalletIslandDemo from './demo/WalletIsland';
 
 const activeComponentMapping: Record<OnchainKitComponent, React.FC> = {
+  [OnchainKitComponent.FundButton]: FundButtonDemo,
+  [OnchainKitComponent.FundCard]: FundCardDemo,
   [OnchainKitComponent.Buy]: BuyDemo,
-  [OnchainKitComponent.Fund]: FundDemo,
   [OnchainKitComponent.Identity]: IdentityDemo,
   [OnchainKitComponent.Transaction]: TransactionDemo,
   [OnchainKitComponent.Checkout]: CheckoutDemo,

playground/nextjs-app-router/components/demo/Fund.tsx → playground/nextjs-app-router/components/demo/FundButton.tsx

@@ -1,6 +1,6 @@
 import { FundButton } from '@coinbase/onchainkit/fund';
 
-export default function FundDemo() {
+export default function FundButtonDemo() {
   return (
     <div className="mx-auto grid w-1/2 gap-8">
       <FundButton />

playground/nextjs-app-router/components/demo/FundCard.tsx

@@ -0,0 +1,20 @@
+import { FundCard } from '@coinbase/onchainkit/fund';
+export default function FundCardDemo() {
+  return (
+    <div className="mx-auto grid w-[500px] gap-8">
+      <FundCard
+        assetSymbol="ETH"
+        country="US"
+        onError={(error) => {
+          console.log('FundCard onError', error);
+        }}
+        onStatus={(status) => {
+          console.log('FundCard onStatus', status);
+        }}
+        onSuccess={() => {
+          console.log('FundCard onSuccess');
+        }}
+      />
+    </div>
+  );
+}

playground/nextjs-app-router/components/form/active-component.tsx

@@ -26,8 +26,13 @@ export function ActiveComponent() {
           <SelectValue placeholder="Select component" />
         </SelectTrigger>
         <SelectContent>
+          <SelectItem value={OnchainKitComponent.FundButton}>
+            Fund Button
+          </SelectItem>
+          <SelectItem value={OnchainKitComponent.FundCard}>
+            Fund Card
+          </SelectItem>
           <SelectItem value={OnchainKitComponent.Buy}>Buy</SelectItem>
-          <SelectItem value={OnchainKitComponent.Fund}>Fund</SelectItem>
           <SelectItem value={OnchainKitComponent.Identity}>Identity</SelectItem>
           <SelectItem value={OnchainKitComponent.IdentityCard}>
             IdentityCard

playground/nextjs-app-router/types/onchainkit.ts

@@ -1,6 +1,7 @@
 export enum OnchainKitComponent {
+  FundButton = 'fund-button',
+  FundCard = 'fund-card',
   Buy = 'buy',
-  Fund = 'fund',
   Identity = 'identity',
   IdentityCard = 'identity-card',
   Checkout = 'checkout',

src/buy/components/BuyOnrampItem.test.tsx

@@ -36,9 +36,9 @@ describe('BuyOnrampItem', () => {
     );
 
     expect(screen.getByRole('button')).toBeInTheDocument();
-    expect(screen.getByText('Apple Pay')).toBeInTheDocument();
+    expect(screen.getByTestId('ock-applePayOnrampItem')).toBeInTheDocument();
     expect(screen.getByText('Fast and secure payments.')).toBeInTheDocument();
-    expect(screen.getByTestId('appleSvg')).toBeInTheDocument();
+    expect(screen.getByTestId('ock-applePaySvg')).toBeInTheDocument();
   });
 
   it('handles icon rendering based on the icon prop', () => {

src/buy/components/BuyOnrampItem.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { appleSvg } from '../../internal/svg/appleSvg';
+import { applePaySvg } from '../../internal/svg/applePaySvg';
 import { cardSvg } from '../../internal/svg/cardSvg';
 import { coinbaseLogoSvg } from '../../internal/svg/coinbaseLogoSvg';
 import { cn, color, pressable, text } from '../../styles/theme';
@@ -15,7 +15,7 @@ type OnrampItemReact = {
 };
 
 const ONRAMP_ICON_MAP: Record<string, React.ReactNode> = {
-  applePay: appleSvg,
+  applePay: applePaySvg,
   coinbasePay: coinbaseLogoSvg,
   creditCard: cardSvg,
 };

src/core-react/internal/hooks/useIcon.test.tsx

@@ -1,8 +1,12 @@
 import { renderHook } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
+import { applePaySvg } from '../../../internal/svg/applePaySvg';
+import { appleSvg } from '../../../internal/svg/appleSvg';
 import { coinbasePaySvg } from '../../../internal/svg/coinbasePaySvg';
+import { creditCardSvg } from '../../../internal/svg/creditCardSvg';
 import { fundWalletSvg } from '../../../internal/svg/fundWallet';
 import { swapSettingsSvg } from '../../../internal/svg/swapSettings';
+import { toggleSvg } from '../../../internal/svg/toggleSvg';
 import { walletSvg } from '../../../internal/svg/walletSvg';
 import { useIcon } from './useIcon';
 
@@ -17,7 +21,27 @@ describe('useIcon', () => {
     expect(result.current).toBe(walletSvg);
   });
 
-  it('should return coinbasePaySvg when icon is "coinbasePay"', () => {
+  it('should return toggleSvg when icon is "toggle"', () => {
+    const { result } = renderHook(() => useIcon({ icon: 'toggle' }));
+    expect(result.current).toBe(toggleSvg);
+  });
+
+  it('should return appleSvg when icon is "apple"', () => {
+    const { result } = renderHook(() => useIcon({ icon: 'apple' }));
+    expect(result.current).toBe(appleSvg);
+  });
+
+  it('should return applePaySvg when icon is "applePay"', () => {
+    const { result } = renderHook(() => useIcon({ icon: 'applePay' }));
+    expect(result.current).toBe(applePaySvg);
+  });
+
+  it('should return creditCardSvg when icon is "creditCard"', () => {
+    const { result } = renderHook(() => useIcon({ icon: 'creditCard' }));
+    expect(result.current).toBe(creditCardSvg);
+  });
+
+  it('should return CoinbasePaySvg when icon is "coinbasePay"', () => {
     const { result } = renderHook(() => useIcon({ icon: 'coinbasePay' }));
     expect(result.current).toBe(coinbasePaySvg);
   });

src/core-react/internal/hooks/useIcon.tsx

@@ -1,7 +1,12 @@
+import { applePaySvg } from '@/internal/svg/applePaySvg';
 import { isValidElement, useMemo } from 'react';
+import { appleSvg } from '../../../internal/svg/appleSvg';
+import { coinbaseLogoSvg } from '../../../internal/svg/coinbaseLogoSvg';
 import { coinbasePaySvg } from '../../../internal/svg/coinbasePaySvg';
+import { creditCardSvg } from '../../../internal/svg/creditCardSvg';
 import { fundWalletSvg } from '../../../internal/svg/fundWallet';
 import { swapSettingsSvg } from '../../../internal/svg/swapSettings';
+import { toggleSvg } from '../../../internal/svg/toggleSvg';
 import { walletSvg } from '../../../internal/svg/walletSvg';
 
 export const useIcon = ({ icon }: { icon?: React.ReactNode }) => {
@@ -12,12 +17,22 @@ export const useIcon = ({ icon }: { icon?: React.ReactNode }) => {
     switch (icon) {
       case 'coinbasePay':
         return coinbasePaySvg;
+      case 'coinbaseLogo':
+        return coinbaseLogoSvg;
       case 'fundWallet':
         return fundWalletSvg;
       case 'swapSettings':
         return swapSettingsSvg;
       case 'wallet':
         return walletSvg;
+      case 'toggle':
+        return toggleSvg;
+      case 'applePay':
+        return applePaySvg;
+      case 'apple':
+        return appleSvg;
+      case 'creditCard':
+        return creditCardSvg;
     }
     if (isValidElement(icon)) {
       return icon;

src/fund/components/FundButton.test.tsx

@@ -1,7 +1,17 @@
-import '@testing-library/jest-dom';
+import { pressable } from '@/styles/theme';
 import { openPopup } from '@/ui-react/internal/utils/openPopup';
+import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { type Mock, afterEach, describe, expect, it, vi } from 'vitest';
+import {
+  type Mock,
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from 'vitest';
+import { useAccount } from 'wagmi';
 import { useGetFundingUrl } from '../hooks/useGetFundingUrl';
 import { getFundingPopupSize } from '../utils/getFundingPopupSize';
 import { FundButton } from './FundButton';
@@ -22,7 +32,41 @@ vi.mock('../../core-react/internal/hooks/useTheme', () => ({
   useTheme: vi.fn(),
 }));
 
-describe('WalletDropdownFundLink', () => {
+vi.mock('../../wallet/components/ConnectWallet', () => ({
+  ConnectWallet: ({ className }: { className?: string }) => (
+    <div data-testid="ockConnectWallet_Container" className={className}>
+      Connect Wallet
+    </div>
+  ),
+}));
+
+vi.mock('wagmi', () => ({
+  useAccount: vi.fn(),
+  useConnect: vi.fn(),
+}));
+
+const mockResponseData = {
+  payment_total: { value: '100.00', currency: 'USD' },
+  payment_subtotal: { value: '120.00', currency: 'USD' },
+  purchase_amount: { value: '0.1', currency: 'BTC' },
+  coinbase_fee: { value: '2.00', currency: 'USD' },
+  network_fee: { value: '1.00', currency: 'USD' },
+  quote_id: 'quote-id-123',
+};
+
+global.fetch = vi.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve(mockResponseData),
+  }),
+) as Mock;
+
+describe('FundButton', () => {
+  beforeEach(() => {
+    (useAccount as Mock).mockReturnValue({
+      address: '0x123',
+    });
+  });
+
   afterEach(() => {
     vi.clearAllMocks();
   });
@@ -34,7 +78,6 @@ describe('WalletDropdownFundLink', () => {
 
     render(<FundButton fundingUrl={fundingUrl} />);
 
-    expect(useGetFundingUrl).not.toHaveBeenCalled();
     const buttonElement = screen.getByRole('button');
     expect(screen.getByText('Fund')).toBeInTheDocument();
 
@@ -69,29 +112,114 @@ describe('WalletDropdownFundLink', () => {
     });
   });
 
-  it('renders a disabled fund button when no funding URL is provided and the default cannot be fetched', () => {
-    (useGetFundingUrl as Mock).mockReturnValue(undefined);
+  it('renders the fund button as a link when the openIn prop is set to tab', () => {
+    const fundingUrl = 'https://props.funding.url';
+    const { height, width } = { height: 200, width: 100 };
+    (getFundingPopupSize as Mock).mockReturnValue({ height, width });
 
-    render(<FundButton />);
+    render(<FundButton fundingUrl={fundingUrl} openIn="tab" />);
 
-    expect(useGetFundingUrl).toHaveBeenCalled();
-    const buttonElement = screen.getByRole('button');
-    expect(buttonElement).toHaveClass('pointer-events-none');
+    const linkElement = screen.getByRole('link');
+    expect(screen.getByText('Fund')).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute('href', fundingUrl);
+  });
+
+  it('displays a spinner when in loading state', () => {
+    render(<FundButton state="loading" fundingUrl="https://funding.url" />);
+    expect(screen.getByTestId('ockSpinner')).toBeInTheDocument();
+  });
+
+  it('displays success text when in success state', () => {
+    render(<FundButton state="success" />);
+    expect(screen.getByTestId('ockFundButtonTextContent')).toHaveTextContent(
+      'Success',
+    );
+  });
+
+  it('displays error text when in error state', () => {
+    render(<FundButton state="error" />);
+    expect(screen.getByTestId('ockFundButtonTextContent')).toHaveTextContent(
+      'Something went wrong',
+    );
+  });
+
+  it('adds disabled class when the button is disabled', () => {
+    render(<FundButton disabled={true} />);
+    expect(screen.getByRole('button')).toHaveClass(pressable.disabled);
+  });
 
+  it('calls onPopupClose when the popup window is closed', () => {
+    vi.useFakeTimers();
+    const fundingUrl = 'https://props.funding.url';
+    const onPopupClose = vi.fn();
+    const { height, width } = { height: 200, width: 100 };
+    const mockPopupWindow = {
+      closed: false,
+      close: vi.fn(),
+    };
+    (getFundingPopupSize as Mock).mockReturnValue({ height, width });
+    (openPopup as Mock).mockReturnValue(mockPopupWindow);
+
+    render(<FundButton fundingUrl={fundingUrl} onPopupClose={onPopupClose} />);
+
+    const buttonElement = screen.getByRole('button');
     fireEvent.click(buttonElement);
-    expect(openPopup as Mock).not.toHaveBeenCalled();
+
+    // Simulate closing the popup
+    mockPopupWindow.closed = true;
+    vi.runOnlyPendingTimers();
+
+    expect(onPopupClose).toHaveBeenCalled();
   });
 
-  it('renders the fund button as a link when the openIn prop is set to tab', () => {
+  it('calls onClick when the fund button is clicked', () => {
     const fundingUrl = 'https://props.funding.url';
+    const onClick = vi.fn();
     const { height, width } = { height: 200, width: 100 };
     (getFundingPopupSize as Mock).mockReturnValue({ height, width });
 
-    render(<FundButton fundingUrl={fundingUrl} openIn="tab" />);
+    render(<FundButton fundingUrl={fundingUrl} onClick={onClick} />);
 
-    expect(useGetFundingUrl).not.toHaveBeenCalled();
-    const linkElement = screen.getByRole('link');
-    expect(screen.getByText('Fund')).toBeInTheDocument();
-    expect(linkElement).toHaveAttribute('href', fundingUrl);
+    const buttonElement = screen.getByRole('button');
+    fireEvent.click(buttonElement);
+
+    expect(onClick).toHaveBeenCalled();
+    expect(getFundingPopupSize as Mock).toHaveBeenCalledWith('md', fundingUrl);
+    expect(openPopup as Mock).toHaveBeenCalledWith({
+      url: fundingUrl,
+      height,
+      width,
+      target: undefined,
+    });
+  });
+
+  it('icon is not shown when hideIcon is passed', () => {
+    render(<FundButton hideIcon={true} />);
+    expect(screen.queryByTestId('ockFundButtonIcon')).not.toBeInTheDocument();
+  });
+
+  it('shows ConnectWallet when no wallet is connected', () => {
+    (useAccount as Mock).mockReturnValue({
+      address: undefined,
+    });
+
+    render(<FundButton className="custom-class" />);
+
+    expect(
+      screen.queryByTestId('ockConnectWallet_Container'),
+    ).toBeInTheDocument();
+    expect(screen.queryByTestId('ockFundButton')).not.toBeInTheDocument();
+    expect(screen.getByTestId('ockConnectWallet_Container')).toHaveClass(
+      'custom-class',
+    );
+  });
+
+  it('shows Fund button when wallet is connected', () => {
+    render(<FundButton />);
+
+    expect(screen.queryByTestId('ockFundButton')).toBeInTheDocument();
+    expect(
+      screen.queryByTestId('ockConnectWallet_Container'),
+    ).not.toBeInTheDocument();
   });
 });