Merge branch 'main' into feat/keystone-bk

Author: zhaono1

apps/legacy/package.json

@@ -15,10 +15,10 @@
     "typecheck": "yarn tsc --skipLibCheck --noEmit"
   },
   "dependencies": {
-    "@avalabs/avalanche-module": "1.9.0",
+    "@avalabs/avalanche-module": "1.9.4",
     "@avalabs/avalanchejs": "4.2.0-alpha.1",
-    "@avalabs/bitcoin-module": "1.9.0",
-    "@avalabs/bridge-unified": "4.0.2",
+    "@avalabs/bitcoin-module": "1.9.4",
+    "@avalabs/bridge-unified": "4.0.3",
     "@avalabs/core-bridge-sdk": "3.1.0-alpha.51",
     "@avalabs/core-chains-sdk": "3.1.0-alpha.51",
     "@avalabs/core-coingecko-sdk": "3.1.0-alpha.51",
@@ -30,13 +30,13 @@
     "@avalabs/core-token-prices-sdk": "3.1.0-alpha.51",
     "@avalabs/core-utils-sdk": "3.1.0-alpha.51",
     "@avalabs/core-wallets-sdk": "3.1.0-alpha.51",
-    "@avalabs/evm-module": "1.9.0",
+    "@avalabs/evm-module": "1.9.4",
     "@avalabs/glacier-sdk": "3.1.0-alpha.51",
-    "@avalabs/hvm-module": "1.9.0",
+    "@avalabs/hvm-module": "1.9.4",
     "@avalabs/hw-app-avalanche": "0.14.1",
-    "@avalabs/svm-module": "1.9.0",
+    "@avalabs/svm-module": "1.9.4",
     "@avalabs/types": "3.1.0-alpha.51",
-    "@avalabs/vm-module-types": "1.9.0",
+    "@avalabs/vm-module-types": "1.9.4",
     "@blockaid/client": "0.10.0",
     "@coinbase/cbpay-js": "1.6.0",
     "@core/common": "workspace:*",

apps/next/manifest/manifest.json

@@ -41,7 +41,6 @@
     "activeTab",
     "contextMenus",
     "notifications",
-    "tabs",
     "scripting",
     "identity",
     "alarms",

apps/next/package.json

@@ -16,7 +16,7 @@
     "typecheck": "yarn tsc --skipLibCheck --noEmit"
   },
   "dependencies": {
-    "@avalabs/k2-alpine": "1.199.0",
+    "@avalabs/k2-alpine": "1.204.3-alpha.0",
     "@avalabs/types": "3.1.0-alpha.51",
     "@core/common": "workspace:*",
     "@core/messaging": "workspace:*",

apps/next/src/components/OnboardingModal/FullscreenModal.tsx

@@ -7,9 +7,7 @@ export const FullscreenModal = styled(Dialog)(({ theme }) => ({
     maxWidth: '600px',
     height: '80vh',
     maxHeight: '720px',
-    // @ts-expect-error - Broken Theme type in @avalabs/k2-alpine
     borderRadius: theme.shape.largeBorderRadius,
-    // @ts-expect-error - Broken Theme type in @avalabs/k2-alpine
     backgroundColor: theme.palette.surface.secondary,
     borderStyle: 'solid',
     borderWidth: 1,

apps/next/src/components/PersonalAvatar/PersonalAvatar.tsx

@@ -90,13 +90,7 @@ export const PersonalAvatar = ({
       )}
       {...props}
     >
-      <AvatarHex
-        alt={alt}
-        size={size}
-        src={src}
-        // @ts-expect-error - Missing property in @avalabs/k2-alpine
-        selected={selected}
-      />
+      <AvatarHex alt={alt} size={size} src={src} selected={selected} />
     </Box>
   );
 };

apps/next/src/components/StandaloneField/StandaloneField.tsx

@@ -37,7 +37,6 @@ export const StandaloneField = styled((props: StandaloneFieldProps) => (
       backgroundColor: getHexAlpha(theme.palette.primary.main, 30),
     },
     '&:focus-within': {
-      // @ts-expect-error - Broken Theme type in @avalabs/k2-alpine
       color: theme.palette.neutral['850'],
       backgroundColor: theme.palette.common.white,
       boxShadow: `${alpha(theme.palette.common.black, 0.25)} 0 5px 15px 0`,

apps/next/src/components/Typography.tsx

@@ -4,6 +4,9 @@
   "A few more details are needed before getting any further with your wallet creation": "A few more details are needed before getting any further with your wallet creation",
   "Access an existing wallet with your recovery phrase. You can paste your entire phrase in the first field, or use the tab key to jump to the next field": "Access an existing wallet with your recovery phrase. You can paste your entire phrase in the first field, or use the tab key to jump to the next field",
   "Access existing wallet": "Access existing wallet",
+  "Account Id is not provided": "Account Id is not provided",
+  "Account deleted": "Account deleted",
+  "Account not found": "Account not found",
   "Action was not approved. Please try again.": "Action was not approved. Please try again.",
   "Add or connect a wallet": "Add or connect a wallet",
   "Add using Keystone": "Add using Keystone",
@@ -34,13 +37,15 @@
   "Continue with Apple": "Continue with Apple",
   "Continue with Google": "Continue with Google",
   "Copied!": "Copied!",
+  "Copy": "Copy",
   "Copy phrase": "Copy phrase",
   "Core has entered an unexpected state. Please restart the browser if the issue persists.": "Core has entered an unexpected state. Please restart the browser if the issue persists.",
   "Core is committed to protecting your privacy. We will never sell or share your data. If you wish, you can disable this at any time in the settings menu.": "Core is committed to protecting your privacy. We will never sell or share your data. If you wish, you can disable this at any time in the settings menu.",
   "Could not swap {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}": "Could not swap {{srcAmount}} {{srcToken}} to {{destAmount}} {{destToken}}",
   "Currently using {{name}}": "Currently using {{name}}",
   "Deposit": "Deposit",
   "Disconnected": "Disconnected",
+  "Dismiss": "Dismiss",
   "Email address": "Email address",
   "English": "English",
   "Enjoy your wallet": "Enjoy your wallet",
@@ -65,6 +70,7 @@
   "How would you like to access your existing wallet?": "How would you like to access your existing wallet?",
   "I have read and agree to the <termLink>Terms of Use</termLink>": "I have read and agree to the <termLink>Terms of Use</termLink>",
   "Import Recovery Phrase": "Import Recovery Phrase",
+  "Imported": "Imported",
   "Imported Accounts": "Imported Accounts",
   "Insufficient balance": "Insufficient balance",
   "Insufficient balance.": "Insufficient balance.",
@@ -106,6 +112,7 @@
   "Only keystore files exported from the Avalanche Wallet are supported.": "Only keystore files exported from the Avalanche Wallet are supported.",
   "Oops! It seems like you have no internet connection. Please try again later.": "Oops! It seems like you have no internet connection. Please try again later.",
   "Open wallet": "Open wallet",
+  "Options": "Options",
   "Our team was made aware of this issue. Feel free to contact us for further information.": "Our team was made aware of this issue. Feel free to contact us for further information.",
   "Password must be at least 8 characters": "Password must be at least 8 characters",
   "Passwords do not match": "Passwords do not match",
@@ -121,12 +128,17 @@
   "Please try switching to a different network.": "Please try switching to a different network.",
   "Pricing provider did not respond with a valid transaction.": "Pricing provider did not respond with a valid transaction.",
   "Public key not found": "Public key not found",
+  "Recovery Phrase": "Recovery Phrase",
   "Recovery Phrase {{number}}": "Recovery Phrase {{number}}",
+  "Refresh": "Refresh",
+  "Remove account": "Remove account",
+  "Rename": "Rename",
   "Request timed out": "Request timed out",
   "Requested derivation path is too short": "Requested derivation path is too short",
   "Resource unavailable": "Resource unavailable",
   "Rewards": "Rewards",
   "Russian": "Russian",
+  "Seedless": "Seedless",
   "Seedless login error": "Seedless login error",
   "Seedless {{number}}": "Seedless {{number}}",
   "Select the first word": "Select the first word",
@@ -136,6 +148,7 @@
   "Select your personal avatar": "Select your personal avatar",
   "Sending this type of token is not supported by Core": "Sending this type of token is not supported by Core",
   "Show password": "Show password",
+  "Show private key": "Show private key",
   "Slippage tolerance exceeded, increase the slippage and try again.": "Slippage tolerance exceeded, increase the slippage and try again.",
   "Some of the required parameters are invalid.": "Some of the required parameters are invalid.",
   "Some of the required parameters are missing.": "Some of the required parameters are missing.",
@@ -179,12 +192,14 @@
   "Try swapping a different token or try again later.": "Try swapping a different token or try again later.",
   "Try swapping a different token.": "Try swapping a different token.",
   "Turkish": "Turkish",
+  "Type": "Type",
   "Unable to estimate gas": "Unable to estimate gas",
   "Unable to load balances": "Unable to load balances",
   "Unable to set TOTP configuration": "Unable to set TOTP configuration",
   "Unable to sign or broadcast transaction": "Unable to sign or broadcast transaction",
   "Unauthorized": "Unauthorized",
   "Unexpected response from our pricing provider.": "Unexpected response from our pricing provider.",
+  "Unknown": "Unknown",
   "Unknown error": "Unknown error",
   "Unknown error occurred, ": "Unknown error occurred, ",
   "Unknown network": "Unknown network",
@@ -204,6 +219,7 @@
   "Vesting": "Vesting",
   "View P-Chain Details": "View P-Chain Details",
   "View in Explorer": "View in Explorer",
+  "Wallet": "Wallet",
   "Wallet name": "Wallet name",
   "Wallet secrets not found for the requested ID": "Wallet secrets not found for the requested ID",
   "We were not able to verify this code. Please try again.": "We were not able to verify this code. Please try again.",
@@ -213,6 +229,7 @@
   "You do not have enough funds to cover the network fees.": "You do not have enough funds to cover the network fees.",
   "You will be prompted {{remaining}} more time(s).": "You will be prompted {{remaining}} more time(s).",
   "You're about to terminate this session": "You're about to terminate this session",
+  "Your account's private key is a fixed password for accessing the\n        specific addresses above. Keep it secure, anyone with this private key\n        can access the account associated with it.": "Your account's private key is a fixed password for accessing the\n        specific addresses above. Keep it secure, anyone with this private key\n        can access the account associated with it.",
   "paraswap error message while get rate: {{message}}": "paraswap error message while get rate: {{message}}",
   "your avatar": "your avatar",
   "{{length}}-word phrase": "{{length}}-word phrase"

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

@@ -5,24 +5,14 @@ import {
   DialogTitle,
   IconButton,
   Slide,
-  Stack,
-  styled,
 } from '@avalabs/k2-alpine';
 import { BalancesProvider, WalletTotalBalanceProvider } from '@core/ui';
 import { FC } from 'react';
 import { MdArrowBack } from 'react-icons/md';
-import { useHistory } from 'react-router-dom';
-import AddOrConnectWalletButton from './components/AddOrConnectWalletButton';
-import CurrentAccount from './components/CurrentAccount';
+import { Route, Switch, useHistory } from 'react-router-dom';
 import { Wallets } from './components/Wallets';
-
-const PaddedEndStack = styled(Stack)(({ theme }) => ({
-  gap: theme.spacing(1.5),
-  '&:after': {
-    content: '""',
-    height: theme.spacing(4),
-  },
-}));
+import { AccountDetails } from './components/AccountDetails';
+import { QRCode } from './components/QRCode';
 
 const dialogSlots: Pick<DialogProps, 'slots' | 'slotProps'> = {
   slots: {
@@ -51,11 +41,14 @@ const AccountManagement: FC = () => {
             </IconButton>
           </DialogTitle>
           <DialogContent sx={{ paddingInline: 1.5 }}>
-            <PaddedEndStack>
-              <CurrentAccount />
-              <Wallets />
-              <AddOrConnectWalletButton />
-            </PaddedEndStack>
+            <Switch>
+              <Route path="/account-management/qr-code" component={QRCode} />
+              <Route
+                path="/account-management/account"
+                component={AccountDetails}
+              />
+              <Route path="/account-management" component={Wallets} />
+            </Switch>
           </DialogContent>
         </Dialog>
       </WalletTotalBalanceProvider>

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

@@ -0,0 +1,98 @@
+import {
+  LinearProgress,
+  styled,
+  Stack,
+  toast,
+  ToastOptions,
+  Typography,
+} from '@avalabs/k2-alpine';
+import { SecretType } from '@core/types';
+import { useAccountsContext, useWalletContext } from '@core/ui';
+import { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Redirect, useHistory, useLocation } from 'react-router-dom';
+import { ActionButtons } from './components/ActionButtons';
+import { AddressesCard } from './components/AddressesCard';
+import { AccountDetailsHeader } from './components/Header';
+import { MoreDetailsCard } from './components/MoreDetailsCard';
+
+const toastOptions: ToastOptions = {
+  id: 'account-details-guard',
+};
+
+const Scroller = styled('div')({
+  overflow: 'auto',
+});
+
+export const AccountDetails: FC = () => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const { search } = useLocation();
+  const searchParams = new URLSearchParams(search);
+  const accountId = searchParams.get('accountId');
+
+  const { getWallet, wallets } = useWalletContext();
+  const { getAccountById, renameAccount, deleteAccounts } =
+    useAccountsContext();
+
+  if (!accountId) {
+    toast.error(t('Account Id is not provided'), toastOptions);
+    return <Redirect to="/account-management" />;
+  }
+
+  const account = getAccountById(accountId);
+
+  if (!account) {
+    toast.error(t('Account not found'), toastOptions);
+    return <Redirect to="/account-management" />;
+  }
+
+  const isPrimaryAccount = account.type === 'primary';
+
+  if (isPrimaryAccount && wallets.length === 0) {
+    return <LinearProgress />;
+  }
+
+  const wallet = isPrimaryAccount ? getWallet(account.walletId) : undefined;
+
+  return (
+    <Stack height={1} gap={2}>
+      <AccountDetailsHeader account={account} />
+      <Scroller>
+        <Stack direction="column" gap={1.5}>
+          <AddressesCard account={account} />
+          <MoreDetailsCard
+            walletName={wallet?.name ?? t('Imported Accounts')}
+            walletType={wallet?.type ?? SecretType.PrivateKey}
+          />
+        </Stack>
+      </Scroller>
+      <Typography variant="caption" px={1.5} mt={-1} color="text.secondary">
+        {t(`Your account's private key is a fixed password for accessing the
+        specific addresses above. Keep it secure, anyone with this private key
+        can access the account associated with it.`)}
+      </Typography>
+      <ActionButtons
+        onRename={() => {
+          // TODO: Implement rename account screen
+          const newName = prompt('Enter new account name');
+          if (newName) {
+            renameAccount(account.id, newName);
+          }
+        }}
+        onRemove={async () => {
+          // TODO: Implement proper delete account dialog
+          const confirmed = confirm(
+            'Are you sure you want to delete this account?',
+          );
+          if (confirmed) {
+            deleteAccounts([account.id]).then(() => {
+              history.push('/account-management');
+              toast.success(t('Account deleted'), toastOptions);
+            });
+          }
+        }}
+      />
+    </Stack>
+  );
+};