From 99a68a46b42e112ca5f9043a21f79b3206709e3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emil=20Holm=20Gj=C3=B8rup?= <eg@concordium.com>
Date: Fri, 25 Oct 2024 12:29:16 +0200
Subject: [PATCH] Show exported key of account list item instead of the
 selected one

---
 .../src/popup/popupX/constants/routes.ts      |  2 +-
 .../popup/popupX/pages/Accounts/Accounts.tsx  |  3 +-
 .../popupX/pages/PrivateKey/PrivateKey.tsx    | 31 +++++++++++++++----
 3 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/packages/browser-wallet/src/popup/popupX/constants/routes.ts b/packages/browser-wallet/src/popup/popupX/constants/routes.ts
index a02fdf16..dc610cca 100644
--- a/packages/browser-wallet/src/popup/popupX/constants/routes.ts
+++ b/packages/browser-wallet/src/popup/popupX/constants/routes.ts
@@ -110,7 +110,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
index 8b8dcea7..eda81b9b 100644
--- 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
index dd114d87..eb4a9720 100644
--- 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,9 +91,13 @@ 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">
@@ -102,7 +105,14 @@ export default function PrivateKey() {
             <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} />;
+}