Merge pull request #3686 from cardano-foundation/feat/MET-2104-add-su…

…btitle-dreps-pools-2 feat: MET-2104 add subtitle of dreps and pools
cardano-foundation · Jul 15, 2024 · 54fd7c8 · 54fd7c8
2 parents 155b49c + ddf4c7f
commit 54fd7c8
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 65 deletions.
diff --git a/src/components/DelegationPool/DelegationList/index.tsx b/src/components/DelegationPool/DelegationList/index.tsx
@@ -1,23 +1,23 @@
 import { Box } from "@mui/material";
+import { isNumber, isUndefined, omitBy } from "lodash";
 import { stringify } from "qs";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { useHistory } from "react-router-dom";
-import { isUndefined, omitBy, isNumber } from "lodash";
 
 import useFetchList from "src/commons/hooks/useFetchList";
 import usePageInfo from "src/commons/hooks/usePageInfo";
 import { details } from "src/commons/routers";
 import { API } from "src/commons/utils/api";
+import { CONWAY_ERE_FEILD, FF_GLOBAL_IS_CONWAY_ERA } from "src/commons/utils/constants";
 import { formatADAFull, formatPercent, getShortHash } from "src/commons/utils/helper";
 import ADAicon from "src/components/commons/ADAIcon";
 import CustomFilterMultiRange from "src/components/commons/CustomFilterMultiRange";
 import CustomTooltip from "src/components/commons/CustomTooltip";
 import Table, { Column } from "src/components/commons/Table";
-import { CONWAY_ERE_FEILD, FF_GLOBAL_IS_CONWAY_ERA } from "src/commons/utils/constants";
 
-import { DelegationContainer, PoolName, TopSearchContainer } from "./styles";
+import { DelegationContainer, ListOfPools, PoolName, TopSearchContainer } from "./styles";
 
 const DelegationLists: React.FC = () => {
   const { t } = useTranslation();
@@ -225,7 +225,8 @@ const DelegationLists: React.FC = () => {
   return (
     <DelegationContainer>
       {!error && (
-        <TopSearchContainer sx={{ justifyContent: "end" }}>
+        <TopSearchContainer sx={{ justifyContent: "space-between" }}>
+          <ListOfPools>{t("pool.listOfPools")}</ListOfPools>
           <Box display="flex" gap="10px">
             <CustomFilterMultiRange />
           </Box>

diff --git a/src/components/DelegationPool/DelegationList/styles.ts b/src/components/DelegationPool/DelegationList/styles.ts
@@ -76,6 +76,7 @@ export const TopSearchContainer = styled(Box)`
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15px;
+  margin-top: 48px;
 `;
 
 export const ShowRetiredPools = styled(Box)`
@@ -137,3 +138,9 @@ export const AntSwitch = styled(Switch)(({ theme }) => ({
     boxSizing: "border-box"
   }
 }));
+
+export const ListOfPools = styled(Box)`
+  font-size: 24px;
+  font-weight: 700;
+  color: ${({ theme }) => theme.palette.secondary.light};
+`;
diff --git a/src/components/Dreps/DrepsList/index.tsx b/src/components/Dreps/DrepsList/index.tsx
@@ -1,32 +1,31 @@
-import { Box, Button, useTheme } from "@mui/material";
-import { useTranslation } from "react-i18next";
-import { useRef, useState } from "react";
-import { useHistory } from "react-router-dom";
-import { useSelector } from "react-redux";
-import { stringify } from "qs";
+import { Box, Button } from "@mui/material";
 import { pickBy } from "lodash";
 import moment from "moment";
+import { stringify } from "qs";
+import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import { useHistory } from "react-router-dom";
 
 import useFetchList from "src/commons/hooks/useFetchList";
+import usePageInfo from "src/commons/hooks/usePageInfo";
 import { details } from "src/commons/routers";
 import { API } from "src/commons/utils/api";
 import { formatADAFull, formatDateTimeLocal, formatPercent, getShortHash } from "src/commons/utils/helper";
-import CustomTooltip from "src/components/commons/CustomTooltip";
-import Table, { Column } from "src/components/commons/Table";
-import usePageInfo from "src/commons/hooks/usePageInfo";
-import { StakeKeyStatus } from "src/components/commons/DetailHeader/styles";
-import ADAicon from "src/components/commons/ADAIcon";
 import { ActionMetadataModalConfirm } from "src/components/GovernanceVotes";
-import DatetimeTypeTooltip from "src/components/commons/DatetimeTypeTooltip";
+import ADAicon from "src/components/commons/ADAIcon";
 import { DATETIME_PARTTEN } from "src/components/commons/CustomFilter/DateRangeModal";
+import CustomTooltip from "src/components/commons/CustomTooltip";
+import DatetimeTypeTooltip from "src/components/commons/DatetimeTypeTooltip";
+import { StakeKeyStatus } from "src/components/commons/DetailHeader/styles";
+import Table, { Column } from "src/components/commons/Table";
 
-import { PoolName, TopSearchContainer } from "./styles";
 import DrepFilter from "../DrepFilter";
+import { ListOfDreps, PoolName, TopSearchContainer } from "./styles";
 
 const DrepsList: React.FC = () => {
   const { t } = useTranslation();
   const history = useHistory();
-  const theme = useTheme();
   const { pageInfo, setSort } = usePageInfo();
   const [metadataUrl, setMetadataUrl] = useState("");
   const tableRef = useRef<HTMLDivElement>(null);
@@ -94,27 +93,30 @@ const DrepsList: React.FC = () => {
       ),
       key: "anchorLink",
       minWidth: "100px",
-      render: (r) => (
-        <CustomTooltip title={r.anchorUrl ? r.anchorUrl : undefined} sx={{ width: 150 }}>
-          <Box
-            data-testid="drepList.anchorLinkValue"
-            component={Button}
-            textTransform={"lowercase"}
-            fontWeight={400}
-            display={(r.anchorUrl || "").length > 20 ? "inline-block" : "inline"}
-            width={"150px"}
-            textOverflow={"ellipsis"}
-            whiteSpace={"nowrap"}
-            overflow={"hidden"}
-            color={(theme) => `${theme.palette.primary.main} !important`}
-            onClick={() => setMetadataUrl(r.anchorUrl)}
-            disableRipple={true}
-            sx={{ ":hover": { background: "none" } }}
-          >
-            {`${r.anchorUrl || ""}`}
-          </Box>
-        </CustomTooltip>
-      )
+      render: (r) =>
+        r.anchorUrl != null ? (
+          <CustomTooltip title={r.anchorUrl ? r.anchorUrl : undefined} sx={{ width: 150 }}>
+            <Box
+              data-testid="drepList.anchorLinkValue"
+              component={Button}
+              textTransform={"lowercase"}
+              fontWeight={400}
+              display={(r.anchorUrl || "").length > 20 ? "inline-block" : "inline"}
+              width={"150px"}
+              textOverflow={"ellipsis"}
+              whiteSpace={"nowrap"}
+              overflow={"hidden"}
+              color={(theme) => `${theme.palette.primary.main} !important`}
+              onClick={() => setMetadataUrl(r.anchorUrl)}
+              disableRipple={true}
+              sx={{ ":hover": { background: "none" } }}
+            >
+              {`${r.anchorUrl || ""}`}
+            </Box>
+          </CustomTooltip>
+        ) : (
+          <Box padding={"6px 8px"}>{t("common.N/A")}</Box>
+        )
     },
     {
       title: (
@@ -124,21 +126,24 @@ const DrepsList: React.FC = () => {
       ),
       key: "pu.anchorHash",
       minWidth: "120px",
-      render: (r) => (
-        <CustomTooltip title={r.anchorHash ? r.anchorHash : undefined}>
-          <Box
-            data-testid="drepList.anchorHashValue"
-            component={"span"}
-            display={"inline-block"}
-            width={"150px"}
-            textOverflow={"ellipsis"}
-            whiteSpace={"nowrap"}
-            overflow={"hidden"}
-          >
-            {r.anchorHash}
-          </Box>
-        </CustomTooltip>
-      )
+      render: (r) =>
+        r.anchorHash != null ? (
+          <CustomTooltip title={r.anchorHash ? r.anchorHash : undefined}>
+            <Box
+              data-testid="drepList.anchorHashValue"
+              component={"span"}
+              display={"inline-block"}
+              width={"150px"}
+              textOverflow={"ellipsis"}
+              whiteSpace={"nowrap"}
+              overflow={"hidden"}
+            >
+              {r.anchorHash}
+            </Box>
+          </CustomTooltip>
+        ) : (
+          t("common.N/A")
+        )
     },
     {
       title: (
@@ -259,12 +264,10 @@ const DrepsList: React.FC = () => {
       {!error && (
         <TopSearchContainer
           sx={{
-            justifyContent: "end",
-            [theme.breakpoints.down("sm")]: {
-              alignItems: "flex-end"
-            }
+            justifyContent: "space-between"
           }}
         >
+          <ListOfDreps>{t("dreps.listOfDreps")}</ListOfDreps>
           <Box display="flex" gap="10px">
             <DrepFilter loading={fetchData.loading} />
           </Box>

diff --git a/src/components/Dreps/DrepsList/styles.ts b/src/components/Dreps/DrepsList/styles.ts
@@ -70,9 +70,10 @@ export const TopSearchContainer = styled(Box)`
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15px;
+  margin-top: 48px;
   ${({ theme }) => theme.breakpoints.down("sm")} {
-    flex-direction: column;
-    align-items: flex-start;
+    // flex-direction: column;
+    // align-items: flex-start;
     gap: 15px;
   }
 `;
@@ -135,3 +136,9 @@ export const AntSwitch = styled(Switch)(({ theme }) => ({
     boxSizing: "border-box"
   }
 }));
+
+export const ListOfDreps = styled(Box)`
+  font-size: 24px;
+  font-weight: 700;
+  color: ${({ theme }) => theme.palette.secondary.light};
+`;
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -324,6 +324,7 @@
   "dreps.participationRate": "Participation Rate",
   "dreps.registrationDate": "Registration Date",
   "dreps.lastUpdated": "Last Updated Date",
+  "dreps.listOfDreps": "List of DReps",
   "common.searchPools": "Search Pools",
   "glossary.poolSize": "Pool size",
   "glossary.declaredPledge": "Declared Pledge ",
@@ -1122,8 +1123,9 @@
   "pool.poolSearchName": "Search Name, Ticker",
   "pool.metadataSearch": "Metadata Search",
   "pool.searchMetadata": "Search Metadata",
+  "pool.listOfPools": "List of Pools",
   "protocolParameters.network": "Network parameters ensure efficient data transmission and processing within the Cardano blockchain.\nTo learn more about the different Network Parameters, click ",
-  "protocolParameters.economic":"Economic parameters influence the financial aspects of the Cardano network.\nTo learn more about the different Economic Parameters, click ",
+  "protocolParameters.economic": "Economic parameters influence the financial aspects of the Cardano network.\nTo learn more about the different Economic Parameters, click ",
   "protocolParameters.technical": "Technical parameters guide the operation and performance of staking pools and Plutus scripts.\nTo learn more about the different Technical Parameters, click ",
   "protocolParameters.governance": "Governance parameters support the decentralized decision-making process.\nTo learn more about the different Governance Parameters, click ",
   "smartContract.plutusDes.title": "What Are Plutus Scripts?",

diff --git a/src/pages/DelegationPools/index.tsx b/src/pages/DelegationPools/index.tsx
@@ -3,7 +3,7 @@ import { useEffect } from "react";
 import OverViews from "src/components/DelegationPool/DelegationOverview";
 import DelegationLists from "src/components/DelegationPool/DelegationList";
 
-import { Horizon, StyledContainer } from "./styles";
+import { StyledContainer } from "./styles";
 
 const Delegations = () => {
   useEffect(() => {
@@ -13,7 +13,6 @@ const Delegations = () => {
   return (
     <StyledContainer>
       <OverViews />
-      <Horizon />
       <DelegationLists />
     </StyledContainer>
   );

diff --git a/src/pages/Dreps/index.tsx b/src/pages/Dreps/index.tsx
@@ -5,7 +5,7 @@ import { FF_GLOBAL_IS_CONWAY_ERA } from "src/commons/utils/constants";
 import DrepsList from "src/components/Dreps/DrepsList";
 
 import NotFound from "../NotFound";
-import { Horizon, StyledContainer } from "./styles";
+import { StyledContainer } from "./styles";
 
 const Dreps = () => {
   useEffect(() => {
@@ -18,7 +18,6 @@ const Dreps = () => {
   return (
     <StyledContainer>
       <OverViews />
-      <Horizon />
       <DrepsList />
     </StyledContainer>
   );