Merge pull request #2698 from IntersectMBO/feat/2178-usersnap-show-url-and-hash-of-anchor-data-in-governance-action-view

Author: MSzalowski

CHANGELOG.md

@@ -13,6 +13,7 @@ changes.
 ### Added
 
 - Add share DRep button to every DRep instead of only our own [Issue 2686](https://github.com/IntersectMBO/govtool/issues/2686)
+- Show metadata anchor in Governance Action Details [Issue 2178](https://github.com/IntersectMBO/govtool/issues/2178)
 
 ### Fixed
 

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

@@ -4,6 +4,8 @@ import Markdown from "react-markdown";
 
 import { Typography, Tooltip, CopyButton, TooltipProps } from "@atoms";
 import { removeMarkdown } from "@/utils";
+import { ICONS } from "@/consts";
+import { useModal } from "@/context";
 
 type BaseProps = {
   label: string;
@@ -18,11 +20,13 @@ type BaseProps = {
 type PillVariantProps = BaseProps & {
   textVariant: "pill";
   isCopyButton?: false;
+  isLinkButton?: false;
 };
 
 type OtherVariantsProps = BaseProps & {
   textVariant?: "oneLine" | "twoLines" | "longText";
   isCopyButton?: boolean;
+  isLinkButton?: boolean;
 };
 
 type GovernanceActionCardElementProps = (
@@ -37,11 +41,14 @@ export const GovernanceActionCardElement = ({
   isSliderCard,
   textVariant = "oneLine",
   isCopyButton,
+  isLinkButton,
   tooltipProps,
   marginBottom,
   isMarkdown = false,
   isSemiTransparent = false,
 }: GovernanceActionCardElementProps) => {
+  const { openModal } = useModal();
+
   if (!text) {
     return null;
   }
@@ -160,7 +167,7 @@ export const GovernanceActionCardElement = ({
                     WebkitLineClamp: 2,
                     whiteSpace: "normal",
                   }),
-                  ...(isCopyButton && {
+                  ...((isCopyButton || isLinkButton) && {
                     color: "primaryBlue",
                   }),
                   ...(isSemiTransparent && {
@@ -176,6 +183,24 @@ export const GovernanceActionCardElement = ({
                 <CopyButton text={text.toString()} variant="blueThin" />
               </Box>
             )}
+            {isLinkButton && (
+              <Box ml={1}>
+                <img
+                  data-testid="link-button"
+                  alt="link"
+                  src={ICONS.externalLinkIcon}
+                  style={{ cursor: "pointer" }}
+                  onClick={() => {
+                    openModal({
+                      type: "externalLink",
+                      state: {
+                        externalLink: text.toString(),
+                      },
+                    });
+                  }}
+                />
+              </Box>
+            )}
           </Box>
         )}
       </Box>

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

@@ -88,6 +88,7 @@ export const GovernanceActionDetailsCardData = ({
     url,
     type,
     protocolParams,
+    metadataHash,
   },
 }: GovernanceActionDetailsCardDataProps) => {
   const { epochParams } = useAppContext();
@@ -318,6 +319,21 @@ export const GovernanceActionDetailsCardData = ({
             amount={withdrawal.amount}
           />
         ))}
+      <GovernanceActionCardElement
+        label={t("govActions.anchorURL")}
+        text={url}
+        textVariant="longText"
+        dataTestId="anchor-url"
+        isLinkButton
+      />
+      <GovernanceActionCardElement
+        label={t("govActions.anchorHash")}
+        text={metadataHash}
+        textVariant="longText"
+        dataTestId="anchor-hash"
+        isCopyButton
+      />
+
       <GovernanceActionDetailsCardLinks links={references} />
     </Box>
   );

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

@@ -344,6 +344,8 @@
     "about": "About",
     "abstract": "Abstract",
     "amount": "Amount:",
+    "anchorURL": "Anchor URL",
+    "anchorHash": "Anchor Hash",
     "backToGovActions": "Back to Governance Actions",
     "castVote": "<0>You voted {{vote}} on this proposal</0>\non {{date}} (Epoch {{epoch}})",
     "castVoteDeadline": "You can change your vote up to {{date}} (Epoch {{epoch}})",

govtool/frontend/src/stories/GovernanceActionDetailsCard.stories.ts

@@ -42,7 +42,7 @@ const commonArgs = {
     expiryEpochNo: 1000001,
     expiryDate: new Date().toISOString(),
     type: GovernanceActionType.InfoAction,
-    url: "https://exampleurl.com",
+    url: "https://exampleMetadataUrl.com",
     title: "Example title",
     dRepYesVotes: 1000000,
     dRepNoVotes: 302,
@@ -106,6 +106,13 @@ async function assertGovActionDetails(
   await expect(canvas.getByTestId(`${cip129GovActionId}-id`)).toHaveTextContent(
     cip129GovActionId,
   );
+
+  await expect(canvas.getByTestId("anchor-url")).toHaveTextContent(
+    args.proposal.url,
+  );
+  await expect(canvas.getByTestId("anchor-hash")).toHaveTextContent(
+    args.proposal.metadataHash,
+  );
 }
 
 export const GovernanceActionDetailsCardComponent: Story = {