diff --git a/src/wallet/components/WalletDropdownFundLink.test.tsx b/src/wallet/components/WalletDropdownFundLink.test.tsx index f3bdb35854..bab4714aa3 100644 --- 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 = ; - render( - - Link Text - - ); + render(); 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( - - Link Text - - ); + it('renders correctly with custom text', () => { + render(); 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(); + + 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 index 01deaeb40c..6c2b2359cc 100644 --- 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 ( - +
{iconSvg}
- - {children || 'Deposit Funds'} - + {text}
); }