Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: CP-9734align add account #123

Merged
merged 3 commits into from
Jan 16, 2025
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: align add account
vvava committed Jan 14, 2025
commit 9a0bf4f95d7d5948f597e6a2f234aff9a872efd3
7 changes: 2 additions & 5 deletions src/localization/locales/en/translation.json
Original file line number Diff line number Diff line change
@@ -32,10 +32,10 @@
"Active Wallet:": "Active Wallet:",
"Activity": "Activity",
"Add <bold>one</bold> recovery method to continue.": "Add <bold>one</bold> recovery method to continue.",
"Add Account": "Add Account",
"Add Custom Token": "Add Custom Token",
"Add Delegator": "Add Delegator",
"Add Network": "Add Network",
"Add New Address": "Add New Address",
"Add New Asset?": "Add New Asset?",
"Add New Network?": "Add New Network?",
"Add Next": "Add Next",
@@ -47,7 +47,6 @@
"Add Subnet Validator": "Add Subnet Validator",
"Add Token": "Add Token",
"Add Validator": "Add Validator",
"Add Wallet": "Add Wallet",
"Add Wallet with Keystore File": "Add Wallet with Keystore File",
"Add Wallet with Ledger": "Add Wallet with Ledger",
"Add Wallet with Recovery Phrase": "Add Wallet with Recovery Phrase",
@@ -411,13 +410,10 @@
"If you do not have the latest Avalanche App, please add it through the <ledgerLink>Ledger Live</ledgerLink> app manager.": "If you do not have the latest Avalanche App, please add it through the <ledgerLink>Ledger Live</ledgerLink> app manager.",
"If you ever change browsers or move computers, you will need this Secret Recovery Phrase to access your accounts. Save them somewhere safe and secret.": "If you ever change browsers or move computers, you will need this Secret Recovery Phrase to access your accounts. Save them somewhere safe and secret.",
"Import": "Import",
"Import Account": "Import Account",
"Import Details": "Import Details",
"Import Duplicate Account?": "Import Duplicate Account?",
"Import Keystore File": "Import Keystore File",
"Import Private Key": "Import Private Key",
"Import with Fireblocks": "Import with Fireblocks",
"Import with Wallet Connect": "Import with Wallet Connect",
"Imported": "Imported",
"Imported Private Key": "Imported Private Key",
"In order for this network to be fully functional, you need to provide your Glacier API key. You will be prompted to do so upon approval.": "In order for this network to be fully functional, you need to provide your Glacier API key. You will be prompted to do so upon approval.",
@@ -463,6 +459,7 @@
"Keystone": "Keystone",
"Keystone Support": "Keystone Support",
"Keystone {{number}}": "Keystone {{number}}",
"Keystore File": "Keystore File",
"Korean": "Korean",
"Language": "Language",
"Learn More": "Learn More",
59 changes: 24 additions & 35 deletions src/pages/Accounts/components/AccountsActionButton.tsx
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@ import {
ListIcon,
Typography,
TypographyProps,
PlusIcon,
LedgerIcon,
} from '@avalabs/core-k2-components';
import { useCallback, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
@@ -66,21 +66,15 @@ const RoundedButtonGroup = styled(ButtonGroup)`
}
`;

const MenuSubheader = (props: TypographyProps) => (
const MenuHeader = (props: TypographyProps) => (
<Typography
variant="caption"
component="li"
sx={{ px: 2, pt: 1, pb: 0.5, cursor: 'default' }}
color="text.secondary"
variant="button"
sx={{ px: 2, py: 1, cursor: 'default', fontSize: 18 }}
color="grey.50"
{...props}
/>
);

const WALLET_IMPORT_FLAGS = [
FeatureGates.ADD_WALLET_WITH_SEEDPHRASE,
FeatureGates.ADD_WALLET_WITH_KEYSTORE_FILE,
];

export const AccountsActionButton = ({
isLoading,
onAddNewAccount,
@@ -142,10 +136,6 @@ export const AccountsActionButton = ({
return '';
}, [t, network]);

const isAnyWalletImportAvailable = WALLET_IMPORT_FLAGS.some(
(flag) => featureFlags[flag],
);

return (
<RoundedButtonGroup
disabled={isLoading}
@@ -165,9 +155,8 @@ export const AccountsActionButton = ({
data-testid={'add-primary-account'}
isLoading={isLoading}
disabled={isLoading || !canCreateAccount}
startIcon={<PlusIcon size={24} />}
>
{t('Add Account')}
{t('Add New Address')}
</Button>
</Tooltip>

@@ -202,24 +191,26 @@ export const AccountsActionButton = ({
py: 0.5,
mb: 1,
overflow: 'hidden',
backgroundColor: 'grey.800',
backgroundColor: 'grey.850',
width: 272,
boxShadow: '0px 4px 24px 0px rgba(0, 0, 0, 0.60)',
}}
>
<MenuSubheader>{t('Import Account')}</MenuSubheader>
<MenuHeader>Add Address via</MenuHeader>
vvava marked this conversation as resolved.
Show resolved Hide resolved
<StyledMenuItem
onClick={goToImportScreen}
data-testid="add-import-account"
>
<KeyIcon size={16} sx={{ pr: 1 }} />
{t('Import Private Key')}
{t('Private Key')}
</StyledMenuItem>
{featureFlags[FeatureGates.IMPORT_WALLET_CONNECT] && (
<StyledMenuItem
data-testid="import-wallet-connect"
onClick={goToWalletConnectScreen}
>
<WalletConnectIcon size={16} sx={{ pr: 1 }} />
{t('Import with Wallet Connect')}
{t('Wallet Connect')}
</StyledMenuItem>
)}
{featureFlags[FeatureGates.IMPORT_FIREBLOCKS] && (
@@ -237,39 +228,37 @@ export const AccountsActionButton = ({
disabled={Boolean(fireblocksDisabledReason)}
>
<FireblocksIcon size={16} sx={{ pr: 1 }} />
{t('Import with Fireblocks')}
{t('Fireblocks')}
</StyledMenuItem>
</Tooltip>
)}

{isAnyWalletImportAvailable && (
<MenuSubheader>{t('Add Wallet')}</MenuSubheader>
)}
{featureFlags[FeatureGates.ADD_WALLET_WITH_SEEDPHRASE] && (
<StyledMenuItem
onClick={goToAddSeedphraseScreen}
data-testid="add-wallet-seed-phrase"
>
<ListIcon size={16} sx={{ pr: 1 }} />
{t('Add Wallet with Recovery Phrase')}
{t('Recovery Phrase')}
</StyledMenuItem>
)}
{featureFlags[FeatureGates.ADD_WALLET_WITH_KEYSTORE_FILE] && (
{featureFlags[FeatureGates.ADD_WALLET_WITH_LEDGER] && (
<StyledMenuItem
onClick={goToAddKeystoreFileScreen}
data-testid="add-wallet-keystore-file"
onClick={goToAddLedgerScreen}
data-testid="add-wallet-ledger"
>
<ListIcon size={16} sx={{ pr: 1 }} />
{t('Add Wallet with Keystore File')}
<LedgerIcon size={16} sx={{ pr: 1 }} />
{t('Ledger')}
</StyledMenuItem>
)}
{featureFlags[FeatureGates.ADD_WALLET_WITH_LEDGER] && (
{featureFlags[FeatureGates.ADD_WALLET_WITH_KEYSTORE_FILE] && (
<StyledMenuItem
onClick={goToAddLedgerScreen}
data-testid="add-wallet-ledger"
onClick={goToAddKeystoreFileScreen}
data-testid="add-wallet-keystore-file"
>
{/*TODO: replace to the KeystoreIcon*/}
<ListIcon size={16} sx={{ pr: 1 }} />
{t('Add Wallet with Ledger')}
{t('Keystore File')}
</StyledMenuItem>
)}
</MenuList>