fix: display username with type connect wallet

cardano-foundation · Oct 4, 2023 · 165af89 · 165af89
1 parent bc5a7e2
commit 165af89
Show file tree

Hide file tree

Showing 15 changed files with 183 additions and 117 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/StakeDetail/StakeTab/Tabs/TransactionTab.tsx b/src/components/StakeDetail/StakeTab/Tabs/TransactionTab.tsx
@@ -117,21 +117,25 @@ const TransactionListFull: React.FC<TransactionListFullProps> = ({
       key: "block",
       minWidth: 120,
       render: (r) => (
-        <Box>
-          <Box>
-            <StyledLink to={details.block(r.blockNo || r.blockHash)}>
-              {r.blockNo || getShortHash(r.blockHash)}
-            </StyledLink>
-          </Box>
-          <Box mt={1}>
-            <StyledLink to={details.epoch(r.epochNo)}>{r.epochNo}</StyledLink>/{" "}
-            <Box component={"span"} color={({ palette }) => palette.secondary.light}>
-              {r.epochSlotNo}
-            </Box>
-          </Box>
-        </Box>
+        <StyledLink to={details.block(r.blockNo || r.blockHash)}>{r.blockNo || getShortHash(r.blockHash)}</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: "slot",
+      minWidth: "100px"
+    },
     {
       title: t("fees"),
       key: "fee",

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/TransactionListsFull/index.tsx b/src/components/TransactionListsFull/index.tsx
@@ -71,21 +71,25 @@ const TransactionListFull: React.FC<TransactionListFullProps> = ({
       key: "block",
       minWidth: 120,
       render: (r) => (
-        <Box>
-          <Box>
-            <StyledLink to={details.block(r.blockNo || r.blockHash)}>
-              {r.blockNo || getShortHash(r.blockHash)}
-            </StyledLink>
-          </Box>
-          <Box mt={1}>
-            <StyledLink to={details.epoch(r.epochNo)}>{r.epochNo}</StyledLink>/
-            <Box color={({ palette }) => palette.secondary.light} component={"span"}>
-              {r.epochSlotNo}
-            </Box>
-          </Box>
-        </Box>
+        <StyledLink to={details.block(r.blockNo || r.blockHash)}>{r.blockNo || getShortHash(r.blockHash)}</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: "slot",
+      minWidth: "100px"
+    },
     {
       title: t("glossary.address"),
       key: "address",

diff --git a/src/components/commons/DetailView/DetailViewBlock.tsx b/src/components/commons/DetailView/DetailViewBlock.tsx
@@ -214,6 +214,10 @@ const DetailViewBlock: React.FC<DetailViewBlockProps> = (props) => {
                   <CopyButton text={data?.hash} />
                 </DetailValue>
               </DetailsInfoItem>
+              <DetailsInfoItem>
+                <DetailLabel>{t("glossary.absoluteSlot")}</DetailLabel>
+                <DetailValue>{data.slotNo}</DetailValue>
+              </DetailsInfoItem>
               <DetailsInfoItem>
                 <DetailLabel>{t("createdAt")}</DetailLabel>
                 <DetailValue>{formatDateTimeLocal(data.time || "")}</DetailValue>

diff --git a/src/components/commons/DetailView/DetailViewTransaction.tsx b/src/components/commons/DetailView/DetailViewTransaction.tsx
@@ -271,6 +271,10 @@ const DetailViewTransaction: React.FC<DetailViewTransactionProps> = (props) => {
                   <CopyButton text={hash} />
                 </DetailValue>
               </DetailsInfoItem>
+              <DetailsInfoItem>
+                <DetailLabel>{t("glossary.absoluteSlot")}</DetailLabel>
+                <DetailValue>{data?.tx?.slotNo}</DetailValue>
+              </DetailsInfoItem>
               {input && (
                 <DetailsInfoItem>
                   <DetailLabel>{t("glossary.input")}</DetailLabel>

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"),