[EGN-742] Token page

apps/web/src/app/(networks)/(evm)/[chainId]/explore/navigation-items.tsx

@@ -5,18 +5,32 @@ import { type ChainId, ChainKey } from 'sushi/chain'
 export function NavigationItems({ chainId }: { chainId: ChainId }) {
   return (
     <>
+      <LinkInternal
+        shallow={true}
+        scroll={false}
+        href={`/${ChainKey[chainId]}/explore/tokens`}
+      >
+        <PathnameButton
+          id="tokens"
+          pathname={`/${ChainKey[chainId]}/explore/tokens`}
+          asChild
+          size="sm"
+        >
+          Tokens
+        </PathnameButton>
+      </LinkInternal>
       <LinkInternal
         shallow={true}
         scroll={false}
         href={`/${ChainKey[chainId]}/explore/pools`}
       >
         <PathnameButton
-          id="all-pools"
+          id="pools"
           pathname={`/${ChainKey[chainId]}/explore/pools`}
           asChild
           size="sm"
         >
-          All Pools
+          Pools
         </PathnameButton>
       </LinkInternal>
     </>

apps/web/src/app/(networks)/(evm)/[chainId]/explore/tokens/layout.tsx

@@ -0,0 +1,53 @@
+import { Container } from '@sushiswap/ui'
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import type React from 'react'
+import { GlobalStatsCharts } from 'src/ui/explore/global-stats-charts'
+import { TokensFiltersProvider } from 'src/ui/token/TokensFiltersProvider'
+import type { EvmChainId } from 'sushi/chain'
+import { SUSHISWAP_SUPPORTED_CHAIN_IDS, isSushiSwapChainId } from 'sushi/config'
+import { SidebarContainer } from '~evm/_common/ui/sidebar'
+import { NavigationItems } from '../navigation-items'
+
+export const metadata: Metadata = {
+  title: 'Tokens',
+  description: 'Explore SushiSwap tokens.',
+}
+
+export default async function ExploreLayout(props: {
+  children: React.ReactNode
+  params: Promise<{ chainId: string }>
+}) {
+  const params = await props.params
+
+  const { children } = props
+
+  const chainId = +params.chainId as EvmChainId
+
+  if (!isSushiSwapChainId(chainId)) {
+    return notFound()
+  }
+
+  return (
+    <SidebarContainer
+      selectedNetwork={chainId}
+      supportedNetworks={SUSHISWAP_SUPPORTED_CHAIN_IDS}
+      unsupportedNetworkHref={'/ethereum/explore/tokens'}
+      shiftContent
+    >
+      <main className="flex flex-col h-full flex-1">
+        <Container maxWidth="7xl" className="px-4 py-4">
+          <GlobalStatsCharts chainId={chainId} />
+        </Container>
+        <Container maxWidth="7xl" className="px-4 flex gap-2 pb-4">
+          <NavigationItems chainId={chainId} />
+        </Container>
+        <section className="flex flex-col flex-1">
+          <div className="bg-gray-50 dark:bg-white/[0.02] border-t border-accent pt-4 pb-10 min-h-screen">
+            <TokensFiltersProvider>{children}</TokensFiltersProvider>
+          </div>
+        </section>
+      </main>
+    </SidebarContainer>
+  )
+}

apps/web/src/app/(networks)/(evm)/[chainId]/explore/tokens/page.tsx

@@ -0,0 +1,26 @@
+import { Container } from '@sushiswap/ui'
+import { notFound } from 'next/navigation'
+import React from 'react'
+import { TableFiltersSearchToken } from 'src/ui/token/TableFiltersSearchToken'
+import { TokensTable } from 'src/ui/token/TokensTable'
+import { type SushiSwapChainId, isSushiSwapChainId } from 'sushi/config'
+
+export default async function TokensPage(props: {
+  params: Promise<{ chainId: string }>
+}) {
+  const params = await props.params
+  const chainId = +params.chainId as SushiSwapChainId
+
+  if (!isSushiSwapChainId(chainId)) {
+    return notFound()
+  }
+
+  return (
+    <Container maxWidth="7xl" className="px-4">
+      <div className="flex flex-wrap gap-3 mb-4">
+        <TableFiltersSearchToken />
+      </div>
+      <TokensTable chainId={chainId} />
+    </Container>
+  )
+}

apps/web/src/app/(networks)/(evm)/[chainId]/pool/layout.tsx

@@ -5,10 +5,6 @@ import type { ChainId } from 'sushi/chain'
 import { SidebarContainer, SidebarProvider } from '~evm/_common/ui/sidebar'
 import { Header } from '../header'
 
-export const metadata = {
-  title: 'Pool 💦',
-}
-
 export default async function PoolLayout(props: {
   children: React.ReactNode
   params: Promise<{ chainId: string }>

apps/web/src/app/(networks)/(evm)/[chainId]/pool/v2/[address]/(landing)/layout.tsx

@@ -9,10 +9,6 @@ import { ChainKey, type EvmChainId } from 'sushi'
 import { isSushiSwapV2ChainId } from 'sushi/config'
 import { isAddress } from 'viem'
 
-export const metadata = {
-  title: 'Pool 💦',
-}
-
 export default async function Layout(props: {
   children: React.ReactNode
   params: Promise<{ chainId: string; address: string }>
@@ -33,7 +29,7 @@ export default async function Layout(props: {
 
   const pool = (await unstable_cache(
     async () => getV2Pool({ chainId, address }),
-    ['pool', `${chainId}:${address}`],
+    ['v2', 'pool', `${chainId}:${address}`],
     {
       revalidate: 60 * 15,
     },

apps/web/src/app/(networks)/(evm)/[chainId]/pool/v2/[address]/(landing)/page.tsx

@@ -24,7 +24,7 @@ export default async function PoolPage(props: {
 
   const pool = (await unstable_cache(
     async () => await getV2Pool({ chainId, address }),
-    ['pool', `${chainId}:${address}`],
+    ['v2', 'pool', `${chainId}:${address}`],
     {
       revalidate: 60 * 15,
     },

apps/web/src/app/(networks)/(evm)/[chainId]/pool/v2/[address]/(manage)/add/page.tsx

@@ -24,7 +24,7 @@ export default async function ManageV2PoolPage(props: {
 
   const pool = (await unstable_cache(
     async () => getV2Pool({ chainId, address }),
-    ['pool', `${chainId}:${address}`],
+    ['v2', 'pool', `${chainId}:${address}`],
     {
       revalidate: 60 * 15,
     },

apps/web/src/app/(networks)/(evm)/[chainId]/pool/v2/[address]/(manage)/layout.tsx

@@ -29,7 +29,7 @@ export default async function Layout(props: {
 
   const pool = (await unstable_cache(
     async () => getV2Pool({ chainId, address }),
-    ['pool', `${chainId}:${address}`],
+    ['v2', 'pool', `${chainId}:${address}`],
     {
       revalidate: 60 * 15,
     },

apps/web/src/app/(networks)/(evm)/[chainId]/pool/v2/[address]/(manage)/remove/page.tsx

@@ -24,7 +24,7 @@ export default async function ManageV2PoolPage(props: {
 
   const pool = (await unstable_cache(
     async () => getV2Pool({ chainId, address }),
-    ['pool', `${chainId}:${address}`],
+    ['v2', 'pool', `${chainId}:${address}`],
     {
       revalidate: 60 * 15,
     },

apps/web/src/app/(networks)/(evm)/[chainId]/pool/v2/[address]/layout.tsx

@@ -6,8 +6,36 @@ import type { EvmChainId } from 'sushi'
 import { isSushiSwapV2ChainId } from 'sushi/config'
 import { isAddress } from 'viem'
 
-export const metadata: Metadata = {
-  title: 'Pool 💦',
+export async function generateMetadata(props: {
+  params: Promise<{ chainId: string; address: string }>
+}): Promise<Metadata> {
+  console.log('generateMetadata')
+  const params = await props.params
+  const { chainId: _chainId, address } = params
+  const chainId = +_chainId as EvmChainId
+
+  if (
+    !isSushiSwapV2ChainId(chainId) ||
+    !isAddress(address, { strict: false })
+  ) {
+    return {}
+  }
+
+  const pool = await unstable_cache(
+    async () => getV2Pool({ chainId, address }),
+    ['v2', 'pool', `${chainId}:${address}`],
+    {
+      revalidate: 60 * 15,
+    },
+  )()
+
+  if (!pool) {
+    return {}
+  }
+
+  return {
+    title: `BUY & SELL ${pool.token0.symbol}/${pool.token1.symbol}`,
+  }
 }
 
 export default async function Layout(props: {
@@ -30,7 +58,7 @@ export default async function Layout(props: {
 
   const pool = await unstable_cache(
     async () => getV2Pool({ chainId, address }),
-    ['pool', `${chainId}:${address}`],
+    ['v2', 'pool', `${chainId}:${address}`],
     {
       revalidate: 60 * 15,
     },

apps/web/src/app/(networks)/(evm)/[chainId]/pool/v2/[address]/migrate/layout.tsx

@@ -29,7 +29,7 @@ export default async function Layout(props: {
 
   const pool = (await unstable_cache(
     async () => getV2Pool({ chainId, address }),
-    ['pool', `${chainId}:${address}`],
+    ['v2', 'pool', `${chainId}:${address}`],
     {
       revalidate: 60 * 15,
     },

apps/web/src/app/(networks)/(evm)/[chainId]/pool/v2/[address]/migrate/page.tsx

@@ -24,7 +24,7 @@ export default async function MigrateV2PoolPage(props: {
 
   const pool = (await unstable_cache(
     async () => getV2Pool({ chainId, address }),
-    ['pool', `${chainId}:${address}`],
+    ['v2', 'pool', `${chainId}:${address}`],
     {
       revalidate: 60 * 15,
     },

apps/web/src/app/(networks)/(evm)/[chainId]/pool/v2/add/layout.tsx

@@ -2,10 +2,6 @@ import { Container, typographyVariants } from '@sushiswap/ui'
 
 import { BackButton } from 'src/ui/pool/BackButton'
 
-export const metadata = {
-  title: 'Pool 💦',
-}
-
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>

apps/web/src/app/(networks)/(evm)/[chainId]/pool/v3/[address]/(landing)/layout.tsx

@@ -8,10 +8,6 @@ import { ChainKey, type EvmChainId } from 'sushi/chain'
 import { isSushiSwapV3ChainId } from 'sushi/config'
 import { isAddress } from 'viem'
 
-export const metadata = {
-  title: 'Pool 💦',
-}
-
 export default async function Layout(props: {
   children: React.ReactNode
   params: Promise<{ chainId: string; address: string }>
@@ -32,7 +28,7 @@ export default async function Layout(props: {
 
   const pool = (await unstable_cache(
     async () => getV3Pool({ chainId, address }),
-    ['pool', `${chainId}:${address}`],
+    ['v3', 'pool', `${chainId}:${address}`],
     {
       revalidate: 60 * 15,
     },

apps/web/src/app/(networks)/(evm)/[chainId]/pool/v3/[address]/(landing)/page.tsx

@@ -23,7 +23,7 @@ export default async function PoolPage(props: {
 
   const pool = (await unstable_cache(
     async () => await getV3Pool({ chainId, address }),
-    ['pool', `${chainId}:${address}`],
+    ['v3', 'pool', `${chainId}:${address}`],
     {
       revalidate: 60 * 15,
     },

apps/web/src/app/(networks)/(evm)/[chainId]/pool/v3/[address]/(manage)/layout.tsx

@@ -29,7 +29,7 @@ export default async function Layout(props: {
 
   const pool = (await unstable_cache(
     async () => getV3Pool({ chainId, address }),
-    ['pool', `${chainId}:${address}`],
+    ['v3', 'pool', `${chainId}:${address}`],
     {
       revalidate: 60 * 15,
     },

apps/web/src/app/(networks)/(evm)/[chainId]/pool/v3/[address]/(manage)/positions/page.tsx

@@ -23,7 +23,7 @@ export default async function ManageV3PoolPage(props: {
 
   const pool = (await unstable_cache(
     async () => await getV3Pool({ chainId, address }),
-    ['pool', `${chainId}:${address}`],
+    ['v3', 'pool', `${chainId}:${address}`],
     {
       revalidate: 60 * 15,
     },

apps/web/src/app/(networks)/(evm)/[chainId]/pool/v3/[address]/layout.tsx

@@ -1,12 +1,40 @@
 import { getV3Pool } from '@sushiswap/graph-client/data-api'
 import { unstable_cache } from 'next/cache'
 import { notFound } from 'next/navigation'
+import type { Metadata } from 'next/types'
 import type { EvmChainId } from 'sushi/chain'
 import { isSushiSwapV3ChainId } from 'sushi/config'
 import { isAddress } from 'viem'
 
-export const metadata = {
-  title: 'Pool 💦',
+export async function generateMetadata(props: {
+  params: Promise<{ chainId: string; address: string }>
+}): Promise<Metadata> {
+  const params = await props.params
+  const { chainId: _chainId, address } = params
+  const chainId = +_chainId as EvmChainId
+
+  if (
+    !isSushiSwapV3ChainId(chainId) ||
+    !isAddress(address, { strict: false })
+  ) {
+    return {}
+  }
+
+  const pool = await unstable_cache(
+    async () => getV3Pool({ chainId, address }),
+    ['v3', 'pool', `${chainId}:${address}`],
+    {
+      revalidate: 60 * 15,
+    },
+  )()
+
+  if (!pool) {
+    return {}
+  }
+
+  return {
+    title: `BUY & SELL ${pool.token0.symbol}/${pool.token1.symbol}`,
+  }
 }
 
 export default async function Layout(props: {
@@ -29,7 +57,7 @@ export default async function Layout(props: {
 
   const pool = await unstable_cache(
     async () => getV3Pool({ chainId, address }),
-    ['pool', `${chainId}:${address}`],
+    ['v3', 'pool', `${chainId}:${address}`],
     {
       revalidate: 60 * 15,
     },

apps/web/src/app/(networks)/(evm)/[chainId]/pool/v3/add/layout.tsx

@@ -2,10 +2,6 @@ import { Container, typographyVariants } from '@sushiswap/ui'
 
 import { BackButton } from 'src/ui/pool/BackButton'
 
-export const metadata = {
-  title: 'Pool 💦',
-}
-
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>