chore: clean code

leather-io · Dec 15, 2023 · b9effeb · b9effeb
1 parent 439bcf9
commit b9effeb
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 100 deletions.
diff --git a/src/app/features/switch-account-drawer/components/switch-account-list.tsx b/src/app/features/switch-account-drawer/components/switch-account-list.tsx
@@ -5,8 +5,8 @@ import { css } from 'leather-styles/css';
 import { Box } from 'leather-styles/jsx';
 
 import { useWalletType } from '@app/common/use-wallet-type';
+import { virtuosoContainerStyle, virtuosoStyle } from '@app/ui/shared/styles/virtuoso-styles';
 
-import { virtuosoContainerStyle, virtuosoStyle } from '../../../ui/shared/styles/virtuoso-styles';
 import { SwitchAccountListItem } from './switch-account-list-item';
 
 interface SwitchAccountListProps {

diff --git a/src/app/features/switch-account-drawer/switch-account-drawer.tsx b/src/app/features/switch-account-drawer/switch-account-drawer.tsx
@@ -15,7 +15,6 @@ import { AccountListUnavailable } from './components/account-list-unavailable';
 import { SwitchAccountList } from './components/switch-account-list';
 
 export const SwitchAccountDrawer = memo(() => {
-  //TODO - see if I can get rid of this jotai stuff
   const [isShowing, setShowSwitchAccountsState] = useShowSwitchAccountsState();
 
   const currentAccountIndex = useCurrentAccountIndex();
@@ -38,14 +37,14 @@ export const SwitchAccountDrawer = memo(() => {
     return <AccountListUnavailable />;
   }
 
-  // without this early return it crashes on new install with:
+  // #4370 SMELL without this early return the wallet crashes on new install with:
   // Wallet is neither of type `ledger` nor `software`
+  // FIXME - this shouldn't be rendered until necessary
   if (!isShowing) return null;
-  // FIXME - how is this even getting loaded at all on install?!?!?!
 
   return (
     <Modal
-      title={<styled.h1 textStyle="heading.05">Select account</styled.h1>} // FIXME this is a hack for Select Account that needs to be fixed
+      title={<styled.h1 textStyle="heading.05">Select account</styled.h1>} // #4370 FIXME: Headers passing JSX as a hack for Select Account that needs to be fixed
       isShowing={isShowing}
       onClose={onClose}
       footer={whenWallet({

diff --git a/src/app/pages/fund/components/fund-account-tile.tsx b/src/app/pages/fund/components/fund-account-tile.tsx
@@ -48,7 +48,6 @@ export function FundAccountTile(props: FundAccountTileProps) {
             height="40px"
             justifyContent="center"
             width="40px"
-            backgroundColor="colors.lightModeBrown.1"
           >
             <img src={icon} width="24px" />
           </Box>

diff --git a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx
@@ -1,11 +1,8 @@
-import { useState } from 'react';
-
-import * as Dialog from '@radix-ui/react-dialog';
+import { Dialog } from '@radix-ui/themes';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { css } from 'leather-styles/css';
 import { Box, Flex, HStack, Stack, styled } from 'leather-styles/jsx';
 
-// import { isPopupMode } from '@app/common/utils';
 import { LeatherButton } from '@app/ui/components/button';
 import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon';
 import { LeatherIcon } from '@app/ui/components/icons/leather-icon';
@@ -29,90 +26,51 @@ interface AllowDiagnosticsLayoutProps {
   onUserDenyDiagnostics(): void;
 }
 
-// // #4250 TODO
-// Popup mode is just slightly wider than extension view
-// isPopupMode() returns true for extension / popup
-// could also change sm breakpoint
-// sm: '398px', -> sm: '442px',
-
 export function AllowDiagnosticsLayout(props: AllowDiagnosticsLayoutProps) {
   const { onUserAllowDiagnostics, onUserDenyDiagnostics } = props;
-  const [open, setOpen] = useState(true);
   return (
-    <Dialog.Root open={open}>
-      <Dialog.Portal>
-        <Dialog.Overlay
-          className={css({
-            backgroundColor: 'transparent',
-            position: 'fixed',
-            inset: 0,
-            animation: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-          })}
-        >
-          <Dialog.Content
-            onPointerDownOutside={() => setOpen(!open)}
-            className={css({
-              backgroundColor: 'accent.background-primary',
-              borderRadius: '6px',
-              boxShadow:
-                'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
-              position: 'fixed',
-              top: '50%',
-              left: '50%',
-              transform: 'translate(-50%, -50%)',
-              width: '90vw',
-              maxWidth: '450px',
-              maxHeight: '85vh',
-              padding: '25px',
-              animation: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-
-              // OLD
-              // width: '500px',
-              // marginY: 'space.03',
-              // backgroundColor: 'accent.background-primary',
-              // adding a minHeight here works for extension/popup but we lose margins
-              // minHeight: isPopupMode() ? '600px' : undefined,
-            })}
-          >
-            <LeatherIcon width="72px" />
-            <styled.h1 textStyle="heading.03" mt={['space.05', 'space.08']}>
-              Help us improve
-            </styled.h1>
-            <styled.p mt={['space.03', 'space.05']} textStyle="heading.05">
-              Leather would like to gather deidentified service usage data to help improve the
-              experience of the wallet.
-            </styled.p>
+    <Dialog.Root open>
+      <Dialog.Content
+        className={css({
+          width: '500px',
+          marginY: 'space.03',
+          backgroundColor: 'accent.background-primary',
+        })}
+      >
+        <LeatherIcon width="72px" />
+        <styled.h1 textStyle="heading.03" mt={['space.05', 'space.08']}>
+          Help us improve
+        </styled.h1>
+        <styled.p mt={['space.03', 'space.05']} textStyle="heading.05">
+          Leather would like to gather deidentified service usage data to help improve the
+          experience of the wallet.
+        </styled.p>
 
-            <Stack mt={['space.04', 'space.05']} textStyle="body.01">
-              <ReasonToAllowDiagnostics text="Send data about page views, clicks, and errors" />
-              <ReasonToAllowDiagnostics text="This data is tied to randomly-generated IDs, and not personal data such as your Stacks address, keys, balances or IP address" />
-              <ReasonToAllowDiagnostics text="This data is used to generate and send crash reports, help fix errors, and analyze statistics" />
-            </Stack>
+        <Stack mt={['space.04', 'space.05']} textStyle="body.01">
+          <ReasonToAllowDiagnostics text="Send data about page views, clicks, and errors" />
+          <ReasonToAllowDiagnostics text="This data is tied to randomly-generated IDs, and not personal data such as your Stacks address, keys, balances or IP address" />
+          <ReasonToAllowDiagnostics text="This data is used to generate and send crash reports, help fix errors, and analyze statistics" />
+        </Stack>
 
-            <HStack mt={['space.07', 'space.11']} gap="space.04">
-              <LeatherButton
-                fullWidth
-                variant="outline"
-                onClick={() => onUserDenyDiagnostics()}
-                data-testid={OnboardingSelectors.DenyAnalyticsBtn}
-              >
-                Deny
-              </LeatherButton>
-              <LeatherButton
-                autoFocus
-                fullWidth
-                data-testid={OnboardingSelectors.AllowAnalyticsBtn}
-                onClick={onUserAllowDiagnostics}
-              >
-                Allow
-              </LeatherButton>
-            </HStack>
-
-            <Dialog.Title />
-            <Dialog.Close />
-          </Dialog.Content>
-        </Dialog.Overlay>
-      </Dialog.Portal>
+        <HStack mt={['space.07', 'space.11']} gap="space.04">
+          <LeatherButton
+            fullWidth
+            variant="outline"
+            onClick={() => onUserDenyDiagnostics()}
+            data-testid={OnboardingSelectors.DenyAnalyticsBtn}
+          >
+            Deny
+          </LeatherButton>
+          <LeatherButton
+            autoFocus
+            fullWidth
+            data-testid={OnboardingSelectors.AllowAnalyticsBtn}
+            onClick={onUserAllowDiagnostics}
+          >
+            Allow
+          </LeatherButton>
+        </HStack>
+      </Dialog.Content>
     </Dialog.Root>
   );
 }
diff --git a/...send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx b/...send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx
@@ -8,11 +8,8 @@ import { Box } from 'leather-styles/jsx';
 import { useFilteredBitcoinAccounts } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { Modal } from '@app/ui/components/containers/modal/modal';
+import { virtuosoContainerStyle, virtuosoStyle } from '@app/ui/shared/styles/virtuoso-styles';
 
-import {
-  virtuosoContainerStyle,
-  virtuosoStyle,
-} from '../../../../../ui/shared/styles/virtuoso-styles';
 import { AccountListItem } from './account-list-item';
 
 export const RecipientAccountsDrawer = memo(() => {

diff --git a/src/app/ui/components/containers/footers/footer.tsx b/src/app/ui/components/containers/footers/footer.tsx
@@ -13,8 +13,8 @@ export function Footer({ children }: HasChildren) {
       width="100%"
       zIndex={1}
       backgroundColor="accent.background-primary"
-      minHeight="92px" // give footer minHeight 92px to help offset vh of virtuoso
-      maxWidth={{ base: '100vw', md: '450px' }} // this is so buggy - set to the same width as base drawer flex - need to fix this properly
+      minHeight="92px"
+      maxWidth={{ base: '100vw', md: '450px' }}
       borderRadius={[0, 0, 'lg']}
     >
       {children}

diff --git a/src/app/ui/components/containers/headers/header.tsx b/src/app/ui/components/containers/headers/header.tsx
@@ -8,14 +8,13 @@ import { RouteUrls } from '@shared/route-urls';
 
 import { useDrawers } from '@app/common/hooks/use-drawers';
 import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
+import { AppVersion } from '@app/components/app-version';
 import { NetworkModeBadge } from '@app/components/network-mode-badge';
 import { LeatherButton } from '@app/ui/components/button';
 import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
 import { HamburgerIcon } from '@app/ui/components/icons/hamburger-icon';
 import { LeatherLogo } from '@app/ui/components/leather-logo';
 
-import { AppVersion } from '../../../../components/app-version';
-
 function isSettingsClickable(pathname: RouteUrls) {
   return (
     pathname !== RouteUrls.RequestDiagnostics &&

diff --git a/src/app/ui/components/containers/headers/modal-header.tsx b/src/app/ui/components/containers/headers/modal-header.tsx
@@ -10,7 +10,7 @@ import { LeatherButton } from '@app/ui/components/button';
 import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
 import { CloseIcon } from '@app/ui/components/icons/close-icon';
 
-// This is called ModalHeader but also gets shown on the Send flow which is a full page
+// #4370 TODO - refactor headers: This is called ModalHeader but also gets shown on the Send flow which is a full page
 
 interface ModalHeaderProps {
   onClose?(): void;

diff --git a/src/app/ui/components/containers/modal/modal.tsx b/src/app/ui/components/containers/modal/modal.tsx
@@ -1,5 +1,3 @@
-// TODO - not sure why we call this a drawer when it's a modal
-// 4370 TODO - can investigate swapping this for radix dialog and using modal true / false
 import { ReactNode, memo } from 'react';
 import { useNavigate } from 'react-router-dom';