From 1b1e878da999c3e1ef517c708d1bd683a9c9fa48 Mon Sep 17 00:00:00 2001
From: Jennie Alles <jennieramida@gmail.com>
Date: Tue, 8 Aug 2023 10:39:59 +0700
Subject: [PATCH 1/2] feat(components): add breadcrumb to pool id page

---
 CHANGELOG.md                                             | 1 +
 .../pages/pools/components/pool-details/header/index.tsx | 9 ++++++++-
 src/lib/pages/pools/poolId.tsx                           | 2 --
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7efef559b..6bac8d26f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -49,6 +49,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Improvements
 
+- [#468](https://github.com/alleslabs/celatone-frontend/pull/468) Add breadcrumb to pool id page
 - [#457](https://github.com/alleslabs/celatone-frontend/pull/457) Add alert for proposal forum review
 - [#389](https://github.com/alleslabs/celatone-frontend/pull/389) Fix modal consistency
 - [#381](https://github.com/alleslabs/celatone-frontend/pull/381) Correctly infer output type from snake-camel utils
diff --git a/src/lib/pages/pools/components/pool-details/header/index.tsx b/src/lib/pages/pools/components/pool-details/header/index.tsx
index ba532c24b..02a440658 100644
--- a/src/lib/pages/pools/components/pool-details/header/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/index.tsx
@@ -2,6 +2,7 @@ import { Button, Flex } from "@chakra-ui/react";
 
 import { PoolHeader } from "../../PoolHeader";
 import { useBaseApiRoute, usePoolConfig } from "lib/app-provider";
+import { Breadcrumb } from "lib/components/Breadcrumb";
 import { CustomIcon } from "lib/components/icon";
 import { AmpTrackViewJson, AmpTrackWebsite } from "lib/services/amplitude";
 import type { PoolDetail } from "lib/types";
@@ -29,7 +30,13 @@ export const PoolTopSection = ({ pool }: PoolTopSectionProps) => {
   };
   return (
     <>
-      <Flex justifyContent="space-between" align="center" w="full">
+      <Breadcrumb
+        items={[
+          { text: "Pools", href: "/pools" },
+          { text: `#${pool?.id.toString()}` },
+        ]}
+      />
+      <Flex justifyContent="space-between" align="center" w="full" mt={4}>
         <PoolHeader
           poolId={pool.id}
           isSuperfluid={pool.isSuperfluid}
diff --git a/src/lib/pages/pools/poolId.tsx b/src/lib/pages/pools/poolId.tsx
index a11d70cda..fae694e03 100644
--- a/src/lib/pages/pools/poolId.tsx
+++ b/src/lib/pages/pools/poolId.tsx
@@ -2,7 +2,6 @@ import { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import { useInternalNavigate } from "lib/app-provider";
-import { BackButton } from "lib/components/button";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
 import { AmpEvent, AmpTrack } from "lib/services/amplitude";
@@ -29,7 +28,6 @@ export const PoolId = () => {
   if (!pool) return navigate({ pathname: `/pools` });
   return (
     <PageContainer>
-      <BackButton />
       <PoolTopSection pool={pool} />
       <PoolAssets pool={pool} />
       <PoolRelatedTxs pool={pool} />

From 8ffa5a2877d41da90d9909801cae53ffaa0b64fa Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Tue, 8 Aug 2023 14:46:58 +0700
Subject: [PATCH 2/2] fix: remove option id

---
 src/lib/pages/pools/components/pool-details/header/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/pages/pools/components/pool-details/header/index.tsx b/src/lib/pages/pools/components/pool-details/header/index.tsx
index 02a440658..61dede94d 100644
--- a/src/lib/pages/pools/components/pool-details/header/index.tsx
+++ b/src/lib/pages/pools/components/pool-details/header/index.tsx
@@ -33,7 +33,7 @@ export const PoolTopSection = ({ pool }: PoolTopSectionProps) => {
       <Breadcrumb
         items={[
           { text: "Pools", href: "/pools" },
-          { text: `#${pool?.id.toString()}` },
+          { text: `#${pool.id.toString()}` },
         ]}
       />
       <Flex justifyContent="space-between" align="center" w="full" mt={4}>