feat: hook up viewing key

anoma · Oct 14, 2024 · 8331e5c · 8331e5c
1 parent 72673d1
commit 8331e5c
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/apps/extension/src/App/Accounts/ViewAccount.tsx b/apps/extension/src/App/Accounts/ViewAccount.tsx
@@ -16,6 +16,7 @@ export const ViewAccount = (): JSX.Element => {
   const [parentAccount, setParentAccount] = useState<DerivedAccount>();
   const [transparentAddress, setTransparentAddress] = useState("");
   const [shieldedAddress, setShieldedAddress] = useState("");
+  const [viewingKey, setViewingKey] = useState("");
   const navigate = useNavigate();
 
   const searchParentAccount = (
@@ -41,9 +42,12 @@ export const ViewAccount = (): JSX.Element => {
       setTransparentAddress(parentAccount?.address);
     }
 
-    const shieldedKey = searchShieldedKey(accountId);
-    if (shieldedKey) {
-      setShieldedAddress(shieldedKey.address);
+    const shieldedAccount = searchShieldedKey(accountId);
+    if (shieldedAccount) {
+      setShieldedAddress(shieldedAccount.address);
+      if (shieldedAccount.owner) {
+        setViewingKey(shieldedAccount.owner);
+      }
     }
   }, [accountId]);
 
@@ -61,6 +65,7 @@ export const ViewAccount = (): JSX.Element => {
               publicKeyAddress={parentAccount.publicKey ?? ""}
               transparentAccountAddress={transparentAddress}
               shieldedAccountAddress={shieldedAddress}
+              viewingKeys={viewingKey}
               trimCharacters={21}
             />
           </Stack>

diff --git a/apps/extension/src/Setup/Ledger/LedgerConnect.tsx b/apps/extension/src/Setup/Ledger/LedgerConnect.tsx
@@ -1,4 +1,4 @@
-import { Ledger as LedgerApp, makeBip44Path } from "@heliax/namada-sdk/web";
+import { Ledger as LedgerApp, makeBip44Path } from "@heliaxdev/namada-sdk/web";
 import { chains } from "@namada/chains";
 import { ActionButton, Alert, Image, Stack } from "@namada/components";
 import { Bip44Path } from "@namada/types";

diff --git a/packages/components/src/ViewKeys.tsx b/packages/components/src/ViewKeys.tsx
@@ -2,6 +2,7 @@ import { ActionButton, GapPatterns, Input, Stack } from "@namada/components";
 
 import { shortenAddress } from "@namada/utils";
 import clsx from "clsx";
+import { useState } from "react";
 
 type ViewKeysProps = {
   publicKeyAddress?: string;
@@ -20,6 +21,7 @@ export const ViewKeys = ({
   footer,
   trimCharacters = 16,
 }: ViewKeysProps): JSX.Element => {
+  const [seeViewingKey, setSeeViewingKey] = useState(false);
   return (
     <Stack
       className="flex-1 justify-center"
@@ -61,14 +63,25 @@ export const ViewKeys = ({
             theme={"secondary"}
           />
         )}
-        {viewingKeys && (
-          <div className="text-white flex flex-col text-base font-medium gap-3 text-center">
-            Viewing keys of shielded account
-            <ActionButton size="md" backgroundColor="cyan">
-              Download
-            </ActionButton>
-          </div>
-        )}
+        {viewingKeys &&
+          (seeViewingKey ?
+            <Input
+              label="Viewing Key"
+              variant="ReadOnlyCopy"
+              readOnly={true}
+              valueToDisplay={shortenAddress(viewingKeys, trimCharacters)}
+              value={viewingKeys}
+              theme={"secondary"}
+            />
+          : <div className="text-white flex flex-col text-base font-medium gap-3">
+              <ActionButton
+                size="md"
+                backgroundColor="cyan"
+                onClick={() => setSeeViewingKey(true)}
+              >
+                See Viewing Key
+              </ActionButton>
+            </div>)}
       </Stack>
       {(viewingKeys || footer) && (
         <Stack as="footer" gap={4}>