Fix : display value cost model

src/commons/utils/helper.ts

@@ -31,6 +31,10 @@ export const getShortHashXs = (address = "", firstpart?: number, lastPart?: numb
   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"];
 
 export const formatPrice = (value?: string | number, abbreviations: string[] = LARGE_NUMBER_ABBREVIATIONS): string => {

src/components/TransactionDetail/TransactionMetadata/ProtocolUpdate/index.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from "react";
 import { Box, Button } from "@mui/material";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { Column } from "src/components/commons/Table";
+import { getShortValue } from "src/commons/utils/helper";
 import ParseScriptModal from "src/components/ParseScriptModal";
 import CustomTooltip from "src/components/commons/CustomTooltip";
+import { Column } from "src/components/commons/Table";
 
 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>
         );

src/components/TransactionDetail/TransactionMetadata/ProtocolUpdate/styles.ts

@@ -42,9 +42,16 @@ export const Wrapper = styled(Box)(({ theme }) => ({
 
 export const LimitCell = styled(Box)`
   display: inline-block;
-  width: 100%;
-  max-width: 320px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  display: block;
+  width: 100%;
+  max-width: 320px;
+  ${({ theme }) => theme.breakpoints.between("xs", "sm")} {
+    max-width: 120px;
+  }
+  ${({ theme }) => theme.breakpoints.between("sm", "md")} {
+    max-width: 220px;
+  }
 `;