From 4016076efe0c99c29386a9a798302ca85492451d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sza=C5=82owski?= <michal.szalowski@gmail.com>
Date: Wed, 6 Nov 2024 16:41:46 +0100
Subject: [PATCH 1/2] feat(#2183): add support for CIP-129 governance
 identifiers

---
 CHANGELOG.md                                  |  2 +-
 .../molecules/GovernanceActionCard.tsx        | 17 ++++++++--
 .../molecules/GovernanceVotedOnCard.tsx       | 26 +++++++++++----
 .../GovernanceActionDetailsCardData.tsx       | 12 +++++++
 govtool/frontend/src/i18n/locales/en.json     |  1 +
 .../src/services/requests/getProposal.ts      |  9 +++++-
 .../src/services/requests/getProposals.ts     |  4 ++-
 .../src/stories/GovernanceAction.stories.ts   | 15 +++++++--
 .../GovernanceActionDetailsCard.stories.ts    | 10 ++++++
 .../frontend/src/utils/cip129identifier.ts    | 32 +++++++++++++++++++
 govtool/frontend/src/utils/getGovActionId.ts  |  5 ++-
 govtool/frontend/src/utils/index.ts           |  1 +
 .../src/utils/tests/cip129identifier.test.ts  | 32 +++++++++++++++++++
 13 files changed, 151 insertions(+), 15 deletions(-)
 create mode 100644 govtool/frontend/src/utils/cip129identifier.ts
 create mode 100644 govtool/frontend/src/utils/tests/cip129identifier.test.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6ba3b9154..f27a9be4c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,7 +12,7 @@ changes.
 
 ### Added
 
--
+- add support for CIP-129 governance identifiers [Issue 2183](https://github.com/IntersectMBO/govtool/issues/2183)
 
 ### Fixed
 
diff --git a/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx b/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx
index c70ede09a..c658b068f 100644
--- a/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx
+++ b/govtool/frontend/src/components/molecules/GovernanceActionCard.tsx
@@ -11,6 +11,7 @@ import {
 
 import { useScreenDimension, useTranslation } from "@hooks";
 import {
+  encodeCIP129Identifier,
   getFullGovActionId,
   getProposalTypeLabel,
   getProposalTypeNoEmptySpaces,
@@ -53,6 +54,11 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
   const { t } = useTranslation();
 
   const govActionId = getFullGovActionId(txHash, index);
+  const cip129GovernanceActionId = encodeCIP129Identifier(
+    txHash,
+    index.toString(16).padStart(2, "0"),
+    "gov_action",
+  );
 
   return (
     <Box
@@ -113,8 +119,15 @@ export const GovernanceActionCard: FC<ActionTypeProps> = ({ ...props }) => {
         />
         <GovernanceActionCardElement
           label={t("govActions.governanceActionId")}
-          text={getFullGovActionId(txHash, index)}
-          dataTestId={`${getFullGovActionId(txHash, index)}-id`}
+          text={govActionId}
+          dataTestId={`${govActionId}-id`}
+          isCopyButton
+          isSliderCard
+        />
+        <GovernanceActionCardElement
+          label={t("govActions.cip129GovernanceActionId")}
+          text={cip129GovernanceActionId}
+          dataTestId={`${cip129GovernanceActionId}-id`}
           isCopyButton
           isSliderCard
         />
diff --git a/govtool/frontend/src/components/molecules/GovernanceVotedOnCard.tsx b/govtool/frontend/src/components/molecules/GovernanceVotedOnCard.tsx
index e47980920..cb5a4fd54 100644
--- a/govtool/frontend/src/components/molecules/GovernanceVotedOnCard.tsx
+++ b/govtool/frontend/src/components/molecules/GovernanceVotedOnCard.tsx
@@ -5,6 +5,7 @@ import { Button } from "@atoms";
 import { PATHS } from "@consts";
 import { useScreenDimension, useTranslation } from "@hooks";
 import {
+  encodeCIP129Identifier,
   getFullGovActionId,
   getProposalTypeLabel,
   getProposalTypeNoEmptySpaces,
@@ -43,6 +44,13 @@ export const GovernanceVotedOnCard = ({ votedProposal, inProgress }: Props) => {
   const { isMobile, screenWidth } = useScreenDimension();
   const { t } = useTranslation();
 
+  const govActionId = getFullGovActionId(txHash, index);
+  const cip129GovernanceActionId = encodeCIP129Identifier(
+    txHash,
+    index.toString(16).padStart(2, "0"),
+    "gov_action",
+  );
+
   return (
     <Box
       sx={{
@@ -101,8 +109,15 @@ export const GovernanceVotedOnCard = ({ votedProposal, inProgress }: Props) => {
         />
         <GovernanceActionCardElement
           label={t("govActions.governanceActionId")}
-          text={getFullGovActionId(txHash, index)}
-          dataTestId={`${getFullGovActionId(txHash, index)}-id`}
+          text={govActionId}
+          dataTestId={`${govActionId}-id`}
+          isCopyButton
+          isSliderCard
+        />
+        <GovernanceActionCardElement
+          label={t("govActions.cip129GovernanceActionId")}
+          text={cip129GovernanceActionId}
+          dataTestId={`${cip129GovernanceActionId}-id`}
           isCopyButton
           isSliderCard
         />
@@ -120,15 +135,12 @@ export const GovernanceVotedOnCard = ({ votedProposal, inProgress }: Props) => {
       >
         <Button
           disabled={inProgress}
-          data-testid={`govaction-${getFullGovActionId(
-            txHash,
-            index,
-          )}-change-your-vote`}
+          data-testid={`govaction-${govActionId}-change-your-vote`}
           onClick={() =>
             navigate(
               PATHS.dashboardGovernanceActionsAction.replace(
                 ":proposalId",
-                getFullGovActionId(txHash, index),
+                govActionId,
               ),
               {
                 state: {
diff --git a/govtool/frontend/src/components/organisms/GovernanceActionDetailsCardData.tsx b/govtool/frontend/src/components/organisms/GovernanceActionDetailsCardData.tsx
index 7ec25594f..facbefa49 100644
--- a/govtool/frontend/src/components/organisms/GovernanceActionDetailsCardData.tsx
+++ b/govtool/frontend/src/components/organisms/GovernanceActionDetailsCardData.tsx
@@ -20,6 +20,7 @@ import {
   filterOutNullParams,
   getFullGovActionId,
   mapArrayToObjectByKeys,
+  encodeCIP129Identifier,
 } from "@utils";
 import { MetadataValidationStatus, ProposalData } from "@models";
 import { GovernanceActionType } from "@/types/governanceAction";
@@ -142,6 +143,11 @@ export const GovernanceActionDetailsCardData = ({
 
   const label = getProposalTypeLabel(type);
   const govActionId = getFullGovActionId(txHash, index);
+  const cip129GovernanceActionId = encodeCIP129Identifier(
+    txHash,
+    index.toString(16).padStart(2, "0"),
+    "gov_action",
+  );
   const prevGovActionId =
     prevGovActionIndex && prevGovActionTxHash
       ? getFullGovActionId(prevGovActionTxHash, prevGovActionIndex)
@@ -244,6 +250,12 @@ export const GovernanceActionDetailsCardData = ({
         isCopyButton
         dataTestId={`${govActionId}-id`}
       />
+      <GovernanceActionCardElement
+        label={t("govActions.cip129GovernanceActionId")}
+        text={cip129GovernanceActionId}
+        dataTestId={`${cip129GovernanceActionId}-id`}
+        isCopyButton
+      />
 
       {tabs.length === 1 ? (
         tabs[0].content
diff --git a/govtool/frontend/src/i18n/locales/en.json b/govtool/frontend/src/i18n/locales/en.json
index 909883833..a76164981 100644
--- a/govtool/frontend/src/i18n/locales/en.json
+++ b/govtool/frontend/src/i18n/locales/en.json
@@ -361,6 +361,7 @@
     "sPos": "SPOs",
     "ccCommittee": "Constitutional Committee",
     "governanceActionId": "Governance Action ID:",
+    "cip129GovernanceActionId": "(CIP-129) Governance Action ID:",
     "governanceActionType": "Governance Action Type:",
     "goToVote": "Go to Vote",
     "protocolParamsDetails": {
diff --git a/govtool/frontend/src/services/requests/getProposal.ts b/govtool/frontend/src/services/requests/getProposal.ts
index 04e94b0c2..c82aa6199 100644
--- a/govtool/frontend/src/services/requests/getProposal.ts
+++ b/govtool/frontend/src/services/requests/getProposal.ts
@@ -1,11 +1,18 @@
 import { VotedProposal, VotedProposalDTO } from "@/models";
+import { decodeCIP129Identifier, mapDtoToProposal } from "@/utils";
+
 import { API } from "../API";
-import { mapDtoToProposal } from "@/utils";
 
 export const getProposal = async (
   proposalId: string,
   drepId?: string,
 ): Promise<VotedProposal> => {
+  const isCIP129Identifier = proposalId.includes("gov_action");
+  if (isCIP129Identifier) {
+    const { txID } = decodeCIP129Identifier(proposalId);
+    proposalId = txID;
+  }
+
   const encodedHash = encodeURIComponent(proposalId);
 
   const { data } = await API.get<VotedProposalDTO>(
diff --git a/govtool/frontend/src/services/requests/getProposals.ts b/govtool/frontend/src/services/requests/getProposals.ts
index 3014a55b7..333cad371 100644
--- a/govtool/frontend/src/services/requests/getProposals.ts
+++ b/govtool/frontend/src/services/requests/getProposals.ts
@@ -25,7 +25,9 @@ export const getProposals = async ({
     params: {
       page,
       pageSize,
-      ...(searchPhrase && { search: searchPhrase }),
+      ...(searchPhrase && {
+        search: searchPhrase,
+      }),
       ...(filters.length && { type: filters }),
       ...(sorting && { sort: sorting }),
       ...(dRepID && { drepId: dRepID }),
diff --git a/govtool/frontend/src/stories/GovernanceAction.stories.ts b/govtool/frontend/src/stories/GovernanceAction.stories.ts
index b2768c729..f9ef316fa 100644
--- a/govtool/frontend/src/stories/GovernanceAction.stories.ts
+++ b/govtool/frontend/src/stories/GovernanceAction.stories.ts
@@ -2,7 +2,11 @@ import { MetadataValidationStatus } from "@models";
 import { expect, jest } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
 import { screen, userEvent, waitFor, within } from "@storybook/testing-library";
-import { formatDisplayDate, getProposalTypeNoEmptySpaces } from "@utils";
+import {
+  encodeCIP129Identifier,
+  formatDisplayDate,
+  getProposalTypeNoEmptySpaces,
+} from "@utils";
 import { GovernanceActionCard } from "@/components/molecules";
 import { GovernanceActionType } from "@/types/governanceAction";
 
@@ -47,6 +51,12 @@ const commonArgs = {
   prevGovActionTxHash: null,
 };
 
+const cip129GovActionId = encodeCIP129Identifier(
+  commonArgs.txHash,
+  commonArgs.index.toString(16).padStart(2, "0"),
+  "gov_action",
+);
+
 export const GovernanceActionCardComponent: Story = {
   args: commonArgs,
 
@@ -58,6 +68,7 @@ export const GovernanceActionCardComponent: Story = {
       ),
     ).toBeInTheDocument();
     expect(canvas.getByTestId("sad78afdsf7jasd98d#2-id")).toBeInTheDocument();
+    expect(canvas.getByTestId(`${cip129GovActionId}-id`)).toBeInTheDocument();
     expect(
       canvas.getByText(formatDisplayDate("1970-01-01T00:00:00Z")),
     ).toBeInTheDocument();
@@ -79,7 +90,7 @@ export const GovernanceActionCardComponent: Story = {
     await userEvent.click(
       canvas.getByTestId("govaction-sad78afdsf7jasd98d#2-view-detail"),
     );
-    await expect(args.onClick).toHaveBeenCalled();
+    await await expect(args.onClick).toHaveBeenCalled();
   },
 };
 
diff --git a/govtool/frontend/src/stories/GovernanceActionDetailsCard.stories.ts b/govtool/frontend/src/stories/GovernanceActionDetailsCard.stories.ts
index af67453a8..1b1066faa 100644
--- a/govtool/frontend/src/stories/GovernanceActionDetailsCard.stories.ts
+++ b/govtool/frontend/src/stories/GovernanceActionDetailsCard.stories.ts
@@ -4,6 +4,7 @@ import { expect, jest } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
 import { screen, userEvent, waitFor, within } from "@storybook/testing-library";
 import {
+  encodeCIP129Identifier,
   formatDisplayDate,
   getFullGovActionId,
   getProposalTypeNoEmptySpaces,
@@ -59,6 +60,12 @@ const govActionId = getFullGovActionId(
   commonArgs.proposal.index,
 );
 
+const cip129GovActionId = encodeCIP129Identifier(
+  commonArgs.proposal.txHash,
+  commonArgs.proposal.index.toString(16).padStart(2, "0"),
+  "gov_action",
+);
+
 async function assertTooltip(tooltip: HTMLElement, expectedText: RegExp) {
   await userEvent.hover(tooltip);
   await waitFor(async () => {
@@ -82,6 +89,9 @@ async function assertGovActionDetails(
   await expect(canvas.getByTestId(`${govActionId}-id`)).toHaveTextContent(
     govActionId,
   );
+  await expect(canvas.getByTestId(`${cip129GovActionId}-id`)).toHaveTextContent(
+    cip129GovActionId,
+  );
 }
 
 export const GovernanceActionDetailsCardComponent: Story = {
diff --git a/govtool/frontend/src/utils/cip129identifier.ts b/govtool/frontend/src/utils/cip129identifier.ts
new file mode 100644
index 000000000..1dd87b380
--- /dev/null
+++ b/govtool/frontend/src/utils/cip129identifier.ts
@@ -0,0 +1,32 @@
+import { bech32 } from "bech32";
+import { Buffer } from "buffer";
+
+/**
+ * Encodes a CIP129 identifier based on the provided transaction ID, index, and bech32 prefix.
+ * @param txID - The transaction ID.
+ * @param index - The index.
+ * @param bech32Prefix - The bech32 prefix.
+ * @returns The generated CIP129 identifier.
+ */
+export const encodeCIP129Identifier = (
+  txID: string,
+  index: string,
+  bech32Prefix: string,
+) => {
+  const govActionBytes = Buffer.from(txID + index, "hex");
+  const words = bech32.toWords(govActionBytes);
+  return bech32.encode(bech32Prefix, words);
+};
+
+/**
+ * Decodes a CIP129 identifier.
+ * @param cip129Identifier - The CIP129 identifier to decode.
+ * @returns An object containing the decoded transaction ID, index, and prefix.
+ */
+export const decodeCIP129Identifier = (cip129Identifier: string) => {
+  const { prefix, words } = bech32.decode(cip129Identifier);
+  const buffer = Buffer.from(bech32.fromWords(words));
+  const txID = buffer.subarray(0, 32).toString("hex");
+  const index = buffer.subarray(32).toString("hex");
+  return { txID, index, prefix };
+};
diff --git a/govtool/frontend/src/utils/getGovActionId.ts b/govtool/frontend/src/utils/getGovActionId.ts
index 8a1dcef5b..4b38e447a 100644
--- a/govtool/frontend/src/utils/getGovActionId.ts
+++ b/govtool/frontend/src/utils/getGovActionId.ts
@@ -1,4 +1,7 @@
-export const getShortenedGovActionId = (txHash: string, index: number | string) => {
+export const getShortenedGovActionId = (
+  txHash: string,
+  index: number | string,
+) => {
   if (txHash.length <= 6) {
     return `${txHash}#${index}`;
   }
diff --git a/govtool/frontend/src/utils/index.ts b/govtool/frontend/src/utils/index.ts
index aa8a2e049..232ced087 100644
--- a/govtool/frontend/src/utils/index.ts
+++ b/govtool/frontend/src/utils/index.ts
@@ -31,3 +31,4 @@ export * from "./removeDuplicatedProposals";
 export * from "./setProtocolParameterUpdate";
 export * from "./testIdFromLabel";
 export * from "./wait";
+export * from "./cip129identifier";
diff --git a/govtool/frontend/src/utils/tests/cip129identifier.test.ts b/govtool/frontend/src/utils/tests/cip129identifier.test.ts
new file mode 100644
index 000000000..009f70858
--- /dev/null
+++ b/govtool/frontend/src/utils/tests/cip129identifier.test.ts
@@ -0,0 +1,32 @@
+import {
+  encodeCIP129Identifier,
+  decodeCIP129Identifier,
+} from "../cip129identifier";
+
+const txID = "0e52f799df70b3b74e57d3c7c89f5d44b6deffb3b8b3a718abf9bb41d33e3a92";
+const index = "00";
+const bech32Prefix = "gov_action";
+
+describe("CIP-129 Governance Identifier", () => {
+  describe("encodeCIP129Identifier", () => {
+    it("should encode a CIP129 identifier correctly", () => {
+      const result = encodeCIP129Identifier(txID, index, bech32Prefix);
+      expect(result).toBe(
+        "gov_action1pef00xwlwzemwnjh60ru386agjmdalanhze6wx9tlxa5r5e782fqqt7spu6",
+      );
+    });
+  });
+
+  describe("decodeCIP129Identifier", () => {
+    it("should decode a CIP129 identifier correctly", () => {
+      const result = decodeCIP129Identifier(
+        encodeCIP129Identifier(txID, index, bech32Prefix),
+      );
+      expect(result).toEqual({
+        txID,
+        index,
+        prefix: bech32Prefix,
+      });
+    });
+  });
+});

From 61a7ba8337368d99fdfa73938e79720ca69a6254 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sza=C5=82owski?= <michal.szalowski@gmail.com>
Date: Wed, 6 Nov 2024 20:30:39 +0100
Subject: [PATCH 2/2] feat: display full Governance Action ID on desktop

---
 CHANGELOG.md                                                    | 1 +
 .../components/organisms/GovernanceActionDetailsCardData.tsx    | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f27a9be4c..a31aeeece 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ changes.
 ### Changed
 
 - Change multilanguage support to use json file [Issue 2325](https://github.com/IntersectMBO/govtool/issues/2325)
+- Display full Governance Action IDs on desktop
 
 ### Removed
 
diff --git a/govtool/frontend/src/components/organisms/GovernanceActionDetailsCardData.tsx b/govtool/frontend/src/components/organisms/GovernanceActionDetailsCardData.tsx
index facbefa49..c147c3852 100644
--- a/govtool/frontend/src/components/organisms/GovernanceActionDetailsCardData.tsx
+++ b/govtool/frontend/src/components/organisms/GovernanceActionDetailsCardData.tsx
@@ -249,12 +249,14 @@ export const GovernanceActionDetailsCardData = ({
         text={govActionId}
         isCopyButton
         dataTestId={`${govActionId}-id`}
+        textVariant={screenWidth > 1600 ? "longText" : "oneLine"}
       />
       <GovernanceActionCardElement
         label={t("govActions.cip129GovernanceActionId")}
         text={cip129GovernanceActionId}
         dataTestId={`${cip129GovernanceActionId}-id`}
         isCopyButton
+        textVariant={screenWidth > 1600 ? "longText" : "oneLine"}
       />
 
       {tabs.length === 1 ? (