From 39bce6b12ef590976fd7d85bd0a7dbaa3367245a Mon Sep 17 00:00:00 2001
From: "tai.truong" <tai.truong@sotatek.com>
Date: Fri, 29 Mar 2024 15:46:17 +0700
Subject: [PATCH] fix: MET-1963 update governance action

---
 src/components/GovernanceVotes/index.tsx | 70 +++++++++++++++++++++---
 src/locales/en/translation.json          |  6 +-
 2 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/src/components/GovernanceVotes/index.tsx b/src/components/GovernanceVotes/index.tsx
index 53bafcbc44..3f04698a6b 100644
--- a/src/components/GovernanceVotes/index.tsx
+++ b/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>
   );
 };
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index a6d59f66cc..4236462da4 100644
--- a/src/locales/en/translation.json
+++ b/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"
 }