feat: sidebar

apps/web/next.config.mjs

@@ -77,11 +77,6 @@ const nextConfig = bundleAnalyzer({
         permanent: true,
         destination: 'https://medium.com/sushiswap-org',
       },
-      {
-        source: '/skale/swap',
-        permanent: true,
-        destination: '/swap?chainId=2046399126',
-      },
       {
         source: '/swap/cross-chain:path*',
         permanent: true,

apps/web/package.json

@@ -73,7 +73,7 @@
     "lodash.zip": "4.2.0",
     "ms": "2.1.3",
     "nanoid": "4.0.0",
-    "next": "14.2.11",
+    "next": "14.2.13",
     "next-themes": "0.2.1",
     "octokit": "2.1.0",
     "petra-plugin-wallet-adapter": "0.4.5",

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

@@ -1,13 +1,18 @@
 'use client'
 
+import { isPoolChainId } from '@sushiswap/graph-client/data-api'
 import { Container, LinkInternal } from '@sushiswap/ui'
 import { useSearchParams } from 'next/navigation'
+import { POOL_SUPPORTED_NETWORKS } from 'src/config'
 import { PathnameButton } from 'src/ui/pathname-button'
 import { PoolsFiltersProvider } from 'src/ui/pool'
-import { ChainId, ChainKey, isChainId } from 'sushi/chain'
+import { SidebarContainer, SidebarProvider } from 'src/ui/sidebar'
+import { ChainId, ChainKey } from 'sushi/chain'
+import { Header } from '../header'
+import notFound from '../not-found'
 import { Hero } from './hero'
 
-export default function TabsLayout({
+export default function PositionsLayout({
   children,
   params,
 }: {
@@ -17,69 +22,83 @@ export default function TabsLayout({
   const chainId = +params.chainId as ChainId
   const searchParams = useSearchParams()
 
-  if (!isChainId(chainId)) {
-    throw new Error('Must be a valid chain id')
+  if (!isPoolChainId(chainId)) {
+    return notFound()
   }
 
   return (
-    <>
-      <Container maxWidth="7xl" className="px-4 py-16">
-        <Hero chainId={chainId} />
-      </Container>
-      <Container
-        maxWidth="7xl"
-        className="px-4 flex justify-between flex-wrap-reverse gap-4 pb-4"
+    <SidebarProvider>
+      <Header chainId={chainId} />
+      <SidebarContainer
+        shiftContent
+        selectedNetwork={chainId}
+        supportedNetworks={POOL_SUPPORTED_NETWORKS}
+        unsupportedNetworkHref={'/ethereum/pool'}
       >
-        <div className="flex flex-wrap items-center gap-2">
-          <LinkInternal
-            shallow={true}
-            scroll={false}
-            href={`/${ChainKey[chainId]}/pool?${searchParams.toString()}`}
+        <main className="flex flex-col h-full flex-1">
+          <Container maxWidth="7xl" className="px-4 py-16">
+            <Hero chainId={chainId} />
+          </Container>
+          <Container
+            maxWidth="7xl"
+            className="px-4 flex justify-between flex-wrap-reverse gap-4 pb-4"
           >
-            <PathnameButton
-              id="my-positions"
-              pathname={`/${ChainKey[chainId]}/pool`}
-              asChild
-              size="sm"
-            >
-              My Positions
-            </PathnameButton>
-          </LinkInternal>
-          <LinkInternal
-            shallow={true}
-            scroll={false}
-            href={`/${ChainKey[chainId]}/rewards?${searchParams.toString()}`}
-          >
-            <PathnameButton
-              id="my-rewards"
-              pathname={`/${ChainKey[chainId]}/rewards`}
-              asChild
-              size="sm"
-            >
-              My Rewards
-            </PathnameButton>
-          </LinkInternal>
-          <LinkInternal
-            shallow={true}
-            scroll={false}
-            href={`/${ChainKey[chainId]}/migrate?${searchParams.toString()}`}
-          >
-            <PathnameButton
-              id="migrate"
-              pathname={`/${ChainKey[chainId]}/migrate`}
-              asChild
-              size="sm"
-            >
-              Migrate
-            </PathnameButton>
-          </LinkInternal>
-        </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">
-          <PoolsFiltersProvider>{children}</PoolsFiltersProvider>
-        </div>
-      </section>
-    </>
+            <div className="flex flex-wrap items-center gap-2">
+              <LinkInternal
+                shallow={true}
+                scroll={false}
+                href={`/${ChainKey[chainId]}/pool?${searchParams.toString()}`}
+              >
+                <PathnameButton
+                  id="my-positions"
+                  pathname={`/${ChainKey[chainId]}/pool`}
+                  asChild
+                  size="sm"
+                >
+                  My Positions
+                </PathnameButton>
+              </LinkInternal>
+              <LinkInternal
+                shallow={true}
+                scroll={false}
+                href={`/${
+                  ChainKey[chainId]
+                }/rewards?${searchParams.toString()}`}
+              >
+                <PathnameButton
+                  id="my-rewards"
+                  pathname={`/${ChainKey[chainId]}/rewards`}
+                  asChild
+                  size="sm"
+                >
+                  My Rewards
+                </PathnameButton>
+              </LinkInternal>
+              <LinkInternal
+                shallow={true}
+                scroll={false}
+                href={`/${
+                  ChainKey[chainId]
+                }/migrate?${searchParams.toString()}`}
+              >
+                <PathnameButton
+                  id="migrate"
+                  pathname={`/${ChainKey[chainId]}/migrate`}
+                  asChild
+                  size="sm"
+                >
+                  Migrate
+                </PathnameButton>
+              </LinkInternal>
+            </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-10 min-h-screen">
+              <PoolsFiltersProvider>{children}</PoolsFiltersProvider>
+            </div>
+          </section>
+        </main>
+      </SidebarContainer>
+    </SidebarProvider>
   )
 }

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

@@ -1,14 +1,14 @@
 'use client'
 
 import { Container } from '@sushiswap/ui'
-import React from 'react'
-import { ChainId } from 'sushi/chain'
-
 import { notFound } from 'next/navigation'
+import React from 'react'
+import { POOL_SUPPORTED_NETWORKS } from 'src/config'
 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'
+import { ChainId } from 'sushi/chain'
 import { isSushiSwapChainId } from 'sushi/config'
 
 export default function MyPositionsPage({
@@ -26,7 +26,12 @@ export default function MyPositionsPage({
     <Container maxWidth="7xl" className="px-4">
       <div className="flex flex-col sm:flex-row gap-3 mb-4">
         <TableFiltersSearchToken />
-        <TableFiltersNetwork chainId={+chainId as ChainId} />
+        <TableFiltersNetwork
+          network={chainId}
+          supportedNetworks={POOL_SUPPORTED_NETWORKS}
+          unsupportedNetworkHref="/ethereum/pool"
+          className="lg:hidden block"
+        />
         <TableFiltersResetButton />
       </div>
       <PositionsTab chainId={chainId} />

apps/web/src/app/(evm)/[chainId]/(trade)/cross-chain-swap/layout.tsx

@@ -0,0 +1,31 @@
+import { SidebarContainer } from 'src/ui/sidebar'
+import { ChainId } from 'sushi/chain'
+import {
+  SUSHIXSWAP_2_SUPPORTED_CHAIN_IDS,
+  isSushiXSwap2ChainId,
+} from 'sushi/config'
+import NotFound from '~evm/[chainId]/not-found'
+import { Providers } from './providers'
+
+export default function CrossChainSwapLayout({
+  children,
+  params,
+}: { children: React.ReactNode; params: { chainId: string } }) {
+  const chainId = +params.chainId as ChainId
+
+  if (!isSushiXSwap2ChainId(chainId)) {
+    return NotFound()
+  }
+
+  return (
+    <Providers>
+      <SidebarContainer
+        selectedNetwork={chainId}
+        supportedNetworks={SUSHIXSWAP_2_SUPPORTED_CHAIN_IDS}
+        unsupportedNetworkHref="/ethereum/cross-chain-swap"
+      >
+        <main className="lg:p-4 mt-16 mb-[86px]">{children}</main>
+      </SidebarContainer>
+    </Providers>
+  )
+}

apps/web/src/app/(evm)/(trade)/cross-chain-swap/loading.tsx → apps/web/src/app/(evm)/[chainId]/(trade)/cross-chain-swap/loading.tsx

@@ -5,13 +5,16 @@ export default function CrossChainSwapLoading() {
   return (
     <Container maxWidth="lg" className="px-4">
       <div className="flex flex-col gap-4">
+        <div />
         <div className="flex flex-col gap-2 mb-4 sm:mt-10 mt-2">
           <SkeletonBox className="w-[140px] h-[53px]" />
           <SkeletonBox className="h-[20px] w-[280px]" />
         </div>
         <div className="flex gap-2">
-          <SkeletonBox className="h-[36px] w-[125px]" />
-          <SkeletonBox className="h-[36px] w-[125px]" />
+          <SkeletonBox className="h-[36px] w-[61px]" />
+          <SkeletonBox className="h-[36px] w-[56px]" />
+          <SkeletonBox className="h-[36px] w-[54px]" />
+          <SkeletonBox className="h-[36px] w-[136px]" />
         </div>
         <div className="flex flex-col gap-2.5">
           <SkeletonBox className="w-full h-[169px]" />

apps/web/src/app/(evm)/(trade)/cross-chain-swap/page.tsx → apps/web/src/app/(evm)/[chainId]/(trade)/cross-chain-swap/page.tsx

@@ -1,19 +1,15 @@
 import { Container } from '@sushiswap/ui'
 import { CrossChainSwapWidget } from 'src/ui/swap/cross-chain/cross-chain-swap-widget'
 
-import { Providers } from './providers'
-
 export const metadata = {
   title: 'Cross-Chain Swap',
   description: 'SushiSwap Cross-Chain Swap',
 }
 
 export default async function CrossChainSwapPage() {
   return (
-    <Providers>
-      <Container maxWidth="lg" className="px-4">
-        <CrossChainSwapWidget />
-      </Container>
-    </Providers>
+    <Container maxWidth="lg" className="px-4">
+      <CrossChainSwapWidget />
+    </Container>
   )
 }

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

@@ -0,0 +1,28 @@
+import { TWAP_SUPPORTED_CHAIN_IDS, isTwapSupportedChainId } from 'src/config'
+import { SidebarContainer } from 'src/ui/sidebar'
+import { ChainId } from 'sushi/chain'
+import NotFound from '~evm/[chainId]/not-found'
+import { Providers } from './providers'
+
+export default function SwapDCALayout({
+  children,
+  params,
+}: { children: React.ReactNode; params: { chainId: string } }) {
+  const chainId = +params.chainId as ChainId
+
+  if (!isTwapSupportedChainId(chainId)) {
+    return NotFound()
+  }
+
+  return (
+    <Providers>
+      <SidebarContainer
+        selectedNetwork={chainId}
+        supportedNetworks={TWAP_SUPPORTED_CHAIN_IDS}
+        unsupportedNetworkHref="/ethereum/dca"
+      >
+        <main className="lg:p-4 mt-16 mb-[86px]">{children}</main>
+      </SidebarContainer>
+    </Providers>
+  )
+}

apps/web/src/app/(evm)/(trade)/limit/loading.tsx → apps/web/src/app/(evm)/[chainId]/(trade)/dca/loading.tsx

@@ -5,13 +5,16 @@ export default function SimpleSwapLoading() {
   return (
     <Container maxWidth="lg" className="px-4">
       <div className="flex flex-col gap-4">
+        <div />
         <div className="flex flex-col gap-2 mb-4 sm:mt-10 mt-2">
           <SkeletonBox className="w-[140px] h-[53px]" />
           <SkeletonBox className="h-[20px] w-[280px]" />
         </div>
         <div className="flex gap-2">
-          <SkeletonBox className="h-[36px] w-[125px]" />
-          <SkeletonBox className="h-[36px] w-[125px]" />
+          <SkeletonBox className="h-[36px] w-[61px]" />
+          <SkeletonBox className="h-[36px] w-[56px]" />
+          <SkeletonBox className="h-[36px] w-[54px]" />
+          <SkeletonBox className="h-[36px] w-[136px]" />
         </div>
         <div className="flex flex-col gap-2.5">
           <SkeletonBox className="w-full h-[142px]" />

apps/web/src/app/(evm)/(trade)/dca/page.tsx → apps/web/src/app/(evm)/[chainId]/(trade)/dca/page.tsx

@@ -1,6 +1,5 @@
 import { Container } from '@sushiswap/ui'
 import dynamic from 'next/dynamic'
-import { Providers } from './providers'
 
 const TWAPPanel = dynamic(
   () => import('src/ui/swap/twap/twap').then((it) => it.TWAPPanel),
@@ -14,10 +13,8 @@ export const metadata = {
 
 export default function SwapDCAPage() {
   return (
-    <Providers>
-      <Container maxWidth="lg" className="px-4">
-        <TWAPPanel />
-      </Container>
-    </Providers>
+    <Container maxWidth="lg" className="px-4">
+      <TWAPPanel />
+    </Container>
   )
 }