Skip to content

Commit b9effeb

Browse files
committed
chore: clean code
1 parent 439bcf9 commit b9effeb

File tree

9 files changed

+50
-100
lines changed

9 files changed

+50
-100
lines changed

src/app/features/switch-account-drawer/components/switch-account-list.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { css } from 'leather-styles/css';
55
import { Box } from 'leather-styles/jsx';
66

77
import { useWalletType } from '@app/common/use-wallet-type';
8+
import { virtuosoContainerStyle, virtuosoStyle } from '@app/ui/shared/styles/virtuoso-styles';
89

9-
import { virtuosoContainerStyle, virtuosoStyle } from '../../../ui/shared/styles/virtuoso-styles';
1010
import { SwitchAccountListItem } from './switch-account-list-item';
1111

1212
interface SwitchAccountListProps {

src/app/features/switch-account-drawer/switch-account-drawer.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import { AccountListUnavailable } from './components/account-list-unavailable';
1515
import { SwitchAccountList } from './components/switch-account-list';
1616

1717
export const SwitchAccountDrawer = memo(() => {
18-
//TODO - see if I can get rid of this jotai stuff
1918
const [isShowing, setShowSwitchAccountsState] = useShowSwitchAccountsState();
2019

2120
const currentAccountIndex = useCurrentAccountIndex();
@@ -38,14 +37,14 @@ export const SwitchAccountDrawer = memo(() => {
3837
return <AccountListUnavailable />;
3938
}
4039

41-
// without this early return it crashes on new install with:
40+
// #4370 SMELL without this early return the wallet crashes on new install with:
4241
// Wallet is neither of type `ledger` nor `software`
42+
// FIXME - this shouldn't be rendered until necessary
4343
if (!isShowing) return null;
44-
// FIXME - how is this even getting loaded at all on install?!?!?!
4544

4645
return (
4746
<Modal
48-
title={<styled.h1 textStyle="heading.05">Select account</styled.h1>} // FIXME this is a hack for Select Account that needs to be fixed
47+
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
4948
isShowing={isShowing}
5049
onClose={onClose}
5150
footer={whenWallet({

src/app/pages/fund/components/fund-account-tile.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ export function FundAccountTile(props: FundAccountTileProps) {
4848
height="40px"
4949
justifyContent="center"
5050
width="40px"
51-
backgroundColor="colors.lightModeBrown.1"
5251
>
5352
<img src={icon} width="24px" />
5453
</Box>
Lines changed: 41 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
import { useState } from 'react';
2-
3-
import * as Dialog from '@radix-ui/react-dialog';
1+
import { Dialog } from '@radix-ui/themes';
42
import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
53
import { css } from 'leather-styles/css';
64
import { Box, Flex, HStack, Stack, styled } from 'leather-styles/jsx';
75

8-
// import { isPopupMode } from '@app/common/utils';
96
import { LeatherButton } from '@app/ui/components/button';
107
import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon';
118
import { LeatherIcon } from '@app/ui/components/icons/leather-icon';
@@ -29,90 +26,51 @@ interface AllowDiagnosticsLayoutProps {
2926
onUserDenyDiagnostics(): void;
3027
}
3128

32-
// // #4250 TODO
33-
// Popup mode is just slightly wider than extension view
34-
// isPopupMode() returns true for extension / popup
35-
// could also change sm breakpoint
36-
// sm: '398px', -> sm: '442px',
37-
3829
export function AllowDiagnosticsLayout(props: AllowDiagnosticsLayoutProps) {
3930
const { onUserAllowDiagnostics, onUserDenyDiagnostics } = props;
40-
const [open, setOpen] = useState(true);
4131
return (
42-
<Dialog.Root open={open}>
43-
<Dialog.Portal>
44-
<Dialog.Overlay
45-
className={css({
46-
backgroundColor: 'transparent',
47-
position: 'fixed',
48-
inset: 0,
49-
animation: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
50-
})}
51-
>
52-
<Dialog.Content
53-
onPointerDownOutside={() => setOpen(!open)}
54-
className={css({
55-
backgroundColor: 'accent.background-primary',
56-
borderRadius: '6px',
57-
boxShadow:
58-
'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
59-
position: 'fixed',
60-
top: '50%',
61-
left: '50%',
62-
transform: 'translate(-50%, -50%)',
63-
width: '90vw',
64-
maxWidth: '450px',
65-
maxHeight: '85vh',
66-
padding: '25px',
67-
animation: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
68-
69-
// OLD
70-
// width: '500px',
71-
// marginY: 'space.03',
72-
// backgroundColor: 'accent.background-primary',
73-
// adding a minHeight here works for extension/popup but we lose margins
74-
// minHeight: isPopupMode() ? '600px' : undefined,
75-
})}
76-
>
77-
<LeatherIcon width="72px" />
78-
<styled.h1 textStyle="heading.03" mt={['space.05', 'space.08']}>
79-
Help us improve
80-
</styled.h1>
81-
<styled.p mt={['space.03', 'space.05']} textStyle="heading.05">
82-
Leather would like to gather deidentified service usage data to help improve the
83-
experience of the wallet.
84-
</styled.p>
32+
<Dialog.Root open>
33+
<Dialog.Content
34+
className={css({
35+
width: '500px',
36+
marginY: 'space.03',
37+
backgroundColor: 'accent.background-primary',
38+
})}
39+
>
40+
<LeatherIcon width="72px" />
41+
<styled.h1 textStyle="heading.03" mt={['space.05', 'space.08']}>
42+
Help us improve
43+
</styled.h1>
44+
<styled.p mt={['space.03', 'space.05']} textStyle="heading.05">
45+
Leather would like to gather deidentified service usage data to help improve the
46+
experience of the wallet.
47+
</styled.p>
8548

86-
<Stack mt={['space.04', 'space.05']} textStyle="body.01">
87-
<ReasonToAllowDiagnostics text="Send data about page views, clicks, and errors" />
88-
<ReasonToAllowDiagnostics text="This data is tied to randomly-generated IDs, and not personal data such as your Stacks address, keys, balances or IP address" />
89-
<ReasonToAllowDiagnostics text="This data is used to generate and send crash reports, help fix errors, and analyze statistics" />
90-
</Stack>
49+
<Stack mt={['space.04', 'space.05']} textStyle="body.01">
50+
<ReasonToAllowDiagnostics text="Send data about page views, clicks, and errors" />
51+
<ReasonToAllowDiagnostics text="This data is tied to randomly-generated IDs, and not personal data such as your Stacks address, keys, balances or IP address" />
52+
<ReasonToAllowDiagnostics text="This data is used to generate and send crash reports, help fix errors, and analyze statistics" />
53+
</Stack>
9154

92-
<HStack mt={['space.07', 'space.11']} gap="space.04">
93-
<LeatherButton
94-
fullWidth
95-
variant="outline"
96-
onClick={() => onUserDenyDiagnostics()}
97-
data-testid={OnboardingSelectors.DenyAnalyticsBtn}
98-
>
99-
Deny
100-
</LeatherButton>
101-
<LeatherButton
102-
autoFocus
103-
fullWidth
104-
data-testid={OnboardingSelectors.AllowAnalyticsBtn}
105-
onClick={onUserAllowDiagnostics}
106-
>
107-
Allow
108-
</LeatherButton>
109-
</HStack>
110-
111-
<Dialog.Title />
112-
<Dialog.Close />
113-
</Dialog.Content>
114-
</Dialog.Overlay>
115-
</Dialog.Portal>
55+
<HStack mt={['space.07', 'space.11']} gap="space.04">
56+
<LeatherButton
57+
fullWidth
58+
variant="outline"
59+
onClick={() => onUserDenyDiagnostics()}
60+
data-testid={OnboardingSelectors.DenyAnalyticsBtn}
61+
>
62+
Deny
63+
</LeatherButton>
64+
<LeatherButton
65+
autoFocus
66+
fullWidth
67+
data-testid={OnboardingSelectors.AllowAnalyticsBtn}
68+
onClick={onUserAllowDiagnostics}
69+
>
70+
Allow
71+
</LeatherButton>
72+
</HStack>
73+
</Dialog.Content>
11674
</Dialog.Root>
11775
);
11876
}

src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,8 @@ import { Box } from 'leather-styles/jsx';
88
import { useFilteredBitcoinAccounts } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger';
99
import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
1010
import { Modal } from '@app/ui/components/containers/modal/modal';
11+
import { virtuosoContainerStyle, virtuosoStyle } from '@app/ui/shared/styles/virtuoso-styles';
1112

12-
import {
13-
virtuosoContainerStyle,
14-
virtuosoStyle,
15-
} from '../../../../../ui/shared/styles/virtuoso-styles';
1613
import { AccountListItem } from './account-list-item';
1714

1815
export const RecipientAccountsDrawer = memo(() => {

src/app/ui/components/containers/footers/footer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ export function Footer({ children }: HasChildren) {
1313
width="100%"
1414
zIndex={1}
1515
backgroundColor="accent.background-primary"
16-
minHeight="92px" // give footer minHeight 92px to help offset vh of virtuoso
17-
maxWidth={{ base: '100vw', md: '450px' }} // this is so buggy - set to the same width as base drawer flex - need to fix this properly
16+
minHeight="92px"
17+
maxWidth={{ base: '100vw', md: '450px' }}
1818
borderRadius={[0, 0, 'lg']}
1919
>
2020
{children}

src/app/ui/components/containers/headers/header.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,13 @@ import { RouteUrls } from '@shared/route-urls';
88

99
import { useDrawers } from '@app/common/hooks/use-drawers';
1010
import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
11+
import { AppVersion } from '@app/components/app-version';
1112
import { NetworkModeBadge } from '@app/components/network-mode-badge';
1213
import { LeatherButton } from '@app/ui/components/button';
1314
import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
1415
import { HamburgerIcon } from '@app/ui/components/icons/hamburger-icon';
1516
import { LeatherLogo } from '@app/ui/components/leather-logo';
1617

17-
import { AppVersion } from '../../../../components/app-version';
18-
1918
function isSettingsClickable(pathname: RouteUrls) {
2019
return (
2120
pathname !== RouteUrls.RequestDiagnostics &&

src/app/ui/components/containers/headers/modal-header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { LeatherButton } from '@app/ui/components/button';
1010
import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
1111
import { CloseIcon } from '@app/ui/components/icons/close-icon';
1212

13-
// This is called ModalHeader but also gets shown on the Send flow which is a full page
13+
// #4370 TODO - refactor headers: This is called ModalHeader but also gets shown on the Send flow which is a full page
1414

1515
interface ModalHeaderProps {
1616
onClose?(): void;

src/app/ui/components/containers/modal/modal.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// TODO - not sure why we call this a drawer when it's a modal
2-
// 4370 TODO - can investigate swapping this for radix dialog and using modal true / false
31
import { ReactNode, memo } from 'react';
42
import { useNavigate } from 'react-router-dom';
53

0 commit comments

Comments
 (0)