fix: virtuoso list fixed height

leather-io · Nov 24, 2024 · f1d2dc8 · f1d2dc8
1 parent e096ff2
commit f1d2dc8
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 173 deletions.
diff --git a/src/app/components/item-hover.tsx b/src/app/components/item-hover.tsx
diff --git a/src/app/features/dialogs/switch-account-sheet/switch-account-sheet.tsx b/src/app/features/dialogs/switch-account-sheet/switch-account-sheet.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-import { Box } from 'leather-styles/jsx';
+import { Box, Flex } from 'leather-styles/jsx';
 
 import { Button, Sheet, SheetHeader } from '@leather.io/ui';
 
@@ -10,7 +10,7 @@ import { useWalletType } from '@app/common/use-wallet-type';
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import { useFilteredBitcoinAccounts } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
-import { VirtuosoWrapper } from '@app/ui/components/virtuoso';
+import { VirtuosoWrapperSheet } from '@app/ui/components/virtuoso-wrapper-sheet';
 
 import { AccountListUnavailable } from './components/account-list-unavailable';
 import { SwitchAccountListItem } from './components/switch-account-list-item';
@@ -50,33 +50,39 @@ export const SwitchAccountSheet = memo(({ isShowing, onClose }: SwitchAccountShe
       isShowing={isShowing}
       onClose={onClose}
       wrapChildren={false}
-      footer={whenWallet({
-        software: (
-          <Button fullWidth onClick={() => onCreateAccount()}>
-            Create new account
-          </Button>
-        ),
-        ledger: null,
-      })}
     >
-      <VirtuosoWrapper hasFooter={whenWallet({ ledger: false, software: true })}>
-        <Virtuoso
-          style={{
-            height: '100%',
-          }}
-          initialTopMostItemIndex={whenWallet({ ledger: 0, software: currentAccountIndex })}
-          totalCount={accountNum}
-          itemContent={index => (
-            <Box key={index} py="space.03" px="space.05">
-              <SwitchAccountListItem
-                handleClose={onClose}
-                currentAccountIndex={currentAccountIndex}
-                index={index}
-              />
-            </Box>
-          )}
-        />
-      </VirtuosoWrapper>
+      <VirtuosoWrapperSheet>
+        <Box flex="1">
+          <Virtuoso
+            initialTopMostItemIndex={whenWallet({ ledger: 0, software: currentAccountIndex })}
+            totalCount={accountNum}
+            itemContent={index => (
+              <Box key={index} py="space.03" px="space.05">
+                <SwitchAccountListItem
+                  handleClose={onClose}
+                  currentAccountIndex={currentAccountIndex}
+                  index={index}
+                />
+              </Box>
+            )}
+          />
+        </Box>
+        {whenWallet({
+          software: (
+            <Flex
+              borderBottomRadius="md"
+              bg="ink.background-primary"
+              borderTop="default"
+              p="space.05"
+            >
+              <Button fullWidth onClick={() => onCreateAccount()}>
+                Create new account
+              </Button>
+            </Flex>
+          ),
+          ledger: null,
+        })}
+      </VirtuosoWrapperSheet>
     </Sheet>
   );
 });
diff --git a/src/app/pages/choose-account/choose-account.tsx b/src/app/pages/choose-account/choose-account.tsx
@@ -33,7 +33,7 @@ export function ChooseAccount() {
 
   return (
     <>
-      <Flex alignItems="center" flexDirection="column" pt="space.07" width="100%">
+      <Flex alignItems="center" flexDirection="column" pt="space.07" width="100%" height="100%">
         <Stack gap="space.05" textAlign="center" alignItems="center">
           {url && <RequesterFlag requester={url.toString()} />}
           <LeatherLogomarkIcon height={58} width={248} />

diff --git a/src/app/pages/choose-account/components/accounts.tsx b/src/app/pages/choose-account/components/accounts.tsx
@@ -2,10 +2,9 @@ import { Suspense, memo, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Virtuoso } from 'react-virtuoso';
 
-import { Box, FlexProps, HStack, styled } from 'leather-styles/jsx';
-import { token } from 'leather-styles/tokens';
+import { Box, Flex, FlexProps, HStack, Stack, styled } from 'leather-styles/jsx';
 
-import { PlusIcon } from '@leather.io/ui';
+import { PlusIcon, Pressable } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 
@@ -17,12 +16,10 @@ import { slugify } from '@app/common/utils';
 import { AccountTotalBalance } from '@app/components/account-total-balance';
 import { AcccountAddresses } from '@app/components/account/account-addresses';
 import { AccountListItemLayout } from '@app/components/account/account-list-item.layout';
-import { usePressable } from '@app/components/item-hover';
 import { useNativeSegwitAccountIndexAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
 import { AccountAvatar } from '@app/ui/components/account/account-avatar/account-avatar';
-import { VirtuosoWrapper } from '@app/ui/components/virtuoso';
 
 interface AccountTitlePlaceholderProps {
   account: StacksAccount;
@@ -74,21 +71,17 @@ const ChooseAccountItem = memo(
 );
 
 function AddAccountAction() {
-  const [component, bind] = usePressable(true);
   const createAccount = useCreateAccount();
 
-  const onCreateAccount = () => {
-    createAccount();
-  };
-
   return (
-    <Box mx="space.05" py="space.02" onClick={onCreateAccount} {...bind}>
-      <HStack alignItems="center">
-        <PlusIcon />
-        Generate new account
-      </HStack>
-      {component}
-    </Box>
+    <Flex mx="space.05">
+      <Pressable onClick={createAccount} py="space.02">
+        <HStack alignItems="center">
+          <PlusIcon />
+          <styled.span textStyle="label.02">Generate new account</styled.span>
+        </HStack>
+      </Pressable>
+    </Flex>
   );
 }
 
@@ -114,13 +107,11 @@ export function ChooseAccountsList() {
   if (!accounts) return null;
 
   return (
-    <Box mt="space.05" mb="space.06" width="100%">
+    <Stack width="100%" height="100%" mt="space.05">
       {whenWallet({ software: <AddAccountAction />, ledger: <></> })}
-      <VirtuosoWrapper isPopup>
+
+      <Box height="100%">
         <Virtuoso
-          style={{
-            background: token('colors.ink.background-primary'),
-          }}
           data={accounts}
           itemContent={(index, account) => (
             <Box key={index} my="space.05" px="space.05">
@@ -132,7 +123,7 @@ export function ChooseAccountsList() {
             </Box>
           )}
         />
-      </VirtuosoWrapper>
-    </Box>
+      </Box>
+    </Stack>
   );
 }
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
@@ -8,7 +8,7 @@ import { Sheet, SheetHeader } from '@leather.io/ui';
 
 import { useFilteredBitcoinAccounts } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
-import { VirtuosoWrapper } from '@app/ui/components/virtuoso';
+import { VirtuosoWrapperSheet } from '@app/ui/components/virtuoso-wrapper-sheet';
 
 import { AccountListItem } from './account-list-item';
 
@@ -31,13 +31,10 @@ export function RecipientAccountsSheet() {
       onClose={onGoBack}
       wrapChildren={false}
     >
-      <VirtuosoWrapper>
+      <VirtuosoWrapperSheet>
         <Virtuoso
-          style={{
-            height: '100%',
-          }}
           itemContent={index => (
-            <Box key={index} my="space.05" px="space.05">
+            <Box key={index} py="space.03" px="space.05">
               <AccountListItem
                 stacksAccount={stacksAccounts[index]}
                 onClose={onGoBack}
@@ -47,7 +44,7 @@ export function RecipientAccountsSheet() {
           )}
           totalCount={accountNum}
         />
-      </VirtuosoWrapper>
+      </VirtuosoWrapperSheet>
     </Sheet>
   );
 }
diff --git a/src/app/ui/components/virtuoso-wrapper-sheet.tsx b/src/app/ui/components/virtuoso-wrapper-sheet.tsx
@@ -0,0 +1,27 @@
+import { ReactNode, useState } from 'react';
+
+import { Stack } from 'leather-styles/jsx';
+
+import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
+import { useOnResizeListener } from '@app/common/hooks/use-on-resize-listener';
+
+interface VirtuosoWrapperSheetProps {
+  children: ReactNode;
+}
+
+export function VirtuosoWrapperSheet({ children }: VirtuosoWrapperSheetProps) {
+  const [key, setKey] = useState(0);
+  const isAtLeastMd = useViewportMinWidth('md');
+  const height = isAtLeastMd ? '70vh' : '100vh';
+
+  const onResize = () => {
+    setKey(Date.now());
+  };
+
+  useOnResizeListener(onResize);
+  return (
+    <Stack gap="0" key={key} height={height}>
+      {children}
+    </Stack>
+  );
+}
diff --git a/src/app/ui/components/virtuoso.tsx b/src/app/ui/components/virtuoso.tsx
diff --git a/theme/global/global.ts b/theme/global/global.ts
@@ -42,6 +42,9 @@ export const globalCss = defineGlobalStyles({
       maxWidth: tokens.sizes.popupMaxWidth.value,
       margin: '0 auto',
     },
+    '#app, .radix-themes': {
+      height: '100%',
+    },
   },
   '.mode__action-popup': {
     'html,body': {