Skip to content

Commit

Permalink
chore: clean code, improve settings menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@pete-watters
pete-watters committed Feb 12, 2024
1 parent 58e92d5 commit 0972a14
Show file tree
Hide file tree
Showing 6 changed files with 54 additions and 62 deletions.
11 changes: 5 additions & 6 deletions src/app/features/settings/components/advanced-menu-items.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,9 @@ import {
import { isNumber } from '@shared/utils';

import { Divider } from '@app/components/layout/divider';
import { DropdownMenu } from '@app/ui/components/dropdown-menu/dropdown-menu';
import { Caption } from '@app/ui/components/typography/caption';

import { SettingsMenuItem as MenuItem } from './settings-menu-item';

const isAnEmptyLogsArrayByteThreshold = 7;

function isSmallEnoughToBeConsiderdEmptyCache(logSizeInBytes?: number) {
Expand All @@ -39,7 +38,7 @@ export function AdvancedMenuItems({ closeHandler, settingsShown }: AdvancedMenuI

return (
<>
<MenuItem
<DropdownMenu.Item
onClick={closeHandler(async () => {
await copyLogsToClipboard();
toast.success('Copied to clipboard');
Expand All @@ -49,8 +48,8 @@ export function AdvancedMenuItems({ closeHandler, settingsShown }: AdvancedMenuI
<Caption mt="space.04" fontSize="12px !important">
Contains private wallet usage activity
</Caption>
</MenuItem>
<MenuItem
</DropdownMenu.Item>
<DropdownMenu.Item
onClick={closeHandler(async () => {
await clearBrowserStorageLogs();
toast.success('Diagnostic logs cleared');
Expand All @@ -60,7 +59,7 @@ export function AdvancedMenuItems({ closeHandler, settingsShown }: AdvancedMenuI
<Caption mt="space.04" fontSize="12px !important">
{diagnosticLogText}
</Caption>
</MenuItem>
</DropdownMenu.Item>
<Divider />
</>
);
Expand Down
5 changes: 3 additions & 2 deletions src/app/features/settings/network/components/network-list-item.layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { NetworkConfiguration } from '@shared/constants';

import { getUrlHostname } from '@app/common/utils';
import { Button } from '@app/ui/components/button/button';
import { DropdownMenu } from '@app/ui/components/dropdown-menu/dropdown-menu';
import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon';
import { CloudOffIcon } from '@app/ui/components/icons/cloud-off-icon';
import { TrashIcon } from '@app/ui/components/icons/trash-icon';
Expand All @@ -29,7 +30,7 @@ export function NetworkListItemLayout({
}: NetworkListItemLayoutProps) {
const unSelectable = !isOnline || isActive;
return (
<Flex data-testid={SettingsSelectors.NetworkListItem}>
<DropdownMenu.Item data-testid={SettingsSelectors.NetworkListItem}>
<Box
width="100%"
key={networkId}
Expand Down Expand Up @@ -71,6 +72,6 @@ export function NetworkListItemLayout({
</Button>
)}
</Box>
</Flex>
</DropdownMenu.Item>
);
}
12 changes: 7 additions & 5 deletions src/app/features/settings/network/network-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-
import { useCurrentNetworkState, useNetworksActions } from '@app/store/networks/networks.hooks';
import { useNetworks } from '@app/store/networks/networks.selectors';
import { Button } from '@app/ui/components/button/button';
import { DropdownMenu } from '@app/ui/components/dropdown-menu/dropdown-menu';

const defaultNetworkIds = Object.values(WalletDefaultNetworkConfigurationIds) as string[];

Expand Down Expand Up @@ -51,11 +52,12 @@ export function NetworkList() {
}}
/>
))}
{/* <NetworkListItem> */}
<Button data-testid={SettingsSelectors.BtnAddNetwork} fullWidth onClick={addNetwork}>
Add a network
</Button>
{/* </NetworkListItem> */}

<DropdownMenu.Item>
<Button data-testid={SettingsSelectors.BtnAddNetwork} fullWidth onClick={addNetwork}>
Add a network
</Button>
</DropdownMenu.Item>
</>
);
}
79 changes: 35 additions & 44 deletions src/app/features/settings/settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';

import { SettingsSelectors } from '@tests/selectors/settings.selectors';
import { Box, Flex } from 'leather-styles/jsx';
import { Flex, styled } from 'leather-styles/jsx';

import { RouteUrls } from '@shared/route-urls';

Expand Down Expand Up @@ -30,8 +30,9 @@ import { LedgerDeviceItemRow } from './components/ledger-item-row';
import { NetworkList } from './network/network-list';
import { ThemeList } from './theme/theme-list';

// TODO 4370 task #2 - Fix AdvancedMenuItems and sub-menu hover interaction
// on the radix site it says latest version is 2.0.5 but we have 2.0.6?
export function Settings({ triggerButton }: { triggerButton: React.ReactNode }) {
// const ref = useRef<HTMLDivElement | null>(null);
const [showSignOut, setShowSignOut] = useState(false);
const hasGeneratedWallet = !!useCurrentStacksAccount();
const { lockWallet } = useKeyActions();
Expand All @@ -46,13 +47,6 @@ export function Settings({ triggerButton }: { triggerButton: React.ReactNode })

const isLedger = useHasLedgerKeys();
const { setIsShowingSwitchAccountsState } = useDialogs();
// FIXME #4370 task 1 - need to fix these button links and also lock / theme in extension mode as mentioned above
// just open dialogs with no routes
// >

// > keep going here, good progress
// > investigate AdvancedMenuItems, even with hidden items
// > fix issue with sign out

return (
<>
Expand Down Expand Up @@ -94,20 +88,20 @@ export function Settings({ triggerButton }: { triggerButton: React.ReactNode })
// void analytics.track('click_change_theme_menu_item');
// }}
>
<Flag img={<PlaceholderIcon />} textStyle="label.02">
Change theme
</Flag>
<div className="RightSlot">
<ChevronsRightIcon />
</div>
<DropdownMenu.Item>
<Flag img={<PlaceholderIcon />}>
<Flex justifyContent="space-between">
<styled.span textStyle="label.02">Change theme</styled.span>
<ChevronsRightIcon />
</Flex>
</Flag>
</DropdownMenu.Item>
</DropdownMenu.SubTrigger>
<DropdownMenu.Portal>
<DropdownMenu.SubContent
className="DropdownMenuSubContent"
sideOffset={2}
alignOffset={-5}
>
<DropdownMenu.Label>Change theme</DropdownMenu.Label>
<DropdownMenu.SubContent>
<DropdownMenu.Item>
<DropdownMenu.Label>Change theme</DropdownMenu.Label>
</DropdownMenu.Item>
<ThemeList />
</DropdownMenu.SubContent>
</DropdownMenu.Portal>
Expand Down Expand Up @@ -159,26 +153,23 @@ export function Settings({ triggerButton }: { triggerButton: React.ReactNode })
// void analytics.track('click_change_network_menu_item');
// }}
>
{/* // use item instead of flag here */}
<Flag img={<PlaceholderIcon />} textStyle="label.02">
<Flex width="100%" alignItems="center" justifyContent="space-between">
<Box>Change network</Box>
<Caption data-testid={SettingsSelectors.CurrentNetwork}>
{currentNetworkId}
</Caption>
</Flex>
</Flag>
<div>
<ChevronsRightIcon />
</div>
<DropdownMenu.Item>
<Flag img={<PlaceholderIcon />}>
<Flex justifyContent="space-between">
<styled.span textStyle="label.02">Change network</styled.span>
<Caption data-testid={SettingsSelectors.CurrentNetwork}>
{currentNetworkId}
</Caption>
<ChevronsRightIcon />
</Flex>
</Flag>
</DropdownMenu.Item>
</DropdownMenu.SubTrigger>
<DropdownMenu.Portal>
<DropdownMenu.SubContent
className="DropdownMenuSubContent"
sideOffset={2}
alignOffset={-5}
>
<DropdownMenu.Label>Change network</DropdownMenu.Label>
<DropdownMenu.SubContent>
<DropdownMenu.Item>
<DropdownMenu.Label>Change network</DropdownMenu.Label>
</DropdownMenu.Item>
<NetworkList />
</DropdownMenu.SubContent>
</DropdownMenu.Portal>
Expand All @@ -187,11 +178,11 @@ export function Settings({ triggerButton }: { triggerButton: React.ReactNode })

{/* TODO - refactor this section */}
{/* {showAdvancedMenuOptions && (
<AdvancedMenuItems
closeHandler={wrappedCloseCallback}
settingsShown={isShowingSettings}
/>
)} */}
<AdvancedMenuItems
closeHandler={wrappedCloseCallback}
settingsShown={isShowingSettings}
/>
)} */}
{hasGeneratedWallet && walletType === 'software' && (
<DropdownMenu.Item
onClick={() => {
Expand Down
9 changes: 4 additions & 5 deletions src/app/ui/components/dropdown-menu/dropdown-menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,6 @@ export interface DropdownMenuItem {
const Root = RadixDropdownMenu.Root;

const dropdownTriggerStyles = css({
// TODO 4370 check this is OK with FARA - better to not set so the page BG dictates it
// bg: 'accent.background-primary',
borderRadius: 'xs',
fontWeight: 500,
maxWidth: 'fit-content',
Expand All @@ -28,6 +26,7 @@ const dropdownTriggerStyles = css({
bg: 'accent.component-background-pressed',
},
});

const Trigger: typeof RadixDropdownMenu.Trigger = forwardRef((props, ref) => (
<RadixDropdownMenu.Trigger className={dropdownTriggerStyles} ref={ref} {...props} />
));
Expand All @@ -43,7 +42,7 @@ const dropdownContentStyles = css({
borderRadius: 'xs',
boxShadow:
'0px 12px 24px 0px rgba(18, 16, 15, 0.08), 0px 4px 8px 0px rgba(18, 16, 15, 0.08), 0px 0px 2px 0px rgba(18, 16, 15, 0.08)',
minWidth: '256px',
minWidth: '350px',
p: 'space.02',
willChange: 'transform, opacity',
zIndex: 999,
Expand Down Expand Up @@ -91,11 +90,11 @@ const Separator: typeof RadixDropdownMenu.Separator = forwardRef((props, ref) =>
const Sub = RadixDropdownMenu.Sub;

const SubTrigger: typeof RadixDropdownMenu.SubTrigger = forwardRef((props, ref) => (
<RadixDropdownMenu.SubTrigger className={dropdownTriggerStyles} ref={ref} {...props} />
<RadixDropdownMenu.SubTrigger ref={ref} {...props} />
));

const SubContent: typeof RadixDropdownMenu.SubContent = forwardRef((props, ref) => (
<RadixDropdownMenu.SubContent ref={ref} {...props} />
<RadixDropdownMenu.SubContent className={dropdownContentStyles} ref={ref} {...props} />
));

export const DropdownMenu = {
Expand Down
0 tests/specs/settings/settings-menu.spec.ts → tests/specs/settings/settings.spec.ts
View file
File renamed without changes.

0 comments on commit 0972a14

Please sign in to comment.