fix(#2571): add support for searching by cip-129 identifiers

CHANGELOG.md

@@ -26,7 +26,7 @@ changes.
 
 -
 
-## [v2.0.2](https://github.com/IntersectMBO/govtool/releases/tag/v2.0.2) 2024-12-20
+## [v2.0.2](https://github.com/IntersectMBO/govtool/releases/tag/v2.0.2) 2024-12-23
 
 ### Added
 
@@ -37,6 +37,7 @@ changes.
 - Move matomo initalization out of the react code
 - Fix some non-ipfs related errors while fetching the DRep images [Issue 2546](https://github.com/IntersectMBO/govtool/issues/2546)
 - Remaining mobile responsiveness issue [Issue 2493](https://github.com/IntersectMBO/govtool/issues/2493)
+- Fix searching by CIP-129 identifiers [Issue 2571](https://github.com/IntersectMBO/govtool/issues/2571)
 
 ### Changed
 

govtool/backend/sql/list-dreps.sql

@@ -26,7 +26,7 @@ SELECT
   encode(va.data_hash, 'hex'),
   dr_deposit.deposit,
   DRepDistr.amount,
-(DRepActivity.epoch_no - Max(coalesce(block.epoch_no, block_first_register.epoch_no))) <= DRepActivity.drep_activity AS active,
+  (DRepActivity.epoch_no - Max(coalesce(block.epoch_no, block_first_register.epoch_no))) <= DRepActivity.drep_activity AS active,
   encode(dr_voting_anchor.tx_hash, 'hex') AS tx_hash,
   newestRegister.time AS last_register_time,
   COALESCE(latestDeposit.deposit, 0),

govtool/frontend/src/components/molecules/GovernanceActionNewCommitteeDetailsTabContent.tsx

@@ -21,7 +21,7 @@ export const GovernanceActionNewCommitteeDetailsTabContent = ({
     .filter((member) => member.newExpirationEpoch === undefined)
     .map((member) => ({
       cip129Identifier: encodeCIP129Identifier({
-        txID: member.hash,
+        txID: (member.hasScript ? "02" : "13") + member.hash,
         bech32Prefix: member.hasScript ? "cc_hot" : "cc_cold",
       }),
       expirationEpoch: member.expirationEpoch,
@@ -31,7 +31,7 @@ export const GovernanceActionNewCommitteeDetailsTabContent = ({
     .filter((member) => member.newExpirationEpoch !== undefined)
     .map((member) => ({
       cip129Identifier: encodeCIP129Identifier({
-        txID: member.hash,
+        txID: (member.hasScript ? "02" : "13") + member.hash,
         bech32Prefix: member.hasScript ? "cc_hot" : "cc_cold",
       }),
       expirationEpoch: member.expirationEpoch,

govtool/frontend/src/components/organisms/DRepCard.tsx

@@ -10,6 +10,7 @@ import { Card } from "@molecules";
 import {
   correctDRepDirectoryFormat,
   ellipsizeText,
+  encodeCIP129Identifier,
   getMetadataDataMissingStatusTranslation,
 } from "@utils";
 
@@ -24,7 +25,16 @@ type DRepCardProps = {
 };
 
 export const DRepCard = ({
-  dRep: { status, type, view, votingPower, givenName, metadataStatus, image },
+  dRep: {
+    status,
+    type,
+    view,
+    votingPower,
+    givenName,
+    metadataStatus,
+    image,
+    drepId,
+  },
   isConnected,
   isDelegationLoading,
   isInProgress,
@@ -48,6 +58,11 @@ export const DRepCard = ({
       },
     });
 
+  const cip129Identifier = encodeCIP129Identifier({
+    txID: `22${drepId}`,
+    bech32Prefix: "drep",
+  });
+
   return (
     <Card
       {...(isMe && {
@@ -122,35 +137,76 @@ export const DRepCard = ({
                     ? getMetadataDataMissingStatusTranslation(metadataStatus)
                     : ellipsizeText(givenName ?? "", 25)}
                 </Typography>
-                <ButtonBase
-                  data-testid={`${view}-copy-id-button`}
-                  onClick={(e) => {
-                    navigator.clipboard.writeText(view);
-                    addSuccessAlert(t("alerts.copiedToClipboard"));
-                    e.stopPropagation();
-                  }}
+                <Box
                   sx={{
-                    gap: 1,
-                    width: "250px",
-                    maxWidth: {
-                      xxs: "200px",
-                      xs: "100%",
-                    },
-                    "&:hover": {
-                      opacity: 0.6,
-                      transition: "opacity 0.3s",
-                    },
+                    display: "flex",
+                    flexDirection: "column",
                   }}
                 >
-                  <Typography
-                    color="primary"
-                    variant="body2"
-                    sx={ellipsisStyles}
+                  <ButtonBase
+                    data-testid={`${view}-copy-id-button`}
+                    onClick={(e) => {
+                      navigator.clipboard.writeText(view);
+                      addSuccessAlert(t("alerts.copiedToClipboard"));
+                      e.stopPropagation();
+                    }}
+                    sx={{
+                      gap: 1,
+                      width: "250px",
+                      maxWidth: {
+                        xxs: "200px",
+                        xs: "100%",
+                      },
+                      "&:hover": {
+                        opacity: 0.6,
+                        transition: "opacity 0.3s",
+                      },
+                    }}
                   >
-                    {view}
-                  </Typography>
-                  <img alt="" src={ICONS.copyBlueIcon} />
-                </ButtonBase>
+                    <Typography
+                      color="primary"
+                      variant="body2"
+                      sx={ellipsisStyles}
+                    >
+                      {view}
+                    </Typography>
+                    <img alt="" src={ICONS.copyBlueIcon} />
+                  </ButtonBase>
+                  <ButtonBase
+                    data-testid={`${cip129Identifier}-copy-id-button`}
+                    onClick={(e) => {
+                      navigator.clipboard.writeText(cip129Identifier);
+                      addSuccessAlert(t("alerts.copiedToClipboard"));
+                      e.stopPropagation();
+                    }}
+                    sx={{
+                      gap: 1,
+                      width: "250px",
+                      maxWidth: {
+                        xxs: "200px",
+                        xs: "100%",
+                      },
+                      "&:hover": {
+                        opacity: 0.6,
+                        transition: "opacity 0.3s",
+                      },
+                      display: "flex",
+                      flexDirection: "row",
+                    }}
+                  >
+                    <Typography variant="body2" sx={ellipsisStyles}>
+                      (CIP-129){" "}
+                      <Typography
+                        color="primary"
+                        variant="body2"
+                        component="span"
+                      >
+                        {cip129Identifier}
+                      </Typography>
+                    </Typography>
+                    <img alt="" src={ICONS.copyBlueIcon} />
+                  </ButtonBase>
+                </Box>
               </Box>
             </Box>
 

govtool/frontend/src/components/organisms/DRepDetailsCard.tsx

@@ -6,7 +6,11 @@ import { ICONS, PATHS } from "@consts";
 import { useCardano, useModal } from "@context";
 import { useDelegateTodRep, useScreenDimension, useTranslation } from "@hooks";
 import { Card, DataMissingInfoBox } from "@molecules";
-import { correctAdaFormat, testIdFromLabel } from "@utils";
+import {
+  correctAdaFormat,
+  encodeCIP129Identifier,
+  testIdFromLabel,
+} from "@utils";
 import { DRepData } from "@/models";
 import { DRepDetailsCardHeader } from "./DRepDetailsCardHeader";
 
@@ -41,6 +45,7 @@ export const DRepDetailsCard = ({
     status,
     url,
     view,
+    drepId,
     votingPower,
   } = dRepData;
 
@@ -109,6 +114,18 @@ export const DRepDetailsCard = ({
         <DRepDetailsInfoItem label={t("drepId")} dataTestId="drep-id">
           <CopyableText value={view} dataTestId="copy-drep-id-button" />
         </DRepDetailsInfoItem>
+        <DRepDetailsInfoItem
+          label={t("cip129DrepId")}
+          dataTestId="cip-129-drep-id"
+        >
+          <CopyableText
+            value={encodeCIP129Identifier({
+              txID: `22${drepId}`,
+              bech32Prefix: "drep",
+            })}
+            dataTestId="copy-cip-129-drep-id-button"
+          />
+        </DRepDetailsInfoItem>
         <DRepDetailsInfoItem label={t("status")} dataTestId="drep-status">
           <StatusPill status={status} />
         </DRepDetailsInfoItem>

govtool/frontend/src/i18n/locales/en.json

@@ -747,6 +747,7 @@
   "copiedLink": "Copied link",
   "delegate": "Delegate",
   "drepId": "DRep ID",
+  "cip129DrepId": "(CIP-129) DRep ID",
   "email": "Email",
   "feedback": "Feedback",
   "filter": "Filter",

govtool/frontend/src/services/requests/getDRepList.ts

@@ -8,7 +8,11 @@ import {
   DrepDataDTO,
 } from "@models";
 import { API } from "../API";
-import { mapDtoToDrep } from "@/utils";
+import {
+  decodeCIP129Identifier,
+  encodeCIP129Identifier,
+  mapDtoToDrep,
+} from "@/utils";
 
 export type GetDRepListArguments = {
   filters?: string[];
@@ -34,6 +38,22 @@ export const getDRepList = async ({
       const { words } = bech32.decode(rawSearchPhrase);
       return bech32.encode("drep", words);
     }
+    if (rawSearchPhrase.startsWith("drep")) {
+      const decodedIdentifier = decodeCIP129Identifier(rawSearchPhrase);
+      if (decodedIdentifier) {
+        const isCIP129Identifier = decodedIdentifier.txID.startsWith("22");
+        if (isCIP129Identifier) {
+          return encodeCIP129Identifier({
+            txID: decodedIdentifier.txID.slice(2),
+            bech32Prefix: "drep",
+          });
+        }
+        return encodeCIP129Identifier({
+          txID: decodedIdentifier.txID,
+          bech32Prefix: "drep",
+        });
+      }
+    }
     return rawSearchPhrase;
   })();
 

govtool/frontend/src/services/requests/getProposals.ts

@@ -1,7 +1,11 @@
 import { Infinite, ProposalData, ProposalDataDTO } from "@models";
 
 import { API } from "../API";
-import { mapDtoToProposal } from "@/utils";
+import {
+  decodeCIP129Identifier,
+  getFullGovActionId,
+  mapDtoToProposal,
+} from "@/utils";
 
 export type GetProposalsArguments = {
   dRepID?: string;
@@ -18,9 +22,17 @@ export const getProposals = async ({
   page = 0,
   // It allows fetch proposals and if we have 7 items, display 6 cards and "view all" button
   pageSize = 7,
-  searchPhrase = "",
+  searchPhrase: rawSearchPhrase = "",
   sorting = "",
 }: GetProposalsArguments): Promise<Infinite<ProposalData>> => {
+  const searchPhrase = (() => {
+    if (rawSearchPhrase.startsWith("gov_action")) {
+      const { txID } = decodeCIP129Identifier(rawSearchPhrase);
+      return getFullGovActionId(txID, 0);
+    }
+
+    return rawSearchPhrase;
+  })();
   const response = await API.get<Infinite<ProposalDataDTO>>("/proposal/list", {
     params: {
       page,