Skip to content

Commit ed75842

Browse files
bohdan-struk-avalabsbohdan-struk-avalabs
authored
feat(next-gen): update account switcher (#494)
1 parent 83819e3 commit ed75842

File tree

41 files changed

+673
-439
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+673
-439
lines changed

‎apps/next/src/components/Page/Page.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,12 @@ export const Page = ({
5858
<Stack px={px ?? 1.5} pb={1.5} gap={3} flexGrow={1} {...containerProps}>
5959
{title && (
6060
<Stack gap={1}>
61-
<Stack direction="row" gap={1} justifyContent="space-between">
61+
<Stack
62+
direction="row"
63+
gap={1}
64+
justifyContent="space-between"
65+
alignItems="center"
66+
>
6267
<Typography
6368
variant="h2"
6469
ref={ref}

‎apps/next/src/components/WalletCard/Styled.tsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
accordionClasses,
23
accordionSummaryClasses,
34
Accordion as K2Accordion,
45
AccordionDetails as K2AccordionDetails,
@@ -16,13 +17,20 @@ export const Accordion = styled(K2Accordion)(({ theme }) => ({
1617
theme.palette.mode === 'light'
1718
? theme.palette.surface.primary
1819
: theme.palette.background.paper,
20+
[`&.${accordionClasses.expanded} .${accordionSummaryClasses.root}`]: {
21+
overflow: 'hidden',
22+
position: 'sticky',
23+
top: 0,
24+
zIndex: 1,
25+
backdropFilter: 'blur(30px)',
26+
WebkitBackdropFilter: 'blur(30px)',
27+
},
1928
}));
2029

2130
export const AccordionSummary = styled(K2AccordionSummary)(({ theme }) => ({
2231
[`&.${accordionSummaryClasses.root}`]: {
2332
minHeight: 42,
24-
height: 42,
25-
paddingBlock: theme.spacing(1),
33+
paddingBlock: theme.spacing(1.5),
2634
paddingInline: theme.spacing(1.5),
2735
justifyContent: 'unset',
2836
},
@@ -50,7 +58,9 @@ export const AccordionSummary = styled(K2AccordionSummary)(({ theme }) => ({
5058
}));
5159

5260
export const AccordionDetails = styled(K2AccordionDetails)(({ theme }) => ({
61+
paddingTop: 0,
5362
paddingInline: theme.spacing(1.5),
63+
overflow: 'hidden',
5464
}));
5565

5666
export const ErrorIcon = styled(MdError)(({ theme }) => ({

‎apps/next/src/components/WalletCard/WalletCard.tsx‎

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
Box,
23
CircularProgress,
34
Stack,
45
Typography,
@@ -21,20 +22,24 @@ import { WalletIconProps } from '@/components/WalletIcon';
2122
import { useHistory } from 'react-router-dom';
2223
import { URL_SEARCH_TOKENS } from '@/pages/AccountManagement/utils/searchParams';
2324
interface WalletCardProps extends PropsWithChildren {
25+
accountsNumber: number;
2426
id: WalletDetails['id'];
2527
name: WalletDetails['name'];
2628
icon: ReactElement<WalletIconProps>;
2729
initialExpanded: boolean;
2830
disableRename?: boolean;
31+
showActiveIndicator?: boolean;
2932
}
3033

3134
export const WalletCard: FC<WalletCardProps> = ({
35+
accountsNumber,
3236
children,
3337
disableRename,
3438
icon,
3539
id,
3640
initialExpanded,
3741
name,
42+
showActiveIndicator,
3843
}) => {
3944
const { t } = useTranslation();
4045
const { push } = useHistory();
@@ -45,7 +50,9 @@ export const WalletCard: FC<WalletCardProps> = ({
4550
const [isExpanded, setIsExpanded] = useState(initialExpanded);
4651
const sharedTitleProps: TypographyProps = {
4752
width: 1,
48-
variant: 'subtitle3',
53+
variant: 'h6',
54+
fontFamily: 'Aeonik',
55+
lineHeight: 1,
4956
whiteSpace: 'nowrap',
5057
overflow: 'hidden',
5158
textOverflow: 'ellipsis',
@@ -70,42 +77,56 @@ export const WalletCard: FC<WalletCardProps> = ({
7077
>
7178
<Styled.AccordionSummary
7279
component="div"
73-
icon={cloneElement(icon, { expanded: isExpanded })}
80+
icon={
81+
<Stack direction="row" alignItems="center">
82+
{showActiveIndicator && (
83+
<Box
84+
position="absolute"
85+
left={4}
86+
width={6}
87+
height={6}
88+
borderRadius="50%"
89+
bgcolor="success.main"
90+
/>
91+
)}
92+
{cloneElement(icon, { expanded: isExpanded })}
93+
</Stack>
94+
}
7495
>
7596
<Stack
7697
direction="row"
77-
height="21px"
7898
alignItems="center"
79-
gap={0.5}
8099
width="calc(100% - 32px)"
100+
justifyContent="space-between"
101+
mr={1}
81102
>
82103
{disableRename ? (
83-
<Typography {...sharedTitleProps}>{name}</Typography>
104+
<Stack>
105+
<Typography {...sharedTitleProps}>{name}</Typography>
106+
<Typography variant="body3" color="text.disabled">
107+
{accountsNumber > 1
108+
? t('{{count}} accounts', { count: accountsNumber })
109+
: t('{{count}} account', { count: accountsNumber })}
110+
</Typography>
111+
</Stack>
84112
) : (
85-
<RenamableTitle {...sharedTitleProps} onRename={handleRename}>
86-
{name}
87-
</RenamableTitle>
113+
<Stack>
114+
<RenamableTitle {...sharedTitleProps} onRename={handleRename}>
115+
{name}
116+
</RenamableTitle>
117+
<Typography variant="body3" color="text.disabled">
118+
{accountsNumber > 1
119+
? t('{{count}} accounts', { count: accountsNumber })
120+
: t('{{count}} account', { count: accountsNumber })}
121+
</Typography>
122+
</Stack>
88123
)}
89124
{isLoading && <CircularProgress size={14} />}
90125
{!isLoading && !hasErrorOccurred && (
91-
<Typography variant="body3" color="text.disabled">
126+
<Typography variant="h6">
92127
{currencyFormatter(totalBalanceInCurrency ?? 0)}
93128
</Typography>
94129
)}
95-
{!isLoading && hasErrorOccurred && (
96-
<>
97-
<Styled.ErrorIcon size={16} />
98-
<Typography
99-
variant="subtitle3"
100-
color="error"
101-
component={Styled.Shrinkable}
102-
whiteSpace="nowrap"
103-
id="error-message"
104-
>
105-
{t('Unable to load balances')}
106-
</Typography>
107-
</>
108-
)}
109130
</Stack>
110131
</Styled.AccordionSummary>
111132
<Styled.AccordionDetails>{children}</Styled.AccordionDetails>

‎apps/next/src/components/WalletIcon.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,23 @@ export const WalletIcon: FC<WalletIconProps> = ({
1818
expanded,
1919
}) => {
2020
if (type === SecretType.Ledger || type === SecretType.LedgerLive) {
21-
return <LedgerIcon size={16} />;
21+
return <LedgerIcon size={18} />;
2222
}
2323

2424
if (type === SecretType.Seedless) {
2525
if (authProvider === SeedlessAuthProvider.Google) {
26-
return <FaGoogle size={16} />;
26+
return <FaGoogle size={18} />;
2727
}
2828

2929
if (authProvider === SeedlessAuthProvider.Apple) {
30-
return <FaApple size={16} />;
30+
return <FaApple size={22} />;
3131
}
3232
}
3333

3434
if (type === SecretType.Keystone || type === SecretType.Keystone3Pro) {
35-
return <KeystoneIcon size={14} />;
35+
return <KeystoneIcon size={18} />;
3636
}
3737

3838
const MnemonicIcon = expanded ? WalletOpenIcon : WalletClosedIcon;
39-
return <MnemonicIcon size={21} />;
39+
return <MnemonicIcon size={24} />;
4040
};

‎apps/next/src/localization/locales/en/translation.json‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"Add Yubikey": "Add Yubikey",
4242
"Add a display name for your wallet. You can change it at any time in the settings.": "Add a display name for your wallet. You can change it at any time in the settings.",
4343
"Add a name so that it is easier to find later.": "Add a name so that it is easier to find later.",
44+
"Add account": "Add account",
4445
"Add an account or connect a wallet": "Add an account or connect a wallet",
4546
"Add an address": "Add an address",
4647
"Add chain ID": "Add chain ID",
@@ -68,6 +69,7 @@
6869
"Amount is too small to proceed.": "Amount is too small to proceed.",
6970
"An error occurred while computing the price.": "An error occurred while computing the price.",
7071
"An error occurred, please try again later": "An error occurred, please try again later",
72+
"An overview of your wallets and associated accounts": "An overview of your wallets and associated accounts",
7173
"An unexpected error occurred. Please try again later or contact Core support.": "An unexpected error occurred. Please try again later or contact Core support.",
7274
"An unexpected error occurred. Please try again.": "An unexpected error occurred. Please try again.",
7375
"An unknown error occurred": "An unknown error occurred",
@@ -162,7 +164,6 @@
162164
"Connect with WalletConnect": "Connect with WalletConnect",
163165
"Connect your Keystone": "Connect your Keystone",
164166
"Connect your Ledger": "Connect your Ledger",
165-
"Connect your Ledger device and open the Avalanche app": "Connect your Ledger device and open the Avalanche app",
166167
"Connect {{count}} accounts": "Connect {{count}} accounts",
167168
"Connect {{count}} accounts_plural": "Connect {{count}} accounts",
168169
"Connected": "Connected",
@@ -190,7 +191,6 @@
190191
"Core.app": "Core.app",
191192
"Could not connect.": "Could not connect.",
192193
"Could not swap {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}": "Could not swap {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}",
193-
"Create new account": "Create new account",
194194
"Creating Solana addresses...": "Creating Solana addresses...",
195195
"Currency": "Currency",
196196
"Current password": "Current password",
@@ -303,7 +303,6 @@
303303
"Gas limit": "Gas limit",
304304
"Gasless funding failed": "Gasless funding failed",
305305
"General": "General",
306-
"Generate a new account in your active wallet": "Generate a new account in your active wallet",
307306
"German": "German",
308307
"Get Core to work for you. Whether it’s transferring, sending crypto, just ask away!": "Get Core to work for you. Whether it’s transferring, sending crypto, just ask away!",
309308
"Get free gas": "Get free gas",
@@ -340,6 +339,7 @@
340339
"Import with Fireblocks account": "Import with Fireblocks account",
341340
"Imported": "Imported",
342341
"Imported Accounts": "Imported Accounts",
342+
"Imported wallet": "Imported wallet",
343343
"Incorrect token address": "Incorrect token address",
344344
"Install or open your authenticator app to scan the QR code. If you prefer, you can manually copy the code by clicking the link below.": "Install or open your authenticator app to scan the QR code. If you prefer, you can manually copy the code by clicking the link below.",
345345
"Insufficient balance": "Insufficient balance",
@@ -401,6 +401,7 @@
401401
"Manage Collectibles": "Manage Collectibles",
402402
"Manage Tokens": "Manage Tokens",
403403
"Manage and customize your Core experience to your liking.": "Manage and customize your Core experience to your liking.",
404+
"Manage wallets": "Manage wallets",
404405
"Manually create new wallet": "Manually create new wallet",
405406
"Manually enter a recovery phrase": "Manually enter a recovery phrase",
406407
"Manually enter your private key to import": "Manually enter your private key to import",
@@ -417,6 +418,7 @@
417418
"Move funds from another wallet or exchange": "Move funds from another wallet or exchange",
418419
"My Accounts": "My Accounts",
419420
"My avatar": "My avatar",
421+
"My wallets": "My wallets",
420422
"Name": "Name",
421423
"Name (A-Z)": "Name (A-Z)",
422424
"Name (Z-A)": "Name (Z-A)",
@@ -560,8 +562,8 @@
560562
"Remove account": "Remove account",
561563
"Remove recovery method": "Remove recovery method",
562564
"Rename": "Rename",
563-
"Rename Account": "Rename Account",
564-
"Rename Wallet": "Rename Wallet",
565+
"Rename account": "Rename account",
566+
"Rename wallet": "Rename wallet",
565567
"Request Outdated": "Request Outdated",
566568
"Request a feature": "Request a feature",
567569
"Request timed out": "Request timed out",
@@ -808,7 +810,6 @@
808810
"Wrong app": "Wrong app",
809811
"Wrong quote provider": "Wrong quote provider",
810812
"X-Chain": "X-Chain",
811-
"Yes, delete": "Yes, delete",
812813
"Yield": "Yield",
813814
"You are about to exit the recovery phrase export process. Are you sure you want to exit?": "You are about to exit the recovery phrase export process. Are you sure you want to exit?",
814815
"You can now close this window and continue using Core.": "You can now close this window and continue using Core.",
@@ -842,6 +843,10 @@
842843
"the selected network's": "the selected network's",
843844
"unknown wallet": "unknown wallet",
844845
"your avatar": "your avatar",
846+
"{{count}} account": "{{count}} account",
847+
"{{count}} account_plural": "{{count}} account",
848+
"{{count}} accounts": "{{count}} accounts",
849+
"{{count}} accounts_plural": "{{count}} accounts",
845850
"{{count}} saved addresses": "{{count}} saved addresses",
846851
"{{count}} saved addresses_plural": "{{count}} saved addresses",
847852
"{{length}}-word phrase": "{{length}}-word phrase",

‎apps/next/src/pages/AccountManagement/AccountManagement.tsx‎

Lines changed: 21 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import { DialogContent, SxProps } from '@avalabs/k2-alpine';
21
import {
32
AccountManagerProvider,
43
BalancesProvider,
5-
useGoBack,
64
WalletTotalBalanceProvider,
75
} from '@core/ui';
86
import { FC } from 'react';
@@ -14,55 +12,35 @@ import { ImportPrivateKey } from './components/ImportPrivateKey/Page';
1412
import { QRCode } from './components/QRCode';
1513
import { RenamePage } from './components/RenamePage';
1614
import { ShowPrivateKey } from './components/ShowPrivateKey/ShowPrivateKey';
17-
import { Wallets } from './components/Wallets';
15+
import { WalletsHomePage } from './components/Wallets';
1816
import { ImportKeystoreFile } from './components/ImportKeystoreFile/Page';
19-
import { PageTopBar } from '../../components/PageTopBar';
20-
import { SlideUpDialog } from '../../components/Dialog';
21-
22-
const dialogContentSx: SxProps = {
23-
container: 'account-management / size',
24-
padding: 1.5,
25-
overflow: 'hidden',
26-
};
2717

2818
const AccountManagement: FC = () => {
2919
const { path } = useRouteMatch();
30-
const goBack = useGoBack();
3120
return (
3221
<BalancesProvider>
3322
<WalletTotalBalanceProvider>
3423
<AccountManagerProvider>
35-
<SlideUpDialog open>
36-
<PageTopBar showBack onBackClicked={goBack} />
37-
<DialogContent sx={dialogContentSx}>
38-
<Switch>
39-
<Route path={`${path}/rename`} component={RenamePage} />
40-
<Route
41-
path={`${path}/delete-account`}
42-
component={DeleteAccount}
43-
/>
44-
<Route path={`${path}/qr-code`} component={QRCode} />
45-
<Route
46-
path={`${path}/add-wallet`}
47-
component={AddOrConnectWallet}
48-
/>
49-
<Route
50-
path={`${path}/import-private-key`}
51-
component={ImportPrivateKey}
52-
/>
53-
<Route
54-
path={`${path}/import-keystore-file`}
55-
component={ImportKeystoreFile}
56-
/>
57-
<Route path={`${path}/account`} component={AccountDetails} />
58-
<Route
59-
path={`${path}/show-private-key`}
60-
component={ShowPrivateKey}
61-
/>
62-
<Route path={path} component={Wallets} />
63-
</Switch>
64-
</DialogContent>
65-
</SlideUpDialog>
24+
<Switch>
25+
<Route path={path} exact component={WalletsHomePage} />
26+
<Route path={`${path}/rename`} component={RenamePage} />
27+
<Route path={`${path}/delete-account`} component={DeleteAccount} />
28+
<Route path={`${path}/qr-code`} component={QRCode} />
29+
<Route path={`${path}/add-wallet`} component={AddOrConnectWallet} />
30+
<Route
31+
path={`${path}/import-private-key`}
32+
component={ImportPrivateKey}
33+
/>
34+
<Route
35+
path={`${path}/import-keystore-file`}
36+
component={ImportKeystoreFile}
37+
/>
38+
<Route path={`${path}/account`} component={AccountDetails} />
39+
<Route
40+
path={`${path}/show-private-key`}
41+
component={ShowPrivateKey}
42+
/>
43+
</Switch>
6644
</AccountManagerProvider>
6745
</WalletTotalBalanceProvider>
6846
</BalancesProvider>

0 commit comments

Comments
 (0)