diff --git a/src/app/features/settings/settings.tsx b/src/app/features/settings/settings.tsx index 1dc8804d7fc..b6756b46988 100644 --- 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 && , + hasKeys && walletType === 'software' && ( + { + void analytics.track('lock_session'); + void lockWallet(); + navigate(RouteUrls.Unlock); + }} + data-testid={SettingsSelectors.LockListItem} + > + } textStyle="label.02"> + Lock + + + ), + + hasKeys && ( + setShowSignOut(!showSignOut)} + data-testid={SettingsSelectors.SignOutListItem} + > + } textStyle="label.02"> + Sign out + + + ), + ].filter(Boolean), + [hasKeys, lockWallet, navigate, showAdvancedMenuOptions, showSignOut, walletType] + ); + return ( <> @@ -174,35 +207,13 @@ export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps) - - - {showAdvancedMenuOptions && } - {hasKeys && walletType === 'software' && ( - { - void analytics.track('lock_session'); - void lockWallet(); - navigate(RouteUrls.Unlock); - }} - data-testid={SettingsSelectors.LockListItem} - > - } textStyle="label.02"> - Lock - - - )} + {bottomGroupItems.length > 0 && ( + <> + + {...bottomGroupItems} + + )} - {hasKeys && ( - setShowSignOut(!showSignOut)} - data-testid={SettingsSelectors.SignOutListItem} - > - } textStyle="label.02"> - Sign out - - - )} -