Fix : display protocol data

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"];
 

src/components/StakeDetail/StakeTab/Tabs/TransactionTab.tsx

@@ -16,6 +16,7 @@ import Card from "src/components/commons/Card";
 import CustomTooltip from "src/components/commons/CustomTooltip";
 import DropdownTokens, { TokenLink } from "src/components/commons/DropdownTokens";
 import Table, { Column } from "src/components/commons/Table";
+import { useScreen } from "src/commons/hooks/useScreen";
 
 import { Img, StyledContainer, StyledLink } from "./styles";
 
@@ -44,6 +45,7 @@ const TransactionListFull: React.FC<TransactionListFullProps> = ({
   const pageInfo = getPageInfo(search);
   const fetchData = useFetchList<Transactions>(url, pageInfo);
   const theme = useTheme();
+  const { isMobile } = useScreen();
 
   const onClickRow = (e: MouseEvent<Element, globalThis.MouseEvent>, r: Transactions) => {
     let parent: Element | null = e.target as Element;
@@ -191,7 +193,12 @@ const TransactionListFull: React.FC<TransactionListFullProps> = ({
           }));
         }
         return (
-          <Box display={"flex"} alignItems={"center"} maxWidth={{ xs: "200px", md: "250px" }} flexWrap="wrap">
+          <Box
+            display={"flex"}
+            alignItems={"center"}
+            maxWidth={{ xs: isMobile ? "100%" : "200px", md: "250px" }}
+            flexWrap="wrap"
+          >
             {transaction.tokens && transaction.tokens.length === 1 && <TokenLink isSuccess={true} token={tokens[0]} />}
             {transaction.tokens && transaction.tokens.length > 1 && (
               <DropdownTokens isSuccess={true} tokens={tokens} type={type} hideInputLabel hideMathChar />

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>
         );

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)`
@@ -47,4 +52,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;
+  }
 `;

src/components/commons/Epoch/FirstEpoch/index.tsx

@@ -37,27 +37,35 @@ export default function FirstEpoch({ data: currentEpochData, onClick }: IProps)
       icon: ExchangeIcon,
       hideHeader: true,
       title: (
-        <EpochNumber>
+        <EpochNumber sx={{ mt: `${currentEpochData?.status === "SYNCING" ? "30px" : ""}` }}>
           <Box component={"span"}>{currentEpochData?.no}</Box>
         </EpochNumber>
       ),
       value: (
         <Box display={"flex"} alignItems="center" justifyContent={"center"}>
-          <ProgressCircle
-            size={100}
-            pathLineCap="butt"
-            pathWidth={6}
-            trailWidth={6}
-            percent={Number(progress)}
-            trailOpacity={1}
-          >
-            <EpochProgress
-              status={currentEpochData?.status as keyof typeof EPOCH_STATUS}
-            >{`${progress}%`}</EpochProgress>
-            <Status status={currentEpochData?.status as keyof typeof EPOCH_STATUS}>
-              {EPOCH_STATUS_MAPPING[EPOCH_STATUS[currentEpochData?.status]]}
-            </Status>
-          </ProgressCircle>
+          {currentEpochData?.status === "SYNCING" ? (
+            <Box>
+              <Status status={currentEpochData?.status as keyof typeof EPOCH_STATUS}>
+                {EPOCH_STATUS_MAPPING[EPOCH_STATUS[currentEpochData?.status]]}
+              </Status>
+            </Box>
+          ) : (
+            <ProgressCircle
+              size={100}
+              pathLineCap="butt"
+              pathWidth={6}
+              trailWidth={6}
+              percent={Number(progress)}
+              trailOpacity={1}
+            >
+              <EpochProgress
+                status={currentEpochData?.status as keyof typeof EPOCH_STATUS}
+              >{`${progress}%`}</EpochProgress>
+              <Status status={currentEpochData?.status as keyof typeof EPOCH_STATUS}>
+                {EPOCH_STATUS_MAPPING[EPOCH_STATUS[currentEpochData?.status]]}
+              </Status>
+            </ProgressCircle>
+          )}
         </Box>
       )
     },

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>
         );