✨ (sample) [DSDK-423]: Implement Sign transaction in the Ethereum Key…

…ring (#230)

.changeset/cuddly-gifts-repeat.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/device-sdk-sample": patch
+---
+
+Implement SignTransactionUseCase in the Ethereum Keyring part

apps/sample/package.json

@@ -17,6 +17,7 @@
     "@ledgerhq/keyring-eth": "workspace:*",
     "@ledgerhq/react-ui": "^0.15.3",
     "@sentry/nextjs": "^8.27.0",
+    "ethers": "^6.13.2",
     "next": "14.2.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

apps/sample/src/components/DeviceActionsView/DeviceAction.tsx

@@ -190,7 +190,9 @@ export function DeviceActionDrawer<
           {responses.map((response, index, arr) => {
             const isLatest = index === arr.length - 1;
             return (
-              <React.Fragment key={response.date.toISOString()}>
+              <React.Fragment
+                key={`${response.date.toISOString()}-index-${index}`}
+              >
                 <DeviceActionResponse {...response} isLatest={isLatest} />
                 <div hidden={isLatest}>
                   {/** if I just unmount it, all dividers are glitching out */}

apps/sample/src/components/KeyringEthView/index.tsx

@@ -14,12 +14,16 @@ import {
   SignTypedDataDAOutput,
   KeyringEthBuilder,
   TypedData,
+  SignTransactionDAOutput,
+  SignTransactionDAError,
+  SignTransactionDAIntermediateValue,
 } from "@ledgerhq/keyring-eth";
 import {
   DeviceAction,
   DeviceActionProps,
 } from "@/components/DeviceActionsView/DeviceAction";
 import { PageWithHeader } from "@/components/PageWithHeader";
+import { ethers } from "ethers";
 
 export const KeyringEthView: React.FC<{ sessionId: string }> = ({
   sessionId,
@@ -60,7 +64,7 @@ export const KeyringEthView: React.FC<{ sessionId: string }> = ({
         GetAddressDAIntermediateValue
       >,
       {
-        title: "Sign Message",
+        title: "Sign message",
         description:
           "Perform all the actions necessary to sign a message with the device",
         executeDeviceAction: ({ derivationPath, message }) => {
@@ -79,6 +83,36 @@ export const KeyringEthView: React.FC<{ sessionId: string }> = ({
         SignPersonalMessageDAError,
         SignPersonalMessageDAIntermediateValue
       >,
+      {
+        title: "Sign transaction",
+        description:
+          "Perform all the actions necessary to sign a transaction with the device",
+        executeDeviceAction: ({
+          derivationPath,
+          transaction,
+          recipientDomain,
+        }) => {
+          return keyring.signTransaction(
+            derivationPath,
+            ethers.Transaction.from(transaction),
+            { domain: recipientDomain },
+          );
+        },
+        initialValues: {
+          derivationPath: "44'/60'/0'/0/0",
+          transaction: "",
+          recipientDomain: "",
+        },
+      } satisfies DeviceActionProps<
+        SignTransactionDAOutput,
+        {
+          derivationPath: string;
+          transaction: string;
+          recipientDomain: string;
+        },
+        SignTransactionDAError,
+        SignTransactionDAIntermediateValue
+      >,
       {
         title: "Sign typed message",
         description: