feat: MET-1727 draft UI pool status and certificates draft

cardano-foundation · Nov 14, 2023 · fc94130 · fc94130
1 parent ba96f01
commit fc94130
Show file tree

Hide file tree

Showing 14 changed files with 461 additions and 23 deletions.
diff --git a/src/commons/resources/icons/timeline.svg b/src/commons/resources/icons/timeline.svg
diff --git a/src/commons/resources/index.ts b/src/commons/resources/index.ts
@@ -79,6 +79,7 @@ import RewardAccountIconDarkUrl from "./images/reward-box-icon-dark.png";
 import DelegationToIconUrl from "./images/delegation-to.png";
 import RewardWithdrawnIconUrl from "./images/reward-withdrawn.png";
 import timeIconUrl, { ReactComponent as TimeIconComponent } from "./icons/time.svg";
+import timelineUrl, { ReactComponent as TimelineIconComponent } from "./icons/timeline.svg";
 import exchageIconUrl, { ReactComponent as ExchageIcon } from "./icons/Union.svg";
 import exchageAltIconUrl, { ReactComponent as ExchageAltIcon } from "./icons/exchangeArrow.svg";
 import outputIconUrl, { ReactComponent as OutputIcon } from "./icons/outputIcon.svg";
@@ -207,6 +208,7 @@ export {
   DelegationToIconUrl,
   RewardWithdrawnIconUrl,
   timeIconUrl,
+  timelineUrl,
   exchageIconUrl,
   exchageAltIconUrl,
   ExchageAltIcon,
@@ -249,6 +251,7 @@ export {
   CubeIconComponent,
   SlotIcon,
   TimeIconComponent,
+  TimelineIconComponent,
   OutputIcon,
   User2Component,
   ExchageIcon,

diff --git a/src/commons/utils/constants.ts b/src/commons/utils/constants.ts
@@ -96,6 +96,18 @@ export enum STAKE_KEY_STATUS {
   DEACTIVATED = "DEACTIVATED"
 }
 
+export enum POOL_STATUS {
+  ACTIVE = "ACTIVE",
+  RETIRED = "RETIRED",
+  RETIRING = "RETIRING"
+}
+
+export enum POOL_ACTION_TYPE {
+  POOL_REGISTRATION = "POOL REGISTRATION",
+  POOL_UPDATE = "POOL UPDATE",
+  POOL_DE_REGISTRATION = "POOL DEREGISTRATION"
+}
+
 export enum RECEIVED_REWARDS {
   LEADER = "LEADER",
   MEMBER = "MEMBER",

diff --git a/src/components/DelegationDetail/DelegationDetailInfo/DelegationDetailInfo.test.tsx b/src/components/DelegationDetail/DelegationDetailInfo/DelegationDetailInfo.test.tsx
@@ -3,14 +3,17 @@ import { createBrowserHistory } from "history";
 
 import { fireEvent, render, screen } from "src/test-utils";
 import { details } from "src/commons/routers";
+import { POOL_STATUS } from "src/commons/utils/constants";
 
 import DelegationDetailInfo, { IDelegationDetailInfo } from ".";
 
 const mockProps: IDelegationDetailInfo = {
   data: {
     poolName: "Sample Pool",
+    poolStatus: POOL_STATUS.ACTIVE,
     tickerName: "TICKER",
     poolView: "pool1abc",
+    hashView: "153806dbcd134ddee69a8c5204e38ac80448f62342f8c23cfe4b7edf",
     createDate: "2022-01-01",
     rewardAccounts: ["rewardAccount1", "rewardAccount2"],
     ownerAccounts: ["ownerAccount1", "ownerAccount2"],
@@ -25,7 +28,8 @@ const mockProps: IDelegationDetailInfo = {
     margin: 0.03,
     totalBalanceOfPoolOwners: 1000000,
     epochBlock: 1000,
-    lifetimeBlock: 5000
+    lifetimeBlock: 5000,
+    homepage: "https://octaluso.dyndns.org"
   },
   loading: false,
   poolId: "#poolId123"
@@ -36,15 +40,43 @@ describe("DelegationDetailInfo component", () => {
     render(<DelegationDetailInfo {...mockProps} />);
     expect(screen.getByRole("heading", { name: /sample pool/i })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: /please sign in to save your bookmark/i })).toBeInTheDocument();
+    expect(screen.getByText("ACTIVE")).toBeInTheDocument();
+    expect(screen.getByText("pool1abc")).toBeInTheDocument();
   });
-  it("should commponent redirect to detail page", () => {
+
+  describe("should commponent redirect to detail page", () => {
     const history = createBrowserHistory();
-    render(
-      <Router history={history}>
-        <DelegationDetailInfo {...mockProps} />
-      </Router>
-    );
-    fireEvent.click(screen.getByRole("link", { name: /owneraccount1/i }));
-    expect(history.location.pathname).toBe(details.stake(mockProps.data?.ownerAccounts[0]));
+    beforeEach(() => {
+      render(
+        <Router history={history}>
+          <DelegationDetailInfo {...mockProps} />
+        </Router>
+      );
+    });
+    it("should component redirect to pool id", () => {
+      fireEvent.click(screen.getByRole("link", { name: /pool1abc/i }));
+      expect(history.location.pathname).toBe(details.delegation(mockProps.data?.poolView));
+    });
+
+    it("should component redirect to pool hash", () => {
+      fireEvent.click(screen.getByRole("link", { name: /153806dbcd134ddee69a8c5204e38ac80448f62342f8c23cfe4b7edf/i }));
+      expect(history.location.pathname).toBe(details.delegation(mockProps.data?.hashView));
+    });
+
+    it("should component open link homepage", () => {
+      const link = screen.getByRole("link", { name: "https://octaluso.dyndns.org" });
+      fireEvent.click(link);
+      expect(link.getAttribute("target")).toBe("_blank");
+    });
+
+    it("should component redirect to owner account", () => {
+      fireEvent.click(screen.getByRole("link", { name: /owneraccount1/i }));
+      expect(history.location.pathname).toBe(details.stake(mockProps.data?.ownerAccounts[0]));
+    });
+
+    it("should component redirect to reward account", () => {
+      fireEvent.click(screen.getByRole("link", { name: /rewardAccount1/i }));
+      expect(history.location.pathname).toBe(details.stake(mockProps.data?.rewardAccounts[0]));
+    });
   });
 });
diff --git a/src/components/DelegationDetail/DelegationDetailInfo/index.tsx b/src/components/DelegationDetail/DelegationDetailInfo/index.tsx
@@ -25,8 +25,10 @@ import DropdownDetail from "src/components/commons/DropdownDetail";
 import FormNowMessage from "src/components/commons/FormNowMessage";
 import DynamicEllipsisText from "src/components/DynamicEllipsisText";
 import { TruncateSubTitleContainer } from "src/components/share/styled";
+import { POOL_STATUS } from "src/commons/utils/constants";
 
 import {
+  HeaderStatus,
   BackButton,
   BackText,
   ButtonViewAll,
@@ -62,12 +64,11 @@ export interface IDelegationDetailInfo {
 const DelegationDetailInfo: React.FC<IDelegationDetailInfo> = ({ data, loading, poolId, lastUpdated }) => {
   const { t } = useTranslation();
   const theme = useTheme();
-  const { width } = useScreen();
+  const { width, isGalaxyFoldSmall } = useScreen();
   const history = useHistory();
   const [isErrorImage, setIsErrorImage] = useState(false);
   const [isOpenReward, setOpenReward] = useState<boolean>(false);
   const [isOpenOwner, setOpenOwner] = useState<boolean>(false);
-  const { isGalaxyFoldSmall } = useScreen();
 
   if (loading) {
     return (
@@ -117,6 +118,11 @@ const DelegationDetailInfo: React.FC<IDelegationDetailInfo> = ({ data, loading,
           <Box marginLeft={isPoolName ? 0 : 3}>
             <BookmarkButton keyword={poolId} type="POOL" />
           </Box>
+          <Box marginLeft={width < 400 ? 0 : 1}>
+            <HeaderStatus status={data?.poolStatus ?? POOL_STATUS.ACTIVE}>
+              {data?.poolStatus ?? POOL_STATUS.ACTIVE}
+            </HeaderStatus>
+          </Box>
         </Box>
         {data?.logoUrl && !isErrorImage && (
           <Box

diff --git a/src/components/DelegationDetail/DelegationDetailInfo/styles.ts b/src/components/DelegationDetail/DelegationDetailInfo/styles.ts
@@ -1,5 +1,6 @@
 import { Box, Button, Grid, LinearProgress, styled } from "@mui/material";
 
+import { POOL_STATUS } from "src/commons/utils/constants";
 import { CommonSkeleton } from "src/components/commons/CustomSkeleton";
 import { TruncateSubTitleContainer } from "src/components/share/styled";
 
@@ -98,6 +99,44 @@ export const PoolDescription = styled("small")`
   margin-left: 2px;
 `;
 
+export const HeaderStatus = styled("small")<{ status?: PoolStatus }>`
+  color: ${({ status, theme }) => {
+    switch (status) {
+      case POOL_STATUS.RETIRED:
+        return theme.palette.error[700];
+      case POOL_STATUS.RETIRING:
+        return theme.palette.warning[800];
+      case POOL_STATUS.ACTIVE:
+        return theme.palette.success[800];
+      default:
+        return theme.palette.success[800];
+    }
+  }};
+  background-color: ${({ status, theme }) => {
+    switch (status) {
+      case POOL_STATUS.RETIRED:
+        return theme.palette.error[100];
+      case POOL_STATUS.RETIRING:
+        return theme.palette.warning[100];
+      case POOL_STATUS.ACTIVE:
+        return theme.palette.success[100];
+      default:
+        return theme.palette.success[100];
+    }
+  }};
+  font-weight: var(--font-weight-bold);
+  text-transform: uppercase;
+  padding: 5px 7px;
+  border-radius: 2px;
+  font-size: 0.8125rem;
+  line-height: 1;
+  width: min-content;
+  ${({ theme }) => theme.breakpoints.down("md")} {
+    padding: 3px 3px;
+    font-size: 0.75rem;
+  }
+`;
+
 export const DataContainer = styled("div")(({ theme }) => ({
   background: theme.palette.secondary[0],
   display: "flex",

diff --git a/src/components/DelegationDetail/DelegationDetailList/DelegationDetailList.test.tsx b/src/components/DelegationDetail/DelegationDetailList/DelegationDetailList.test.tsx
@@ -3,10 +3,36 @@ import { createBrowserHistory } from "history";
 
 import { fireEvent, render, screen } from "src/test-utils";
 import { details } from "src/commons/routers";
+import { POOL_ACTION_TYPE } from "src/commons/utils/constants";
 
-import { DelegationStakingDelegatorsList } from ".";
+import { DelegationCertificatesHistory, DelegationEpochList, DelegationStakingDelegatorsList } from ".";
 
-const mockProps = {
+const mockEpochList = {
+  data: [
+    {
+      epoch: 447,
+      block: 61,
+      stakeAmount: 65904_430,
+      delegator: 26689,
+      fee: 582.382668,
+      ros: 123
+    },
+    {
+      epoch: 446,
+      block: 58,
+      stakeAmount: 14904_430,
+      delegator: null,
+      fee: 321.31,
+      ros: 321
+    }
+  ],
+  loading: false,
+  initialized: true,
+  total: 10,
+  scrollEffect: jest.fn()
+};
+
+const mockStakingDelegators = {
   data: [
     {
       address: "0x123456789",
@@ -28,9 +54,57 @@ const mockProps = {
   total: 10,
   scrollEffect: jest.fn()
 };
+
+const mockCertificatesHistory = {
+  data: [
+    {
+      txHash: "addr1z8snz7c4974vzdpxu65ruphl3zjdvtxw8strf2c2tmqnxz2j2c79gy9l76sdg0xwhd7r0c0kna0tycz4y5s6mlenh8pq0xmsha",
+      createdAt: "2020/07/29 21:58:11",
+      block: 9441048,
+      epoch: 443,
+      slot: 443,
+      absoluteSlot: 106249559,
+      actions: ["POOL REGISTRATION" as POOL_ACTION_TYPE]
+    },
+    {
+      txHash: "addr1z8jd97ct35n4s5ss8lt4sq0zclw0dmf7yak8fj46m0jm3dswtf6nj8t35qph4n6m04gawl49yvsxytfjpjpcfhehpcvqwwrrlu",
+      createdAt: "2020/07/29 21:58:11",
+      block: 9441048,
+      epoch: 443,
+      slot: 443,
+      absoluteSlot: 106249559,
+      actions: ["POOL UPDATE" as POOL_ACTION_TYPE]
+    },
+    {
+      txHash: "addr1zxem3j9xw7gyqnry0mfdhku7grrzu0707dc9fs68zwkln5sm5kjdmrpmng059yellupyvwgay2v0lz6663swmds7hp0qul0eqc",
+      createdAt: "2020/07/29 21:58:11",
+      block: 9441048,
+      epoch: 443,
+      slot: 443,
+      absoluteSlot: 106249559,
+      actions: ["POOL UPDATE" as POOL_ACTION_TYPE, "POOL DEREGISTRATION" as POOL_ACTION_TYPE]
+    }
+  ],
+  loading: false,
+  initialized: true,
+  total: 10,
+  scrollEffect: jest.fn()
+};
+
+describe("Epoch List component", () => {
+  beforeEach(() => {
+    render(<DelegationEpochList {...mockEpochList} />);
+  });
+
+  it("should component render", () => {
+    expect(screen.getByText("447")).toBeInTheDocument();
+    expect(screen.getByText("446")).toBeInTheDocument();
+  });
+});
+
 describe("DelegationDetailList component", () => {
   it("should component render", () => {
-    render(<DelegationStakingDelegatorsList {...mockProps} />);
+    render(<DelegationStakingDelegatorsList {...mockStakingDelegators} />);
     expect(screen.getByRole("link", { name: /view 1/i })).toBeInTheDocument();
     expect(screen.getByRole("link", { name: /view 2/i })).toBeInTheDocument();
     expect(screen.getByText(/result/i)).toBeInTheDocument();
@@ -40,10 +114,32 @@ describe("DelegationDetailList component", () => {
     const history = createBrowserHistory();
     render(
       <Router history={history}>
-        <DelegationStakingDelegatorsList {...mockProps} />
+        <DelegationStakingDelegatorsList {...mockStakingDelegators} />
       </Router>
     );
     fireEvent.click(screen.getByRole("link", { name: /view 1/i }));
-    expect(history.location.pathname).toBe(details.stake(mockProps.data[0].view));
+    expect(history.location.pathname).toBe(details.stake(mockStakingDelegators.data[0].view));
+  });
+});
+
+describe("Certificates History Component", () => {
+  it("should component render", () => {
+    render(<DelegationCertificatesHistory {...mockCertificatesHistory} />);
+    expect(screen.getByTestId("table-common")).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", {
+        name: "addr1z8snz7c4974vzdpxu65ruphl3zjdvtxw8strf2c2tmqnxz2j2c79gy9l76sdg0xwhd7r0c0kna0tycz4y5s6mlenh8pq0xmsha"
+      })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", {
+        name: "addr1z8jd97ct35n4s5ss8lt4sq0zclw0dmf7yak8fj46m0jm3dswtf6nj8t35qph4n6m04gawl49yvsxytfjpjpcfhehpcvqwwrrlu"
+      })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("link", {
+        name: "addr1zxem3j9xw7gyqnry0mfdhku7grrzu0707dc9fs68zwkln5sm5kjdmrpmng059yellupyvwgay2v0lz6663swmds7hp0qul0eqc"
+      })
+    ).toBeInTheDocument();
   });
 });