feat: aleo operation details extra

Author: mateuszpalosz-ext

.changeset/unlucky-timers-matter.md

@@ -0,0 +1,6 @@
+---
+"@ledgerhq/coin-aleo": minor
+"ledger-live-desktop": minor
+---
+
+aleo operation details extra

apps/ledger-live-desktop/src/renderer/families/aleo/__tests__/operationDetails.test.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { render, screen } from "tests/testSetup";
+import type { AleoOperation } from "@ledgerhq/live-common/families/aleo/types";
+import { ALEO_ACCOUNT_1 } from "../__mocks__/account.mock";
+import operationDetails from "../operationDetails";
+
+const { OperationDetailsExtra } = operationDetails;
+
+describe("OperationDetailsExtra", () => {
+  it("should only render functionId and not expose transactionType or patched", () => {
+    const mockOperation: AleoOperation = {
+      ...ALEO_ACCOUNT_1.operations[0],
+      extra: {
+        functionId: "transfer_public",
+        transactionType: "public",
+        patched: true,
+      },
+    };
+
+    render(<OperationDetailsExtra account={ALEO_ACCOUNT_1} operation={mockOperation} type="OUT" />);
+
+    expect(screen.getByText("transfer_public")).toBeInTheDocument();
+    expect(screen.queryByText("transactionType")).not.toBeInTheDocument();
+    expect(screen.queryByText("public")).not.toBeInTheDocument();
+    expect(screen.queryByText("patched")).not.toBeInTheDocument();
+  });
+});

apps/ledger-live-desktop/src/renderer/families/aleo/operationDetails.tsx

@@ -1,7 +1,19 @@
 import React from "react";
 import { Trans } from "react-i18next";
 import { Box, Text } from "@ledgerhq/react-ui/index";
-import type { AleoTransactionType } from "@ledgerhq/live-common/families/aleo/types";
+import { getOperationDetailsExtraFields } from "@ledgerhq/live-common/families/aleo/utils";
+import type {
+  AleoAccount,
+  AleoOperation,
+  AleoTransactionType,
+} from "@ledgerhq/live-common/families/aleo/types";
+import Ellipsis from "~/renderer/components/Ellipsis";
+import {
+  OpDetailsData,
+  OpDetailsSection,
+  OpDetailsTitle,
+} from "~/renderer/drawers/OperationDetails/styledComponents";
+import type { OperationDetailsExtraProps } from "~/renderer/families/types";
 import type { AleoFamily } from "./types";
 
 type OperationDetails = NonNullable<AleoFamily["operationDetails"]>;
@@ -28,6 +40,28 @@ const CustomMetadataCell: OperationDetails["customMetadataCell"] = props => {
   );
 };
 
+const OperationDetailsExtra = ({
+  operation,
+}: OperationDetailsExtraProps<AleoAccount, AleoOperation>) => {
+  const extraFields = getOperationDetailsExtraFields(operation.extra);
+
+  return (
+    <>
+      {extraFields.map(item => (
+        <OpDetailsSection key={item.key}>
+          <OpDetailsTitle>
+            <Trans i18nKey={`operationDetails.extra.${item.key}`} defaults={item.key} />
+          </OpDetailsTitle>
+          <OpDetailsData>
+            <Ellipsis>{item.value}</Ellipsis>
+          </OpDetailsData>
+        </OpDetailsSection>
+      ))}
+    </>
+  );
+};
+
 export default {
   customMetadataCell: CustomMetadataCell,
+  OperationDetailsExtra,
 };

apps/ledger-live-desktop/static/i18n/en/app.json

@@ -1752,7 +1752,8 @@
       "previousStakingNodeId": "Previous node ID",
       "gasConsumed": "Gas consumed",
       "gasUsed": "Gas used",
-      "gasLimit": "Gas limit"
+      "gasLimit": "Gas limit",
+      "functionId": "Function ID"
     }
   },
   "operationList": {

libs/coin-modules/coin-aleo/src/logic/utils.test.ts

@@ -14,7 +14,7 @@ import {
 import { getMockedOperation } from "../__tests__/fixtures/operation.fixture";
 import { getMockedPreparedRequestResponse } from "../__tests__/fixtures/sdk.fixture";
 import { getMockedTransaction } from "../__tests__/fixtures/transaction.fixture";
-import type { ProvableApi, AleoTransactionIntentData } from "../types";
+import type { AleoOperationExtra, ProvableApi, AleoTransactionIntentData } from "../types";
 import {
   getNetworkConfig,
   parseMicrocredits,
@@ -35,6 +35,7 @@ import {
   deserializeTransaction,
   mapTransactionIntentToSdkIntent,
   hasSpecificIntentData,
+  getOperationDetailsExtraFields,
 } from "./utils";
 
 jest.mock("@ledgerhq/cryptoassets/currencies");
@@ -974,3 +975,17 @@ describe("deserializeTransaction", () => {
     expect(() => deserializeTransaction(invalidJsonHex)).toThrow();
   });
 });
+
+describe("getOperationDetailsExtraFields", () => {
+  it("should return only the functionId field", () => {
+    const extra = {
+      functionId: "transfer_private_to_public",
+      transactionType: "private",
+      patched: true,
+    } satisfies AleoOperationExtra;
+
+    const result = getOperationDetailsExtraFields(extra);
+
+    expect(result).toEqual([{ key: "functionId", value: "transfer_private_to_public" }]);
+  });
+});

libs/coin-modules/coin-aleo/src/logic/utils.ts

@@ -17,6 +17,7 @@ import type {
   AleoOperation,
   AleoTransactionType,
   EnrichedPrivateRecord,
+  OperationDetailsExtraField,
   Transaction,
   TransactionType,
   ProvableApi,
@@ -26,6 +27,7 @@ import type {
   PreparedRequestResponse,
   AleoTransactionIntentData,
   AleoPublicTransaction,
+  AleoOperationExtra,
 } from "../types";
 
 export function parseMicrocredits(microcreditsU64: string): string {
@@ -356,3 +358,9 @@ export function serializeTransaction(tx: PreparedRequestResponse): string {
 export function deserializeTransaction(txHex: string): PreparedRequestResponse {
   return JSON.parse(Buffer.from(txHex, "hex").toString());
 }
+// this function is used to extract the fields that should be displayed in the operation details
+export const getOperationDetailsExtraFields = (
+  extra: AleoOperationExtra,
+): OperationDetailsExtraField[] => {
+  return [{ key: "functionId", value: extra.functionId }];
+};

libs/coin-modules/coin-aleo/src/types/bridge.ts

@@ -84,6 +84,11 @@ export type AleoOperationExtra = {
   patched?: boolean;
 };
 
+export type OperationDetailsExtraField = {
+  key: keyof AleoOperationExtra;
+  value: string | number;
+};
+
 export type AleoOperation = Operation<AleoOperationExtra>;
 
 export type TransactionTransfer = Extract<