wip

apps/web/src/app/(evm)/[chainId]/explore/hero.tsx

@@ -0,0 +1,154 @@
+'use client'
+
+import { GiftIcon } from '@heroicons/react-v1/outline'
+import { LinkExternal, LinkInternal, typographyVariants } from '@sushiswap/ui'
+import { Button } from '@sushiswap/ui'
+import { Chip } from '@sushiswap/ui'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@sushiswap/ui'
+import { SelectIcon } from '@sushiswap/ui'
+import { DiscordIcon } from '@sushiswap/ui/icons/DiscordIcon'
+import { FC } from 'react'
+import { ChainId } from 'sushi/chain'
+import {
+  SushiSwapV3ChainId,
+  isSushiSwapV2ChainId,
+  isSushiSwapV3ChainId,
+} from 'sushi/config'
+import { useChainId } from 'wagmi'
+
+export const Hero: FC = () => {
+  const chainId = useChainId()
+
+  return (
+    <section className="flex flex-col justify-between gap-12 lg:flex-row lg:items-start mb-12">
+      <div className="flex flex-col items-center flex-grow gap-6 lg:items-start">
+        <div className="flex flex-col">
+          <h1 className={typographyVariants({ variant: 'h1' })}>
+            Put your funds to work <br />
+            by providing liquidity.
+          </h1>
+          <p
+            className={typographyVariants({
+              variant: 'lead',
+              className: 'max-w-[500px]',
+            })}
+          >
+            When you add liquidity to a pool, you can receive a share of its
+            trading volume and potentially snag extra rewards when there are
+            incentives involved!
+          </p>
+        </div>
+        <div className="flex flex-col sm:flex-row w-full sm:w-[unset] gap-4">
+          <div className="flex items-center w-full">
+            <Button
+              asChild
+              size="lg"
+              className="flex-1 w-full sm:flex-0 sm:w-[unset] rounded-r-none"
+            >
+              <LinkInternal
+                href={
+                  isSushiSwapV3ChainId(chainId as SushiSwapV3ChainId)
+                    ? `/pool/add?chainId=${chainId}`
+                    : isSushiSwapV2ChainId(chainId as SushiSwapV3ChainId)
+                      ? `/pool/add/v2/${chainId}`
+                      : ''
+                }
+              >
+                I want to create a position
+              </LinkInternal>
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button asChild size="lg" className="rounded-l-none">
+                  <SelectIcon />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-80">
+                <DropdownMenuGroup>
+                  <DropdownMenuItem
+                    disabled={
+                      !isSushiSwapV3ChainId(chainId as SushiSwapV3ChainId)
+                    }
+                    asChild
+                  >
+                    <LinkInternal
+                      href={`/pool/add?chainId=${chainId}`}
+                      className="flex flex-col !items-start gap-1 cursor-pointer"
+                    >
+                      <div className="flex items-center gap-1 font-medium leading-none">
+                        V3 Position
+                        <Chip variant="secondary">
+                          {isSushiSwapV3ChainId(chainId as SushiSwapV3ChainId)
+                            ? 'New 🔥'
+                            : 'Unavailable'}
+                        </Chip>
+                      </div>
+                      <p className="text-sm leading-snug text-muted-foreground">
+                        Provide liquidity to a V3 liquidity pool.
+                      </p>
+                    </LinkInternal>
+                  </DropdownMenuItem>
+                  {isSushiSwapV2ChainId(chainId as ChainId) ? (
+                    <DropdownMenuItem asChild>
+                      <LinkInternal
+                        href={`/pools/add/v2/${chainId}`}
+                        className="flex flex-col !items-start gap-1 cursor-pointer"
+                      >
+                        <div className="flex items-center gap-1 font-medium leading-none">
+                          V2 Position
+                        </div>
+                        <p className="text-sm leading-snug text-muted-foreground">
+                          Provide liquidity to a V2 liquidity pool.
+                        </p>
+                      </LinkInternal>
+                    </DropdownMenuItem>
+                  ) : null}
+                </DropdownMenuGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+          <Button
+            fullWidth
+            asChild
+            icon={GiftIcon}
+            variant="secondary"
+            size="lg"
+          >
+            <LinkInternal href="/pools/incentivize">
+              I want to incentivize a pool
+            </LinkInternal>
+          </Button>
+        </div>
+      </div>
+      <div className="flex flex-col items-center gap-4 lg:items-end">
+        <div className="flex flex-col items-center gap-1 lg:items-end">
+          <span className="font-semibold lg:text-sm">
+            Looking for a partnership with Sushi?
+          </span>
+          <Button
+            className="flex-1 w-full sm:flex-0 sm:w-[unset]"
+            variant="link"
+            size="sm"
+            asChild
+          >
+            <LinkInternal href="/partner">Apply here</LinkInternal>
+          </Button>
+        </div>
+        <div className="flex flex-col items-center gap-1 lg:items-end">
+          <span className="font-semibold lg:text-sm">Need Help?</span>
+          <Button icon={DiscordIcon} variant="link" size="sm" asChild>
+            <LinkExternal href="https://sushi.com/discord">
+              Join our discord
+            </LinkExternal>
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,29 @@
+import { Container } from '@sushiswap/ui'
+import { GlobalStatsCharts } from 'src/ui/explore/global-stats-charts'
+import { ChainId } from 'sushi/chain'
+import { Hero } from './hero'
+
+export const metadata = {
+  title: 'Pools 💦',
+}
+
+export default async function ExploreLayout({
+  children,
+  params: { chainId },
+}: { children: React.ReactNode; params: { chainId: string } }) {
+  return (
+    <>
+      <Container maxWidth="7xl" className="px-4 pt-20 pb-10">
+        <Hero />
+        <div className="mt-10">
+          <GlobalStatsCharts chainId={+chainId as ChainId} />
+        </div>
+      </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-20 h-full">
+          {children}
+        </div>
+      </section>
+    </>
+  )
+}

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

@@ -0,0 +1,43 @@
+import { getTopPools } from '@sushiswap/graph-client/data-api'
+import { Container } from '@sushiswap/ui'
+import { unstable_cache } from 'next/cache'
+import React from 'react'
+import { PoolsFiltersProvider } from 'src/ui/pool'
+import { PoolsTable } from 'src/ui/pool/PoolsTable'
+import { TableFiltersSmartPoolsOnly } from 'src/ui/pool/TableFilterSmartPoolsOnly'
+import { TableFiltersFarmsOnly } from 'src/ui/pool/TableFiltersFarmsOnly'
+import { TableFiltersNetwork } from 'src/ui/pool/TableFiltersNetwork'
+import { TableFiltersPoolType } from 'src/ui/pool/TableFiltersPoolType'
+import { TableFiltersResetButton } from 'src/ui/pool/TableFiltersResetButton'
+import { TableFiltersSearchToken } from 'src/ui/pool/TableFiltersSearchToken'
+import { ChainId } from 'sushi/chain'
+
+export default async function PoolPage({
+  params: { chainId },
+}: {
+  params: { chainId: string }
+}) {
+  const pools = await unstable_cache(
+    async () => getTopPools({ chainId: +chainId }),
+    ['pools', chainId.toString()],
+    {
+      revalidate: 60 * 3,
+    },
+  )()
+
+  return (
+    <PoolsFiltersProvider>
+      <Container maxWidth="7xl" className="px-4">
+        <div className="flex flex-wrap gap-3 mb-4">
+          <TableFiltersSearchToken />
+          <TableFiltersPoolType />
+          <TableFiltersNetwork chainId={+chainId as ChainId} />
+          <TableFiltersFarmsOnly />
+          <TableFiltersSmartPoolsOnly />
+          <TableFiltersResetButton />
+        </div>
+        <PoolsTable pools={pools} />
+      </Container>
+    </PoolsFiltersProvider>
+  )
+}

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

@@ -1,15 +1,18 @@
 import { HotJar } from '@sushiswap/ui'
 
+import { isSupportedChainId } from 'src/config'
 import { Header } from './header'
+import notFound from './not-found'
 import { Providers } from './providers'
 
-export const metadata = {
-  title: 'Pool 💦',
-}
-
 export default function PoolLayout({
   children,
-}: { children: React.ReactNode }) {
+  params: { chainId },
+}: { children: React.ReactNode; params: { chainId: string } }) {
+  if (!isSupportedChainId(+chainId)) {
+    return notFound()
+  }
+
   return (
     <>
       <Providers>

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

@@ -1,6 +1,5 @@
-import { getV2Pool } from '@sushiswap/graph-client/data-api'
+import { V2Pool, getV2Pool } from '@sushiswap/graph-client/data-api'
 import { unstable_cache } from 'next/cache'
-import { notFound } from 'next/navigation'
 
 import { PoolPageV2 } from 'src/ui/pool/PoolPageV2'
 
@@ -10,18 +9,13 @@ export default async function PoolPage({
   params: { chainId: string; address: string }
 }) {
   const { chainId, address } = params
-  const pool = await unstable_cache(
+  const pool = (await unstable_cache(
     async () => await getV2Pool({ chainId: Number(chainId), address }),
     ['pool', `${chainId}:${address}`],
     {
       revalidate: 60 * 3,
     },
-  )()
-
-  // Rockstar C&D
-  if (!pool || pool.id === '42161:0x0a4f9962e24893a4a7567e52c1ce37d5482365de') {
-    return notFound()
-  }
+  )()) as NonNullable<V2Pool>
 
   return <PoolPageV2 pool={pool} />
 }

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

@@ -3,7 +3,7 @@ import { Breadcrumb, Container } from '@sushiswap/ui'
 import { unstable_cache } from 'next/cache'
 import { headers } from 'next/headers'
 import { PoolHeader } from 'src/ui/pool/PoolHeader'
-import notFound from '../../../../not-found'
+import notFound from '../../../not-found'
 
 export const metadata = {
   title: 'Pool 💦',
@@ -18,18 +18,17 @@ export default async function Layout({
 }) {
   const { chainId, address } = params
   const pool = await unstable_cache(
-    async () =>
-      getV2Pool({ chainId: Number(chainId), address }),
+    async () => getV2Pool({ chainId: Number(chainId), address }),
     ['pool', `${chainId}:${address}`],
     {
       revalidate: 60 * 15,
     },
   )()
 
-  if (!pool) {
+  // Rockstar C&D
+  if (!pool || pool.id === '42161:0x0a4f9962e24893a4a7567e52c1ce37d5482365de') {
     return notFound()
   }
-
   const headersList = headers()
   const referer = headersList.get('referer')
   return (