Update Ledger transaction rejected modal (#285)

Author: dgca

main/api/ledger/utils/ledgerManager.ts

@@ -4,6 +4,7 @@ import { AccountFormat, encodeAccountImport } from "@ironfish/sdk";
 import { z } from "zod";
 
 import {
+  LedgerActionRejected,
   LedgerAppNotOpen,
   LedgerClaNotSupportedError,
   LedgerConnectError,
@@ -167,40 +168,48 @@ class LedgerManager {
     fee,
     memo,
   }: z.infer<typeof handleSendTransactionInput>) => {
-    const unsignedTransaction = await createUnsignedTransaction({
-      fromAccount,
-      toAccount,
-      assetId,
-      amount,
-      fee,
-      memo,
-    });
+    try {
+      const unsignedTransaction = await createUnsignedTransaction({
+        fromAccount,
+        toAccount,
+        assetId,
+        amount,
+        fee,
+        memo,
+      });
 
-    const signature = await this.taskQueue.enqueue(async () => {
-      this.signTransactionPromise =
-        this.ledgerSingleSigner.sign(unsignedTransaction);
+      const signature = await this.taskQueue.enqueue(async () => {
+        this.signTransactionPromise =
+          this.ledgerSingleSigner.sign(unsignedTransaction);
 
-      return this.signTransactionPromise;
-    });
+        return this.signTransactionPromise;
+      });
 
-    if (!this.signTransactionPromise) {
-      return null;
-    }
+      if (!this.signTransactionPromise) {
+        return null;
+      }
 
-    const ironfish = await manager.getIronfish();
-    const rpcClient = await ironfish.rpcClient();
+      const ironfish = await manager.getIronfish();
+      const rpcClient = await ironfish.rpcClient();
 
-    const addSignatureResponse = await rpcClient.wallet.addSignature({
-      unsignedTransaction,
-      signature: signature.toString("hex"),
-    });
+      const addSignatureResponse = await rpcClient.wallet.addSignature({
+        unsignedTransaction,
+        signature: signature.toString("hex"),
+      });
 
-    const addTransactionResponse = await rpcClient.wallet.addTransaction({
-      transaction: addSignatureResponse.content.transaction,
-      broadcast: true,
-    });
+      const addTransactionResponse = await rpcClient.wallet.addTransaction({
+        transaction: addSignatureResponse.content.transaction,
+        broadcast: true,
+      });
 
-    return addTransactionResponse.content;
+      return addTransactionResponse.content;
+    } catch (err) {
+      if (err instanceof LedgerActionRejected) {
+        throw new Error("TRANSACTION_REJECTED");
+      }
+
+      throw err;
+    }
   };
 
   cancelTransaction() {

package-lock.json

@@ -14,6 +14,7 @@ import { PillButton } from "@/ui/PillButton/PillButton";
 
 import { StepConfirm } from "./Steps/StepConfirm";
 import { StepConnect } from "./Steps/StepConnect";
+import { TransactionRejected } from "./Steps/TransactionRejected";
 import { ReviewTransaction } from "../SharedConfirmSteps/ReviewTransaction";
 import { SubmissionError } from "../SharedConfirmSteps/SubmissionError";
 import { TransactionSubmitted } from "../SharedConfirmSteps/TransactionSubmitted";
@@ -202,17 +203,31 @@ export function ConfirmLedgerModal({
             handleClose={handleClose}
           />
         )}
-        {step === "SUBMISSION_ERROR" && (
-          <SubmissionError
-            errorMessage={error?.message ?? ""}
-            isLoading={isLoading}
-            handleClose={handleClose}
-            handleSubmit={() => {
-              submitTransaction(transactionData);
-              setStep("CONFIRM_TRANSACTION");
-            }}
-          />
-        )}
+
+        {step === "SUBMISSION_ERROR" &&
+          error?.message === "TRANSACTION_REJECTED" && (
+            <TransactionRejected
+              isLoading={isLoading}
+              handleClose={handleClose}
+              handleSubmit={() => {
+                submitTransaction(transactionData);
+                setStep("CONFIRM_TRANSACTION");
+              }}
+            />
+          )}
+
+        {step === "SUBMISSION_ERROR" &&
+          error?.message !== "TRANSACTION_REJECTED" && (
+            <SubmissionError
+              errorMessage={error?.message ?? ""}
+              isLoading={isLoading}
+              handleClose={handleClose}
+              handleSubmit={() => {
+                submitTransaction(transactionData);
+                setStep("CONFIRM_TRANSACTION");
+              }}
+            />
+          )}
       </ModalContent>
     </Modal>
   );

renderer/components/SendAssetsForm/ConfirmLedgerModal/ConfirmLedgerModal.tsx

@@ -0,0 +1,85 @@
+import { Box, ModalFooter, ModalBody, Heading, Text } from "@chakra-ui/react";
+import { defineMessages, useIntl } from "react-intl";
+
+import { PillButton } from "@/ui/PillButton/PillButton";
+
+const messages = defineMessages({
+  heading: {
+    defaultMessage: "Transaction Rejected",
+  },
+  message: {
+    defaultMessage:
+      "The transaction has been rejected from your Ledger device. Please try again if you'd like to continue.",
+  },
+  tryAgain: {
+    defaultMessage: "Try Again",
+  },
+  cancel: {
+    defaultMessage: "Cancel",
+  },
+});
+
+type Props = {
+  isLoading: boolean;
+  handleClose: () => void;
+  handleSubmit: () => void;
+};
+
+export function TransactionRejected({
+  isLoading,
+  handleClose,
+  handleSubmit,
+}: Props) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <ModalBody px={16} pt={16}>
+        <Heading fontSize="2xl" mb={8}>
+          {formatMessage(messages.heading)}
+        </Heading>
+        <Box
+          bg="#FFF5F1"
+          display="flex"
+          justifyContent="center"
+          py={10}
+          borderRadius={4}
+        >
+          <Box
+            bg="#FFE5DD"
+            height="116px"
+            width="116px"
+            borderRadius="full"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+          >
+            <svg width="8" height="52" viewBox="0 0 8 52" fill="none">
+              <path
+                d="M0.375 33.25V0.625H7.625V33.25H0.375ZM0.375 51.375V44.125H7.625V51.375H0.375Z"
+                fill="#F15929"
+              />
+            </svg>
+          </Box>
+        </Box>
+        <Text fontSize="md" mt={6} color="muted">
+          {formatMessage(messages.message)}
+        </Text>
+      </ModalBody>
+      <ModalFooter display="flex" gap={2} px={16} py={8}>
+        <PillButton
+          size="sm"
+          isDisabled={isLoading}
+          onClick={handleClose}
+          variant="inverted"
+          border={0}
+        >
+          {formatMessage(messages.cancel)}
+        </PillButton>
+        <PillButton size="sm" isDisabled={isLoading} onClick={handleSubmit}>
+          {formatMessage(messages.tryAgain)}
+        </PillButton>
+      </ModalFooter>
+    </>
+  );
+}

renderer/components/SendAssetsForm/ConfirmLedgerModal/Steps/TransactionRejected.tsx

@@ -324,6 +324,9 @@
   "JM4YI+": {
     "message": "Are you sure you want to remove this account?"
   },
+  "Jhtmlc": {
+    "message": "The transaction has been rejected from your Ledger device. Please try again if you'd like to continue."
+  },
   "Jjpq7w": {
     "message": "Block Sequence"
   },
@@ -339,6 +342,9 @@
   "K3r6DQ": {
     "message": "Delete"
   },
+  "K6NOTC": {
+    "message": "Transaction Rejected"
+  },
   "KBiJ4L": {
     "message": "To proceed with connecting your account to the Iron Fish Node app, please approve the request on your Ledger device."
   },