chore: deprecate Header onClose, rename isShowingSwitchAccount

leather-io · Feb 13, 2024 · b75e593 · b75e593
1 parent b4cf304
commit b75e593
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 71 deletions.
diff --git a/src/app/features/container/container.tsx b/src/app/features/container/container.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Toaster } from 'react-hot-toast';
 import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
@@ -27,12 +27,13 @@ import { Logo } from '@app/ui/components/logo';
 import { SwitchAccountDialog } from '../dialogs/switch-account-dialog/switch-account-dialog';
 import { useRestoreFormState } from '../popup-send-form-restoration/use-restore-form-state';
 import { Settings } from '../settings/settings';
-import { getOnClose } from './get-on-close';
 import { getDisplayAddresssBalanceOf, isKnownPopup, showAccountInfo } from './get-popup-header';
 import { getTitleFromUrl } from './get-title-from-url';
 import { TotalBalance } from './total-balance';
 
 export function Container() {
+  // setIsShowingSwitchAccount is repeated so could be improved but at least jotai isShowingSwitchAccountsState is gone
+  const [isShowingSwitchAccount, setIsShowingSwitchAccount] = useState(false);
   const navigate = useNavigate();
   const { pathname } = useLocation();
   const analytics = useAnalytics();
@@ -64,8 +65,6 @@ export function Container() {
     );
   };
 
-  // > lint errors
-  // > update PR description
   // > onClose removal
   // > scroll behaviour
   // > settings
@@ -79,6 +78,14 @@ export function Container() {
   //   // view-secret-key page only shows header logo IF show password true, uses the same route :D
   // };
 
+  // Settings menu needs to show if session locked
+  // just show the F-ing header here to keep it simple
+  //  && !isPasswordPage(); // && !isSessionLocked;
+
+  // FIXME - this isn't working, only showing BACK!
+  // > onClose is now depreacted so get rid of this code
+  // > fix hacky code around showing logo or not - get rid of placeholder etc
+
   // TODO 4370 test RouteUrls.Unlock as not sure what header there, page I guess
   // PETe - need to show Settings menu on unlock screen
   const getVariant = () => {
@@ -88,8 +95,6 @@ export function Container() {
   };
 
   const variant = getVariant();
-  // console.log('variant', variant);
-  // ? messing with headers for 2 columns. just sort the ui , headers later
   useEffect(() => {
     // set the whole body colour based on page variant so it can update dynamically
     if (variant === 'home') {
@@ -108,22 +113,15 @@ export function Container() {
   };
 
   const displayHeader = !isLandingPage() && !isGetAddressesPopup;
-  // Settings menu needs to show here if session locked
-  // just show the F-ing header here to keep it simple
-  //  && !isPasswordPage(); // && !isSessionLocked;
-
-  // FIXME - this isn't working, only showing BACK!
-  // > onClose is now depreacted so get rid of this code
-  // > fix hacky code around showing logo or not - get rid of placeholder etc
-  const pageOnClose = getOnClose(pathname as RouteUrls);
-
-  // console.log('getOnClose', pageOnClose);
 
   if (!hasStateRehydrated) return <LoadingSpinner />;
 
   return (
     <>
-      <SwitchAccountDialog />
+      <SwitchAccountDialog
+        isShowing={isShowingSwitchAccount}
+        onClose={() => setIsShowingSwitchAccount(false)}
+      />
       <Toaster position="bottom-center" toastOptions={{ style: { fontSize: '14px' } }} />
       <ContainerLayout
         header={
@@ -133,21 +131,19 @@ export function Container() {
               // on /fund/:currency goBack doesn't make sense as it re-opens popup.
               // Need to test everywhere and add custom logic
               onGoBack={
-                isSessionLocked || pageOnClose || isKnownPopup(pathname as RouteUrls)
+                isSessionLocked || isKnownPopup(pathname as RouteUrls)
                   ? undefined
                   : () => navigate(-1)
               }
-              onClose={
-                pageOnClose
-                  ? () => navigate(RouteUrls.Fund ? RouteUrls.FundChooseCurrency : RouteUrls.Home)
-                  : undefined
-              }
               settingsMenu={
                 // disabling settings for all popups for now pending clarification
                 // variant !== 'popup' && <Settings triggerButton={<HamburgerIcon />} />
                 // this logic was not working
                 isKnownPopup(pathname as RouteUrls) ? null : (
-                  <Settings triggerButton={<HamburgerIcon />} />
+                  <Settings
+                    triggerButton={<HamburgerIcon />}
+                    toggleSwitchAccount={() => setIsShowingSwitchAccount(!!isShowingSwitchAccount)}
+                  />
                 )
               }
               networkBadge={

diff --git a/src/app/features/container/get-on-close.ts b/src/app/features/container/get-on-close.ts
diff --git a/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx b/src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx
@@ -24,7 +24,7 @@ interface InsufficientFundsActionButtonsProps {
 }
 function InsufficientFundsActionButtons({ eventName }: InsufficientFundsActionButtonsProps) {
   const analytics = useAnalytics();
-  const [showSwitchAccount, setShowSwitchAccount] = useState(false);
+  const [isShowingSwitchAccount, setIsShowingSwitchAccount] = useState(false);
 
   const onGetStx = () => {
     void analytics.track(eventName);
@@ -35,11 +35,11 @@ function InsufficientFundsActionButtons({ eventName }: InsufficientFundsActionBu
   return (
     <>
       <SwitchAccountDialog
-        isShowing={showSwitchAccount}
-        onClose={() => setShowSwitchAccount(false)}
+        isShowing={isShowingSwitchAccount}
+        onClose={() => setIsShowingSwitchAccount(false)}
       />
       <Button onClick={onGetStx}>Get STX</Button>
-      <Button onClick={() => setShowSwitchAccount(true)} variant="outline">
+      <Button onClick={() => setIsShowingSwitchAccount(true)} variant="outline">
         Switch account
       </Button>
     </>

diff --git a/...send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx b/...send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx
@@ -23,7 +23,7 @@ export const RecipientAccountsDialog = memo(() => {
 
   if (stacksAddressesNum === 0 && btcAddressesNum === 0) return null;
 
-  // TODO 4370 task #5 virtuoso boxes - test UI of this and other virtuoso lists and maybe change to share more code?
+  // TODO 4370 task #3 virtuoso boxes - test UI of this and other virtuoso lists and maybe change to share more code?
   return (
     <Dialog title="My accounts" isShowing onClose={onGoBack}>
       <Box

diff --git a/src/app/ui/components/account/account.card.tsx b/src/app/ui/components/account/account.card.tsx
@@ -14,12 +14,12 @@ interface AccountCardProps {
 }
 
 export function AccountCard({ name, balance, children }: AccountCardProps) {
-  const [showSwitchAccount, setShowSwitchAccount] = useState(false);
+  const [isShowingSwitchAccount, setIsShowingSwitchAccount] = useState(false);
   return (
     <>
       <SwitchAccountDialog
-        isShowing={showSwitchAccount}
-        onClose={() => setShowSwitchAccount(false)}
+        isShowing={isShowingSwitchAccount}
+        onClose={() => setIsShowingSwitchAccount(false)}
       />
       <Flex
         direction="column"
@@ -33,7 +33,7 @@ export function AccountCard({ name, balance, children }: AccountCardProps) {
           _before={{ bg: 'transparent' }}
           _hover={{ color: 'accent.action-primary-hover' }}
           data-testid={SettingsSelectors.SwitchAccountTrigger}
-          onClick={() => setShowSwitchAccount(!showSwitchAccount)}
+          onClick={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)}
         >
           <Flex>
             <styled.p

diff --git a/src/app/ui/components/containers/headers/header.tsx b/src/app/ui/components/containers/headers/header.tsx
@@ -4,19 +4,18 @@ import { Flex, HStack, styled } from 'leather-styles/jsx';
 
 import { AppVersion } from '@app/components/app-version';
 import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
-import { CloseIcon } from '@app/ui/components/icons/close-icon';
 
 import { HeaderActionButton } from './header-action-button';
 
-// Ledger:
-// seems to be the only thing using enableGoBack, isWaitingOnPerformedAction
+// TODO 4370 task #4 TEST:
+// - Ledger:seems to be the only thing using enableGoBack, isWaitingOnPerformedAction
+// - Send summary screens as onClose is now deprecated - action button needs to go Home
 
 export interface HeaderProps {
   variant: 'home' | 'page' | 'onboarding' | 'card';
   // got rid of enableGoBack as in ledger allowUserToGoBack is used to pass undefined /onGoBack to header
   // enableGoBack?: boolean; // seems this is needed in ledger and sendInscription. Would be good to merge it and onGoBack
   isWaitingOnPerformedAction?: boolean; // seems this is needed for ledger - change it to ledgerAction?
-  onClose?(): void;
   onGoBack?(): void;
   title?: ReactNode;
   account?: ReactNode;
@@ -30,13 +29,12 @@ export function Header({
   variant = 'page',
   // enableGoBack,
   isWaitingOnPerformedAction,
-  onClose,
   onGoBack,
   account,
   totalBalance,
   settingsMenu,
   networkBadge,
-  title, // should make this a consistent string and also have an option for bigTitle? a different variant perhaps?
+  title,
   logo,
 }: HeaderProps) {
   return (
@@ -71,14 +69,6 @@ export function Header({
           {networkBadge}
           {totalBalance}
           {variant !== 'onboarding' && settingsMenu}
-
-          {onClose && (
-            <HeaderActionButton
-              icon={<CloseIcon />}
-              isWaitingOnPerformedAction={isWaitingOnPerformedAction}
-              onAction={onClose}
-            />
-          )}
         </HStack>
       </Flex>
     </styled.header>