fix: MET-1768 show multiple txs protocol

cardano-foundation · Nov 13, 2023 · e039f26 · e039f26
1 parent 9cd4a31
commit e039f26
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 9 deletions.
diff --git a/src/components/ProtocolHistoryModal/index.tsx b/src/components/ProtocolHistoryModal/index.tsx
@@ -43,8 +43,8 @@ export default function ProtocolHistoryModal({ open, protocolType, handleCloseMo
               {data?.map((item, idx) => (
                 <TableRow key={idx}>
                   <StyledTableCell>
-                    <LinkComponent to={details.transaction(item.transactionHash)}>
-                      {getShortHash(item.transactionHash)}
+                    <LinkComponent to={details.transaction(item.transactionHashs[0])}>
+                      {getShortHash(item.transactionHashs[0])}
                     </LinkComponent>
                   </StyledTableCell>
                   <StyledTableCell>{formatDateTime(item.time)}</StyledTableCell>

diff --git a/src/components/StakeDetail/StakeTab/Tabs/StakeHistoryTab.tsx b/src/components/StakeDetail/StakeTab/Tabs/StakeHistoryTab.tsx
@@ -67,7 +67,13 @@ const StakeHistoryTab = ({ isMobile = false }) => {
         const label = r.action ? r.action.split(" ").join("") : "";
         return (
           <LabelStatus
-            color={(theme) => (r.action === "Registered" ? theme.palette.error[700] : theme.palette.secondary.light)}
+            color={(theme) =>
+              r.action === "Registered"
+                ? theme.isDark
+                  ? theme.palette.error[800]
+                  : theme.palette.error[700]
+                : theme.palette.secondary.light
+            }
             sx={{
               background: (theme) => (r.action === "Registered" ? theme.palette.error[100] : theme.palette.primary[200])
             }}

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -872,5 +872,6 @@
   "Version": "Version",
   "ViewAddresses": "View Addresses",
   "token.timelock": "Time locked",
-  "token.oneTimeMint": "One time mint"
+  "token.oneTimeMint": "One time mint",
+  "protocol.trxModalSubTitle": "Confirmed by transactions"
 }
diff --git a/src/pages/ProtocolParameter/TrxProtocolModal.test.tsx b/src/pages/ProtocolParameter/TrxProtocolModal.test.tsx
@@ -0,0 +1,21 @@
+import { screen } from "@testing-library/react";
+
+import { render } from "src/test-utils";
+
+import TxsProtocolModal from "./TxsProtocolModal";
+
+test("Check Test Trx Protocol Modal", async () => {
+  const handleCloseModal = jest.fn();
+  render(
+    <TxsProtocolModal
+      txs={[
+        "62c3c13187423c47f629e6187f36fbd61a9ba1d05d101588340cfbfdf47b22d2",
+        "a83f479c5635e1e563a19f6e72a1be59fb082bbf31de90cc176850ee799b08ac"
+      ]}
+      open={true}
+      onClose={handleCloseModal}
+    />
+  );
+  expect(screen.getByText("Transactions")).toBeInTheDocument();
+  expect(screen.getByText("Confirmed by transactions")).toBeInTheDocument();
+});
diff --git a/src/pages/ProtocolParameter/TxsProtocolModal.tsx b/src/pages/ProtocolParameter/TxsProtocolModal.tsx
@@ -0,0 +1,49 @@
+import { styled, Box } from "@mui/material";
+import { t } from "i18next";
+import { Link } from "react-router-dom";
+
+import { details } from "src/commons/routers";
+import DynamicEllipsisText from "src/components/DynamicEllipsisText";
+import CustomModal from "src/components/commons/CustomModal";
+
+interface TxsProtocolModalProps {
+  open: boolean;
+  onClose: () => void;
+  txs?: string[] | null;
+}
+
+const TxsProtocolModal: React.FC<TxsProtocolModalProps> = ({ txs, ...props }) => {
+  return (
+    <CustomModal width={550} {...props} title={t("glossary.transactions")}>
+      <ContentModal>
+        <Box fontWeight={600} color={({ palette }) => palette.secondary.light} mb={2}>
+          {t("protocol.trxModalSubTitle")}
+        </Box>
+        <Box>
+          {txs?.map((tx, idx) => (
+            <Box
+              mb={1}
+              fontWeight={"bold"}
+              color={({ palette }) => `${palette.primary.main} !important`}
+              display={"block"}
+              key={idx}
+              component={Link}
+              to={details.transaction(tx, "protocols")}
+            >
+              <DynamicEllipsisText value={tx} isTooltip />
+            </Box>
+          ))}
+        </Box>
+      </ContentModal>
+    </CustomModal>
+  );
+};
+
+export default TxsProtocolModal;
+
+const ContentModal = styled(Box)(({ theme }) => ({
+  padding: "16px 20px",
+  background: theme.isDark ? theme.palette.secondary[100] : theme.palette.secondary[0],
+  borderRadius: "8px",
+  boxShadow: theme.shadow.card
+}));
diff --git a/src/pages/ProtocolParameter/index.tsx b/src/pages/ProtocolParameter/index.tsx
@@ -54,6 +54,7 @@ import {
   StyledDropdownItem,
   TextDescription
 } from "./styles";
+import TxsProtocolModal from "./TxsProtocolModal";
 
 interface IProtocolParamVertical {
   name: string;
@@ -333,6 +334,7 @@ export const ProtocolParameterHistory = () => {
   const theme = useTheme();
   const [initing, setIniting] = useState(true);
   const [filterParams, setFilterParams] = useState<string[]>([]);
+  const [selectTxs, setSelectTxs] = useState<string[] | null>(null);
   const [dateRangeFilter, setDateRangeFilter] = useState<{ fromDate?: string; toDate?: string }>({});
   const [explainerText, setExplainerText] = useState<{ title: string; content: string } | null>(null);
   const historyUrlBase = PROTOCOL_PARAMETER.HISTORY;
@@ -406,15 +408,19 @@ export const ProtocolParameterHistory = () => {
                   : 0
                 : 0
             }
+            onClick={() => {
+              setSelectTxs(r[t as ProtocolTypeKey]?.transactionHashs || null);
+            }}
             component={["UPDATED", "ADDED"].includes(r[t as ProtocolTypeKey]?.status as string) ? Link : Box}
             to={
-              r[t as ProtocolTypeKey]?.transactionHash
-                ? details.transaction(r[t as ProtocolTypeKey]?.transactionHash, "protocols")
+              r[t as ProtocolTypeKey]?.transactionHashs && r[t as ProtocolTypeKey]?.transactionHashs.length === 1
+                ? details.transaction(r[t as ProtocolTypeKey]?.transactionHashs[0], "protocols")
                 : "#"
             }
           >
-            {r[t as ProtocolTypeKey]?.status === "ADDED" ||
-            (r[t as ProtocolTypeKey]?.status === "UPDATED" && !r[t as ProtocolTypeKey]?.transactionHash) ? (
+            {(r[t as ProtocolTypeKey]?.status === "ADDED" || r[t as ProtocolTypeKey]?.status === "UPDATED") &&
+            r[t as ProtocolTypeKey]?.transactionHashs &&
+            r[t as ProtocolTypeKey]?.transactionHashs.length === 0 ? (
               <CustomTooltip title="No transaction">
                 <Box>
                   {r[t as ProtocolTypeKey]
@@ -642,6 +648,7 @@ export const ProtocolParameterHistory = () => {
         handleCloseModal={() => setExplainerText(null)}
         explainerText={explainerText || { content: "", title: "" }}
       />
+      <TxsProtocolModal open={!!selectTxs} onClose={() => setSelectTxs(null)} txs={selectTxs} />
     </Box>
   );
 };

diff --git a/src/types/protocol.d.ts b/src/types/protocol.d.ts
@@ -2,7 +2,7 @@ import { PROTOCOL_TYPE } from "../commons/utils/constants";
 
 type TProtocolItem = {
   time: string;
-  transactionHash: string;
+  transactionHashs: string[];
   value: string | number;
   status: "UPDATED" | "ADDED" | "NOT_EXIST" | "NOT_CHANGE";
 };