Merge pull request #3100 from cardano-foundation/fix/display-value-co…

…st-model-transaction fix: display value cost model in ios
cardano-foundation · Mar 4, 2024 · 223bea3 · 223bea3
2 parents aa429e8 + 95d8b3a
commit 223bea3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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;
+  }
 `;