window mode

coinbase · Aug 9, 2024 · d81f206 · d81f206
1 parent 984e4ed
commit d81f206
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 34 deletions.
diff --git a/src/wallet/components/WalletDropdownFundLink.test.tsx b/src/wallet/components/WalletDropdownFundLink.test.tsx
@@ -1,5 +1,5 @@
-import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
 import { WalletDropdownFundLink } from './WalletDropdownFundLink';
 
 const FUNDING_URL =
@@ -17,31 +17,45 @@ describe('WalletDropdownFundLink', () => {
 
   it('renders correctly with custom icon element', () => {
     const customIcon = <svg aria-label="custom-icon" />;
-    render(
-      <WalletDropdownFundLink icon={customIcon}>
-        Link Text
-      </WalletDropdownFundLink>
-    );
+    render(<WalletDropdownFundLink icon={customIcon} />);
 
     const linkElement = screen.getByRole('link');
     expect(linkElement).toBeInTheDocument();
     expect(linkElement).toHaveAttribute('href', FUNDING_URL);
-    expect(screen.getByText('Link Text')).toBeInTheDocument();
+    expect(screen.getByText('Deposit Funds')).toBeInTheDocument();
     expect(screen.getByLabelText('custom-icon')).toBeInTheDocument();
   });
 
-  it('renders correctly with target and rel attributes', () => {
-    render(
-      <WalletDropdownFundLink target="_blank" rel="noopener noreferrer">
-        Link Text
-      </WalletDropdownFundLink>
-    );
+  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(linkElement).toHaveAttribute('target', '_blank');
-    expect(linkElement).toHaveAttribute('rel', 'noopener noreferrer');
-    expect(screen.getByText('Link Text')).toBeInTheDocument();
+    expect(screen.getByText('test')).toBeInTheDocument();
+  });
+
+  it('opens a new window when clicked with type="window"', () => {
+    // Mock window.open
+    const mockOpen = vi.fn();
+    vi.stubGlobal('open', mockOpen);
+
+    // Mock window.screen
+    vi.stubGlobal('screen', { width: 1024, height: 768 });
+
+    render(<WalletDropdownFundLink type="window" />);
+
+    const linkElement = screen.getByText('Deposit Funds');
+    fireEvent.click(linkElement);
+
+    // Check if window.open was called with the correct arguments
+    expect(mockOpen).toHaveBeenCalledWith(
+      expect.stringContaining('http://keys.coinbase.com/funding'),
+      'Coinbase Fund Wallet',
+      expect.stringContaining('width=600,height=700'),
+    );
+
+    // Clean up
+    vi.unstubAllGlobals();
   });
 });
diff --git a/src/wallet/components/WalletDropdownFundLink.tsx b/src/wallet/components/WalletDropdownFundLink.tsx
@@ -1,15 +1,17 @@
 import { isValidElement, useMemo } from 'react';
 import { FundWalletSvg } from '../../internal/svg/fundWallet';
-import { cn, pressable, text } from '../../styles/theme';
-import type { WalletDropdownLinkReact } from '../types';
+import { cn, pressable, text as themeText } from '../../styles/theme';
+import type { WalletDropdownFundLinkReact } from '../types';
 
 export function WalletDropdownFundLink({
-  children,
   className,
   icon,
   rel,
   target,
-}: WalletDropdownLinkReact) {
+  text = 'Deposit Funds',
+  type = 'tab',
+  size = 'm',
+}: WalletDropdownFundLinkReact) {
   const iconSvg = useMemo(() => {
     if (icon === undefined) {
       return FundWalletSvg;
@@ -21,24 +23,52 @@ export function WalletDropdownFundLink({
 
   const currentURL = window.location.href;
   const tabName = document.title;
+  const windowSizes: Record<
+    's' | 'm' | 'l',
+    {
+      width: number;
+      height: number;
+    }
+  > = {
+    s: { width: 400, height: 500 },
+    m: { width: 600, height: 700 },
+    l: { width: 800, height: 900 },
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    const url = `http://keys.coinbase.com/funding?dappName=${tabName}&dappUrl=${currentURL}`;
+    const { width, height } = windowSizes[size];
+    const left = (window.screen.width - width) / 2;
+    const top = (window.screen.height - height) / 2;
+    const windowFeatures = `width=${width},height=${height},resizable,scrollbars=yes,status=1,left=${left},top=${top}`;
+    window.open(url, 'Coinbase Fund Wallet', windowFeatures);
+  };
+
+  const commonProps = {
+    className: cn(
+      pressable.default,
+      'relative flex items-center px-4 py-3',
+      className,
+    ),
+  };
+
+  const linkProps =
+    type === 'tab'
+      ? {
+          ...commonProps,
+          href: `http://keys.coinbase.com/funding?dappName=${tabName}&dappUrl=${currentURL}`,
+          target,
+          rel,
+        }
+      : { ...commonProps, onClick: handleClick };
 
   return (
-    <a
-      className={cn(
-        pressable.default,
-        'relative flex items-center px-4 py-3',
-        className
-      )}
-      href={`http://keys.coinbase.com/funding?dappName=${tabName}&dappUrl=${currentURL}`}
-      target={target}
-      rel={rel}
-    >
+    <a {...linkProps}>
       <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(text.body, 'pl-6')}>
-        {children || 'Deposit Funds'}
-      </span>
+      <span className={cn(themeText.body, 'pl-6')}>{text}</span>
     </a>
   );
 }