chore: implement fix to limit amount of accounts rendered

leather-io · Apr 5, 2024 · 629ef97 · 629ef97
1 parent 4ed8326
commit 629ef97
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 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
@@ -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
@@ -112,14 +112,16 @@ 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: <></> })}
       <Virtuoso
         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/...send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx b/...send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx
@@ -23,14 +23,15 @@ 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}>
       <Virtuoso
         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">