fix: MET-1963 update governance action

src/components/GovernanceVotes/index.tsx

@@ -42,6 +42,7 @@ import {
   BlackCircleIcon,
   BlackWarningIcon,
   CurrentStatusIcon,
+  DisclaimerIcon,
   ExpiryIcon,
   FilterIcon,
   GovernanceIdIcon,
@@ -780,7 +781,7 @@ interface ActionMetadataProps {
 const ActionMetadataModal: React.FC<ActionMetadataProps> = ({ onClose, open, data, anchorHash, anchorUrl }) => {
   const { t } = useTranslation();
   const theme = useTheme();
-
+  const [openModal, setOpenModal] = useState(false);
   return (
     <CustomModal
       open={open}
@@ -804,21 +805,37 @@ const ActionMetadataModal: React.FC<ActionMetadataProps> = ({ onClose, open, dat
           <Typography fontSize="16px" color={theme.palette.secondary.light}>
             {anchorHash}
           </Typography>
-          <Typography
-            component={Link}
+          <Box
+            component={Typography}
             fontSize="16px"
             color="#0033AD !important"
             fontWeight="700"
-            target="_blank"
-            rel="noopener noreferrer"
-            href={anchorUrl || "/"}
+            onClick={() => setOpenModal(true)}
+            sx={{ cursor: "pointer" }}
           >
             {anchorUrl}
-          </Typography>
+            <Box
+              ml={1}
+              sx={{ transform: "translateY(3px)" }}
+              component={CustomTooltip}
+              title={
+                <Box>
+                  <Box fontWeight={"bold"} component={"span"}>
+                    Disclaimer:{" "}
+                  </Box>
+                  {t("drep.disclaimer")}
+                </Box>
+              }
+            >
+              <DisclaimerIcon fill={theme.palette.primary.main} />
+            </Box>
+          </Box>
         </Box>
       </Box>
-      <Box display="block" pb="25.5px">
-        <Typography fontSize="16px">{t("pool.metadata")}:</Typography>{" "}
+      <Box display="block">
+        <Typography fontSize="16px" color={theme.palette.secondary.main}>
+          {t("pool.metadata")}:
+        </Typography>{" "}
         <Box
           display="flex"
           flexDirection="column"
@@ -842,6 +859,41 @@ const ActionMetadataModal: React.FC<ActionMetadataProps> = ({ onClose, open, dat
           </ViewJson>
         </Box>
       </Box>
+      <ActionMetadataModalConfirm open={openModal} anchorUrl={anchorUrl} onClose={() => setOpenModal(false)} />
+    </CustomModal>
+  );
+};
+
+const ActionMetadataModalConfirm: React.FC<{
+  onClose: () => void;
+  open: boolean;
+  anchorUrl?: string;
+}> = ({ anchorUrl, ...props }) => {
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  return (
+    <CustomModal {...props} title={t("Disclaimer")} width={500} sx={{ maxHeight: "70vh" }}>
+      <Box display="block" pb="15px">
+        <Box fontSize={16} color={theme.palette.secondary.main}>
+          {t("drep.disclaimer.des1")}
+        </Box>
+        <Box fontSize={16} color={theme.palette.secondary.main} my={2}>
+          {t("drep.disclaimer.des2")}
+        </Box>
+        <Box
+          component={Link}
+          sx={{ textDecoration: "underline !important" }}
+          fontSize="16px"
+          color={`${theme.palette.primary.main} !important`}
+          fontWeight="700"
+          target="_blank"
+          rel="noopener noreferrer"
+          href={anchorUrl || "/"}
+        >
+          Proceed to External Link
+        </Box>
+      </Box>
     </CustomModal>
   );
 };

src/locales/en/translation.json

@@ -1017,11 +1017,7 @@
   "pool.typeConstitutional": "Constitutional Committe Updates",
   "pool.typeUpdate": "Update to the Constitutional or proposal policy",
   "pool.typeHardFork": "Hard-Fork Initiation",
-  "drep.updateConstitution": "Update to the Constitution",
-  "drep.protocolChange": "Protocol Parameter Changes",
-  "drep.treasuryWithdrawals": "Treasury Withdrawals",
   "pool.typeProtocol": "Protocol Parameter Changes",
-
   "pool.typeTreasury": "Treasury Withdrawals",
   "pool.typeInfo": "Info",
   "pool.dateRange": "Date Range",
@@ -1075,5 +1071,7 @@
   "drep.governanceVotes": "Governance Votes",
   "drep.certificatesHistory": "Drep Certificates History",
   "drep.disclaimer": "Please be aware that by clicking the external links, you will be directed to an external website. We do not control or endorse the content, products, or services provided on this site. Additionally, we cannot guarantee the accuracy, relevance, or security of the information found on external pages.",
+  "drep.disclaimer.des1": "Please be aware that by clicking the link below, you will be directed to an external website. We do not control or endorse the content, products, or services provided on this site. Additionally, we cannot guarantee the accuracy, relevance, or security of the information found on external pages.",
+  "drep.disclaimer.des2": "By clicking the link, you acknowledge that you understand the risks associated with visiting external sites and agree to proceed at your own discretion.",
   "status.inActive": "INACTIVE"
 }