Merge pull request #553 from Concordium/x-accounts-export

Key export for account in list
Concordium · Oct 25, 2024 · cf205c7 · cf205c7
2 parents ce839a3 + 99a68a4
commit cf205c7
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/packages/browser-wallet/src/popup/popupX/constants/routes.ts b/packages/browser-wallet/src/popup/popupX/constants/routes.ts
@@ -120,7 +120,7 @@ export const relativeRoutes = {
                 },
             },
             privateKey: {
-                path: 'privateKey',
+                path: 'private-key/:account',
             },
         },
         seedPhrase: {

diff --git a/packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.tsx b/packages/browser-wallet/src/popup/popupX/pages/Accounts/Accounts.tsx
@@ -94,7 +94,8 @@ type AccountListItemProps = {
 function AccountListItem({ credential }: AccountListItemProps) {
     const { t } = useTranslation('x', { keyPrefix: 'accounts' });
     const nav = useNavigate();
-    const navToPrivateKey = () => nav(absoluteRoutes.settings.accounts.privateKey.path);
+    const navToPrivateKey = () =>
+        nav(generatePath(absoluteRoutes.settings.accounts.privateKey.path, { account: credential.address }));
     const navToConnectedSites = () =>
         nav(generatePath(absoluteRoutes.settings.accounts.connectedSites.path, { account: credential.address }));
     const navToIdCards = () => nav(absoluteRoutes.settings.idCards.path);

diff --git a/packages/browser-wallet/src/popup/popupX/pages/PrivateKey/PrivateKey.tsx b/packages/browser-wallet/src/popup/popupX/pages/PrivateKey/PrivateKey.tsx
@@ -6,13 +6,13 @@ import Card from '@popup/popupX/shared/Card';
 import Button from '@popup/popupX/shared/Button';
 import Copy from '@assets/svgX/copy.svg';
 import { useAtomValue } from 'jotai';
-import { selectedAccountAtom } from '@popup/store/account';
 import { useCredential, usePrivateKey, usePublicKey } from '@popup/shared/utils/account-helpers';
 import { networkConfigurationAtom } from '@popup/store/settings';
 import { saveData } from '@popup/shared/utils/file-helpers';
 import { NetworkConfiguration } from '@shared/storage/types';
 import { getNet } from '@shared/utils/network-helpers';
 import { copyToClipboard } from '@popup/popupX/shared/utils/helpers';
+import { Navigate, useParams } from 'react-router-dom';
 
 type CredentialKeys = {
     threshold: number;
@@ -73,8 +73,7 @@ function createExport(
     return docContent;
 }
 
-function usePrivateKeyData() {
-    const selectedAccountAddress = useAtomValue(selectedAccountAtom);
+function usePrivateKeyData(selectedAccountAddress: string) {
     const credential = useCredential(selectedAccountAddress);
     const privateKey = usePrivateKey(selectedAccountAddress);
     const publicKey = usePublicKey(selectedAccountAddress);
@@ -92,17 +91,28 @@ function usePrivateKeyData() {
     return { privateKey: privateKey || '', handleExport };
 }
 
-export default function PrivateKey() {
+type Props = {
+    address: string;
+};
+
+function PrivateKey({ address }: Props) {
     const { t } = useTranslation('x', { keyPrefix: 'privateKey' });
-    const { privateKey, handleExport } = usePrivateKeyData();
+    const { privateKey, handleExport } = usePrivateKeyData(address);
 
     return (
         <Page className="account-private-key-x">
             <Page.Top heading={t('accountPrivateKey')} />
             <Page.Main>
                 <Text.Capture>{t('keyDescription')}</Text.Capture>
                 <Card>
-                    <Text.LabelRegular>{privateKey}</Text.LabelRegular>
+                    <Text.LabelRegular>
+                        {privateKey ?? (
+                            /* When no private key, put in two lines to avoid UI jumping around as it loads. */ <>
+                                <br />
+                                <br />
+                            </>
+                        )}
+                    </Text.LabelRegular>
                 </Card>
                 <Button.IconText label={t('copyKey')} icon={<Copy />} onClick={() => copyToClipboard(privateKey)} />
             </Page.Main>
@@ -112,3 +122,12 @@ export default function PrivateKey() {
         </Page>
     );
 }
+
+export default function Loader() {
+    const params = useParams();
+    if (!('account' in params) || params.account === undefined) {
+        // No account address passed in the url.
+        return <Navigate to="../" />;
+    }
+    return <PrivateKey address={params.account} />;
+}