From 95d8b3a26f812342519f9e7751a016d3d91a56d2 Mon Sep 17 00:00:00 2001
From: DinhTran <dinh.tran2@sotatek.com>
Date: Fri, 1 Mar 2024 16:02:52 +0700
Subject: [PATCH 1/2] fix: display value cost model in ios

---
 src/commons/utils/helper.ts                                 | 3 +++
 .../TransactionMetadata/ProtocolUpdate/index.tsx            | 5 +++--
 .../TransactionMetadata/ProtocolUpdate/styles.ts            | 6 ++++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/commons/utils/helper.ts b/src/commons/utils/helper.ts
index 27fe247b10..afababd3b5 100644
--- a/src/commons/utils/helper.ts
+++ b/src/commons/utils/helper.ts
@@ -30,6 +30,9 @@ export const getShortHashXs = (address = "", firstpart?: number, lastPart?: numb
   if (address?.length <= 18) return address;
   return address ? `${address.slice(0, firstpart ? firstpart : 7)}...${address.slice(-(lastPart ? lastPart : 5))}` : "";
 };
+export const getShortValue = (address = "", length = 50) => {
+  return address.slice(0, length);
+};
 
 export const LARGE_NUMBER_ABBREVIATIONS = ["", "K", "M", "B", "T", "q", "Q", "s", "S"];
 
diff --git a/src/components/TransactionDetail/TransactionMetadata/ProtocolUpdate/index.tsx b/src/components/TransactionDetail/TransactionMetadata/ProtocolUpdate/index.tsx
index 773c7273a0..a26f229e75 100644
--- a/src/components/TransactionDetail/TransactionMetadata/ProtocolUpdate/index.tsx
+++ b/src/components/TransactionDetail/TransactionMetadata/ProtocolUpdate/index.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { Column } from "src/components/commons/Table";
 import ParseScriptModal from "src/components/ParseScriptModal";
 import CustomTooltip from "src/components/commons/CustomTooltip";
+import { getShortValue } from "src/commons/utils/helper";
 
 import { LimitCell, TableProtocol, UpdatedValue, Wrapper } from "./styles";
 
@@ -39,7 +40,7 @@ const ProtocolUpdate: React.FC<IProps> = ({ data }) => {
               onClick={() => r.protocol === "costModel" && setCostModelScript(r.oldValue?.toString() || "")}
               color={({ palette }) => (r.protocol === "costModel" ? palette.primary.main : "unset")}
             >
-              <LimitCell> {r.oldValue}</LimitCell>
+              <LimitCell>{getShortValue(r.oldValue?.toString())}</LimitCell>
             </UpdatedValue>
           </CustomTooltip>
         );
@@ -59,7 +60,7 @@ const ProtocolUpdate: React.FC<IProps> = ({ data }) => {
               onClick={() => r.protocol === "costModel" && setCostModelScript(r.value?.toString() || "")}
               color={({ palette }) => (r.protocol === "costModel" ? palette.primary.main : "unset")}
             >
-              <LimitCell>{r.value}</LimitCell>
+              <LimitCell>{getShortValue(r.value?.toString())}</LimitCell>
             </UpdatedValue>
           </CustomTooltip>
         );
diff --git a/src/components/TransactionDetail/TransactionMetadata/ProtocolUpdate/styles.ts b/src/components/TransactionDetail/TransactionMetadata/ProtocolUpdate/styles.ts
index f2723c33f5..2020d44642 100644
--- a/src/components/TransactionDetail/TransactionMetadata/ProtocolUpdate/styles.ts
+++ b/src/components/TransactionDetail/TransactionMetadata/ProtocolUpdate/styles.ts
@@ -47,4 +47,10 @@ export const LimitCell = styled(Box)`
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  ${({ theme }) => theme.breakpoints.between("xs", "sm")} {
+    max-width: 120px;
+  }
+  ${({ theme }) => theme.breakpoints.between("sm", "md")} {
+    max-width: 220px;
+  }
 `;

From e415cf452e46e692e51d1efb270509752095b7e7 Mon Sep 17 00:00:00 2001
From: dinhtran <dinhtk223@gmail.com>
Date: Mon, 4 Mar 2024 15:00:13 +0700
Subject: [PATCH 2/2] fix: fix display protocol data

---
 .../TransactionMetadata/ProtocolUpdate/styles.ts           | 7 ++++++-
 src/pages/ProtocolParameter/index.tsx                      | 4 ++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/TransactionDetail/TransactionMetadata/ProtocolUpdate/styles.ts b/src/components/TransactionDetail/TransactionMetadata/ProtocolUpdate/styles.ts
index 2020d44642..909d280633 100644
--- a/src/components/TransactionDetail/TransactionMetadata/ProtocolUpdate/styles.ts
+++ b/src/components/TransactionDetail/TransactionMetadata/ProtocolUpdate/styles.ts
@@ -37,7 +37,12 @@ export const UpdatedValue = styled(Box)(() => ({
 export const Wrapper = styled(Box)(({ theme }) => ({
   border: `1px solid ${theme.isDark ? theme.palette.secondary[700] : theme.palette.primary[200]}`,
   borderRadius: theme.spacing(2),
-  overflow: "hidden"
+  overflow: "hidden",
+  "& .table-wrapper": {
+    [theme.breakpoints.down("sm")]: {
+      paddingBottom: "8px"
+    }
+  }
 }));
 
 export const LimitCell = styled(Box)`
diff --git a/src/pages/ProtocolParameter/index.tsx b/src/pages/ProtocolParameter/index.tsx
index d8151efe57..4669e39ffc 100644
--- a/src/pages/ProtocolParameter/index.tsx
+++ b/src/pages/ProtocolParameter/index.tsx
@@ -28,7 +28,7 @@ import InfoSolidIcon from "src/components/commons/InfoSolidIcon";
 import { details, lists } from "src/commons/routers";
 import { API } from "src/commons/utils/api";
 import { PROTOCOL_TYPE } from "src/commons/utils/constants";
-import { formatDateTimeLocal } from "src/commons/utils/helper";
+import { formatDateTimeLocal, getShortValue } from "src/commons/utils/helper";
 import ParseScriptModal from "src/components/ParseScriptModal";
 import Card from "src/components/commons/Card";
 import DateRangeModal from "src/components/commons/CustomFilter/DateRangeModal";
@@ -233,7 +233,7 @@ const ProtocolParameter: React.FC = () => {
               textOverflow={"ellipsis"}
               color={({ palette }) => (isModalType ? palette.primary.main : "unset")}
             >
-              {r.value}
+              {getShortValue(r.value)}
             </Box>
           </Box>
         );