getWindowDimensions

src/wallet/components/WalletDropdownFundLink.tsx

@@ -2,7 +2,8 @@ import { isValidElement, useMemo } from 'react';
 import { FundWalletSvg } from '../../internal/svg/fundWallet';
 import { cn, pressable, text as themeText } from '../../styles/theme';
 import { version } from '../../version';
-import type { WalletDropdownFundLinkReact, WindowSizes } from '../types';
+import type { WalletDropdownFundLinkReact } from '../types';
+import { getWindowDimensions } from '../utils/getWindowDimensions';
 
 export function WalletDropdownFundLink({
   className,
@@ -25,42 +26,15 @@ export function WalletDropdownFundLink({
   const currentURL = window.location.href;
   const tabName = document.title;
   const fundingUrl = `http://keys.coinbase.com/funding?dappName=${tabName}&dappUrl=${currentURL}&onchainkit=${version}`;
-  const windowSizes: WindowSizes = {
-    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];
-
-    // 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.max(
-      minHeight,
-      Math.round(vwToPx(Number.parseFloat(height))),
-    );
-
-    // 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 { width, height } = getWindowDimensions(windowSize);
 
-    const left = Math.round((window.screen.width - adjustedWidthPx) / 2);
-    const top = Math.round((window.screen.height - adjustedHeightPx) / 2);
+    const left = Math.round((window.screen.width - width) / 2);
+    const top = Math.round((window.screen.height - height) / 2);
 
-    const windowFeatures = `width=${adjustedWidthPx},height=${adjustedHeightPx},resizable,scrollbars=yes,status=1,left=${left},top=${top}`;
+    const windowFeatures = `width=${width},height=${height},resizable,scrollbars=yes,status=1,left=${left},top=${top}`;
     window.open(fundingUrl, 'Coinbase Fund Wallet', windowFeatures);
   };
 

src/wallet/utils/getWindowDimensions.test.ts

@@ -0,0 +1,52 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { getWindowDimensions } from './getWindowDimensions'; // Adjust the import path as needed
+
+describe('getWindowDimensions', () => {
+  beforeEach(() => {
+    // Mock window.innerWidth and window.innerHeight
+    Object.defineProperty(window, 'innerWidth', {
+      writable: true,
+      configurable: true,
+      value: 1000,
+    });
+    Object.defineProperty(window, 'innerHeight', {
+      writable: true,
+      configurable: true,
+      value: 800,
+    });
+  });
+
+  it('should return minimum width for small screens', () => {
+    window.innerWidth = 300;
+    window.innerHeight = 400;
+
+    const result = getWindowDimensions('s');
+    expect(result).toEqual({ width: 270, height: 350 });
+  });
+
+  it('should calculate correct dimensions for medium size', () => {
+    const result = getWindowDimensions('m');
+    expect(result).toEqual({ width: 290, height: 363 });
+  });
+
+  it('should calculate correct dimensions for large size', () => {
+    const result = getWindowDimensions('l');
+    expect(result).toEqual({ width: 350, height: 438 });
+  });
+
+  it('should limit dimensions to 35vw for large viewport', () => {
+    window.innerWidth = 2000;
+    window.innerHeight = 1500;
+
+    const result = getWindowDimensions('l');
+    expect(result).toEqual({ width: 700, height: 875 });
+  });
+
+  it('should handle different aspect ratios', () => {
+    window.innerWidth = 1920;
+    window.innerHeight = 1080;
+
+    const result = getWindowDimensions('m');
+    expect(result).toEqual({ width: 557, height: 696 });
+  });
+});

src/wallet/utils/getWindowDimensions.ts

@@ -0,0 +1,35 @@
+import type { WindowSizes } from '../types';
+
+const windowSizes: WindowSizes = {
+  s: { width: '23vw', height: '28.75vw' },
+  m: { width: '29vw', height: '36.25vw' },
+  l: { width: '35vw', height: '43.75vw' },
+};
+
+export const getWindowDimensions = (size: keyof typeof windowSizes) => {
+  const { width, height } = windowSizes[size];
+
+  // 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.max(
+    minHeight,
+    Math.round(vwToPx(Number.parseFloat(height))),
+  );
+
+  // 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);
+
+  return { width: adjustedWidthPx, height: adjustedHeightPx };
+};