From c71c2cf6e91c6a9a1dfb4c943cee5be95cba20ef Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Fri, 5 Apr 2024 13:58:04 +0100
Subject: [PATCH] chore: implement fix to limit amount of accounts rendered

---
 .../dialogs/switch-account-dialog/switch-account-dialog.tsx   | 3 ++-
 src/app/pages/choose-account/components/accounts.tsx          | 4 +++-
 .../recipient-accounts-dialog/recipient-accounts-dialog.tsx   | 3 ++-
 3 files changed, 7 insertions(+), 3 deletions(-)

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 491e323d65b..2ac6b1e0478 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
@@ -43,6 +43,7 @@ export const SwitchAccountDialog = memo(({ isShowing, onClose }: DialogProps) =>
   if (!isShowing) return null;
 
   const accountNum = stacksAddressesNum || btcAddressesNum;
+  const maxAccountsShown = accountNum > 10 ? 10 : accountNum;
 
   return (
     <Dialog
@@ -64,7 +65,7 @@ export const SwitchAccountDialog = memo(({ isShowing, onClose }: DialogProps) =>
         height={virtuosoHeight}
         style={{
           ...virtuosoStyles,
-          height: `calc(${virtuosoHeight * accountNum}px + ${getHeightOffset(true, !isLedger)}px)`,
+          height: `calc(${virtuosoHeight * maxAccountsShown}px + ${getHeightOffset(true, !isLedger)}px)`,
         }}
         initialTopMostItemIndex={whenWallet({ ledger: 0, software: currentAccountIndex })}
         totalCount={stacksAddressesNum || btcAddressesNum}
diff --git a/src/app/pages/choose-account/components/accounts.tsx b/src/app/pages/choose-account/components/accounts.tsx
index b852b778ac2..1c06eedcbe3 100644
--- a/src/app/pages/choose-account/components/accounts.tsx
+++ b/src/app/pages/choose-account/components/accounts.tsx
@@ -112,6 +112,8 @@ export const ChooseAccountsList = memo(() => {
   if (!accounts) return null;
   const accountNum = accounts.length;
 
+  const maxAccountsShown = accountNum > 10 ? 10 : accountNum;
+
   return (
     <Box mt="space.05" mb="space.06" width="100%">
       {whenWallet({ software: <AddAccountAction />, ledger: <></> })}
@@ -119,7 +121,7 @@ export const ChooseAccountsList = memo(() => {
         height={virtuosoHeight}
         style={{
           ...virtuosoStyles,
-          height: `calc(${virtuosoHeight * accountNum}px + 50px)`,
+          height: `calc(${virtuosoHeight * maxAccountsShown}px + 50px)`,
           background: token('colors.ink.background-primary'),
         }}
         data={accounts}
diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx
index 6cf8c57b05f..00b2f3e9bb1 100644
--- a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx
@@ -23,6 +23,7 @@ export function RecipientAccountsDialog() {
 
   if (stacksAddressesNum === 0 && btcAddressesNum === 0) return null;
   const accountNum = stacksAddressesNum || btcAddressesNum;
+  const maxAccountsShown = accountNum > 10 ? 10 : accountNum;
 
   return (
     <Dialog header={<Header variant="dialog" title="My accounts" />} isShowing onClose={onGoBack}>
@@ -30,7 +31,7 @@ export function RecipientAccountsDialog() {
         height={virtuosoHeight}
         style={{
           ...virtuosoStyles,
-          height: `calc(${virtuosoHeight * accountNum}px + ${getHeightOffset(true, true)}px)`,
+          height: `calc(${virtuosoHeight * maxAccountsShown}px + ${getHeightOffset(true, true)}px)`,
         }}
         itemContent={index => (
           <Box key={index} my="space.05" px="space.05">