Add final design touches to Ledger flow (#231)

Author: dgca

main/api/utils/transactions.ts

@@ -2,6 +2,7 @@ import {
   CreateTransactionRequest,
   CurrencyUtils,
   RawTransactionSerde,
+  RpcClient,
 } from "@ironfish/sdk";
 import { z } from "zod";
 
@@ -29,20 +30,23 @@ export async function createUnsignedTransaction({
   const ironfish = await manager.getIronfish();
   const rpcClient = await ironfish.rpcClient();
 
-  const rawTx = await createRawTransaction({
-    fromAccount,
-    toAccount,
-    assetId,
-    amount,
-    fee,
-    memo,
-  });
+  const baseTx = await createTransaction(
+    {
+      fromAccount,
+      toAccount,
+      assetId,
+      amount,
+      fee,
+      memo,
+    },
+    rpcClient,
+  );
 
-  const serializedRawTx = RawTransactionSerde.serialize(rawTx);
   const builtTransactionResponse = await rpcClient.wallet.buildTransaction({
-    rawTransaction: serializedRawTx.toString("hex"),
+    rawTransaction: baseTx.content.transaction,
     account: fromAccount,
   });
+
   return builtTransactionResponse.content.unsignedTransaction;
 }
 
@@ -57,6 +61,32 @@ export async function createRawTransaction({
   const ironfish = await manager.getIronfish();
   const rpcClient = await ironfish.rpcClient();
 
+  const createResponse = await createTransaction(
+    {
+      fromAccount,
+      toAccount,
+      assetId,
+      amount,
+      fee,
+      memo,
+    },
+    rpcClient,
+  );
+  const bytes = Buffer.from(createResponse.content.transaction, "hex");
+  return RawTransactionSerde.deserialize(bytes);
+}
+
+function createTransaction(
+  {
+    fromAccount,
+    toAccount,
+    assetId,
+    amount,
+    fee,
+    memo,
+  }: CreateTransactionInput,
+  rpcClient: RpcClient,
+) {
   const params: CreateTransactionRequest = {
     account: fromAccount,
     outputs: [
@@ -73,7 +103,5 @@ export async function createRawTransaction({
     confirmations: undefined,
   };
 
-  const createResponse = await rpcClient.wallet.createTransaction(params);
-  const bytes = Buffer.from(createResponse.content.transaction, "hex");
-  return RawTransactionSerde.deserialize(bytes);
+  return rpcClient.wallet.createTransaction(params);
 }

renderer/components/ConnectLedgerModal/ConnectLedgerModal.tsx

@@ -12,7 +12,9 @@ import { trpcReact } from "@/providers/TRPCProvider";
 import { PillButton } from "@/ui/PillButton/PillButton";
 
 import { StepAddAccount } from "./Steps/StepAddAccount";
+import { StepApprove } from "./Steps/StepApprove";
 import { StepConnect } from "./Steps/StepConnect";
+import { StepError } from "./Steps/StepError";
 
 const messages = defineMessages({
   headingConnectLedger: {
@@ -36,6 +38,9 @@ const messages = defineMessages({
   continue: {
     defaultMessage: "Continue",
   },
+  tryAgain: {
+    defaultMessage: "Try again",
+  },
 });
 
 type LedgerStatus = {
@@ -46,7 +51,7 @@ type LedgerStatus = {
   deviceName: string;
 };
 
-const STEPS = ["CONNECT_LEDGER", "SELECT_ACCOUNT", "CONFIRM"] as const;
+const STEPS = ["CONNECT_LEDGER", "SELECT_ACCOUNT", "APPROVE", "ERROR"] as const;
 
 export function ConnectLedgerModal({
   isOpen,
@@ -93,11 +98,14 @@ export function ConnectLedgerModal({
     onSuccess: () => {
       onClose();
     },
+    onError: () => {
+      setStep("ERROR");
+    },
   });
 
   useEffect(() => {
     if (
-      step !== "CONNECT_LEDGER" &&
+      !["CONNECT_LEDGER", "ERROR"].includes(step) &&
       (!isLedgerConnected || !isLedgerUnlocked || !isIronfishAppOpen)
     ) {
       setStep("CONNECT_LEDGER");
@@ -124,18 +132,14 @@ export function ConnectLedgerModal({
               onConfirmChange={setIsConfirmed}
             />
           )}
-          {step === "CONFIRM" && (
-            <div>
-              <h2>
-                Confirm this action on your device. This is a placeholder while
-                this step is designed.
-              </h2>
-              {importError?.message && (
-                <p>
-                  <strong>Error:</strong> {importError.message}
-                </p>
-              )}
-            </div>
+          {step === "APPROVE" && <StepApprove />}
+          {step === "ERROR" && (
+            <StepError
+              errorMessage={
+                importError?.message ??
+                "An unknown error occured. Please try again."
+              }
+            />
           )}
         </ModalBody>
 
@@ -153,18 +157,25 @@ export function ConnectLedgerModal({
               isImporting
             }
             onClick={() => {
+              if (step === "ERROR") {
+                setStep("CONNECT_LEDGER");
+                return;
+              }
+
               if (step === "CONNECT_LEDGER") {
                 setStep("SELECT_ACCOUNT");
                 return;
               }
 
               if (step === "SELECT_ACCOUNT") {
                 importLedgerAccount();
-                setStep("CONFIRM");
+                setStep("APPROVE");
               }
             }}
           >
-            {formatMessage(messages.continue)}
+            {formatMessage(
+              step === "ERROR" ? messages.tryAgain : messages.continue,
+            )}
           </PillButton>
         </ModalFooter>
       </ModalContent>

renderer/components/ConnectLedgerModal/Steps/StepApprove.tsx

@@ -0,0 +1,30 @@
+import { Heading, Text, Box } from "@chakra-ui/react";
+import Image from "next/image";
+import { defineMessages, useIntl } from "react-intl";
+
+import approveImage from "./assets/approve.svg";
+
+const messages = defineMessages({
+  heading: {
+    defaultMessage: "Approve on your Ledger",
+  },
+  body: {
+    defaultMessage:
+      "To proceed with connecting your account to the Iron Fish Node app, please approve the request on your Ledger device.",
+  },
+});
+
+export function StepApprove() {
+  const { formatMessage } = useIntl();
+  return (
+    <>
+      <Heading mb={4}>{formatMessage(messages.heading)}</Heading>
+      <Image src={approveImage} alt="" />
+      <Box mt={6}>
+        <Text color="muted" fontSize="md">
+          {formatMessage(messages.body)}
+        </Text>
+      </Box>
+    </>
+  );
+}

renderer/components/ConnectLedgerModal/Steps/StepConnect.tsx

@@ -1,11 +1,15 @@
 import { Heading, HStack, Flex, VStack, Text } from "@chakra-ui/react";
 import Image from "next/image";
+import { useMemo } from "react";
 import { IoMdCheckmark } from "react-icons/io";
 import { useIntl, defineMessages } from "react-intl";
 
 import { COLORS } from "@/ui/colors";
 
 import connectImage from "./assets/connect.svg";
+import connectedImage from "./assets/connected.svg";
+import openIronFishImage from "./assets/openIronFish.svg";
+import unlockImage from "./assets/unlock.svg";
 
 const messages = defineMessages({
   headingConnectLedger: {
@@ -43,10 +47,24 @@ export function StepConnect({
   isIronfishAppOpen,
 }: Props) {
   const { formatMessage } = useIntl();
+
+  const imageSrc = useMemo(() => {
+    if (!isLedgerConnected) {
+      return connectImage;
+    }
+    if (!isLedgerUnlocked) {
+      return unlockImage;
+    }
+    if (!isIronfishAppOpen) {
+      return openIronFishImage;
+    }
+    return connectedImage;
+  }, [isLedgerConnected, isLedgerUnlocked, isIronfishAppOpen]);
+
   return (
     <>
       <Heading mb={4}>{formatMessage(messages.headingConnectLedger)}</Heading>
-      <Image src={connectImage} alt="" />
+      <Image src={imageSrc} alt="" />
       <VStack alignItems="stretch" gap={2} mt={6}>
         <ListItem
           number="1"

renderer/components/ConnectLedgerModal/Steps/StepError.tsx

@@ -0,0 +1,35 @@
+import { Heading, Text, Box } from "@chakra-ui/react";
+import Image from "next/image";
+import { ReactNode } from "react";
+import { defineMessages, useIntl } from "react-intl";
+
+import errorImage from "./assets/error.svg";
+
+const messages = defineMessages({
+  heading: {
+    defaultMessage: "An error occured",
+  },
+});
+
+type Props = {
+  errorMessage: ReactNode;
+};
+
+export function StepError({ errorMessage }: Props) {
+  const { formatMessage } = useIntl();
+  return (
+    <>
+      <Heading mb={4}>{formatMessage(messages.heading)}</Heading>
+      <Image src={errorImage} alt="" />
+      <Box mt={6}>
+        {typeof errorMessage === "string" ? (
+          <Text color="muted" fontSize="md">
+            {errorMessage}
+          </Text>
+        ) : (
+          errorMessage
+        )}
+      </Box>
+    </>
+  );
+}