alleslabs · songwongtp · May 30, 2023 · May 10, 2023 · May 10, 2023 · May 10, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -57,6 +57,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
 - [#339](https://github.com/alleslabs/celatone-frontend/pull/339) Update all routes to plural form, and patch all codes
 - [#334](https://github.com/alleslabs/celatone-frontend/pull/334) Change `osmo-test-4` to `osmo-test-5`, fix tx service when accountId is undefined
 - [#311](https://github.com/alleslabs/celatone-frontend/pull/311) Refine css styling

diff --git a/src/lib/components/Breadcrumb.tsx b/src/lib/components/Breadcrumb.tsx
@@ -0,0 +1,56 @@
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbItem as ChakraBreadcrumbItem,
+  Text,
+} from "@chakra-ui/react";
+
+import type { Option } from "lib/types";
+
+import { AppLink } from "./AppLink";
+import { CustomIcon } from "./icon";
+
+type BreadcrumbItemProps = {
+  text: Option<string>;
+  href?: string;
+};
+
+type BreadcrumbProps = {
+  items: BreadcrumbItemProps[];
+  mb?: number;
+};
+
+export const Breadcrumb = ({ items, mb = 0 }: BreadcrumbProps) => (
+  <ChakraBreadcrumb
+    w="full"
+    spacing="4px"
+    mb={mb}
+    separator={<CustomIcon name="chevron-right" boxSize={3} color="gray.600" />}
+  >
+    {items.map((item) =>
+      item.href ? (
+        item.text && (
+          <ChakraBreadcrumbItem
+            _hover={{ opacity: 0.8 }}
+            transition="all 0.25s ease-in-out"
+          >
+            <AppLink color="text.dark" href={item.href}>
+              {item.text}
+            </AppLink>
+          </ChakraBreadcrumbItem>
+        )
+      ) : (
+        <ChakraBreadcrumbItem isCurrentPage>
+          <Text
+            variant="body2"
+            className="ellipsis"
+            fontWeight={600}
+            width="250px"
+            color="text.dark"
+          >
+            {item.text}
+          </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,46 @@ 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
+            items={[
+              { text: "Public Projects", href: "/projects" },
+              {
+                text: publicDetail?.name,
+                href: `/projects/${publicInfo?.slug}`,
+              },
+              { text: truncate(accountAddress) },
+            ]}
+            mb={6}
           />
+        )}
+        <Flex direction="column" gap={2}>
+          <Flex gap={1} minH="36px" align="center">
+            <CustomIcon name="wallet" boxSize={5} color="secondary.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 +352,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="gray.700"
       borderBottomWidth="1px"
     >
-      <Flex direction="column" gap={1}>
-        <Flex alignItems="center">
-          <CustomIcon name="block" boxSize={5} color="secondary.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="secondary.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="gray.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="gray.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={`/blocks/${block - 1}`}>
-            <StyledIconButton
-              icon={<CustomIcon name="chevron-left" />}
-              variant="ghost-gray"
-            />
-          </AppLink>
-        )}
-        <AppLink href={`/blocks/${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";
@@ -26,7 +26,12 @@ const BlockDetail = () => {
 
   return (
     <PageContainer>
-      <BackButton />
+      <Breadcrumb
+        items={[
+          { text: "Blocks", href: "/blocks" },
+          { text: 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"