fix: empty space in settings dropdown

leather-io · Aug 16, 2024 · d33df6f · d33df6f
1 parent 1e6f63d
commit d33df6f
Showing 1 changed file with 40 additions and 29 deletions.
diff --git a/src/app/features/settings/settings.tsx b/src/app/features/settings/settings.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
@@ -66,6 +66,39 @@ export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps)
 
   const { isPressed: showAdvancedMenuOptions } = useModifierKey('alt', 120);
 
+  const bottomGroupItems = useMemo(
+    () =>
+      [
+        showAdvancedMenuOptions && <AdvancedMenuItems />,
+        hasKeys && walletType === 'software' && (
+          <DropdownMenu.Item
+            onSelect={() => {
+              void analytics.track('lock_session');
+              void lockWallet();
+              navigate(RouteUrls.Unlock);
+            }}
+            data-testid={SettingsSelectors.LockListItem}
+          >
+            <Flag img={<LockIcon />} textStyle="label.02">
+              Lock
+            </Flag>
+          </DropdownMenu.Item>
+        ),
+
+        hasKeys && (
+          <DropdownMenu.Item
+            onSelect={() => setShowSignOut(!showSignOut)}
+            data-testid={SettingsSelectors.SignOutListItem}
+          >
+            <Flag color="red.action-primary-default" img={<ExitIcon />} textStyle="label.02">
+              Sign out
+            </Flag>
+          </DropdownMenu.Item>
+        ),
+      ].filter(Boolean),
+    [hasKeys, lockWallet, navigate, showAdvancedMenuOptions, showSignOut, walletType]
+  );
+
   return (
     <>
       <DropdownMenu.Root>
@@ -174,35 +207,13 @@ export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps)
               </DropdownMenu.Item>
             </DropdownMenu.Group>
 
-            <Divider />
-            <DropdownMenu.Group>
-              {showAdvancedMenuOptions && <AdvancedMenuItems />}
-              {hasKeys && walletType === 'software' && (
-                <DropdownMenu.Item
-                  onSelect={() => {
-                    void analytics.track('lock_session');
-                    void lockWallet();
-                    navigate(RouteUrls.Unlock);
-                  }}
-                  data-testid={SettingsSelectors.LockListItem}
-                >
-                  <Flag img={<LockIcon />} textStyle="label.02">
-                    Lock
-                  </Flag>
-                </DropdownMenu.Item>
-              )}
+            {bottomGroupItems.length > 0 && (
+              <>
+                <Divider />
+                <DropdownMenu.Group>{...bottomGroupItems}</DropdownMenu.Group>
+              </>
+            )}
 
-              {hasKeys && (
-                <DropdownMenu.Item
-                  onSelect={() => setShowSignOut(!showSignOut)}
-                  data-testid={SettingsSelectors.SignOutListItem}
-                >
-                  <Flag color="red.action-primary-default" img={<ExitIcon />} textStyle="label.02">
-                    Sign out
-                  </Flag>
-                </DropdownMenu.Item>
-              )}
-            </DropdownMenu.Group>
             <AppVersion />
           </DropdownMenu.Content>
         </DropdownMenu.Portal>