fix: Merge branch 'feature/MET-1630-display-absolute-slot-number' of …

…github.com-fe-explorer-cardano:cardano-foundation/cf-explorer-frontend into conflict/feature/MET-1630-display-absolute-slot-number
cardano-foundation · Oct 4, 2023 · a7e9847 · a7e9847
2 parents 91d89b6 + d58fba1
commit a7e9847
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 91 deletions.
diff --git a/src/components/Account/OverviewTab/index.tsx b/src/components/Account/OverviewTab/index.tsx
@@ -89,8 +89,8 @@ const OverviewTab = () => {
         value={
           userData?.loginType === "connectWallet"
             ? isMobile
-              ? getShortWallet(userData.address || "")
-              : userData?.address
+              ? getShortWallet(userData.username || "")
+              : userData?.username
             : userData?.username || userData?.email
         }
         isTablet={isTablet}

diff --git a/src/components/AddressTransactionList/index.tsx b/src/components/AddressTransactionList/index.tsx
@@ -123,6 +123,23 @@ const AddressTransactionList: React.FC<AddressTransactionListProps> = ({
         </>
       )
     },
+    //
+    {
+      title: t("glossary.epoch"),
+      key: "epochNo",
+      minWidth: "50px",
+      render: (r) => <StyledLink to={details.epoch(r.epochNo)}>{r.epochNo}</StyledLink>
+    },
+    {
+      title: t("glossary.slot"),
+      key: "epochSlotNo",
+      minWidth: "50px"
+    },
+    {
+      title: t("glossary.absoluteSlot"),
+      key: "slot",
+      minWidth: "100px"
+    },
     {
       title: t("common.fees"),
       key: "fee",

diff --git a/src/components/ContractDetail/ContractDetailContent/TokenTransaction/index.tsx b/src/components/ContractDetail/ContractDetailContent/TokenTransaction/index.tsx
@@ -1,4 +1,3 @@
-import { Box } from "@mui/material";
 import { stringify } from "qs";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -52,7 +51,7 @@ const TokenTransaction: React.FC = () => {
     {
       title: t("glossary.txhash"),
       key: "hash",
-      minWidth: "200px",
+      minWidth: "150px",
 
       render: (r) => (
         <>
@@ -70,19 +69,20 @@ const TokenTransaction: React.FC = () => {
       render: (r) => <SmallText>{formatDateTimeLocal(r.time || "")}</SmallText>
     },
     {
-      title: t("glossary.block"),
-      key: "block",
-      minWidth: "120px",
-      render: (r) => (
-        <>
-          <StyledLink to={details.block(r.blockNo)}>{r.blockNo}</StyledLink>
-          <br />
-          <StyledLink to={details.epoch(r.epochNo)}>{r.epochNo}</StyledLink>/
-          <Box component={"span"} color={({ palette }) => palette.secondary.light}>
-            {r.epochSlotNo}{" "}
-          </Box>
-        </>
-      )
+      title: t("glossary.epoch"),
+      key: "epochNo",
+      minWidth: "50px",
+      render: (r) => <StyledLink to={details.epoch(r.epochNo)}>{r.epochNo}</StyledLink>
+    },
+    {
+      title: t("glossary.slot"),
+      key: "epochSlotNo",
+      minWidth: "50px"
+    },
+    {
+      title: t("glossary.absoluteSlot"),
+      key: "slot",
+      minWidth: "100px"
     },
     {
       title: t("glossary.address"),
@@ -122,7 +122,7 @@ const TokenTransaction: React.FC = () => {
     {
       title: t("fees"),
       key: "fee",
-      minWidth: "120px",
+      minWidth: "50px",
       render: (r) => (
         <PriceValue>
           <SmallText>

diff --git a/src/components/EpochDetail/EpochBlockList/index.tsx b/src/components/EpochDetail/EpochBlockList/index.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { useHistory, useLocation } from "react-router-dom";
 import { stringify } from "qs";
-import { Box } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 
@@ -21,16 +20,7 @@ import ADAicon from "src/components/commons/ADAIcon";
 import CustomTooltip from "src/components/commons/CustomTooltip";
 import FormNowMessage from "src/components/commons/FormNowMessage";
 
-import {
-  EpochNo,
-  StyledOutput,
-  BlueText,
-  StyledContainer,
-  StyledLink,
-  PriceWrapper,
-  Actions,
-  TimeDuration
-} from "./styles";
+import { StyledOutput, BlueText, StyledContainer, StyledLink, PriceWrapper, Actions, TimeDuration } from "./styles";
 
 interface IEpochBlockList {
   epochId: string;
@@ -78,17 +68,20 @@ const EpochBlockList: React.FC<IEpochBlockList> = ({ epochId }) => {
       )
     },
     {
-      title: t("glossary.EpochSlot"),
-      key: "slot",
-      minWidth: "100px",
-      render: (r) => (
-        <>
-          <EpochNo>{r.slotNo}</EpochNo>
-          <Box color={({ palette }) => palette.secondary.light}>
-            {r.epochNo}/{r.epochSlotNo}
-          </Box>
-        </>
-      )
+      title: t("glossary.epoch"),
+      key: "epochNo",
+      minWidth: "50px",
+      render: (r) => <StyledLink to={details.epoch(r.epochNo)}>{r.epochNo}</StyledLink>
+    },
+    {
+      title: t("glossary.slot"),
+      key: "epochSlotNo",
+      minWidth: "50px"
+    },
+    {
+      title: t("glossary.absoluteSlot"),
+      key: "slotNo",
+      minWidth: "100px"
     },
     {
       title: t("createdAt"),

diff --git a/src/components/ReportGeneratedStakingDetail/index.tsx b/src/components/ReportGeneratedStakingDetail/index.tsx
@@ -46,7 +46,7 @@ const ReportGeneratedStakingDetailTabs = () => {
   const stackeTabs: ITab[] = [
     {
       icon: RegistrationIcon,
-      label: t("glossary.takeAddressRegistrations"),
+      label: t("glossary.stakeAddressRegistrations"),
       key: "registration",
       mappingKey: "Registration",
       component: <StakingRegistrationTab />
@@ -102,6 +102,7 @@ const ReportGeneratedStakingDetailTabs = () => {
       ];
     }
     return tabs;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [events, reportDetail]);
   const initTab = useMemo(() => (displayedTabs.length ? displayedTabs[0].key : undefined), [displayedTabs]);
 

diff --git a/src/components/TokenDetail/TokenTableData/TokenTransaction.tsx b/src/components/TokenDetail/TokenTableData/TokenTransaction.tsx
@@ -45,8 +45,7 @@ const TokenTransaction: React.FC<ITokenTransaction> = ({ tokenId }) => {
     {
       title: t("glossary.txhash"),
       key: "trxhash",
-      minWidth: "200px",
-
+      minWidth: "150px",
       render: (r) => (
         <>
           <CustomTooltip title={r.hash}>
@@ -58,17 +57,22 @@ const TokenTransaction: React.FC<ITokenTransaction> = ({ tokenId }) => {
       )
     },
     {
-      title: t("glossary.blockEpochSlot"),
-      key: "block",
-      minWidth: "200px",
-      render: (r) => (
-        <>
-          <StyledLink to={details.block(r.blockNo)}>{r.blockNo}</StyledLink>
-          <br />
-          <StyledLink to={details.epoch(r.epochNo)}>{r.epochNo}</StyledLink>/<SmallText>{r.epochSlotNo} </SmallText>
-        </>
-      )
+      title: t("glossary.epoch"),
+      key: "epoch",
+      minWidth: "50px",
+      render: (r) => <StyledLink to={details.epoch(r.epochNo)}>{r.epochNo}</StyledLink>
+    },
+    {
+      title: t("glossary.slot"),
+      key: "epochSlotNo",
+      minWidth: "50px"
     },
+    {
+      title: t("glossary.absoluteSlot"),
+      key: "slot",
+      minWidth: "100px"
+    },
+
     {
       title: t("glossary.address"),
       key: "addresses",

diff --git a/src/components/commons/Layout/AccountLayout/index.tsx b/src/components/commons/Layout/AccountLayout/index.tsx
@@ -63,9 +63,9 @@ const AccountLayout: React.FC<Props> = ({ children }) => {
       <Box>
         <Box pt={4}>
           {userData?.loginType === "connectWallet" ? (
-            <CustomTooltip title={userData?.address || ""} placement="bottom">
+            <CustomTooltip title={userData?.username || ""} placement="bottom">
               <StyledUsername component={"h4"} pt={1} m="auto">
-                {getShortWallet(userData?.address)}
+                {getShortWallet(userData?.username)}
               </StyledUsername>
             </CustomTooltip>
           ) : (

diff --git a/src/pages/InstantRewards/index.tsx b/src/pages/InstantRewards/index.tsx
@@ -61,6 +61,22 @@ const InstantReards = () => {
         </>
       )
     },
+    {
+      title: t("glossary.epoch"),
+      key: "epochNo",
+      minWidth: "50px",
+      render: (r) => <StyledLink to={details.epoch(r.epochNo)}>{r.epochNo}</StyledLink>
+    },
+    {
+      title: t("glossary.slot"),
+      key: "epochSlotNo",
+      minWidth: "50px"
+    },
+    {
+      title: t("glossary.absoluteSlot"),
+      key: "slotNo",
+      minWidth: "100px"
+    },
     {
       title: t("glossary.stakeAddress"),
       key: "numberOfStakes",

diff --git a/src/pages/RegistrationPools/index.tsx b/src/pages/RegistrationPools/index.tsx
@@ -75,16 +75,23 @@ const RegistrationPools: React.FC<Props> = ({ poolType }) => {
     {
       title: t("glossary.block"),
       key: "block",
-      render: (pool) => (
-        <>
-          <StyledLink to={details.block(pool.block)}>{pool.block}</StyledLink>
-          <br />
-          <StyledLink to={details.epoch(pool.epoch)}>{pool.epoch}</StyledLink>/{" "}
-          <Box component={"span"} color={({ palette }) => palette.secondary.light}>
-            {pool.slotNo}
-          </Box>
-        </>
-      )
+      render: (pool) => <StyledLink to={details.block(pool.block)}>{pool.block}</StyledLink>
+    },
+    {
+      title: t("glossary.epoch"),
+      key: "epoch",
+      minWidth: "50px",
+      render: (r) => <StyledLink to={details.epoch(r.epoch)}>{r.epoch}</StyledLink>
+    },
+    {
+      title: t("glossary.slot"),
+      key: "epochSlotNo",
+      minWidth: "50px"
+    },
+    {
+      title: t("glossary.absoluteSlot"),
+      key: "slotNo",
+      minWidth: "100px"
     },
     {
       title: t("glossary.pool"),

diff --git a/src/pages/Stake/index.tsx b/src/pages/Stake/index.tsx
@@ -89,17 +89,23 @@ const Stake: React.FC<Props> = ({ stakeAddressType }) => {
     {
       title: t("glossary.block"),
       key: "block",
-      render: (r) => (
-        <>
-          <StyledLink to={details.block(r.block)}>{r.block}</StyledLink>
-          <div style={{ display: "flex", marginTop: "6px" }}>
-            <StyledLink to={details.epoch(r.epoch)}>{r.epoch}</StyledLink>/
-            <Box component={"span"} color={({ palette }) => palette.secondary.light}>
-              {r.epochSlotNo}
-            </Box>
-          </div>
-        </>
-      )
+      render: (r) => <StyledLink to={details.block(r.block)}>{r.block}</StyledLink>
+    },
+    {
+      title: t("glossary.epoch"),
+      key: "epoch",
+      minWidth: "50px",
+      render: (r) => <StyledLink to={details.epoch(r.epoch)}>{r.epoch}</StyledLink>
+    },
+    {
+      title: t("glossary.slot"),
+      key: "epochSlotNo",
+      minWidth: "50px"
+    },
+    {
+      title: t("glossary.absoluteSlot"),
+      key: "slotNo",
+      minWidth: "100px"
     },
     {
       title: t("glossary.stakeAddress"),

diff --git a/src/pages/StakeDelegations/index.tsx b/src/pages/StakeDelegations/index.tsx
@@ -35,7 +35,7 @@ const StakeDelegations = () => {
   const columns: Column<StakeDelegationItem>[] = [
     {
       title: t("glossary.txHash"),
-      minWidth: 200,
+      minWidth: "150px",
       key: "txHash",
       render: (r) => (
         <CustomTooltip title={r.txHash}>
@@ -46,29 +46,35 @@ const StakeDelegations = () => {
     {
       title: t("glossary.createdAt"),
       key: "createdat",
-      minWidth: "200px",
+      minWidth: "150px",
       render: (r) => formatDateTimeLocal(r.time)
     },
     {
       title: t("glossary.block"),
       key: "blockNo",
-      minWidth: "200px",
-      render: (r) => (
-        <>
-          <StyledLink to={details.block(r.blockNo)}>{r.blockNo}</StyledLink>
-          <Box mt={1}>
-            <StyledLink to={details.epoch(r.epochNo)}>{r.epochNo}</StyledLink>/
-            <Box color={({ palette }) => palette.secondary.light} component={"span"}>
-              {r.epochSlotNo}
-            </Box>
-          </Box>
-        </>
-      )
+      minWidth: "50px",
+      render: (r) => <StyledLink to={details.block(r.blockNo)}>{r.blockNo}</StyledLink>
+    },
+    {
+      title: t("glossary.epoch"),
+      key: "epochNo",
+      minWidth: "50px",
+      render: (r) => <StyledLink to={details.epoch(r.epochNo)}>{r.epochNo}</StyledLink>
+    },
+    {
+      title: t("glossary.slot"),
+      key: "epochSlotNo",
+      minWidth: "50px"
+    },
+    {
+      title: t("glossary.absoluteSlot"),
+      key: "slotNo",
+      minWidth: "100px"
     },
     {
       title: t("glossary.stakeAddress"),
       key: "stakeAddress",
-      minWidth: "200px",
+      minWidth: "150px",
       render: (r) => (
         <>
           {r.stakeKeys.slice(0, 2).map((stakeKey, idx) => (