From 3ea76feb5690bb2c0f96958af327740331e80ca0 Mon Sep 17 00:00:00 2001
From: "Justin R. Evans" <jurevans@gmail.com>
Date: Thu, 9 Jan 2025 07:16:10 -0500
Subject: [PATCH] feat: begin implementing import approval steps

---
 .../src/App/Accounts/UpdateRequired.tsx       |  5 --
 .../src/Setup/Common/LedgerApprovalStep.tsx   | 45 +++++++++++
 .../src/Setup/Ledger/LedgerConnect.tsx        | 76 +++++++++++--------
 apps/extension/src/Setup/Setup.tsx            |  2 +-
 4 files changed, 89 insertions(+), 39 deletions(-)
 create mode 100644 apps/extension/src/Setup/Common/LedgerApprovalStep.tsx

diff --git a/apps/extension/src/App/Accounts/UpdateRequired.tsx b/apps/extension/src/App/Accounts/UpdateRequired.tsx
index d2dbad7dd..7144207d6 100644
--- a/apps/extension/src/App/Accounts/UpdateRequired.tsx
+++ b/apps/extension/src/App/Accounts/UpdateRequired.tsx
@@ -75,11 +75,6 @@ export const UpdateRequired = (): JSX.Element => {
                 </li>
               </ol>
             </Stack>
-            <p className="text-yellow text-center leading-3">
-              * Ledger accounts will receive shielded
-              <br /> functions in a separate update in an
-              <br /> upcoming release
-            </p>
           </Stack>
         </div>
       </div>
diff --git a/apps/extension/src/Setup/Common/LedgerApprovalStep.tsx b/apps/extension/src/Setup/Common/LedgerApprovalStep.tsx
new file mode 100644
index 000000000..54da31629
--- /dev/null
+++ b/apps/extension/src/Setup/Common/LedgerApprovalStep.tsx
@@ -0,0 +1,45 @@
+import { Heading, ProgressIndicator, Stack } from "@namada/components";
+
+type LedgerApprovalStepProps = {
+  currentApprovalStep: number;
+};
+
+export const LedgerApprovalStep = ({
+  currentApprovalStep,
+}: LedgerApprovalStepProps): JSX.Element => {
+  const stepText = [
+    "Deriving Bip44 public key...",
+    "Deriving Zip32 Viewing Key... This could take a few seconds!",
+    "Deriving Zip32 Proof-Generation Key... This could take a few seconds!",
+  ];
+
+  // Ensure that steps are within stepText limits
+  const totalSteps = stepText.length;
+  const currentStep = Math.min(Math.max(currentApprovalStep, 1), totalSteps);
+
+  return (
+    <Stack gap={1} className="bg-black w-full p-4 rounded-md min-h-[240px]">
+      <Stack direction="horizontal" className="flex">
+        <span className="flex-none">
+          <ProgressIndicator
+            keyName="ledger-import"
+            totalSteps={totalSteps}
+            currentStep={currentStep}
+          />
+        </span>
+        <span className="flex-1 text-white font-medium text-right">
+          Approval {currentStep}/{totalSteps}
+        </span>
+      </Stack>
+      <Heading
+        level="h2"
+        className="text-base text-center text-white font-medium"
+      >
+        Please wait for Ledger to respond!
+      </Heading>
+      <p className="font-medium text-yellow text-base text-center px-12">
+        {stepText[currentStep - 1]}
+      </p>
+    </Stack>
+  );
+};
diff --git a/apps/extension/src/Setup/Ledger/LedgerConnect.tsx b/apps/extension/src/Setup/Ledger/LedgerConnect.tsx
index 22a78f266..7a09c719b 100644
--- a/apps/extension/src/Setup/Ledger/LedgerConnect.tsx
+++ b/apps/extension/src/Setup/Ledger/LedgerConnect.tsx
@@ -14,6 +14,7 @@ import { LedgerError } from "@zondax/ledger-namada";
 import { LedgerStep } from "Setup/Common";
 import { AdvancedOptions } from "Setup/Common/AdvancedOptions";
 import Bip44Form from "Setup/Common/Bip44Form";
+import { LedgerApprovalStep } from "Setup/Common/LedgerApprovalStep";
 import routes from "Setup/routes";
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
@@ -29,6 +30,9 @@ export const LedgerConnect: React.FC<Props> = ({ path, setPath }) => {
   const [isLedgerConnecting, setIsLedgerConnecting] = useState(false);
   const [ledger, setLedger] = useState<LedgerApp>();
 
+  // Import keys steps (transparent, viewing key, proof-gen key)
+  const [currentApprovalStep, setCurrentApprovalStep] = useState(1);
+
   const queryLedger = async (ledger: LedgerApp): Promise<void> => {
     setError(undefined);
     try {
@@ -41,6 +45,7 @@ export const LedgerConnect: React.FC<Props> = ({ path, setPath }) => {
       }
 
       setIsLedgerConnecting(true);
+      setCurrentApprovalStep(1);
       const { address, publicKey } = await ledger.showAddressAndPublicKey(
         makeBip44Path(chains.namada.bip44.coinType, path)
       );
@@ -49,7 +54,11 @@ export const LedgerConnect: React.FC<Props> = ({ path, setPath }) => {
       const zip32Path = makeSaplingPath(chains.namada.bip44.coinType, {
         account: path.account,
       });
+
+      setCurrentApprovalStep(2);
       const { xfvk } = await ledger.getViewingKey(zip32Path);
+
+      setCurrentApprovalStep(3);
       const { ak, nsk } = await ledger.getProofGenerationKey(zip32Path);
 
       // SDK wasm init must be called
@@ -119,11 +128,7 @@ export const LedgerConnect: React.FC<Props> = ({ path, setPath }) => {
 
   return (
     <Stack gap={6} className="justify-between min-h-[470px]">
-      <Stack
-        as="ol"
-        gap={4}
-        className="flex-1 justify-center mx-auto max-w-[400px]"
-      >
+      <Stack as="ol" gap={4} className="flex-1 justify-center mx-auto w-full">
         {error && (
           <Alert title="Error" type="error">
             {error}
@@ -131,36 +136,41 @@ export const LedgerConnect: React.FC<Props> = ({ path, setPath }) => {
         )}
 
         {isLedgerConnecting && (
-          <Alert type="warning">Review on your Ledger</Alert>
+          <LedgerApprovalStep currentApprovalStep={currentApprovalStep} />
         )}
 
-        <AdvancedOptions>
-          <Bip44Form path={path} setPath={setPath} />
-        </AdvancedOptions>
-
-        <LedgerStep
-          title="Step 1"
-          text="Connect and unlock your ledger Hardware Wallet"
-          onClick={() => connectUSB()}
-          active={!ledger}
-          complete={!!ledger}
-          buttonDisabled={!!ledger}
-          image={
-            <Image styleOverrides={{ width: "100%" }} imageName="Ledger" />
-          }
-        />
-
-        <LedgerStep
-          title="Step 2"
-          text="Open the Namada App on your ledger device"
-          active={!!ledger}
-          complete={false}
-          onClick={() => connectNamadaApp()}
-          buttonDisabled={!ledger || isLedgerConnecting}
-          image={
-            <Image styleOverrides={{ width: "100%" }} imageName="LogoMinimal" />
-          }
-        />
+        {!isLedgerConnecting && (
+          <>
+            <AdvancedOptions>
+              <Bip44Form path={path} setPath={setPath} />
+            </AdvancedOptions>
+            <LedgerStep
+              title="Step 1"
+              text="Connect and unlock your ledger Hardware Wallet"
+              onClick={() => connectUSB()}
+              active={!ledger}
+              complete={!!ledger}
+              buttonDisabled={!!ledger}
+              image={
+                <Image styleOverrides={{ width: "100%" }} imageName="Ledger" />
+              }
+            />
+            <LedgerStep
+              title="Step 2"
+              text="Open the Namada App on your ledger device"
+              active={!!ledger}
+              complete={false}
+              onClick={() => connectNamadaApp()}
+              buttonDisabled={!ledger || isLedgerConnecting}
+              image={
+                <Image
+                  styleOverrides={{ width: "100%" }}
+                  imageName="LogoMinimal"
+                />
+              }
+            />
+          </>
+        )}
       </Stack>
       <ActionButton size="lg" disabled={true}>
         Next
diff --git a/apps/extension/src/Setup/Setup.tsx b/apps/extension/src/Setup/Setup.tsx
index 5eca185d2..28ea9a07b 100644
--- a/apps/extension/src/Setup/Setup.tsx
+++ b/apps/extension/src/Setup/Setup.tsx
@@ -398,7 +398,7 @@ export const Setup: React.FC = () => {
               <Route
                 path={routes.ledgerComplete()}
                 element={
-                  <Wrapper onLoad={setCurrentPage("Namada Keys Imported", 3)}>
+                  <Wrapper onLoad={setCurrentPage("Ledger Keys Imported", 3)}>
                     <LedgerConfirmation />
                   </Wrapper>
                 }