use viewport and adjust tests

src/wallet/components/WalletDropdownFundLink.test.tsx

@@ -1,6 +1,7 @@
 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/funding?dappName=&dappUrl=http://localhost:3000/&onchainkit=${version}`;
@@ -35,7 +36,7 @@ describe('WalletDropdownFundLink', () => {
     expect(screen.getByText('test')).toBeInTheDocument();
   });
 
-  it('opens a new window when clicked with type="window"', () => {
+  it('opens a new window when clicked with type="window" (default size medium)', () => {
     // Mock window.open
     const mockOpen = vi.fn();
     vi.stubGlobal('open', mockOpen);
@@ -52,41 +53,61 @@ describe('WalletDropdownFundLink', () => {
     expect(mockOpen).toHaveBeenCalledWith(
       expect.stringContaining('http://keys.coinbase.com/funding'),
       'Coinbase Fund Wallet',
-      expect.stringContaining('width=600,height=700'),
+      expect.stringContaining(
+        'width=297,height=371,resizable,scrollbars=yes,status=1,left=364,top=199',
+      ),
     );
 
     // Clean up
     vi.unstubAllGlobals();
   });
 
-  const testCases: Array<{
-    size: 's' | 'm' | 'l';
-    width: number;
-    height: number;
-  }> = [
-    { size: 's', width: 400, height: 500 },
-    { size: 'm', width: 600, height: 700 },
-    { size: 'l', width: 800, height: 900 },
-  ];
-
-  for (const { size, width, height } of testCases) {
+  const testCases: WindowSizes = {
+    s: { width: '23vw', height: '28.75vw' },
+    m: { width: '29vw', height: '36.25vw' },
+    l: { 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 windowSize="${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: 1024, height: 768 });
+      vi.stubGlobal('screen', { width: screenWidth, height: screenHeight });
 
-      render(<WalletDropdownFundLink openIn="window" windowSize={size} />);
+      render(
+        <WalletDropdownFundLink
+          openIn="window"
+          windowSize={size as keyof typeof testCases}
+        />,
+      );
 
       const linkElement = screen.getByText('Fund wallet');
       fireEvent.click(linkElement);
 
-      const expectedLeft = (1024 - width) / 2;
-      const expectedTop = (768 - height) / 2;
+      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/funding'),
         'Coinbase Fund Wallet',
         expect.stringContaining(
-          `width=${width},height=${height},resizable,scrollbars=yes,status=1,left=${expectedLeft},top=${expectedTop}`,
+          `width=${expectedWidth},height=${adjustedHeight},resizable,scrollbars=yes,status=1,left=${expectedLeft},top=${expectedTop}`,
         ),
       );
 

src/wallet/components/WalletDropdownFundLink.tsx

@@ -26,26 +26,41 @@ export function WalletDropdownFundLink({
   const tabName = document.title;
   const fundingUrl = `http://keys.coinbase.com/funding?dappName=${tabName}&dappUrl=${currentURL}&onchainkit=${version}`;
   const windowSizes: WindowSizes = {
-    s: { width: '40vw', height: '50vh' },
-    m: { width: '60vw', height: '70vh' },
-    l: { width: '80vw', height: '90vh' },
+    s: { width: '23vw', height: '28.75vw' },
+    m: { width: '29vw', height: '36.25vw' },
+    l: { width: '35vw', height: '43.75vw' },
   };
 
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault();
     const { width, height } = windowSizes[windowSize];
 
-    // Convert viewport to pixels
-    const widthPx = Math.round(
-      (Number.parseInt(width) / 100) * window.innerWidth,
+    // Define minimum sizes (in pixels)
+    const minWidth = 280;
+    const minHeight = 350;
+
+    // Convert viewport units to pixels
+    const vwToPx = (vw: number) => (vw / 100) * window.innerWidth;
+
+    const widthPx = Math.max(
+      minWidth,
+      Math.round(vwToPx(Number.parseFloat(width))),
     );
-    const heightPx = Math.round(
-      (Number.parseInt(height) / 100) * window.innerHeight,
+    const heightPx = Math.max(
+      minHeight,
+      Math.round(vwToPx(Number.parseFloat(height))),
     );
 
-    const left = (window.screen.width - widthPx) / 2;
-    const top = (window.screen.height - heightPx) / 2;
-    const windowFeatures = `width=${widthPx},height=${heightPx},resizable,scrollbars=yes,status=1,left=${left},top=${top}`;
+    // Ensure the width and height don't exceed 90% of the viewport dimensions
+    const maxWidth = Math.round(window.innerWidth * 0.9);
+    const maxHeight = Math.round(window.innerHeight * 0.9);
+    const adjustedWidthPx = Math.min(widthPx, maxWidth);
+    const adjustedHeightPx = Math.min(heightPx, maxHeight);
+
+    const left = Math.round((window.screen.width - adjustedWidthPx) / 2);
+    const top = Math.round((window.screen.height - adjustedHeightPx) / 2);
+
+    const windowFeatures = `width=${adjustedWidthPx},height=${adjustedHeightPx},resizable,scrollbars=yes,status=1,left=${left},top=${top}`;
     window.open(fundingUrl, 'Coinbase Fund Wallet', windowFeatures);
   };