Allows converting viewonly accounts to Ledger, add fee selector to ledger send flow (#234)

Author: dgca

main/api/ledger/index.ts

@@ -1,4 +1,5 @@
 import { observable } from "@trpc/server/observable";
+import { z } from "zod";
 
 import { ledgerManager, ConnectionStatus } from "./utils/ledger";
 import { handleSendTransactionInput } from "../transactions/handleSendTransaction";
@@ -25,4 +26,16 @@ export const ledgerRouter = t.router({
     .mutation(async (opts) => {
       return ledgerManager.submitTransaction(opts.input);
     }),
+  cancelSubmitLedgerTransaction: t.procedure.mutation(async () => {
+    return ledgerManager.cancelTransaction();
+  }),
+  markAccountAsLedger: t.procedure
+    .input(
+      z.object({
+        publicAddress: z.string(),
+      }),
+    )
+    .mutation((opts) => {
+      return ledgerManager.markAccountAsLedger(opts.input.publicAddress);
+    }),
 });

main/api/ledger/utils/ledger.ts

@@ -8,6 +8,7 @@ import IronfishApp, {
   ResponseAddress,
   ResponseViewKey,
   ResponseProofGenKey,
+  ResponseSign,
 } from "@zondax/ledger-ironfish";
 import { z } from "zod";
 
@@ -73,6 +74,7 @@ class LedgerManager {
   transport: Transport | null = null;
   subscribers: Map<string, (status: ConnectionStatus) => void> = new Map();
   connectionStatus: ConnectionStatus = { ...EMPTY_CONNECTION_STATUS };
+  signTransactionPromise: Promise<ResponseSign> | null = null;
   taskQueue = new PromiseQueue();
 
   private connect = async (): ManagerResponse<Transport> => {
@@ -344,7 +346,7 @@ class LedgerManager {
           name: accountName,
           account: encoded,
         });
-        await ledgerStore.setIsLedgerAccount(publicAddress, true);
+        await this.markAccountAsLedger(publicAddress);
 
         return accountImport;
       } catch (err) {
@@ -359,6 +361,10 @@ class LedgerManager {
     return returnValue;
   };
 
+  markAccountAsLedger = async (publicAddress: string) => {
+    await ledgerStore.setIsLedgerAccount(publicAddress, true);
+  };
+
   submitTransaction = async ({
     fromAccount,
     toAccount,
@@ -401,11 +407,18 @@ class LedgerManager {
           throw new Error(ironfishAppReponse.error.message);
         }
 
-        const signResponse = await ironfishAppReponse.data.sign(
+        this.signTransactionPromise = ironfishAppReponse.data.sign(
           DERIVATION_PATH,
           unsignedTransactionBuffer,
         );
 
+        const signResponse = await this.signTransactionPromise;
+
+        if (!this.signTransactionPromise) {
+          logger.info("Transaction was cancelled by the client");
+          return null;
+        }
+
         if (!signResponse.signature) {
           throw new Error(signResponse.errorMessage || "No signature returned");
         }
@@ -435,6 +448,10 @@ class LedgerManager {
 
     return returnValue;
   };
+
+  cancelTransaction() {
+    this.signTransactionPromise = null;
+  }
 }
 
 export const ledgerManager = new LedgerManager();

renderer/components/ConnectLedgerModal/ConnectLedgerModal.tsx

@@ -5,7 +5,7 @@ import {
   ModalFooter,
   ModalBody,
 } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useIntl, defineMessages } from "react-intl";
 
 import { trpcReact } from "@/providers/TRPCProvider";
@@ -17,21 +17,6 @@ import { StepConnect } from "./Steps/StepConnect";
 import { StepError } from "./Steps/StepError";
 
 const messages = defineMessages({
-  headingConnectLedger: {
-    defaultMessage: "Connect your Ledger",
-  },
-  plugDevice: {
-    defaultMessage: "Plug your ledger device directly into your computer",
-  },
-  unlockLedger: {
-    defaultMessage: "Unlock your Ledger",
-  },
-  openApp: {
-    defaultMessage: "Open the Iron Fish app",
-  },
-  connectAccount: {
-    defaultMessage: "Connect account",
-  },
   cancel: {
     defaultMessage: "Cancel",
   },
@@ -102,6 +87,24 @@ export function ConnectLedgerModal({
       setStep("ERROR");
     },
   });
+  const {
+    isLoading: isMarkingAsLedger,
+    error: markAsLedgerError,
+    mutate: markAccountAsLedger,
+  } = trpcReact.markAccountAsLedger.useMutation({
+    onSuccess: () => {
+      onClose();
+    },
+    onError: () => {
+      setStep("ERROR");
+    },
+  });
+
+  const { data: userAccounts } = trpcReact.getAccounts.useQuery();
+  const existingLedgerAccount = useMemo(() => {
+    return userAccounts?.find((account) => account.address === publicAddress);
+  }, [publicAddress, userAccounts]);
+  const isLedgerAccountImportedAndFlagged = !!existingLedgerAccount?.isLedger;
 
   useEffect(() => {
     if (
@@ -130,13 +133,15 @@ export function ConnectLedgerModal({
               deviceName={deviceName}
               isConfirmed={isConfirmed}
               onConfirmChange={setIsConfirmed}
+              isImported={isLedgerAccountImportedAndFlagged}
             />
           )}
           {step === "APPROVE" && <StepApprove />}
           {step === "ERROR" && (
             <StepError
               errorMessage={
-                importError?.message ??
+                importError?.message ||
+                markAsLedgerError?.message ||
                 "An unknown error occured. Please try again."
               }
             />
@@ -154,7 +159,8 @@ export function ConnectLedgerModal({
               !isLedgerUnlocked ||
               !isIronfishAppOpen ||
               (step === "SELECT_ACCOUNT" && !isConfirmed) ||
-              isImporting
+              isImporting ||
+              isMarkingAsLedger
             }
             onClick={() => {
               if (step === "ERROR") {
@@ -168,8 +174,12 @@ export function ConnectLedgerModal({
               }
 
               if (step === "SELECT_ACCOUNT") {
-                importLedgerAccount();
-                setStep("APPROVE");
+                if (existingLedgerAccount) {
+                  markAccountAsLedger({ publicAddress });
+                } else {
+                  importLedgerAccount();
+                  setStep("APPROVE");
+                }
               }
             }}
           >

renderer/components/ConnectLedgerModal/Steps/StepAddAccount.tsx

@@ -7,6 +7,7 @@ import {
   Heading,
   HStack,
   Text,
+  Tooltip,
 } from "@chakra-ui/react";
 import Image from "next/image";
 import { defineMessages, useIntl } from "react-intl";
@@ -24,20 +25,25 @@ const messages = defineMessages({
     defaultMessage:
       "One last step! Confirm the account you'd like to connect to the Node App.",
   },
+  alreadyImported: {
+    defaultMessage: "This Ledger account has already been imported",
+  },
 });
 
 type Props = {
   deviceName: string;
   publicAddress: string;
   isConfirmed: boolean;
   onConfirmChange: (value: boolean) => void;
+  isImported: boolean;
 };
 
 export function StepAddAccount({
   deviceName,
   publicAddress,
   isConfirmed,
   onConfirmChange,
+  isImported,
 }: Props) {
   const { formatMessage } = useIntl();
 
@@ -49,7 +55,7 @@ export function StepAddAccount({
         fontSize="medium"
         color={COLORS.GRAY_MEDIUM}
         _dark={{
-          color: COLORS.DARK_MODE.GRAY_MEDIUM,
+          color: COLORS.DARK_MODE.GRAY_LIGHT,
         }}
       >
         {formatMessage(messages.description)}
@@ -61,10 +67,18 @@ export function StepAddAccount({
       >
         <HStack py={5} px={4} justifyContent="space-between">
           <Text fontSize="medium">{deviceName}</Text>
-          <Checkbox
-            isChecked={isConfirmed}
-            onChange={(e) => onConfirmChange(e.target.checked)}
-          />
+          <Tooltip
+            label={isImported ? formatMessage(messages.alreadyImported) : null}
+            placement="top"
+          >
+            <Box>
+              <Checkbox
+                isChecked={isConfirmed}
+                onChange={(e) => onConfirmChange(e.target.checked)}
+                disabled={isImported}
+              />
+            </Box>
+          </Tooltip>
         </HStack>
 
         <Box borderBottom="1px solid black" />
@@ -95,7 +109,7 @@ export function StepAddAccount({
                 wordBreak="break-all"
                 color={COLORS.GRAY_MEDIUM}
                 _dark={{
-                  color: COLORS.DARK_MODE.GRAY_MEDIUM,
+                  color: COLORS.DARK_MODE.GRAY_LIGHT,
                 }}
               >
                 {publicAddress}

renderer/components/ConnectLedgerModal/Steps/StepConnect.tsx

@@ -24,15 +24,6 @@ const messages = defineMessages({
   openApp: {
     defaultMessage: "Open the Iron Fish app",
   },
-  connectAccount: {
-    defaultMessage: "Connect account",
-  },
-  cancel: {
-    defaultMessage: "Cancel",
-  },
-  continue: {
-    defaultMessage: "Continue",
-  },
 });
 
 type Props = {

renderer/components/SendAssetsForm/ConfirmLedgerModal/ConfirmLedgerModal.tsx

@@ -83,6 +83,15 @@ export function ConfirmLedgerModal({
     },
   });
 
+  useEffect(() => {
+    if (
+      !["CONNECT_LEDGER", "ERROR"].includes(step) &&
+      (!isLedgerConnected || !isLedgerUnlocked || !isIronfishAppOpen)
+    ) {
+      setStep("CONNECT_LEDGER");
+    }
+  }, [step, isLedgerConnected, isLedgerUnlocked, isIronfishAppOpen]);
+
   const {
     mutate: submitTransaction,
     data: submittedTransactionData,
@@ -98,6 +107,9 @@ export function ConfirmLedgerModal({
     },
   });
 
+  const { mutate: cancelTransaction } =
+    trpcReact.cancelSubmitLedgerTransaction.useMutation();
+
   useEffect(() => {
     if (
       step === "CONFIRM_TRANSACTION" &&
@@ -108,9 +120,12 @@ export function ConfirmLedgerModal({
   }, [isLedgerConnected, isLedgerUnlocked, isIronfishAppOpen, step]);
 
   const handleClose = useCallback(() => {
+    if (step === "CONFIRM_TRANSACTION") {
+      cancelTransaction();
+    }
     reset();
     onCancel();
-  }, [onCancel, reset]);
+  }, [onCancel, reset, step, cancelTransaction]);
 
   return (
     <Modal isOpen={isOpen} onClose={handleClose}>