From a9c6a57088fe44f204a483f5a4a2ed9d38cf53e0 Mon Sep 17 00:00:00 2001
From: Alec Chen <93971719+0xAlec@users.noreply.github.com>
Date: Wed, 14 Aug 2024 11:01:00 -0700
Subject: [PATCH] `windowSize` -> `popupSize`

---
 site/docs/pages/wallet/types.mdx                     |  2 +-
 .../components/WalletDropdownFundLink.test.tsx       | 10 +++++-----
 src/wallet/components/WalletDropdownFundLink.tsx     |  4 ++--
 src/wallet/types.ts                                  |  4 ++--
 src/wallet/utils/getWindowDimensions.ts              | 12 ++++++------
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/site/docs/pages/wallet/types.mdx b/site/docs/pages/wallet/types.mdx
index f0322fbb6d..ef31d99f05 100644
--- a/site/docs/pages/wallet/types.mdx
+++ b/site/docs/pages/wallet/types.mdx
@@ -93,7 +93,7 @@ export type WalletDropdownFundLinkReact = {
   openIn?: 'window' | 'tab'; // Whether to open the funding flow in a tab or a window
   target?: string; // Where to open the target if `openIn` is set to tab
   text?: string; // Optional text override
-  windowSize?: 's' | 'm' | 'l'; // Size of the popup window if `openIn` is set to window
+  popupSize?: 'sm' | 'md' | 'lg'; // Size of the popup window if `openIn` is set to window
 };
 ```
 
diff --git a/src/wallet/components/WalletDropdownFundLink.test.tsx b/src/wallet/components/WalletDropdownFundLink.test.tsx
index 0fc6ae2d1d..03309a4e52 100644
--- a/src/wallet/components/WalletDropdownFundLink.test.tsx
+++ b/src/wallet/components/WalletDropdownFundLink.test.tsx
@@ -63,16 +63,16 @@ describe('WalletDropdownFundLink', () => {
   });
 
   const testCases: WindowSizes = {
-    s: { width: '23vw', height: '28.75vw' },
-    m: { width: '29vw', height: '36.25vw' },
-    l: { width: '35vw', height: '43.75vw' },
+    sm: { width: '23vw', height: '28.75vw' },
+    md: { width: '29vw', height: '36.25vw' },
+    lg: { 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}"`, () => {
+    it(`opens a new window when clicked with type="window" and popupSize="${size}"`, () => {
       const mockOpen = vi.fn();
       const screenWidth = 1024;
       const screenHeight = 768;
@@ -85,7 +85,7 @@ describe('WalletDropdownFundLink', () => {
       render(
         <WalletDropdownFundLink
           openIn="window"
-          windowSize={size as keyof typeof testCases}
+          popupSize={size as keyof typeof testCases}
         />,
       );
 
diff --git a/src/wallet/components/WalletDropdownFundLink.tsx b/src/wallet/components/WalletDropdownFundLink.tsx
index 9eb1268395..7da569ea81 100644
--- a/src/wallet/components/WalletDropdownFundLink.tsx
+++ b/src/wallet/components/WalletDropdownFundLink.tsx
@@ -12,7 +12,7 @@ export function WalletDropdownFundLink({
   openIn = 'tab',
   target,
   text = 'Fund wallet',
-  windowSize = 'm',
+  popupSize = 'md',
 }: WalletDropdownFundLinkReact) {
   const iconSvg = useMemo(() => {
     if (icon === undefined) {
@@ -29,7 +29,7 @@ export function WalletDropdownFundLink({
 
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault();
-    const { width, height } = getWindowDimensions(windowSize);
+    const { width, height } = getWindowDimensions(popupSize);
 
     const left = Math.round((window.screen.width - width) / 2);
     const top = Math.round((window.screen.height - height) / 2);
diff --git a/src/wallet/types.ts b/src/wallet/types.ts
index b5ae464d3a..c9479e4cfd 100644
--- a/src/wallet/types.ts
+++ b/src/wallet/types.ts
@@ -107,7 +107,7 @@ export type WalletDropdownFundLinkReact = {
   openIn?: 'window' | 'tab'; // Whether to open the funding flow in a tab or a window
   target?: string; // Where to open the target if `openIn` is set to tab
   text?: string; // Optional text override
-  windowSize?: 's' | 'm' | 'l'; // Size of the popup window if `openIn` is set to window
+  popupSize?: 'sm' | 'md' | 'lg'; // Size of the popup window if `openIn` is set to window
 };
 
 /**
@@ -123,7 +123,7 @@ export type WalletDropdownLinkReact = {
 };
 
 export type WindowSizes = Record<
-  's' | 'm' | 'l',
+  'sm' | 'md' | 'lg',
   {
     width: string;
     height: string;
diff --git a/src/wallet/utils/getWindowDimensions.ts b/src/wallet/utils/getWindowDimensions.ts
index 2e6b2b65a2..2709ef77e0 100644
--- a/src/wallet/utils/getWindowDimensions.ts
+++ b/src/wallet/utils/getWindowDimensions.ts
@@ -1,13 +1,13 @@
 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' },
+const popupSizes: WindowSizes = {
+  sm: { width: '23vw', height: '28.75vw' },
+  md: { width: '29vw', height: '36.25vw' },
+  lg: { width: '35vw', height: '43.75vw' },
 };
 
-export const getWindowDimensions = (size: keyof typeof windowSizes) => {
-  const { width, height } = windowSizes[size];
+export const getWindowDimensions = (size: keyof typeof popupSizes) => {
+  const { width, height } = popupSizes[size];
 
   // Define minimum sizes (in pixels)
   const minWidth = 280;