fix: remove scrollbar in case of empty list

DLC-link · Jan 10, 2024 · 4ba96b3 · 4ba96b3
1 parent 58a8379
commit 4ba96b3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx b/src/app/components/mint-unmint/components/unmint/components/unmint-vault-selector.tsx
@@ -64,6 +64,8 @@ export function UnmintVaultSelector(): React.JSX.Element {
             handleSelect={() => setSelectedVault(undefined)}
           />
         </VStack>
+      ) : fundedVaults.length == 0 ? (
+        <Text color={'white'}>You don't have any active vaults.</Text>
       ) : (
         <VaultsList height="305px" isScrollable={!selectedVault}>
           <VaultsListGroupContainer

diff --git a/src/app/components/my-vaults-small/my-vaults-small.tsx b/src/app/components/my-vaults-small/my-vaults-small.tsx
@@ -17,12 +17,23 @@ export function MyVaultsSmall({ address }: MyVaultsSmallProps): React.JSX.Elemen
   const navigate = useNavigate();
 
   const vaultContext = useContext(VaultContext);
-  const { readyVaults, fundingVaults, fundedVaults, closingVaults, closedVaults, isLoading } =
-    vaultContext.vaults;
+  const {
+    readyVaults,
+    fundingVaults,
+    fundedVaults,
+    closingVaults,
+    closedVaults,
+    isLoading,
+    allVaults,
+  } = vaultContext.vaults;
 
   return (
     <MyVaultsSmallLayout>
-      <VaultsList title={'My Vaults'} height={'545px'} isScrollable={!!address && !isLoading}>
+      <VaultsList
+        title={'My Vaults'}
+        height={'545px'}
+        isScrollable={!!address && !isLoading && allVaults.length > 0}
+      >
         {address ? (
           <Skeleton isLoaded={!isLoading} w={'100%'}>
             <VaultsListGroupContainer label="Lock BTC" vaults={readyVaults} />

diff --git a/src/app/components/my-vaults/my-vaults-large.tsx b/src/app/components/my-vaults/my-vaults-large.tsx
@@ -29,22 +29,36 @@ export function MyVaultsLarge(): React.JSX.Element {
       />
       <HStack spacing={'35px'} w={'100%'}>
         {address ? (
-          <VaultsList title={'In Process'} height={'475px'} isScrollable={!!address}>
+          <VaultsList
+            title={'In Process'}
+            height={'475px'}
+            isScrollable={
+              !!address && [...readyVaults, ...fundingVaults, ...closingVaults].length > 0
+            }
+          >
             <VaultsListGroupContainer label="Lock BTC" vaults={readyVaults} />
             <VaultsListGroupContainer label="Locking BTC in Progress" vaults={fundingVaults} />
             <VaultsListGroupContainer label="Unlocking BTC in Progress" vaults={closingVaults} />
           </VaultsList>
         ) : (
           <MyVaultsSetupInformationStack />
         )}
-        <VaultsList title={'Minted dlcBTC'} height={'475px'} isScrollable={!!address}>
+        <VaultsList
+          title={'Minted dlcBTC'}
+          height={'475px'}
+          isScrollable={!!address && fundedVaults.length > 0}
+        >
           {address ? (
             <VaultsListGroupContainer vaults={fundedVaults} />
           ) : (
             <VaultsListGroupBlankContainer />
           )}
         </VaultsList>
-        <VaultsList title={'Closed Vaults'} height={'475px'} isScrollable={!!address}>
+        <VaultsList
+          title={'Closed Vaults'}
+          height={'475px'}
+          isScrollable={!!address && closedVaults.length > 0}
+        >
           {address ? (
             <VaultsListGroupContainer vaults={closedVaults} />
           ) : (