From 7f9bf2a2d7104acef9aebdf15b1d70f7c5f7dad1 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Fri, 5 Apr 2024 13:51:18 +0100
Subject: [PATCH] chore: wip fix virtuoso list

---
 .../components/switch-account-list-item.tsx   |  4 +--
 .../switch-account-dialog.tsx                 | 26 ++++++++-----------
 .../choose-account/components/accounts.tsx    |  1 +
 .../components/containers/dialog/dialog.tsx   | 12 ++++-----
 4 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/src/app/features/dialogs/switch-account-dialog/components/switch-account-list-item.tsx b/src/app/features/dialogs/switch-account-dialog/components/switch-account-list-item.tsx
index 08afb431a34..b4e22ce75c0 100644
--- a/src/app/features/dialogs/switch-account-dialog/components/switch-account-list-item.tsx
+++ b/src/app/features/dialogs/switch-account-dialog/components/switch-account-list-item.tsx
@@ -24,8 +24,6 @@ export const SwitchAccountListItem = memo(
 
     const { address: stxAddress, stxPublicKey } = stxAccount;
 
-    console.log('render switch');
-
     const { isLoading, setIsLoading, setIsIdle } = useLoading(
       'SWITCH_ACCOUNTS' + stxAddress || btcAddress
     );
@@ -38,7 +36,7 @@ export const SwitchAccountListItem = memo(
     // viewport. When opening the Switch Account dialog, we can see the output
     // for every account in list, demonstrating that its rendering more than
     // what's in the viewport.
-    console.log(index, stxAddress, btcAddress);
+    console.log('render switch', index);
 
     const handleClick = async () => {
       setIsLoading();
diff --git a/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx b/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx
index af290a0e4f8..cf0b59eae4a 100644
--- a/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx
+++ b/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx
@@ -7,6 +7,7 @@ import { token } from 'leather-styles/tokens';
 import { pxStringToNumber } from '@shared/utils/px-string-to-number';
 
 import { useCreateAccount } from '@app/common/hooks/account/use-create-account';
+import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
 import { useOnResizeListener } from '@app/common/hooks/use-on-resize-listener';
 import { useWalletType } from '@app/common/use-wallet-type';
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
@@ -40,17 +41,12 @@ export const SwitchAccountDialog = memo(({ isShowing, onClose }: DialogProps) =>
     onClose();
   };
 
+  const isAtleastBreakpointMd = useViewportMinWidth('md');
+
   if (isShowing && stacksAddressesNum === 0 && btcAddressesNum === 0) {
     return <AccountListUnavailable />;
   }
 
-  // close now but need to test other things and bring back
-  // src/app/common/hooks/use-media-query.ts
-
-  // to get it working on resize
-
-  // fix other borders PR also
-
   // #4370 SMELL without this early return the wallet crashes on new install with
   // : Wallet is neither of type `ledger` nor `software`
   // FIXME remove this when adding Create Account to Ledger in #2502 #4983
@@ -59,23 +55,25 @@ export const SwitchAccountDialog = memo(({ isShowing, onClose }: DialogProps) =>
   const accountNum = stacksAddressesNum || btcAddressesNum;
   const maxAccountsShown = accountNum > 10 ? 10 : accountNum;
 
-  const isFullHeight = window.innerWidth <= pxStringToNumber(token('breakpoints.md'));
+  // clean this up
+  const footerHeight = isLedger ? 0 : 94;
+  const headerHeight = 72;
+
+  const offset = footerHeight + headerHeight;
 
   const getVirtuosoHeight = (accountNum: number) => {
-    if (accountNum > 10) return isFullHeight ? '100vh' : virtuosoHeight * 10;
-    return virtuosoHeight * accountNum;
+    if (accountNum > 10) return isAtleastBreakpointMd ? '70vh' : '100vh';
+    return virtuosoHeight * accountNum + offset;
   };
 
   const maxHeight = getVirtuosoHeight(accountNum);
 
-  console.log('switch max height', maxHeight);
-
   return (
     <Dialog
       header={<Header variant="dialog" title="Select account" />}
       isShowing={isShowing}
       onClose={onClose}
-      maxHeight={maxHeight}
+      contentMaxHeight={maxHeight}
       footer={whenWallet({
         software: (
           <Footer>
@@ -95,8 +93,6 @@ export const SwitchAccountDialog = memo(({ isShowing, onClose }: DialogProps) =>
           height: maxHeight,
         }}
         initialTopMostItemIndex={whenWallet({ ledger: 0, software: currentAccountIndex })}
-        // data={stacksAccounts}
-        // endReached={() => setAccountsShown(accountsShown + 1)}
         totalCount={stacksAddressesNum}
         itemContent={index => (
           <Box key={index} my="space.05" px="space.05">
diff --git a/src/app/pages/choose-account/components/accounts.tsx b/src/app/pages/choose-account/components/accounts.tsx
index 1c06eedcbe3..97514319dde 100644
--- a/src/app/pages/choose-account/components/accounts.tsx
+++ b/src/app/pages/choose-account/components/accounts.tsx
@@ -111,6 +111,7 @@ export const ChooseAccountsList = memo(() => {
 
   if (!accounts) return null;
   const accountNum = accounts.length;
+  const maxAccountsShown = accountNum > 10 ? 10 : accountNum;
 
   const maxAccountsShown = accountNum > 10 ? 10 : accountNum;
 
diff --git a/src/app/ui/components/containers/dialog/dialog.tsx b/src/app/ui/components/containers/dialog/dialog.tsx
index 36ac3092daa..b8916c11def 100644
--- a/src/app/ui/components/containers/dialog/dialog.tsx
+++ b/src/app/ui/components/containers/dialog/dialog.tsx
@@ -17,7 +17,7 @@ interface RadixDialogProps extends DialogProps {
   footer?: ReactNode;
   header?: ReactElement<any, string | JSXElementConstructor<any>>;
   onGoBack?(): void;
-  maxHeight?: string | number;
+  contentMaxHeight?: string | number;
 }
 
 export function getHeightOffset(header: ReactNode, footer: ReactNode) {
@@ -36,14 +36,12 @@ export function Dialog({
   header,
   onClose,
   isShowing,
-  maxHeight,
+  contentMaxHeight,
 }: RadixDialogProps) {
   if (!isShowing) return null;
 
   const maxHeightOffset = getHeightOffset(header, footer);
-  const isFullHeight = window.innerWidth <= pxStringToNumber(token('breakpoints.md'));
-  const contentMaxHeight = isFullHeight ? '100vh' : getContentMaxHeight(maxHeightOffset);
-  console.log('content max height', contentMaxHeight, maxHeight);
+
   return (
     <RadixDialog.Root open>
       <RadixDialog.Portal>
@@ -80,7 +78,9 @@ export function Dialog({
               height="100%"
               overflowY="auto"
               style={{
-                maxHeight: maxHeight ? maxHeight : contentMaxHeight,
+                maxHeight: contentMaxHeight
+                  ? contentMaxHeight
+                  : getContentMaxHeight(maxHeightOffset),
                 marginBottom: footer ? token('sizes.footerHeight') : token('spacing.space.04'),
               }}
             >