fix: MET-1647 truncate top ada holder

cardano-foundation · Oct 23, 2023 · 4f64363 · 4f64363
1 parent 0b6539e
commit 4f64363
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 21 deletions.
diff --git a/src/components/TopAddresses/ByADABalance/index.tsx b/src/components/TopAddresses/ByADABalance/index.tsx
@@ -8,11 +8,11 @@ import { SelectChangeEvent } from "@mui/material/Select/SelectInput";
 import useFetchList from "src/commons/hooks/useFetchList";
 import { details } from "src/commons/routers";
 import { API } from "src/commons/utils/api";
-import { formatADAFull, getShortHash, numberWithCommas } from "src/commons/utils/helper";
+import { formatADAFull, numberWithCommas } from "src/commons/utils/helper";
 import ADAicon from "src/components/commons/ADAIcon";
-import CustomTooltip from "src/components/commons/CustomTooltip";
 import FormNowMessage from "src/components/commons/FormNowMessage";
 import Table, { Column } from "src/components/commons/Table";
+import DynamicEllipsisText from "src/components/DynamicEllipsisText";
 
 import { Actions, PageSize, PerPage, SelectMui, StyledLink, StyledMenuItem, TimeDuration } from "./styles";
 
@@ -34,14 +34,12 @@ const TopAddressesByADABalance = () => {
     {
       title: t("glossary.address"),
       key: "address",
-      minWidth: 120,
-
+      minWidth: 170,
+      maxWidth: "35vw",
       render: (r) => (
-        <div>
-          <CustomTooltip title={r.address}>
-            <StyledLink to={details.address(r.address)}>{getShortHash(r.address)}</StyledLink>
-          </CustomTooltip>
-        </div>
+        <StyledLink to={details.address(r.address)}>
+          <DynamicEllipsisText value={r.address} isTooltip />
+        </StyledLink>
       )
     },
     {

diff --git a/src/components/TopAddresses/ByAmountStaked/index.tsx b/src/components/TopAddresses/ByAmountStaked/index.tsx
@@ -7,12 +7,13 @@ import { useSelector } from "react-redux";
 import useFetchList from "src/commons/hooks/useFetchList";
 import { details } from "src/commons/routers";
 import { API } from "src/commons/utils/api";
-import { formatADAFull, getShortHash } from "src/commons/utils/helper";
+import { formatADAFull } from "src/commons/utils/helper";
 import ADAicon from "src/components/commons/ADAIcon";
 import CustomTooltip from "src/components/commons/CustomTooltip";
 import FormNowMessage from "src/components/commons/FormNowMessage";
 import Table from "src/components/commons/Table";
 import { Column } from "src/types/table";
+import DynamicEllipsisText from "src/components/DynamicEllipsisText";
 
 import { Actions, PageSize, PerPage, SelectMui, StyledLink, StyledMenuItem, TimeDuration } from "./styles";
 
@@ -33,23 +34,34 @@ const TopAddressesByAmountStaked = () => {
   const columns: Column<TopDelegator>[] = [
     {
       title: t("common.stakeAddress"),
-      minWidth: 200,
+      minWidth: 170,
       key: "addresses",
+      maxWidth: "30vw",
       render: (r) => (
-        <CustomTooltip title={r.stakeKey}>
-          <StyledLink to={details.stake(r.stakeKey)}>{getShortHash(r.stakeKey)}</StyledLink>
-        </CustomTooltip>
+        <StyledLink to={details.address(r.stakeKey)}>
+          <DynamicEllipsisText value={r.stakeKey} isTooltip />
+        </StyledLink>
       )
     },
     {
       title: t("glossary.pool"),
       key: "pool",
-      maxWidth: 300,
-      render: (r) => (
-        <CustomTooltip title={r.poolName || r.poolId}>
-          <StyledLink to={details.delegation(r.poolId)}>{r.poolName || getShortHash(r.poolId)}</StyledLink>
-        </CustomTooltip>
-      )
+      minWidth: 170,
+      maxWidth: "30vw",
+      render: (r) => {
+        if (r.poolName) {
+          return (
+            <CustomTooltip title={r.poolName}>
+              <StyledLink to={details.delegation(r.poolId)}>{r.poolName}</StyledLink>
+            </CustomTooltip>
+          );
+        }
+        return (
+          <StyledLink to={details.address(r.stakeKey)}>
+            <DynamicEllipsisText value={r.stakeKey} isTooltip />
+          </StyledLink>
+        );
+      }
     },
     {
       title: t("stakeAmount"),

diff --git a/src/components/TransactionDetail/TransactionMetadata/PoolCertificate/styles.ts b/src/components/TransactionDetail/TransactionMetadata/PoolCertificate/styles.ts
@@ -62,6 +62,6 @@ export const ValueItemMultiple = styled(Box)(({ theme }) => ({
   display: "flex",
   width: "80%",
   [theme.breakpoints.up("sm")]: {
-    width: "100%%"
+    width: "100%"
   }
 }));