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 => {
-
- * Ledger accounts will receive shielded
-
functions in a separate update in an
-
upcoming release
-
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 (
+
+
+
+
+
+
+ Approval {currentStep}/{totalSteps}
+
+
+
+ Please wait for Ledger to respond!
+
+
+ {stepText[currentStep - 1]}
+
+
+ );
+};
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 = ({ path, setPath }) => {
const [isLedgerConnecting, setIsLedgerConnecting] = useState(false);
const [ledger, setLedger] = useState();
+ // Import keys steps (transparent, viewing key, proof-gen key)
+ const [currentApprovalStep, setCurrentApprovalStep] = useState(1);
+
const queryLedger = async (ledger: LedgerApp): Promise => {
setError(undefined);
try {
@@ -41,6 +45,7 @@ export const LedgerConnect: React.FC = ({ 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 = ({ 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 = ({ path, setPath }) => {
return (
-
+
{error && (
{error}
@@ -131,36 +136,41 @@ export const LedgerConnect: React.FC = ({ path, setPath }) => {
)}
{isLedgerConnecting && (
- Review on your Ledger
+
)}
-
-
-
-
- connectUSB()}
- active={!ledger}
- complete={!!ledger}
- buttonDisabled={!!ledger}
- image={
-
- }
- />
-
- connectNamadaApp()}
- buttonDisabled={!ledger || isLedgerConnecting}
- image={
-
- }
- />
+ {!isLedgerConnecting && (
+ <>
+
+
+
+ connectUSB()}
+ active={!ledger}
+ complete={!!ledger}
+ buttonDisabled={!!ledger}
+ image={
+
+ }
+ />
+ connectNamadaApp()}
+ buttonDisabled={!ledger || isLedgerConnecting}
+ image={
+
+ }
+ />
+ >
+ )}
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 = () => {
+
}