fix: virtuoso list fixed height, closes #5975

leather-io · Nov 25, 2024 · 6704ac5 · 6704ac5
1 parent e096ff2
commit 6704ac5
Show file tree

Hide file tree

Showing 10 changed files with 132 additions and 195 deletions.
diff --git a/package.json b/package.json
@@ -153,7 +153,7 @@
     "@leather.io/query": "2.23.0",
     "@leather.io/stacks": "1.3.5",
     "@leather.io/tokens": "0.12.1",
-    "@leather.io/ui": "1.36.1",
+    "@leather.io/ui": "1.37.0",
     "@leather.io/utils": "0.19.1",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.5.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
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>
   );
 });