chore: update settings menu

leather-io · Feb 16, 2024 · 7b3161b · 7b3161b
1 parent de72b64
commit 7b3161b
Show file tree

Hide file tree

Showing 15 changed files with 144 additions and 120 deletions.
diff --git a/src/app/features/container/container.tsx b/src/app/features/container/container.tsx
@@ -80,6 +80,8 @@ export function Container() {
   // BUG - receive modal copy address not working (since pre-tabs)
   // BUG - send BTC / STX footer looks weird, fixed to bottom
   // BUG - send BTC/ STX select account not showing anything in modal - recipient-accounts
+  // BUG - Open feedback isn't working
+
   const getVariant = () => {
     if (isHomePage()) return 'home';
     if (isOnboardingPage()) return 'onboarding';

diff --git a/src/app/features/container/get-title-from-url.ts b/src/app/features/container/get-title-from-url.ts
@@ -4,8 +4,10 @@ import { RouteUrls } from '@shared/route-urls';
 // TODO
 // - test this work with `/` or nested routes or if we need to use match() to be safe
 // - investigate having title as a route param
+
+//  FIXME - these titles look a bit off, not sure if we should remove them and add them into the `Page`
+
 export function getTitleFromUrl(pathname: RouteUrls) {
-  // console.log(pathname);
   switch (pathname) {
     case RouteUrls.AddNetwork:
       return 'Add a network';

diff --git a/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx b/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx
@@ -6,18 +6,13 @@ 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 { Button } from '@app/ui/components/button/button';
-import { Dialog } from '@app/ui/components/containers/dialog/dialog';
+import { Dialog, DialogProps } from '@app/ui/components/containers/dialog/dialog';
 import { Footer } from '@app/ui/components/containers/footers/footer';
 
 import { AccountListUnavailable } from './components/account-list-unavailable';
 import { SwitchAccountList } from './components/switch-account-list';
 
-interface SwitchAccountDialogProps {
-  isShowing: boolean;
-  onClose(): void;
-}
-
-export const SwitchAccountDialog = memo(({ isShowing, onClose }: SwitchAccountDialogProps) => {
+export const SwitchAccountDialog = memo(({ isShowing, onClose }: DialogProps) => {
   const currentAccountIndex = useCurrentAccountIndex();
   const createAccount = useCreateAccount();
   const { whenWallet } = useWalletType();

diff --git a/src/app/features/settings/network/components/network-list-item.layout.tsx b/src/app/features/settings/network/components/network-list-item.layout.tsx
@@ -5,7 +5,6 @@ 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, CloudOffIcon, TrashIcon } from '@app/ui/icons';
 
 interface NetworkListItemLayoutProps {
@@ -28,7 +27,7 @@ export function NetworkListItemLayout({
 }: NetworkListItemLayoutProps) {
   const unSelectable = !isOnline || isActive;
   return (
-    <DropdownMenu.Item data-testid={SettingsSelectors.NetworkListItem}>
+    <Flex data-testid={SettingsSelectors.NetworkListItem}>
       <Box
         width="100%"
         key={networkId}
@@ -70,6 +69,6 @@ export function NetworkListItemLayout({
           </Button>
         )}
       </Box>
-    </DropdownMenu.Item>
+    </Flex>
   );
 }
diff --git a/...eatures/settings/network/network-list.tsx → ...app/features/settings/network/network.tsx b/...eatures/settings/network/network-list.tsx → ...app/features/settings/network/network.tsx
@@ -11,11 +11,12 @@ 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';
+import { Dialog, DialogProps } from '@app/ui/components/containers/dialog/dialog';
+import { Footer } from '@app/ui/components/containers/footers/footer';
 
 const defaultNetworkIds = Object.values(WalletDefaultNetworkConfigurationIds) as string[];
 
-export function NetworkList() {
+export function NetworkDialog({ isShowing, onClose }: DialogProps) {
   useBackgroundLocationRedirect();
   const navigate = useNavigate();
   const networks = useNetworks();
@@ -37,27 +38,43 @@ export function NetworkList() {
     void analytics.track('change_network', { id });
     networksActions.changeNetwork(id);
   }
+  // fixme - change network on back is broken
 
   return (
-    <>
+    <Dialog
+      title="Change network"
+      isShowing={isShowing}
+      onClose={onClose}
+      footer={
+        <Footer>
+          <Button
+            data-testid={SettingsSelectors.BtnAddNetwork}
+            fullWidth
+            onClick={() => {
+              addNetwork();
+              onClose();
+            }}
+          >
+            Add a network
+          </Button>
+        </Footer>
+      }
+    >
       {Object.keys(networks).map(id => (
         <NetworkListItem
           key={id}
           networkId={id}
-          onNetworkSelected={id => selectNetwork(id)}
+          onNetworkSelected={id => {
+            selectNetwork(id);
+            onClose();
+          }}
           isCustom={!defaultNetworkIds.includes(id)}
           onRemoveNetwork={id => {
             if (id === currentNetwork.id) networksActions.changeNetwork('mainnet');
             removeNetwork(id);
           }}
         />
       ))}
-
-      <DropdownMenu.Item>
-        <Button data-testid={SettingsSelectors.BtnAddNetwork} fullWidth onClick={addNetwork}>
-          Add a network
-        </Button>
-      </DropdownMenu.Item>
-    </>
+    </Dialog>
   );
 }
diff --git a/src/app/features/settings/settings.tsx b/src/app/features/settings/settings.tsx
@@ -11,21 +11,33 @@ import { useKeyActions } from '@app/common/hooks/use-key-actions';
 import { useModifierKey } from '@app/common/hooks/use-modifier-key';
 import { useWalletType } from '@app/common/use-wallet-type';
 import { openInNewTab, openIndexPageInNewTab } from '@app/common/utils/open-in-new-tab';
+import { Divider } from '@app/components/layout/divider';
+import { NetworkDialog } from '@app/features/settings/network/network';
 import { SignOut } from '@app/features/settings/sign-out/sign-out-confirm';
+import { ThemeDialog } from '@app/features/settings/theme/theme-dialog';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { useHasLedgerKeys, useLedgerDeviceTargetId } from '@app/store/ledger/ledger.selectors';
 import { useCurrentNetworkId } from '@app/store/networks/networks.selectors';
 import { DropdownMenu } from '@app/ui/components/dropdown-menu/dropdown-menu';
 import { Flag } from '@app/ui/components/flag/flag';
 import { Caption } from '@app/ui/components/typography/caption';
-import { ChevronsRightIcon, ExternalLinkIcon, PlaceholderIcon, SwapIcon } from '@app/ui/icons/';
+import {
+  ExitIcon,
+  ExpandIcon,
+  ExternalLinkIcon,
+  KeyIcon,
+  LockIcon,
+  MegaphoneIcon,
+  SunInCloudIcon,
+  SupportIcon,
+  SwapIcon,
+  WorldIcon,
+} from '@app/ui/icons/';
 
 import { openFeedbackDialog } from '../feedback-button/feedback-button';
 import { extractDeviceNameFromKnownTargetIds } from '../ledger/utils/generic-ledger-utils';
 import { AdvancedMenuItems } from './components/advanced-menu-items';
 import { LedgerDeviceItemRow } from './components/ledger-item-row';
-import { NetworkList } from './network/network-list';
-import { ThemeList } from './theme/theme-list';
 
 //  TODO 4370 task #2  - Fix sub-menu hover interaction
 // on the radix site it says latest version is 2.0.5 but we have 2.0.6?
@@ -39,6 +51,8 @@ interface SettingsProps {
 
 export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps) {
   const [showSignOut, setShowSignOut] = useState(false);
+  const [showChangeTheme, setShowChangeTheme] = useState(false);
+  const [showChangeNetwork, setShowChangeNetwork] = useState(false);
   const hasGeneratedWallet = !!useCurrentStacksAccount();
   const { lockWallet } = useKeyActions();
 
@@ -80,37 +94,11 @@ export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps)
                   data-testid={SettingsSelectors.ViewSecretKeyListItem}
                   onClick={() => navigate(RouteUrls.ViewSecretKey)}
                 >
-                  <Flag img={<PlaceholderIcon />} textStyle="label.02">
+                  <Flag img={<KeyIcon />} textStyle="label.02">
                     View Secret Key
                   </Flag>
                 </DropdownMenu.Item>
               )}
-
-              <DropdownMenu.Sub>
-                <DropdownMenu.SubTrigger
-                  data-testid={SettingsSelectors.ToggleTheme}
-                  // onClick={() => {
-                  //   void analytics.track('click_change_theme_menu_item');
-                  // }}
-                >
-                  <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 sideOffset={2} alignOffset={-5}>
-                    <DropdownMenu.Item>
-                      <DropdownMenu.Label>Change theme</DropdownMenu.Label>
-                    </DropdownMenu.Item>
-                    <ThemeList />
-                  </DropdownMenu.SubContent>
-                </DropdownMenu.Portal>
-              </DropdownMenu.Sub>
               <styled.div hideFrom="md">
                 <DropdownMenu.Item
                   data-testid={SettingsSelectors.OpenWalletInNewTab}
@@ -119,68 +107,67 @@ export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps)
                     openIndexPageInNewTab(location.pathname);
                   }}
                 >
-                  <Flag img={<PlaceholderIcon />} textStyle="label.02">
+                  <Flag img={<ExpandIcon />} textStyle="label.02">
                     <Flex justifyContent="space-between">
-                      Open in new tab
+                      Maximize
                       <ExternalLinkIcon />
                     </Flex>
                   </Flag>
                 </DropdownMenu.Item>
               </styled.div>
 
               <DropdownMenu.Item
-                data-testid={SettingsSelectors.GetSupportMenuItem}
+                data-testid={SettingsSelectors.ChangeNetworkAction}
                 onClick={() => {
-                  openInNewTab('https://leather.gitbook.io/guides/installing/contact-support');
+                  setShowChangeNetwork(!showChangeNetwork);
+                  void analytics.track('click_change_network_menu_item');
                 }}
               >
-                <Flag img={<PlaceholderIcon />} textStyle="label.02">
+                <Flag img={<WorldIcon />}>
                   <Flex justifyContent="space-between">
-                    Get support
-                    <ExternalLinkIcon />
+                    <styled.span textStyle="label.02">Change network</styled.span>
+                    <Caption data-testid={SettingsSelectors.CurrentNetwork}>
+                      {currentNetworkId}
+                    </Caption>
+                  </Flex>
+                </Flag>
+              </DropdownMenu.Item>
+
+              <DropdownMenu.Item
+                data-testid={SettingsSelectors.ToggleTheme}
+                onClick={() => {
+                  setShowChangeTheme(!showChangeTheme);
+                  void analytics.track('click_change_theme_menu_item');
+                }}
+              >
+                <Flag img={<SunInCloudIcon />}>
+                  <Flex justifyContent="space-between" textStyle="label.02">
+                    Change theme
                   </Flex>
                 </Flag>
               </DropdownMenu.Item>
+              <Divider />
               <DropdownMenu.Item
+                data-testid={SettingsSelectors.GetSupportMenuItem}
                 onClick={() => {
-                  openFeedbackDialog();
+                  openInNewTab('https://leather.gitbook.io/guides/installing/contact-support');
                 }}
               >
-                <Flag img={<PlaceholderIcon />} textStyle="label.02">
+                <Flag img={<SupportIcon />} textStyle="label.02">
+                  <Flex justifyContent="space-between">
+                    Get support
+                    <ExternalLinkIcon />
+                  </Flex>
+                </Flag>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item onClick={() => openFeedbackDialog()}>
+                <Flag img={<MegaphoneIcon />} textStyle="label.02">
                   Give feedback
                 </Flag>
               </DropdownMenu.Item>
-              {hasGeneratedWallet ? <DropdownMenu.Separator /> : null}
-
-              <DropdownMenu.Sub>
-                <DropdownMenu.SubTrigger
-                  data-testid={SettingsSelectors.ChangeNetworkAction}
-                  // onClick={() => {
-                  //   void analytics.track('click_change_network_menu_item');
-                  // }}
-                >
-                  <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>
-                    <DropdownMenu.Item>
-                      <DropdownMenu.Label>Change network</DropdownMenu.Label>
-                    </DropdownMenu.Item>
-                    <NetworkList />
-                  </DropdownMenu.SubContent>
-                </DropdownMenu.Portal>
-              </DropdownMenu.Sub>
-              <DropdownMenu.Separator />
+              {hasGeneratedWallet ? <Divider /> : null}
+
+              <Divider />
 
               {showAdvancedMenuOptions && <AdvancedMenuItems />}
               {hasGeneratedWallet && walletType === 'software' && (
@@ -192,7 +179,7 @@ export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps)
                   }}
                   data-testid={SettingsSelectors.LockListItem}
                 >
-                  <Flag img={<PlaceholderIcon />} textStyle="label.02">
+                  <Flag img={<LockIcon />} textStyle="label.02">
                     Lock
                   </Flag>
                 </DropdownMenu.Item>
@@ -203,7 +190,7 @@ export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps)
                 onClick={() => setShowSignOut(!showSignOut)}
                 data-testid={SettingsSelectors.SignOutListItem}
               >
-                <Flag img={<PlaceholderIcon />} textStyle="label.02">
+                <Flag img={<ExitIcon />} textStyle="label.02">
                   Sign out
                 </Flag>
               </DropdownMenu.Item>
@@ -212,6 +199,14 @@ export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps)
         </DropdownMenu.Portal>
       </DropdownMenu.Root>
       <SignOut isShowing={showSignOut} onClose={() => setShowSignOut(!showSignOut)} />
+      <ThemeDialog
+        isShowing={showChangeTheme}
+        onClose={() => setShowChangeTheme(!showChangeTheme)}
+      />
+      <NetworkDialog
+        isShowing={showChangeNetwork}
+        onClose={() => setShowChangeNetwork(!showChangeNetwork)}
+      />
     </>
   );
 }
diff --git a/src/app/features/settings/sign-out/sign-out-confirm.tsx b/src/app/features/settings/sign-out/sign-out-confirm.tsx
@@ -6,7 +6,7 @@ import { RouteUrls } from '@shared/route-urls';
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useKeyActions } from '@app/common/hooks/use-key-actions';
 
-import { SignOutLayout } from './sign-out.layout';
+import { SignOutDialog } from './sign-out';
 
 interface SignOutProps {
   isShowing: boolean;
@@ -23,7 +23,7 @@ export function SignOut({ isShowing = false, onClose }: SignOutProps) {
   // FIXME same bug as SwitchAcccount dialog where we call hooks from useWalletType when no wallet yet set
   if (!isShowing) return null;
   return (
-    <SignOutLayout
+    <SignOutDialog
       isShowing={isShowing}
       onUserDeleteWallet={() => {
         void signOut().finally(() => {

diff --git a/...res/settings/sign-out/sign-out.layout.tsx → ...p/features/settings/sign-out/sign-out.tsx b/...res/settings/sign-out/sign-out.layout.tsx → ...p/features/settings/sign-out/sign-out.tsx
@@ -4,17 +4,15 @@ import { Box, Flex, styled } from 'leather-styles/jsx';
 
 import { useWalletType } from '@app/common/use-wallet-type';
 import { Button } from '@app/ui/components/button/button';
-import { Dialog } from '@app/ui/components/containers/dialog/dialog';
+import { Dialog, DialogProps } from '@app/ui/components/containers/dialog/dialog';
 import { Footer } from '@app/ui/components/containers/footers/footer';
 import { Flag } from '@app/ui/components/flag/flag';
 import { ErrorIcon } from '@app/ui/icons/error-icon';
 
-interface SignOutLayoutProps {
-  isShowing: boolean;
+interface SignOutDialogProps extends DialogProps {
   onUserDeleteWallet(): void;
-  onClose(): void;
 }
-export function SignOutLayout({ isShowing, onUserDeleteWallet, onClose }: SignOutLayoutProps) {
+export function SignOutDialog({ isShowing, onUserDeleteWallet, onClose }: SignOutDialogProps) {
   const { whenWallet, walletType } = useWalletType();
   const form = useFormik({
     initialValues: {