Merge branch 'dev-test' into feat/MET-1957-pool-details-views

cardano-foundation · Mar 28, 2024 · 2525388 · 2525388
2 parents f02a529 + 42daf75
commit 2525388
Show file tree

Hide file tree

Showing 38 changed files with 9,984 additions and 2,819 deletions.
diff --git a/.gitignore b/.gitignore
@@ -19,6 +19,7 @@
 .env.test.local
 .env.production.local
 env.global.js
+yarn.lock
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/commons/resources/index.ts b/src/commons/resources/index.ts
@@ -39,7 +39,6 @@ import MediumIcon from "./icons/medium.svg";
 import RocketBackground from "./icons/rocket-bg.svg";
 import USDIcon from "./icons/usd.svg";
 import SeeMoreIcon from "./icons/seemore.svg";
-import SignOut from "./icons/sign-out.svg";
 import FlintIcon from "./icons/flint.svg";
 import NamiIcon from "./icons/nami.svg";
 import EternlIcon from "./icons/eternl.svg";
@@ -87,6 +86,10 @@ import DownRedDarkmode from "./icons/downRedDark.svg";
 import DownRedUtxoDarkmode from "./icons/downUtxoRedDark.svg";
 import ArrowUpIcon from "./icons/arrow-up.svg";
 import ArrowUpDarkIcon from "./icons/arrow-up-dark.svg";
+import DisableArrowUpLightIcon from "./icons/disable-arrow-up-light.svg";
+import DisableArrowDownLightIcon from "./icons/disable-arrow-down-light.svg";
+import DisableArrowUpDarkIcon from "./icons/disable-arrow-up-dark.svg";
+import DisableArrowDownDarkIcon from "./icons/disable-arrow-down-dark.svg";
 import ArrowDownIcon from "./icons/arrow-down-red.svg";
 import ArrowDownDarkIcon from "./icons/arrow-down-red-dark.svg";
 import PolicyDark from "./icons/policy-dark.svg";
@@ -98,10 +101,6 @@ import PoolSizeDarkIcon from "./images/PoolSizeDark.png";
 import PoolSizeLightIcon from "./images/PoolSizeLight.png";
 import DelegatingToDarkIcon from "./images/DelegatingToDark.png";
 import RewardsWithdrawDarkIcon from "./images/RewardsWithdrawDark.png";
-import DisableArrowUpLightIcon from "./icons/disable-arrow-up-light.svg";
-import DisableArrowDownLightIcon from "./icons/disable-arrow-down-light.svg";
-import DisableArrowUpDarkIcon from "./icons/disable-arrow-up-dark.svg";
-import DisableArrowDownDarkIcon from "./icons/disable-arrow-down-dark.svg";
 import DeregistrationDarkIcon from "./icons/deregistration-icon-dark.svg";
 import DeregistrationLightIcon from "./icons/deregistration-icon-light.svg";
 import RegistrationDarkIcon from "./icons/registration-icon-dark.svg";
@@ -146,6 +145,7 @@ import LinkOff from "./icons/link-off.svg";
 import User2 from "./icons/user2.svg";
 import WhiteSearchIcon from "./icons/white-search-icon.svg";
 import CopyOutlineIcon from "./icons/copy-outline.svg";
+import SignOut from "./icons/sign-out.svg";
 //only component
 
 import SignOutComponent from "./icons/sign-out.svg?react";
@@ -207,12 +207,10 @@ import DelegatorsDrepIcon from "./icons/delegatorsDrep.svg?react";
 import LifetimeVoteDrepIcon from "./icons/liifetimeVoteDrep.svg?react";
 import governanceVotesIcon from "./icons/governanceVotes.svg?react";
 import StakingLifecycleComponent from "./icons/menus/stakingLifecycle.svg?react";
+import VotesIcon from "./icons/votes.svg?react";
 import VotesYesIcon from "./icons/voteYes.svg?react";
 import VotesNoIcon from "./icons/voteNo.svg?react";
 import VotesAbstainIcon from "./icons/voteAbstain.svg?react";
-import DropdownIcon from "./icons/dropdown.svg?react";
-import DisclaimerIcon from "./icons/DisclaimerIcon.svg?react";
-import VotesIcon from "./icons/votes.svg?react";
 import VotesNoneIcon from "./icons/voteNone.svg?react";
 import ArrowLeftWhiteIcon from "./icons/arrow-left-white.svg?react";
 import GovernanceIdIcon from "./icons/governanceId.svg?react";
@@ -225,6 +223,8 @@ import ExpiryIcon from "./icons/expiry-date.svg?react";
 import AnchorTextIcon from "./icons/anchor-text.svg?react";
 import BlackWarningIcon from "./icons/warning-black.svg?react";
 import BlackCircleIcon from "./icons/black-cirle-copy.svg?react";
+import DropdownIcon from "./icons/dropdown.svg?react";
+import DisclaimerIcon from "./icons/DisclaimerIcon.svg?react";
 import RepeatVotesIcon from "./icons/repeat-votes.svg?react";
 // eslint-disable-next-line import/order
 import TotalOutput from "./icons/totalOutput.svg?react";
@@ -353,6 +353,7 @@ export {
   DeregistrationLightIcon,
   RegistrationDarkIcon,
   RegistrationLightIcon,
+
   // React component
   ExchangeIcon,
   PolygonDarkIcon,
@@ -435,12 +436,12 @@ export {
   DelegatorsDrepIcon,
   LifetimeVoteDrepIcon,
   governanceVotesIcon,
-  DisclaimerIcon,
-  DropdownIcon,
   VotesIcon,
   VotesYesIcon,
   VotesNoIcon,
   VotesAbstainIcon,
+  DisclaimerIcon,
+  DropdownIcon,
   VotesNoneIcon,
   ArrowLeftWhiteIcon,
   GovernanceIdIcon,
@@ -816,9 +817,6 @@ export {
   CheckedCIPIcon,
   SmallInfoIcon,
   CIP60WarningIcon,
-  PlusSquareIcon,
-  CloseSquareIcon,
-  MinusSquareIcon,
   OpenTimeLock,
   LockedTimelock,
   SigNative,
@@ -828,5 +826,8 @@ export {
   NativeType,
   NativeOneMint,
   BolsiniAddress,
-  DrawerClose
+  DrawerClose,
+  PlusSquareIcon,
+  CloseSquareIcon,
+  MinusSquareIcon
 };
diff --git a/src/commons/utils/helper.ts b/src/commons/utils/helper.ts
@@ -30,6 +30,7 @@ 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);
 };
@@ -266,7 +267,6 @@ export function validateTokenExpired() {
     return now.isBefore(exp);
   } catch (e) {
     removeAuthInfo();
-    return false;
   }
 }
 

diff --git a/src/components/Contracts/common/styles.ts b/src/components/Contracts/common/styles.ts
@@ -107,6 +107,12 @@ export const CLButton = styled("button")`
   }
 `;
 
+export const ContractAddressLabel = styled(Typography)`
+  font-weight: 600;
+  text-align: left;
+  color: ${({ theme }) => theme.palette.secondary.light};
+`;
+
 export const WrapLabel = styled(Typography)(({ theme }) => ({
   fontWeight: 600,
   color: theme.palette.secondary.light,

diff --git a/src/components/DelegationDetail/DelegationDetailOverview/styles.ts b/src/components/DelegationDetail/DelegationDetailOverview/styles.ts
@@ -43,4 +43,9 @@ export const FixedCostBox = styled(Box)`
   & > svg {
     margin-top: -2px;
   }
+  ${({ theme }) => theme.breakpoints.down("sm")} {
+    & {
+      display: inline;
+    }
+  }
 `;
diff --git a/src/components/DelegationPool/DelegationList/index.tsx b/src/components/DelegationPool/DelegationList/index.tsx
@@ -1,5 +1,4 @@
 import { Box, useTheme } from "@mui/material";
-import { get } from "lodash";
 import { useTranslation } from "react-i18next";
 import { useEffect, useRef, useState } from "react";
 import { useHistory } from "react-router-dom";
@@ -23,7 +22,6 @@ import {
   SearchContainer,
   ShowRetiredPools,
   StyledInput,
-  StyledLinearProgress,
   SubmitButton,
   TopSearchContainer
 } from "./styles";
@@ -36,10 +34,11 @@ const DelegationLists: React.FC = () => {
   const [value, setValue] = useState("");
   const [search, setSearch] = useState(decodeURIComponent(tickerNameSearch));
   const { pageInfo, setSort } = usePageInfo();
-  const [isShowRetired, setIsRetired] = useState(!!pageInfo.retired);
+  const [isShowRetired, setIsRetired] = useState(/^true$/i.test(pageInfo.retired));
 
   const tableRef = useRef<HTMLDivElement>(null);
   const blockKey = useSelector(({ system }: RootState) => system.blockKey);
+
   useEffect(() => {
     if (tickerNameSearch !== search) history.replace({ search: stringify({ ...pageInfo, page: 1 }) });
     if (tickerNameSearch) {
@@ -63,14 +62,14 @@ const DelegationLists: React.FC = () => {
     }
   }, [fetchData.initialized, history]);
 
-  const columns: Column<Delegators & { adaFake: number; feeFake: number }>[] = [
+  const columns: Column<Delegators>[] = [
     {
       title: t("glossary.pool"),
       key: "poolName",
       minWidth: "200px",
       maxWidth: "200px",
       render: (r) => (
-        <CustomTooltip title={r.poolName || r.poolId}>
+        <CustomTooltip title={r.tickerName || ""}>
           <PoolName to={{ pathname: details.delegation(r.poolId), state: { fromPath } }}>
             <Box component={"span"} textOverflow={"ellipsis"} whiteSpace={"nowrap"} overflow={"hidden"}>
               {r.poolName || `${getShortHash(r.poolId)}`}
@@ -79,15 +78,6 @@ const DelegationLists: React.FC = () => {
         </CustomTooltip>
       )
     },
-    {
-      title: t("common.ticker") + " ",
-      key: "tickerName",
-      minWidth: "120px",
-      render: (r) => <Box component={"span"}>{r.tickerName}</Box>,
-      sort: ({ columnKey, sortValue }) => {
-        sortValue ? setSort(`${columnKey},${sortValue}`) : setSort("");
-      }
-    },
     {
       title: (
         <Box component={"span"}>
@@ -116,19 +106,12 @@ const DelegationLists: React.FC = () => {
     },
     {
       title: t("glossary.saturation"),
-      minWidth: "200px",
+      minWidth: "120px",
       key: "saturation",
       render: (r) =>
         r.saturation != null ? (
-          <Box display="flex" alignItems="center" justifyContent={"end"}>
-            <Box component={"span"} mr={1}>
-              {formatPercent(r.saturation / 100) || `0%`}
-            </Box>
-            <StyledLinearProgress
-              variant="determinate"
-              saturation={r.saturation}
-              value={r.saturation > 100 ? 100 : get(r, "saturation", 0)}
-            />
+          <Box component={"span"} mr={1}>
+            {formatPercent(r.saturation / 100) || `0%`}
           </Box>
         ) : (
           t("common.N/A")
@@ -137,15 +120,6 @@ const DelegationLists: React.FC = () => {
         sortValue ? setSort(`${columnKey},${sortValue}`) : setSort("");
       }
     },
-    {
-      title: t("glossary.numberOfDelegators"),
-      minWidth: "200px",
-      key: "numberDelegators",
-      render: (r) => <Box component={"span"}>{r.numberDelegators || 0}</Box>,
-      sort: ({ columnKey, sortValue }) => {
-        sortValue ? setSort(`${columnKey},${sortValue}`) : setSort("");
-      }
-    },
     {
       title: t("glossary.blocksInEpoch"),
       key: "epochBlock",
@@ -165,28 +139,20 @@ const DelegationLists: React.FC = () => {
       }
     },
     {
-      title: (
-        <Box component={"span"} sx={{ textWrap: "nowrap" }}>
-          {t("glossary.fixedCost")} (<ADAicon />)
-        </Box>
-      ),
-      key: "pu.fixedCost",
+      title: t("votingPower") + " ",
+      key: "votingPower",
       minWidth: "120px",
-      render: (r) => (
-        <Box component="span">
-          {formatADAFull(r.feeAmount)}&nbsp;
-          <ADAicon />
-        </Box>
-      ),
+      render: (r) => (r.votingPower != null ? `${r.votingPower}` : t("common.N/A")),
       sort: ({ columnKey, sortValue }) => {
         sortValue ? setSort(`${columnKey},${sortValue}`) : setSort("");
       }
     },
     {
-      title: t("margin") + " ",
-      key: "margin",
+      title: t("governanceParticipationRate") + " ",
+      key: "governanceParticipationRate",
       minWidth: "120px",
-      render: (r) => `${formatPercent(r.feePercent)}`,
+      render: (r) =>
+        r.governanceParticipationRate != null ? `${formatPercent(r.governanceParticipationRate)}` : t("common.N/A"),
       sort: ({ columnKey, sortValue }) => {
         sortValue ? setSort(`${columnKey},${sortValue}`) : setSort("");
       }

diff --git a/src/components/DynamicEllipsisText/index.tsx b/src/components/DynamicEllipsisText/index.tsx
@@ -72,6 +72,7 @@ const DynamicEllipsisText = ({
   sx?: SxProps<Theme>;
   customTruncateFold?: [number, number];
   isNoLimitPixel?: boolean;
+  isSeparateCopyIcon?: boolean;
   whiteSpace?: "nowrap" | "normal";
 }) => {
   const randomIdRef = useRef(`ELIPSIS_${useId()}`);

diff --git a/src/components/StakeDetail/ModalAllAddress/index.tsx b/src/components/StakeDetail/ModalAllAddress/index.tsx
@@ -58,6 +58,7 @@ const ModalAllAddress: React.FC<ModalAllAddressProps> = ({ stake, ...props }) =>
       handleCloseModal={props.onClose}
       title={t("common.addressList")}
       width={"600px"}
+      height={"auto"}
       contentStyle={{ overflowY: "unset" }}
       isCenterWithoutPosition={true}
     >

diff --git a/src/components/TabularView/StakeTab/index.tsx b/src/components/TabularView/StakeTab/index.tsx
@@ -40,7 +40,7 @@ const StakeTab: React.FC<StackTabProps> = ({ tabs, tabActive, onChangeTab, tabsR
       if (newExpanded) {
         setTimeout(() => {
           tabRef?.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
-        }, 100);
+        }, 150);
         tabRef?.current?.removeEventListener("transitionend", handleTransitionEnd);
       }
     };

diff --git a/src/components/TokenDetail/TokenTableData/index.tsx b/src/components/TokenDetail/TokenTableData/index.tsx
@@ -5,8 +5,8 @@ import { useHistory, useParams } from "react-router-dom";
 
 import { details } from "src/commons/routers";
 import CustomAccordion, { TTab } from "src/components/commons/CustomAccordion";
+import { UnionTokenIcon, PeopleIcon, TransactionIcon, MetadataIcon } from "src/commons/resources";
 
-import { MetadataIcon, PeopleIcon, TransactionIcon, UnionTokenIcon } from "../../../commons/resources";
 import TokenMetaData from "./TokenMetadata";
 import TokenMinting from "./TokenMinting";
 import TokenTopHolder from "./TokenTopHolder";
@@ -75,7 +75,6 @@ const TokenTableData: React.FC<ITokenTableData> = ({
   const handleTabChange = (tab: string) => {
     history.replace(details.token(tokenId, tab));
   };
-
   return (
     <Box mt={3}>
       <CustomAccordion tabs={tabs} onTabChange={handleTabChange} loading={loading} />

diff --git a/src/components/TransactionDetail/TransactionMetadata/Collaterals/index.tsx b/src/components/TransactionDetail/TransactionMetadata/Collaterals/index.tsx
@@ -147,6 +147,7 @@ const ItemCollateral = ({ data, type }: { data: CollateralResponses[]; type: "in
                             fontWeight="bold"
                             fontFamily={"var(--font-family-text)"}
                             color={(theme) => theme.palette.primary.main}
+                            width={"100%"}
                           >
                             <EllipsisContainer>
                               <DynamicEllipsisText

diff --git a/src/components/TransactionDetail/TransactionMetadata/Metadata/BolnisiWineDrawer.tsx b/src/components/TransactionDetail/TransactionMetadata/Metadata/BolnisiWineDrawer.tsx
@@ -2,8 +2,8 @@ import React, { useEffect, useState } from "react";
 import { Box, Button, CircularProgress, IconButton, Typography, alpha, styled, useTheme } from "@mui/material";
 import { useHistory, useLocation, useParams } from "react-router-dom";
 import { IoMdClose } from "react-icons/io";
-import { useSelector } from "react-redux";
 import { t } from "i18next";
+import { useSelector } from "react-redux";
 
 import { BolsiniAddress, InvalidIcon, SeeMoreIconHome, VerifiedIcon } from "src/commons/resources";
 import { details } from "src/commons/routers";

diff --git a/src/components/TransactionDetail/TransactionMetadata/PoolCertificate/StakeKeyBox.tsx b/src/components/TransactionDetail/TransactionMetadata/PoolCertificate/StakeKeyBox.tsx
@@ -94,7 +94,7 @@ const StakeKeyBox = ({ data }: TProps) => {
                       }}
                     >
                       {value.map((item) => (
-                        <Box key={item}>
+                        <Box className="ValueItem" key={item}>
                           <TextValue>
                             <Link to={details.stake(item || "")}>
                               <EllipsisContainer width={"100%"}>