feat: new account switcher

package.json

@@ -32,7 +32,7 @@
     "@avalabs/core-coingecko-sdk": "3.1.0-alpha.19",
     "@avalabs/core-covalent-sdk": "3.1.0-alpha.19",
     "@avalabs/core-etherscan-sdk": "3.1.0-alpha.19",
-    "@avalabs/core-k2-components": "4.18.0-alpha.47",
+    "@avalabs/core-k2-components": "4.18.0-alpha.50",
     "@avalabs/core-snowtrace-sdk": "3.1.0-alpha.19",
     "@avalabs/core-token-prices-sdk": "3.1.0-alpha.19",
     "@avalabs/core-utils-sdk": "3.1.0-alpha.19",

src/background/services/accounts/utils/typeGuards.ts

@@ -2,6 +2,7 @@ import {
   Account,
   AccountType,
   FireblocksAccount,
+  ImportedAccount,
   PrimaryAccount,
   WalletConnectAccount,
 } from '../models';
@@ -18,3 +19,7 @@ export const isWalletConnectAccount = (
 export const isPrimaryAccount = (
   account?: Account
 ): account is PrimaryAccount => account?.type === AccountType.PRIMARY;
+
+export const isImportedAccount = (
+  account?: Account
+): account is ImportedAccount => Boolean(account) && !isPrimaryAccount(account);

src/components/common/SimpleAddress.tsx

@@ -5,23 +5,25 @@ import {
   toast,
   CopyIcon,
   TypographyProps,
+  StackProps,
 } from '@avalabs/core-k2-components';
 import { useTranslation } from 'react-i18next';
 
 import { truncateAddress } from '@src/utils/truncateAddress';
 
-export interface SimpleAddressProps {
+export type SimpleAddressProps = StackProps & {
   address: string;
   textColor?: TypographyProps['color'];
   iconColor?: TypographyProps['color'];
   copyCallback?: () => void;
-}
+};
 
 export function SimpleAddress({
   address,
   iconColor,
   textColor,
   copyCallback,
+  ...props
 }: SimpleAddressProps) {
   const { t } = useTranslation();
 
@@ -45,6 +47,7 @@ export function SimpleAddress({
         textAlign: 'center',
       }}
       onClick={copyAddress}
+      {...props}
     >
       <CopyIcon
         sx={{

src/hooks/useKeyboardShortcuts.ts

@@ -1,7 +1,7 @@
 import { KeyboardEventHandler, useCallback } from 'react';
 
 type Callback = () => void;
-type KeyNames = 'Enter' | 'Esc';
+type KeyNames = 'Enter' | 'Escape';
 type KeyboardShortcuts = Partial<Record<KeyNames, Callback>>;
 
 export const useKeyboardShortcuts = (shortcuts: KeyboardShortcuts) => {

src/hooks/useScopedToast.ts

@@ -0,0 +1,27 @@
+import { useCallback } from 'react';
+import { toast } from '@avalabs/core-k2-components';
+
+export const useScopedToast = (id: string) => {
+  const success = useCallback(
+    (...[message, opts]: Parameters<typeof toast.success>) => {
+      toast.dismiss(id);
+
+      return toast.success(message, { ...opts, id: id });
+    },
+    [id]
+  );
+
+  const error = useCallback(
+    (...[message, opts]: Parameters<typeof toast.error>) => {
+      toast.dismiss(id);
+
+      return toast.error(message, { ...opts, id: id });
+    },
+    [id]
+  );
+
+  return {
+    success,
+    error,
+  };
+};

src/localization/locales/en/translation.json

@@ -7,19 +7,19 @@
   "3.": "3.",
   "<capitalize>{{timeLeft}}</capitalize> Remaining": "<capitalize>{{timeLeft}}</capitalize> Remaining",
   "<typography>This process retrieves the addresses<br />from your ledger</typography>": "<typography>This process retrieves the addresses<br />from your ledger</typography>",
+  "A private key is like a password for this specific account. Keep it secure, anyone with this private key can access your funds.": "A private key is like a password for this specific account. Keep it secure, anyone with this private key can access your funds.",
   "API credentials have not been provided": "API credentials have not been provided",
   "About Ava Labs": "About Ava Labs",
   "About Avalanche": "About Avalanche",
   "Access Blocked": "Access Blocked",
   "Access Existing Wallet": "Access Existing Wallet",
   "Access an existing wallet with your recovery phrase. You can paste your entire phrase in the first field.": "Access an existing wallet with your recovery phrase. You can paste your entire phrase in the first field.",
   "Account": "Account",
+  "Account \"{{accountName}}\" is now active": "Account \"{{accountName}}\" is now active",
   "Account Details": "Account Details",
-  "Account Manager": "Account Manager",
   "Account not found": "Account not found",
   "Account renamed": "Account renamed",
   "Account to rename": "Account to rename",
-  "Account(s) Deleted!": "Account(s) Deleted!",
   "Account(s) removal has failed!": "Account(s) removal has failed!",
   "Action Details": "Action Details",
   "Action was not approved. Please try again.": "Action was not approved. Please try again.",
@@ -30,6 +30,7 @@
   "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",
@@ -104,6 +105,8 @@
   "Avalanche (P-Chain) Address": "Avalanche (P-Chain) Address",
   "Avalanche (X-Chain) Address": "Avalanche (X-Chain) Address",
   "Avalanche (X/P-Chain) Address": "Avalanche (X/P-Chain) Address",
+  "Avalanche C-Chain": "Avalanche C-Chain",
+  "Avalanche X/P-Chain": "Avalanche X/P-Chain",
   "Avoid using a password that you use with other websites or that might be easy for someone to guess.": "Avoid using a password that you use with other websites or that might be easy for someone to guess.",
   "BIP44 (Default)": "BIP44 (Default)",
   "Back": "Back",
@@ -221,7 +224,6 @@
   "Could not swap {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}": "Could not swap {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}",
   "Couldn’t Connect": "Couldn’t Connect",
   "Create": "Create",
-  "Create Account": "Create Account",
   "Create Asset": "Create Asset",
   "Create Blockchain": "Create Blockchain",
   "Create Chain": "Create Chain",
@@ -230,6 +232,7 @@
   "Currency": "Currency",
   "Current network is different from this network": "Current network is different from this network",
   "Current signature": "Current signature",
+  "Currently using {{walletName}}": "Currently using {{walletName}}",
   "Custom": "Custom",
   "Custom Network Deleted!": "Custom Network Deleted!",
   "Custom Network Edited!": "Custom Network Edited!",
@@ -253,6 +256,7 @@
   "Delete Contact?": "Delete Contact?",
   "Delete Network?": "Delete Network?",
   "Deposit": "Deposit",
+  "Derivation Path": "Derivation Path",
   "Derived Addresses": "Derived Addresses",
   "Description": "Description",
   "Details": "Details",
@@ -276,6 +280,7 @@
   "Edit Network": "Edit Network",
   "Edit Network Fee": "Edit Network Fee",
   "Edit Spending Limit": "Edit Spending Limit",
+  "Edit name": "Edit name",
   "End Date": "End Date",
   "End Date:": "End Date:",
   "English": "English",
@@ -403,6 +408,7 @@
   "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.",
   "Incoming": "Incoming",
   "Incompatible Wallet": "Incompatible Wallet",
@@ -443,6 +449,7 @@
   "It will never be higher than Max Base Fee * Gas Limit.": "It will never be higher than Max Base Fee * Gas Limit.",
   "It will take <b>2 days</b> to retrieve your recovery phrase. You will only have <b>48 hours</b> to copy your recovery phrase once the 2 day waiting period is over.": "It will take <b>2 days</b> to retrieve your recovery phrase. You will only have <b>48 hours</b> to copy your recovery phrase once the 2 day waiting period is over.",
   "Japanese": "Japanese",
+  "Keystone": "Keystone",
   "Keystone Support": "Keystone Support",
   "Keystone {{number}}": "Keystone {{number}}",
   "Korean": "Korean",
@@ -473,10 +480,8 @@
   "Logo URL (Optional)": "Logo URL (Optional)",
   "Looks like you got here by accident.": "Looks like you got here by accident.",
   "MFA configuration is required for your account.": "MFA configuration is required for your account.",
-  "Main": "Main",
   "Malicious Application": "Malicious Application",
   "Manage": "Manage",
-  "Manage Accounts": "Manage Accounts",
   "Manage Collectibles": "Manage Collectibles",
   "Manage Networks": "Manage Networks",
   "Manage Tokens": "Manage Tokens",
@@ -528,7 +533,6 @@
   "New Contact": "New Contact",
   "New Password": "New Password",
   "New Wallet Name": "New Wallet Name",
-  "New Wallet Name is Required": "New Wallet Name is Required",
   "New name": "New name",
   "New name is required": "New name is required",
   "New!": "New!",
@@ -565,6 +569,7 @@
   "Only connect to sites that you trust.": "Only connect to sites that you trust.",
   "Only keystore files exported from the Avalanche Wallet are supported.": "Only keystore files exported from the Avalanche Wallet are supported.",
   "Only the last account and secondary wallets can be deleted. First account cannot be deleted (delete the wallet instead).": "Only the last account and secondary wallets can be deleted. First account cannot be deleted (delete the wallet instead).",
+  "Only the last account of the wallet can be removed": "Only the last account of the wallet can be removed",
   "Ooops... It seems you don't have internet connection": "Ooops... It seems you don't have internet connection",
   "Open Core in your browser.": "Open Core in your browser.",
   "Open any <b>authenticator app</b> and enter the code found below.": "Open any <b>authenticator app</b> and enter the code found below.",
@@ -632,7 +637,6 @@
   "Pound Sterling": "Pound Sterling",
   "Powered by": "Powered by",
   "Pressing yes will terminate this session. Without your recovery phrase or methods you will not be able to recover this wallet.": "Pressing yes will terminate this session. Without your recovery phrase or methods you will not be able to recover this wallet.",
-  "Primary": "Primary",
   "Primary Network": "Primary Network",
   "Privacy Policy": "Privacy Policy",
   "Private Key": "Private Key",
@@ -676,15 +680,18 @@
   "Reject Connection": "Reject Connection",
   "Reject Transaction": "Reject Transaction",
   "Remove": "Remove",
+  "Remove Account": "Remove Account",
   "Remove Authenticator?": "Remove Authenticator?",
   "Remove Subnet Validator": "Remove Subnet Validator",
   "Remove This Method?": "Remove This Method?",
   "Removing the account will delete all local  account information stored on this computer. Your assets on chain will remain on chain.": "Removing the account will delete all local  account information stored on this computer. Your assets on chain will remain on chain.",
   "Removing the accounts will delete all local accounts information stored on this computer. Your assets on chain will remain on chain.": "Removing the accounts will delete all local accounts information stored on this computer. Your assets on chain will remain on chain.",
   "Removing the last account is not possible.": "Removing the last account is not possible.",
+  "Rename": "Rename",
+  "Rename Account": "Rename Account",
+  "Rename Wallet": "Rename Wallet",
   "Rename Wallet?": "Rename Wallet?",
   "Rename account?": "Rename account?",
-  "Renaming Failed": "Renaming Failed",
   "Renaming failed": "Renaming failed",
   "Render Error": "Render Error",
   "Report a Bug": "Report a Bug",
@@ -725,6 +732,8 @@
   "Scroll the message contents above to the very bottom to be able to continue": "Scroll the message contents above to the very bottom to be able to continue",
   "Search": "Search",
   "Security & Privacy": "Security & Privacy",
+  "Seedless": "Seedless",
+  "Seedless ({{provider}})": "Seedless ({{provider}})",
   "Seedless login error": "Seedless login error",
   "Seedless {{number}}": "Seedless {{number}}",
   "Select": "Select",
@@ -738,6 +747,7 @@
   "Select the first word": "Select the first word",
   "Select the word that comes after": "Select the word that comes after",
   "Select the words below to verify your secret recovery phrase.": "Select the words below to verify your secret recovery phrase.",
+  "Select this wallet": "Select this wallet",
   "Selected fee is too high": "Selected fee is too high",
   "Send": "Send",
   "Send Feedback": "Send Feedback",
@@ -751,6 +761,7 @@
   "Show Private Key": "Show Private Key",
   "Show Recovery Phrase": "Show Recovery Phrase",
   "Show Tokens Without Balance": "Show Tokens Without Balance",
+  "Show private key": "Show private key",
   "Sign": "Sign",
   "Sign Message": "Sign Message",
   "Signature Threshold": "Signature Threshold",
@@ -794,6 +805,7 @@
   "Subnet Details": "Subnet Details",
   "Subnet ID": "Subnet ID",
   "Success!": "Success!",
+  "Successfully deleted {{number}} account(s)": "Successfully deleted {{number}} account(s)",
   "Successfully imported the keystore file.": "Successfully imported the keystore file.",
   "Successfully reconnected!": "Successfully reconnected!",
   "Successfully swapped {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}": "Successfully swapped {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}",
@@ -860,6 +872,7 @@
   "This transaction is malicious do not proceed.": "This transaction is malicious do not proceed.",
   "This transaction requires multiple approvals.": "This transaction requires multiple approvals.",
   "This transaction requires two approvals": "This transaction requires two approvals",
+  "This wallet cannot be renamed": "This wallet cannot be renamed",
   "This website": "This website",
   "Threshold": "Threshold",
   "Time Elapsed": "Time Elapsed",
@@ -911,6 +924,7 @@
   "Try again": "Try again",
   "Try typing the information again or go back to the account manager.": "Try typing the information again or go back to the account manager.",
   "Turkish": "Turkish",
+  "Type": "Type",
   "URI": "URI",
   "Unable to connect. View the troubleshoot guide <linkText>here</linkText>": "Unable to connect. View the troubleshoot guide <linkText>here</linkText>",
   "Unable to connect?": "Unable to connect?",
@@ -983,7 +997,8 @@
   "Wallet Connect Approval": "Wallet Connect Approval",
   "Wallet Details": "Wallet Details",
   "Wallet Name": "Wallet Name",
-  "Wallet Renamed": "Wallet Renamed",
+  "Wallet renamed": "Wallet renamed",
+  "WalletConnect": "WalletConnect",
   "Warning": "Warning",
   "Warning: Verify Message Content": "Warning: Verify Message Content",
   "We encountered an unexpected issue.": "We encountered an unexpected issue.",
@@ -1031,6 +1046,7 @@
   "Yubikey": "Yubikey",
   "Yubikey Name": "Yubikey Name",
   "Yubikey Setup": "Yubikey Setup",
+  "an imported account": "an imported account",
   "creating...": "creating...",
   "paraswap error message while get rate: {{message}}": "paraswap error message while get rate: {{message}}",
   "removing": "removing",

src/pages/Accounts/AccountBalance.tsx

@@ -14,12 +14,15 @@ import { useTranslation } from 'react-i18next';
 import { useSettingsContext } from '@src/contexts/SettingsProvider';
 import { useAnalyticsContext } from '@src/contexts/AnalyticsProvider';
 import { AccountType } from '@src/background/services/accounts/models';
+import { useAccountManager } from './providers/AccountManagerProvider';
 
 interface AccountBalanceProps {
   refreshBalance: () => void;
   balanceTotalUSD: number | null;
   isBalanceLoading: boolean;
   accountType: AccountType;
+  isActive: boolean;
+  isHovered: boolean;
 }
 
 const AnimatedRefreshIcon = styled(RefreshIcon, {
@@ -52,8 +55,11 @@ export function AccountBalance({
   balanceTotalUSD,
   isBalanceLoading,
   accountType,
+  isActive,
+  isHovered,
 }: AccountBalanceProps) {
   const { t } = useTranslation();
+  const { isManageMode } = useAccountManager();
   const { currency, currencyFormatter } = useSettingsContext();
   const [skeletonWidth, setSkeletonWidth] = useState(30);
   const balanceTextRef = useRef<HTMLSpanElement>();
@@ -143,7 +149,7 @@ export function AccountBalance({
 
       <Grow
         {...commonTransitionProps}
-        in={hasBalance && !isBalanceLoading}
+        in={hasBalance && isHovered && !isBalanceLoading && !isManageMode}
         mountOnEnter
         unmountOnExit
       >
@@ -163,8 +169,12 @@ export function AccountBalance({
         mountOnEnter
         unmountOnExit
       >
-        <Typography ref={balanceTextRef} variant="h6">
-          {currencyFormatter(balanceTotalUSD || 0).replace(currency, '')}
+        <Typography
+          ref={balanceTextRef}
+          variant="body1"
+          color={isActive ? 'text.primary' : 'text.secondary'}
+        >
+          {currencyFormatter(balanceTotalUSD ?? 0).replace(currency, '')}
         </Typography>
       </Grow>
     </Stack>