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 ; } - // 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 ( } isShowing={isShowing} onClose={onClose} - maxHeight={maxHeight} + contentMaxHeight={maxHeight} footer={whenWallet({ software: (