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}
);
}