Merge pull request #1590 from sushiswap/data-api

Data api

.changeset/config.json

@@ -31,8 +31,6 @@
     "@sushiswap/tailwindcss-config",
     "@sushiswap/typescript-config",
 
-    "@sushiswap/pool-job",
-
     "@sushiswap/bonds-sdk",
     "@sushiswap/client",
     "@sushiswap/database",

apps/web/.env.example

@@ -11,3 +11,6 @@ ALCHEMY_ID=
 NEXT_PUBLIC_INFURA_ID=
 INFURA_ID=
 DRPC_ID=
+
+SUSHI_DATA_API_HOST=
+NEXT_PUBLIC_SUSHI_DATA_API_HOST=

apps/web/src/app/(cms)/header.tsx

@@ -40,7 +40,7 @@ export async function Header() {
   const navData: NavigationElement[] = [
     {
       title: 'Explore',
-      items: EXPLORE_NAVIGATION_LINKS,
+      items: EXPLORE_NAVIGATION_LINKS(),
       show: 'everywhere',
       type: NavigationElementType.Dropdown,
     },

apps/web/src/app/(evm)/(trade)/header.tsx

@@ -11,9 +11,8 @@ export const Header: FC = () => {
   const chainId = useChainId()
   return (
     <Navigation
-      leftElements={headerElements}
+      leftElements={headerElements(chainId)}
       rightElement={<WagmiHeaderComponents chainIds={SUPPORTED_CHAIN_IDS} />}
-      chainId={chainId}
     />
   )
 }

apps/web/src/app/(evm)/pool/hero.tsx → apps/web/src/app/(evm)/[chainId]/(positions)/hero.tsx

@@ -1,71 +1,55 @@
-'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 {
+  Button,
+  Chip,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  LinkInternal,
+  SelectIcon,
 } 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 { ChainId, ChainKey } from 'sushi/chain'
 import {
   SushiSwapV3ChainId,
   isSushiSwapV2ChainId,
   isSushiSwapV3ChainId,
 } from 'sushi/config'
-import { useChainId } from 'wagmi'
-
-export const Hero: FC = () => {
-  const chainId = useChainId()
 
+export const Hero: FC<{ chainId: ChainId }> = ({ chainId }) => {
   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">
+    <section className="flex flex-col gap-6">
+      <span className="text-5xl font-bold">Manage Liquidity Positions</span>
+      <div className="flex justify-between flex-wrap gap-6">
+        <span className="text-xl w-[720px] text-muted-foreground">
+          You can adjust and claim rewards for your liquidity positions on the
+          connected network. For V2 pools, you can migrate to increase capital
+          efficiency.
+        </span>
+        <div className="flex flex-col w-full sm:w-[unset] gap-4">
           <div className="flex items-center w-full">
             <Button
               asChild
-              size="lg"
+              size="sm"
               className="flex-1 w-full sm:flex-0 sm:w-[unset] rounded-r-none"
             >
               <LinkInternal
                 href={
                   isSushiSwapV3ChainId(chainId as SushiSwapV3ChainId)
-                    ? `/pool/add?chainId=${chainId}`
+                    ? `/${ChainKey[chainId]}/pool/v3/add`
                     : isSushiSwapV2ChainId(chainId as SushiSwapV3ChainId)
-                      ? `/pool/add/v2/${chainId}`
-                      : '/pool/add'
+                      ? `/${ChainKey[chainId]}/pool/v2/add`
+                      : `/${ChainKey[ChainId.ETHEREUM]}/pool/v3/add`
                 }
               >
                 I want to create a position
               </LinkInternal>
             </Button>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button asChild size="lg" className="rounded-l-none">
+                <Button asChild size="sm" className="rounded-l-none">
                   <SelectIcon />
                 </Button>
               </DropdownMenuTrigger>
@@ -78,7 +62,7 @@ export const Hero: FC = () => {
                     asChild
                   >
                     <LinkInternal
-                      href={`/pool/add?chainId=${chainId}`}
+                      href={`/${ChainKey[chainId]}/pool/v3/add`}
                       className="flex flex-col !items-start gap-1 cursor-pointer"
                     >
                       <div className="flex items-center gap-1 font-medium leading-none">
@@ -97,7 +81,7 @@ export const Hero: FC = () => {
                   {isSushiSwapV2ChainId(chainId as ChainId) ? (
                     <DropdownMenuItem asChild>
                       <LinkInternal
-                        href={`/pools/add/v2/${chainId}`}
+                        href={`/${ChainKey[chainId]}/pool/v2/add`}
                         className="flex flex-col !items-start gap-1 cursor-pointer"
                       >
                         <div className="flex items-center gap-1 font-medium leading-none">
@@ -118,37 +102,17 @@ export const Hero: FC = () => {
             asChild
             icon={GiftIcon}
             variant="secondary"
-            size="lg"
+            size="sm"
           >
-            <LinkInternal href="/pools/incentivize">
+            <LinkInternal
+              className="text-sm"
+              href={`/${ChainKey[chainId]}/pool/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)/pool/(landing)/layout.tsx → apps/web/src/app/(evm)/[chainId]/(positions)/layout.tsx

@@ -2,53 +2,43 @@
 
 import { Container, LinkInternal } from '@sushiswap/ui'
 import { useSearchParams } from 'next/navigation'
-
-import { PathnameButton, PoolsFiltersProvider } from 'src/ui/pool'
-import { Hero } from '../hero'
+import { PathnameButton } from 'src/ui/pathname-button'
+import { PoolsFiltersProvider } from 'src/ui/pool'
+import { ChainId, ChainKey, isChainId } from 'sushi/chain'
+import { Hero } from './hero'
 
 export default function TabsLayout({
   children,
-}: { children: React.ReactNode }) {
+  params,
+}: {
+  children: React.ReactNode
+  params: { chainId: string }
+}) {
+  const chainId = +params.chainId as ChainId
   const searchParams = useSearchParams()
 
+  if (!isChainId(chainId)) {
+    throw new Error('Must be a valid chain id')
+  }
+
   return (
     <>
-      <Container maxWidth="7xl" className="px-4 pt-20 pb-10">
-        <Hero />
+      <Container maxWidth="7xl" className="px-4 py-16">
+        <Hero chainId={chainId} />
       </Container>
-      <Container maxWidth="7xl" className="px-4">
-        <div className="flex flex-wrap items-center gap-2 mb-4">
-          <LinkInternal
-            shallow={true}
-            scroll={false}
-            href={`/pool?${searchParams.toString()}`}
-          >
-            <PathnameButton id="all-pools" pathname={'/pool'} asChild size="sm">
-              All Pools
-            </PathnameButton>
-          </LinkInternal>
-          <LinkInternal
-            shallow={true}
-            scroll={false}
-            href={`/pool/smart-pool?${searchParams.toString()}`}
-          >
-            <PathnameButton
-              id="smart-pools"
-              pathname={'/pool/smart-pool'}
-              asChild
-              size="sm"
-            >
-              Smart Pools
-            </PathnameButton>
-          </LinkInternal>
+      <Container
+        maxWidth="7xl"
+        className="px-4 flex justify-between flex-wrap-reverse gap-4 pb-4"
+      >
+        <div className="flex flex-wrap items-center gap-2">
           <LinkInternal
             shallow={true}
             scroll={false}
-            href={`/pool/my-positions?${searchParams.toString()}`}
+            href={`/${ChainKey[chainId]}/pool?${searchParams.toString()}`}
           >
             <PathnameButton
               id="my-positions"
-              pathname={'/pool/my-positions'}
+              pathname={`/${ChainKey[chainId]}/pool`}
               asChild
               size="sm"
             >
@@ -58,11 +48,11 @@ export default function TabsLayout({
           <LinkInternal
             shallow={true}
             scroll={false}
-            href={`/pool/my-rewards?${searchParams.toString()}`}
+            href={`/${ChainKey[chainId]}/rewards?${searchParams.toString()}`}
           >
             <PathnameButton
               id="my-rewards"
-              pathname={'/pool/my-rewards'}
+              pathname={`/${ChainKey[chainId]}/rewards`}
               asChild
               size="sm"
             >
@@ -72,11 +62,11 @@ export default function TabsLayout({
           <LinkInternal
             shallow={true}
             scroll={false}
-            href={`/pool/migrate?${searchParams.toString()}`}
+            href={`/${ChainKey[chainId]}/migrate?${searchParams.toString()}`}
           >
             <PathnameButton
               id="migrate"
-              pathname={'/pool/migrate'}
+              pathname={`/${ChainKey[chainId]}/migrate`}
               asChild
               size="sm"
             >

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

@@ -0,0 +1,10 @@
+import React from 'react'
+
+import { MigrateTabContent } from 'src/ui/pool/MigrateTabContent'
+import { ChainId } from 'sushi'
+
+export default function MigratePage({
+  params,
+}: { params: { chainId: string } }) {
+  return <MigrateTabContent chainId={+params.chainId as ChainId} />
+}

apps/web/src/app/(evm)/pool/(landing)/my-positions/page.tsx → apps/web/src/app/(evm)/[chainId]/(positions)/pool/page.tsx

@@ -2,21 +2,26 @@
 
 import { Container } from '@sushiswap/ui'
 import React from 'react'
+import { ChainId } from 'sushi/chain'
 
 import { PositionsTab } from 'src/ui/pool/PositionsTab'
 import { TableFiltersNetwork } from 'src/ui/pool/TableFiltersNetwork'
 import { TableFiltersResetButton } from 'src/ui/pool/TableFiltersResetButton'
 import { TableFiltersSearchToken } from 'src/ui/pool/TableFiltersSearchToken'
 
-export default function MyPositionsPage() {
+export default function MyPositionsPage({
+  params: { chainId },
+}: {
+  params: { chainId: string }
+}) {
   return (
     <Container maxWidth="7xl" className="px-4">
       <div className="flex flex-col sm:flex-row gap-3 mb-4">
         <TableFiltersSearchToken />
-        <TableFiltersNetwork />
+        <TableFiltersNetwork chainId={+chainId as ChainId} />
         <TableFiltersResetButton />
       </div>
-      <PositionsTab />
+      <PositionsTab chainId={+chainId as ChainId} />
     </Container>
   )
 }