alleslabs · songwongtp · May 30, 2023 · May 10, 2023 · May 10, 2023 · May 10, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#323](https://github.com/alleslabs/celatone-frontend/pull/323) Revise back button and breadcrumb components
 - [#311](https://github.com/alleslabs/celatone-frontend/pull/311) Refine css styling
 - [#328](https://github.com/alleslabs/celatone-frontend/pull/328) Add proposal and pool page in sidebar navigation
 - [#298](https://github.com/alleslabs/celatone-frontend/pull/298) Show deposit/voting period from gov params and add minimum required alert

diff --git a/src/lib/components/Breadcrumb.tsx b/src/lib/components/Breadcrumb.tsx
@@ -0,0 +1,63 @@
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbItem as ChakraBreadcrumbItem,
+  Text,
+} from "@chakra-ui/react";
+
+import { AppLink } from "./AppLink";
+import { CustomIcon } from "./icon";
+
+interface BreadcrumbProps {
+  primaryPage: string;
+  primaryPath: string;
+  secondaryPage?: string;
+  secondaryPath?: string;
+  currentPage: string;
+  mb?: number;
+}
+
+export const Breadcrumb = ({
+  primaryPage,
+  primaryPath,
+  secondaryPage = "",
+  secondaryPath = "",
+  currentPage,
+  mb = 0,
+}: BreadcrumbProps) => (
+  <ChakraBreadcrumb
+    w="full"
+    spacing="4px"
+    mb={mb}
+    separator={<CustomIcon name="chevron-right" boxSize={3} />}
+  >
+    <ChakraBreadcrumbItem
+      _hover={{ opacity: 0.8 }}
+      transition="all 0.25s ease-in-out"
+    >
+      <AppLink color="text.dark" href={primaryPath}>
+        {primaryPage}
+      </AppLink>
+    </ChakraBreadcrumbItem>
+    {secondaryPage && (
+      <ChakraBreadcrumbItem
+        _hover={{ opacity: 0.8 }}
+        transition="all 0.25s ease-in-out"
+      >
+        <AppLink color="text.dark" href={secondaryPath}>
+          {secondaryPage}
+        </AppLink>
+      </ChakraBreadcrumbItem>
+    )}
+    <ChakraBreadcrumbItem isCurrentPage>
+      <Text
+        variant="body2"
+        className="ellipsis"
+        fontWeight="600"
+        width="250px"
+        color="text.dark"
+      >
+        {currentPage}
+      </Text>
+    </ChakraBreadcrumbItem>
+  </ChakraBreadcrumb>
+);
diff --git a/src/lib/pages/account-details/index.tsx b/src/lib/pages/account-details/index.tsx
@@ -12,7 +12,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import { useValidateAddress } from "lib/app-provider";
-import { BackButton } from "lib/components/button";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CopyLink } from "lib/components/CopyLink";
 import { CustomTab } from "lib/components/CustomTab";
 import { CustomIcon } from "lib/components/icon";
@@ -27,7 +27,12 @@ import {
   usePublicProjectBySlug,
 } from "lib/services/publicProjectService";
 import type { HumanAddr } from "lib/types";
-import { formatPrice, getFirstQueryParam, scrollToTop } from "lib/utils";
+import {
+  formatPrice,
+  getFirstQueryParam,
+  scrollToTop,
+  truncate,
+} from "lib/utils";
 
 import { AssetsSection } from "./components/asset";
 import { DelegationsSection } from "./components/delegations";
@@ -86,30 +91,43 @@ const AccountDetailsBody = ({ accountAddress }: AccountDetailsBodyProps) => {
 
   return (
     <>
-      <Flex direction="column" gap={1} mt={6} mb={6}>
-        <Flex gap={1}>
-          {publicDetail?.logo && (
-            <Image
-              src={publicDetail.logo}
-              borderRadius="full"
-              alt={publicDetail.name}
-              width={7}
-              height={7}
-            />
-          )}
-          <Heading as="h5" variant="h5">
-            {displayName}
-          </Heading>
-        </Flex>
-        <Flex gap={2}>
-          <Text fontWeight={500} color="text.dark" variant="body2">
-            Wallet Address:
-          </Text>
-          <CopyLink
-            value={accountAddress}
-            amptrackSection="account_top"
-            type="user_address"
+      <Flex direction="column" mb={6}>
+        {publicDetail && (
+          <Breadcrumb
+            mb={6}
+            primaryPage="Public Projects"
+            primaryPath="/public-project"
+            secondaryPage={publicDetail?.name}
+            secondaryPath={`/public-project/${publicInfo?.slug}`}
+            currentPage={truncate(accountAddress)}
           />
+        )}
+        <Flex direction="column" gap={2}>
+          <Flex gap={1} minH="36px" align="center">
+            <CustomIcon name="wallet" boxSize="5" color="lilac.main" />
+            {publicDetail?.logo && (
+              <Image
+                src={publicDetail.logo}
+                borderRadius="full"
+                alt={publicDetail.name}
+                width={7}
+                height={7}
+              />
+            )}
+            <Heading as="h5" variant="h5">
+              {displayName}
+            </Heading>
+          </Flex>
+          <Flex gap={2}>
+            <Text fontWeight={500} color="text.dark" variant="body2">
+              Wallet Address:
+            </Text>
+            <CopyLink
+              value={accountAddress}
+              amptrackSection="account_top"
+              type="user_address"
+            />
+          </Flex>
         </Flex>
       </Flex>
       {publicInfo?.description && (
@@ -331,7 +349,6 @@ const AccountDetails = () => {
 
   return (
     <PageContainer>
-      <BackButton />
       {validateUserAddress(accountAddressParam) &&
       validateContractAddress(accountAddressParam) ? (
         <InvalidAccount />

diff --git a/src/lib/pages/block-details/components/BlockDetailsTop.tsx b/src/lib/pages/block-details/components/BlockDetailsTop.tsx
@@ -38,67 +38,72 @@ export const BlockDetailsTop = ({ blockData }: BlockDetailsTopProps) => {
   const disablePrevious = block <= 1;
   return (
     <Flex
-      justify="space-between"
       mb={12}
       pb={12}
       mt={6}
       borderBottomColor="pebble.700"
       borderBottomWidth="1px"
     >
-      <Flex direction="column" gap={1}>
-        <Flex alignItems="center">
-          <CustomIcon name="block" boxSize="5" color="lilac.main" />
-          <Heading as="h5" variant="h5" className="ellipsis">
-            {blockData.height}
-          </Heading>
-        </Flex>
-        <Flex gap={2}>
-          <Text variant="body2" color="text.dark">
-            Block Hash:
-          </Text>
-          <CopyLink
-            value={blockData.hash.toUpperCase()}
-            amptrackSection="block_details_top"
-            type="block_hash"
-          />
+      <Flex direction="column" gap={2} width="full">
+        <Flex justifyContent="space-between" alignItems="center" width="full">
+          <Flex alignItems="center">
+            <CustomIcon name="block" boxSize="5" color="lilac.main" />
+            <Heading as="h5" variant="h5" className="ellipsis">
+              {blockData.height}
+            </Heading>
+          </Flex>
+          <Flex gap={2}>
+            {!disablePrevious && (
+              <AppLink href={`/block/${block - 1}`}>
+                <StyledIconButton
+                  icon={<CustomIcon name="chevron-left" />}
+                  variant="ghost-gray"
+                />
+              </AppLink>
+            )}
+            <AppLink href={`/block/${block + 1}`}>
+              <StyledIconButton
+                icon={<CustomIcon name="chevron-right" />}
+                variant="ghost-gray"
+              />
+            </AppLink>
+            <Button
+              variant="ghost-gray"
+              padding={2}
+              rightIcon={
+                <CustomIcon name="launch" boxSize={3} color="text.dark" />
+              }
+              onClick={openLcdPage}
+            >
+              View in JSON
+            </Button>
+          </Flex>
         </Flex>
-        <Flex gap={2} alignItems="center">
-          <Flex gap={1} alignItems="center">
-            <CustomIcon name="history" boxSize={3} color="pebble.600" />
+        <Flex direction="column" gap={1}>
+          <Flex gap={2}>
             <Text variant="body2" color="text.dark">
-              {dateFromNow(blockData.timestamp)}
+              Block Hash:
+            </Text>
+            <CopyLink
+              value={blockData.hash.toUpperCase()}
+              amptrackSection="block_details_top"
+              type="block_hash"
+            />
+          </Flex>
+          <Flex gap={2} alignItems="center">
+            <Flex gap={1} alignItems="center">
+              <CustomIcon name="history" boxSize={3} color="pebble.600" />
+              <Text variant="body2" color="text.dark">
+                {dateFromNow(blockData.timestamp)}
+              </Text>
+            </Flex>
+            <DotSeparator />
+            <Text variant="body2" color="text.dark">
+              {formatUTC(blockData.timestamp)}
             </Text>
           </Flex>
-          <DotSeparator />
-          <Text variant="body2" color="text.dark">
-            {formatUTC(blockData.timestamp)}
-          </Text>
         </Flex>
       </Flex>
-      <Flex gap={2}>
-        {!disablePrevious && (
-          <AppLink href={`/block/${block - 1}`}>
-            <StyledIconButton
-              icon={<CustomIcon name="chevron-left" />}
-              variant="ghost-gray"
-            />
-          </AppLink>
-        )}
-        <AppLink href={`/block/${block + 1}`}>
-          <StyledIconButton
-            icon={<CustomIcon name="chevron-right" />}
-            variant="ghost-gray"
-          />
-        </AppLink>
-        <Button
-          variant="ghost-gray"
-          padding={2}
-          rightIcon={<CustomIcon name="launch" boxSize={3} />}
-          onClick={openLcdPage}
-        >
-          View in JSON
-        </Button>
-      </Flex>
     </Flex>
   );
 };
diff --git a/src/lib/pages/block-details/index.tsx b/src/lib/pages/block-details/index.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { BackButton } from "lib/components/button";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { EmptyState } from "lib/components/state";
@@ -30,7 +30,11 @@ const BlockDetail = () => {
 
   return (
     <PageContainer>
-      <BackButton />
+      <Breadcrumb
+        primaryPage="Blocks"
+        primaryPath="/blocks"
+        currentPage={blockData?.height.toString() ?? ""}
+      />
       {blockData ? (
         <>
           <BlockDetailsTop blockData={blockData} />

diff --git a/src/lib/pages/blocks/components/BlocksRow.tsx b/src/lib/pages/blocks/components/BlocksRow.tsx
@@ -26,7 +26,7 @@ export const BlocksRow = ({ templateColumns, blockData }: BlocksRowProps) => {
       </TableRow>
       <TableRow>{truncate(blockData.hash.toUpperCase())}</TableRow>
       <TableRow>
-        <ValidatorBadge validator={blockData.proposer} />
+        <ValidatorBadge validator={blockData.proposer} badgeSize={7} />
       </TableRow>
       <TableRow
         justifyContent="center"