feat: WalletDropdownFundLink

.changeset/witty-crabs-change.md

@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+**feat**: `WalletDropdownFundLink` - add a wallet dropdown link for the keys.coinbase.com funding flow by @0xAlec #1021

site/docs/pages/wallet/types.mdx

@@ -82,6 +82,21 @@ export type WalletDropdownDisconnectReact = {
 };
 ```
 
+## `WalletDropdownFundLinkReact`
+
+```ts
+export type WalletDropdownFundLinkReact = {
+  className?: string; // Optional className override for the element
+  icon?: ReactNode; // Optional icon override
+  openIn?: 'popup' | 'tab'; // Whether to open the funding flow in a tab or a popup window
+  popupFeatures?: string; // Optional features override for the popup window if `openIn` is set to `popup`
+  popupSize?: 'sm' | 'md' | 'lg'; // Size of the popup window if `openIn` is set to `popup`
+  rel?: string; // Specifies the relationship between the current document and the linked document
+  target?: string; // Where to open the target if `openIn` is set to tab
+  text?: string; // Optional text override
+};
+```
+
 ## `WalletDropdownLinkReact`
 
 ```ts

src/internal/svg/fundWallet.tsx

@@ -0,0 +1,19 @@
+import { fill } from '../../styles/theme';
+
+export const fundWalletSvg = (
+  <svg
+    role="img"
+    aria-label="fund-wallet-svg"
+    width="100%"
+    height="100%"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM1.63962 4.33685C5.1477 6.36224 9.63276 5.16047 11.6582 1.65239C9.63276 5.16047 10.8345 9.64553 14.3413 11.6702C10.8345 9.64553 6.35021 10.846 4.32482 14.3541C6.35021 10.846 5.1477 6.36224 1.63962 4.33685Z"
+      fill="#0A0B0D"
+      className={fill.defaultReverse}
+    />
+  </svg>
+);

src/wallet/components/WalletDropdownFundLink.test.tsx

@@ -0,0 +1,118 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { expect, it, vi } from 'vitest';
+import { version } from '../../version';
+import type { WindowSizes } from '../types';
+import { WalletDropdownFundLink } from './WalletDropdownFundLink';
+
+const FUNDING_URL = `http://keys.coinbase.com/fund?dappName=&dappUrl=http%3A%2F%2Flocalhost%3A3000%2F&version=${version}&source=onchainkit`;
+
+describe('WalletDropdownFundLink', () => {
+  it('renders correctly with default props', () => {
+    render(<WalletDropdownFundLink />);
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute('href', FUNDING_URL);
+    expect(screen.getByText('Fund wallet')).toBeInTheDocument();
+  });
+
+  it('renders correctly with custom icon element', () => {
+    const customIcon = <svg aria-label="custom-icon" />;
+    render(<WalletDropdownFundLink icon={customIcon} />);
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute('href', FUNDING_URL);
+    expect(screen.getByText('Fund wallet')).toBeInTheDocument();
+    expect(screen.getByLabelText('custom-icon')).toBeInTheDocument();
+  });
+
+  it('renders correctly with custom text', () => {
+    render(<WalletDropdownFundLink text="test" />);
+
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute('href', FUNDING_URL);
+    expect(screen.getByText('test')).toBeInTheDocument();
+  });
+
+  it('opens a new window when clicked with type="window" (default size medium)', () => {
+    // Mock window.open
+    const mockOpen = vi.fn();
+    vi.stubGlobal('open', mockOpen);
+
+    // Mock window.screen
+    vi.stubGlobal('screen', { width: 1024, height: 768 });
+
+    render(<WalletDropdownFundLink openIn="popup" />);
+
+    const linkElement = screen.getByText('Fund wallet');
+    fireEvent.click(linkElement);
+
+    // Check if window.open was called with the correct arguments
+    expect(mockOpen).toHaveBeenCalledWith(
+      expect.stringContaining('http://keys.coinbase.com/fund'),
+      undefined,
+      expect.stringContaining(
+        'width=297,height=371,resizable,scrollbars=yes,status=1,left=364,top=199',
+      ),
+    );
+
+    // Clean up
+    vi.unstubAllGlobals();
+  });
+
+  const testCases: WindowSizes = {
+    sm: { width: '23vw', height: '28.75vw' },
+    md: { width: '29vw', height: '36.25vw' },
+    lg: { width: '35vw', height: '43.75vw' },
+  };
+
+  const minWidth = 280;
+  const minHeight = 350;
+
+  for (const [size, { width, height }] of Object.entries(testCases)) {
+    it(`opens a new window when clicked with type="window" and popupSize="${size}"`, () => {
+      const mockOpen = vi.fn();
+      const screenWidth = 1024;
+      const screenHeight = 768;
+      const innerWidth = 1024;
+      const innerHeight = 768;
+
+      vi.stubGlobal('open', mockOpen);
+      vi.stubGlobal('screen', { width: screenWidth, height: screenHeight });
+
+      render(
+        <WalletDropdownFundLink
+          openIn="popup"
+          popupSize={size as keyof typeof testCases}
+        />,
+      );
+
+      const linkElement = screen.getByText('Fund wallet');
+      fireEvent.click(linkElement);
+
+      const vwToPx = (vw: string) =>
+        Math.round((Number.parseFloat(vw) / 100) * innerWidth);
+
+      const expectedWidth = Math.max(minWidth, vwToPx(width));
+      const expectedHeight = Math.max(minHeight, vwToPx(height));
+      const adjustedHeight = Math.min(
+        expectedHeight,
+        Math.round(innerHeight * 0.9),
+      );
+      const expectedLeft = Math.round((screenWidth - expectedWidth) / 2);
+      const expectedTop = Math.round((screenHeight - adjustedHeight) / 2);
+      expect(mockOpen).toHaveBeenCalledWith(
+        expect.stringContaining('http://keys.coinbase.com/fund'),
+        undefined,
+        expect.stringContaining(
+          `width=${expectedWidth},height=${adjustedHeight},resizable,scrollbars=yes,status=1,left=${expectedLeft},top=${expectedTop}`,
+        ),
+      );
+
+      vi.unstubAllGlobals();
+      vi.clearAllMocks();
+    });
+  }
+});

src/wallet/components/WalletDropdownFundLink.tsx

@@ -0,0 +1,85 @@
+import { useCallback, useMemo } from 'react';
+import { useEffect, useState } from 'react';
+import { cn, pressable, text as themeText } from '../../styles/theme';
+import { version } from '../../version';
+import { useIcon } from '../hooks/useIcon';
+import type { WalletDropdownFundLinkReact } from '../types';
+import { getWindowDimensions } from '../utils/getWindowDimensions';
+
+export function WalletDropdownFundLink({
+  className,
+  icon = 'fundWallet',
+  openIn = 'tab',
+  popupFeatures,
+  popupSize = 'md',
+  rel,
+  target,
+  text = 'Fund wallet',
+}: WalletDropdownFundLinkReact) {
+  const [fundingUrl, setFundingUrl] = useState('');
+
+  const iconSvg = useIcon({ icon });
+
+  useEffect(() => {
+    const currentURL = window.location.href;
+    const tabName = document.title;
+    const url = `http://keys.coinbase.com/fund?dappName=${encodeURIComponent(
+      tabName,
+    )}&dappUrl=${encodeURIComponent(currentURL)}&version=${encodeURIComponent(
+      version,
+    )}&source=onchainkit`;
+    setFundingUrl(url);
+  }, []);
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      const { width, height } = getWindowDimensions(popupSize);
+
+      const left = Math.round((window.screen.width - width) / 2);
+      const top = Math.round((window.screen.height - height) / 2);
+
+      const windowFeatures =
+        popupFeatures ||
+        `width=${width},height=${height},resizable,scrollbars=yes,status=1,left=${left},top=${top}`;
+      window.open(fundingUrl, target, windowFeatures);
+    },
+    [fundingUrl, popupFeatures, popupSize, target],
+  );
+
+  const overrideClassName = cn(
+    pressable.default,
+    'relative flex items-center px-4 py-3',
+    className,
+  );
+
+  const linkContent = useMemo(
+    () => (
+      <>
+        <div className="-translate-y-1/2 absolute top-1/2 left-4 flex h-4 w-4 items-center justify-center">
+          {iconSvg}
+        </div>
+        <span className={cn(themeText.body, 'pl-6')}>{text}</span>
+      </>
+    ),
+    [iconSvg, text],
+  );
+
+  if (openIn === 'tab') {
+    return (
+      <a
+        className={overrideClassName}
+        href={fundingUrl}
+        target={target}
+        rel={rel}
+      >
+        {linkContent}
+      </a>
+    );
+  }
+  return (
+    <button type="button" className={overrideClassName} onClick={handleClick}>
+      {linkContent}
+    </button>
+  );
+}

src/wallet/components/WalletDropdownLink.tsx

@@ -1,6 +1,5 @@
-import { isValidElement, useMemo } from 'react';
-import { walletSvg } from '../../internal/svg/walletSvg';
 import { cn, pressable, text } from '../../styles/theme';
+import { useIcon } from '../hooks/useIcon';
 import type { WalletDropdownLinkReact } from '../types';
 
 export function WalletDropdownLink({
@@ -11,18 +10,7 @@ export function WalletDropdownLink({
   rel,
   target,
 }: WalletDropdownLinkReact) {
-  const iconSvg = useMemo(() => {
-    if (icon === undefined) {
-      return null;
-    }
-    switch (icon) {
-      case 'wallet':
-        return walletSvg;
-    }
-    if (isValidElement(icon)) {
-      return icon;
-    }
-  }, [icon]);
+  const iconSvg = useIcon({ icon });
 
   return (
     <a

src/wallet/hooks/useIcon.test.tsx

@@ -0,0 +1,63 @@
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { fundWalletSvg } from '../../internal/svg/fundWallet';
+import { walletSvg } from '../../internal/svg/walletSvg';
+import { useIcon } from './useIcon';
+
+describe('useIcon', () => {
+  it('should return null when icon is undefined', () => {
+    const { result } = renderHook(() => useIcon({ icon: undefined }));
+    expect(result.current).toBeNull();
+  });
+
+  it('should return walletSvg when icon is "wallet"', () => {
+    const { result } = renderHook(() => useIcon({ icon: 'wallet' }));
+    expect(result.current).toBe(walletSvg);
+  });
+
+  it('should return fundWalletSvg when icon is "fundWallet"', () => {
+    const { result } = renderHook(() => useIcon({ icon: 'fundWallet' }));
+    expect(result.current).toBe(fundWalletSvg);
+  });
+
+  it('should memoize the result for undefined', () => {
+    const { result, rerender } = renderHook(() => useIcon({}), {
+      initialProps: {},
+    });
+
+    const initialResult = result.current;
+    rerender({});
+    expect(result.current).toBe(initialResult);
+  });
+
+  it('should memoize the result for wallet', () => {
+    const { result, rerender } = renderHook(({ icon }) => useIcon({ icon }), {
+      initialProps: { icon: 'wallet' },
+    });
+
+    const initialResult = result.current;
+    rerender({ icon: 'wallet' });
+    expect(result.current).toBe(initialResult);
+  });
+
+  it('should memoize the result for fundWallet', () => {
+    const { result, rerender } = renderHook(({ icon }) => useIcon({ icon }), {
+      initialProps: { icon: 'fundWallet' },
+    });
+
+    const initialResult = result.current;
+    rerender({ icon: 'fundWallet' });
+    expect(result.current).toBe(initialResult);
+  });
+
+  it('should memoize the result for custom icon', () => {
+    const customIcon = <svg aria-label="custom-icon" />;
+    const { result, rerender } = renderHook(({ icon }) => useIcon({ icon }), {
+      initialProps: { icon: customIcon },
+    });
+
+    const initialResult = result.current;
+    rerender({ icon: customIcon });
+    expect(result.current).toBe(initialResult);
+  });
+});

src/wallet/hooks/useIcon.tsx

@@ -0,0 +1,20 @@
+import { isValidElement, useMemo } from 'react';
+import { fundWalletSvg } from '../../internal/svg/fundWallet';
+import { walletSvg } from '../../internal/svg/walletSvg';
+
+export const useIcon = ({ icon }: { icon?: React.ReactNode }) => {
+  return useMemo(() => {
+    if (icon === undefined) {
+      return null;
+    }
+    switch (icon) {
+      case 'wallet':
+        return walletSvg;
+      case 'fundWallet':
+        return fundWalletSvg;
+    }
+    if (isValidElement(icon)) {
+      return icon;
+    }
+  }, [icon]);
+};

src/wallet/index.ts

@@ -4,6 +4,7 @@ export { Wallet } from './components/Wallet';
 export { WalletDropdown } from './components/WalletDropdown';
 export { WalletDropdownBaseName } from './components/WalletDropdownBaseName';
 export { WalletDropdownDisconnect } from './components/WalletDropdownDisconnect';
+export { WalletDropdownFundLink } from './components/WalletDropdownFundLink';
 export { WalletDropdownLink } from './components/WalletDropdownLink';
 export { isValidAAEntrypoint } from './utils/isValidAAEntrypoint';
 export { isWalletACoinbaseSmartWallet } from './utils/isWalletACoinbaseSmartWallet';
@@ -15,6 +16,7 @@ export type {
   WalletContextType,
   WalletDropdownBaseNameReact,
   WalletDropdownDisconnectReact,
+  WalletDropdownFundLinkReact,
   WalletDropdownLinkReact,
   WalletDropdownReact,
   WalletReact,