feat: CP-9474 import private key activate account, design fixes (#89)

ava-labs · Dec 2, 2024 · 78c6046 · 78c6046
1 parent ac914da
commit 78c6046
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/src/pages/Accounts/AccountItemChip.tsx b/src/pages/Accounts/AccountItemChip.tsx
@@ -11,27 +11,30 @@ import { Account, AccountType } from '@src/background/services/accounts/models';
 
 interface AccountItemChipProps {
   account: Account;
+  isActive?: boolean;
 }
 
-export function AccountItemChip({ account }: AccountItemChipProps) {
+export function AccountItemChip({ account, isActive }: AccountItemChipProps) {
   const { t } = useTranslation();
   const { type: accountType } = account;
 
+  const fontColor = isActive ? 'white' : 'inherit';
+
   const icon = useMemo(() => {
     switch (accountType) {
       case AccountType.IMPORTED:
-        return <KeyIcon />;
+        return <KeyIcon color={fontColor} />;
 
       case AccountType.FIREBLOCKS:
-        return <FireblocksIcon />;
+        return <FireblocksIcon color={fontColor} />;
 
       case AccountType.WALLET_CONNECT:
-        return <WalletConnectIcon />;
+        return <WalletConnectIcon color={fontColor} />;
 
       default:
         return null;
     }
-  }, [accountType]);
+  }, [accountType, fontColor]);
 
   const label = useMemo(() => {
     switch (accountType) {
@@ -58,7 +61,11 @@ export function AccountItemChip({ account }: AccountItemChipProps) {
       icon={icon}
       label={label}
       size="small"
-      sx={{ fontWeight: 'normal' }}
+      sx={{
+        fontWeight: isActive ? '600' : 'normal',
+        color: fontColor,
+        backgroundColor: isActive ? 'grey.400' : 'rgba(255, 255, 255, 0.16)',
+      }}
     />
   );
 }
diff --git a/src/pages/Accounts/components/AccountItem.tsx b/src/pages/Accounts/components/AccountItem.tsx
@@ -262,7 +262,7 @@ export const AccountItem = forwardRef(
 
               {isImportedAccount && (
                 <Stack direction="row">
-                  <AccountItemChip account={account} />
+                  <AccountItemChip account={account} isActive={isActive} />
                 </Stack>
               )}
             </Stack>

diff --git a/src/pages/ImportPrivateKey/ImportPrivateKey.tsx b/src/pages/ImportPrivateKey/ImportPrivateKey.tsx
@@ -28,6 +28,7 @@ import { AccountsTab } from '../Accounts/Accounts';
 import { DerivedAddress, NetworkType } from './components/DerivedAddress';
 import { utils } from '@avalabs/avalanchejs';
 import { usePrivateKeyImport } from '../Accounts/hooks/usePrivateKeyImport';
+import { useAccountsContext } from '@src/contexts/AccountsProvider';
 
 type DerivedAddresses = {
   addressC: string;
@@ -49,20 +50,21 @@ export function ImportPrivateKey() {
   const balance = useBalanceTotalInCurrency(derivedAddresses as Account);
   const { isImporting: isImportLoading, importPrivateKey } =
     usePrivateKeyImport();
+  const { selectAccount } = useAccountsContext();
   const history = useHistory();
 
   const isLoading = hasFocus && !derivedAddresses && !error;
 
   const handleImport = async () => {
     capture('ImportPrivateKeyClicked');
     try {
-      await importPrivateKey(privateKey);
+      const importedAccountId = await importPrivateKey(privateKey);
+      await selectAccount(importedAccountId);
       toast.success(t('Private Key Imported'), { duration: 2000 });
       capture('ImportPrivateKeySucceeded');
       history.replace(`/accounts?activeTab=${AccountsTab.Imported}`);
     } catch (err) {
       toast.error(t('Private Key Import Failed'), { duration: 2000 });
-      console.error(err);
     }
   };