feat(apps/web): next15

sushi-labs · Dec 18, 2024 · ee405c6 · ee405c6
1 parent 9fbfb08
commit ee405c6
Show file tree

Hide file tree

Showing 106 changed files with 8,035 additions and 4,747 deletions.
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -17,25 +17,25 @@
     "@sushiswap/ui": "workspace:*",
     "@tanstack/react-table": "8.9.1",
     "class-variance-authority": "0.7.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "sushi": "4.1.12"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "7.4.6",
-    "@storybook/addon-actions": "7.4.6",
-    "@storybook/addon-designs": "7.0.5",
-    "@storybook/addon-docs": "7.4.6",
-    "@storybook/addon-essentials": "7.4.6",
-    "@storybook/addon-links": "7.4.6",
-    "@storybook/addon-mdx-gfm": "7.4.6",
+    "@storybook/addon-a11y": "8.4.7",
+    "@storybook/addon-actions": "8.4.7",
+    "@storybook/addon-designs": "8.0.4",
+    "@storybook/addon-docs": "8.4.7",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/addon-mdx-gfm": "8.4.7",
     "@storybook/addon-styling": "1.3.7",
-    "@storybook/builder-vite": "7.4.6",
-    "@storybook/cli": "7.4.6",
-    "@storybook/react": "7.4.6",
-    "@storybook/react-vite": "7.4.6",
+    "@storybook/builder-vite": "8.4.7",
+    "@storybook/cli": "8.4.7",
+    "@storybook/react": "8.4.7",
+    "@storybook/react-vite": "8.4.7",
     "@sushiswap/typescript-config": "workspace:*",
-    "@types/react": "18.2.14",
+    "@types/react": "19.0.1",
     "@vitejs/plugin-react": "4.1.0",
     "autoprefixer": "10.4.14",
     "chromatic": "7.4.0",

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -7,7 +7,7 @@
     "build": "next build",
     "check": "tsc --pretty --noEmit",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next && rm -rf .swc",
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "generate-swaps": "tsx test/swap/scripts/generate-swaps.ts",
     "lint": "TIMING=1 next lint",
     "lint:fix": "TIMING=1 next lint --fix",
@@ -21,19 +21,20 @@
     "@aptos-labs/wallet-adapter-react": "2.3.1",
     "@cloudinary/url-gen": "1.11.2",
     "@fuul/sdk": "^4.11.1",
-    "@headlessui/react": "1.7.7",
+    "@headlessui/react": "2.2.0",
     "@heroicons/react": "2.0.13",
     "@heroicons/react-v1": "npm:@heroicons/react@v1",
     "@hookform/resolvers": "3.3.1",
     "@layerzerolabs/scan-client": "0.0.6",
     "@martianwallet/aptos-wallet-adapter": "0.0.5",
     "@msafe/aptos-wallet-adapter": "1.1.3",
-    "@next/bundle-analyzer": "14.2.11",
+    "@next/bundle-analyzer": "15.1.1",
     "@octokit/auth-app": "4.0.7",
     "@orbs-network/twap-ui-sushiswap": "1.1.66",
     "@pontem/wallet-adapter-plugin": "0.2.1",
-    "@radix-ui/react-slot": "1.0.2",
-    "@rainbow-me/rainbowkit": "2.1.6",
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-visually-hidden": "^1.1.1",
+    "@rainbow-me/rainbowkit": "2.2.1",
     "@rise-wallet/wallet-adapter": "0.1.2",
     "@snapshot-labs/snapshot.js": "0.9.9",
     "@sushiswap/graph-client": "workspace:*",
@@ -44,7 +45,7 @@
     "@sushiswap/tailwindcss-config": "workspace:*",
     "@sushiswap/telemetry": "workspace:*",
     "@sushiswap/ui": "workspace:*",
-    "@tanstack/react-query": "5.51.16",
+    "@tanstack/react-query": "5.62.8",
     "@tanstack/react-table": "8.9.1",
     "@tronweb3/tronwallet-abstract-adapter": "1.1.6",
     "@tronweb3/tronwallet-adapter-react-hooks": "1.1.7",
@@ -55,6 +56,7 @@
     "@upstash/redis": "1.22.1",
     "@vercel/analytics": "1.3.1",
     "@vercel/edge-config": "1.2.0",
+    "@vercel/functions": "^1.5.2",
     "@vercel/speed-insights": "1.0.12",
     "@wagmi/connectors": "5.1.2",
     "@wagmi/core": "2.13.5",
@@ -64,24 +66,24 @@
     "echarts": "4.9.0",
     "echarts-for-react": "3.0.2",
     "fewcha-plugin-wallet-adapter": "0.1.3",
-    "framer-motion": "7.10.3",
+    "framer-motion": "11.15.0",
     "lodash.frompairs": "4.0.1",
     "lodash.maxby": "4.6.0",
     "lodash.once": "4.1.1",
     "lodash.uniqby": "4.7.0",
     "lodash.zip": "4.2.0",
     "ms": "2.1.3",
     "nanoid": "4.0.0",
-    "next": "14.2.13",
-    "next-themes": "0.2.1",
+    "next": "15.1.1",
+    "next-themes": "0.4.4",
     "octokit": "2.1.0",
     "petra-plugin-wallet-adapter": "0.4.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-dropzone": "14.2.3",
     "react-hook-form": "7.41.2",
     "react-infinite-scroll-component": "6.1.0",
-    "react-toastify": "9.1.3",
+    "react-toastify": "11.0.1",
     "react-virtualized-auto-sizer": "1.0.7",
     "react-window": "1.8.7",
     "sharp": "^0.33.5",
@@ -96,8 +98,8 @@
   },
   "devDependencies": {
     "@0xsquid/squid-types": "0.1.78",
-    "@next/env": "14.2.11",
-    "@next/eslint-plugin-next": "14.2.11",
+    "@next/env": "15.1.1",
+    "@next/eslint-plugin-next": "15.1.1",
     "@playwright/test": "1.45.0",
     "@tsconfig/next": "2.0.1",
     "@types/d3": "7.4.0",
@@ -109,8 +111,8 @@
     "@types/lodash.zip": "4.2.9",
     "@types/ms": "0.7.34",
     "@types/node": "22",
-    "@types/react": "18.2.14",
-    "@types/react-dom": "18.2.6",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.2",
     "@types/react-virtualized-auto-sizer": "1.0.1",
     "@types/react-window": "1.8.5",
     "@types/tryghost__content-api": "1.3.12",

diff --git a/apps/web/src/app/(cms)/academy/[article-slug]/page.tsx b/apps/web/src/app/(cms)/academy/[article-slug]/page.tsx
@@ -13,14 +13,15 @@ import { ArticleLinks } from './components/article-links'
 import { Breadcrumb } from './components/breadcrumb'
 
 interface Props {
-  params: {
+  params: Promise<{
     'article-slug': string
-  }
+  }>
 }
 
 export const revalidate = 3600
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   const {
     articles: [article],
   } = await getAcademyArticles({
@@ -69,7 +70,8 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   }
 }
 
-export default async function Page({ params }: Props) {
+export default async function Page(props: Props) {
+  const params = await props.params;
   let article
   let moreArticles
   let body: string

diff --git a/...ademy/explore/components/difficulty-filter-dropdown/difficulty-filter-dropdown-client.tsx b/...ademy/explore/components/difficulty-filter-dropdown/difficulty-filter-dropdown-client.tsx
@@ -75,7 +75,7 @@ export function DifficultyFilterDropdownClient({
             {value || 'Select difficulty'}
           </span>
         </SelectTrigger>
-        <SelectContent placeholder="Select Difficulty">
+        <SelectContent>
           {difficulties.map((difficulty) => (
             <SelectItem
               key={difficulty.slug}

diff --git a/apps/web/src/app/(cms)/academy/explore/components/sort-by-dropdown.tsx b/apps/web/src/app/(cms)/academy/explore/components/sort-by-dropdown.tsx
@@ -30,8 +30,8 @@ export function SortByDropdown() {
 
   return (
     <Select value={sortByIndex} onValueChange={onSelect}>
-      <SelectTrigger placeholder="Sort by">
-        {SORTING_OPTIONS[+sortByIndex].name}
+      <SelectTrigger>
+        {sorting ? SORTING_OPTIONS[+sortByIndex].name : 'Sort By'}
       </SelectTrigger>
       <SelectContent>
         {SORTING_OPTIONS?.map((option, i) => (

diff --git a/apps/web/src/app/(cms)/academy/products/components/product-faq.tsx b/apps/web/src/app/(cms)/academy/products/components/product-faq.tsx
@@ -49,17 +49,18 @@ export function ProductFaq({ faqSlug }: ProductFaq) {
 
                 <Transition
                   show={open}
-                  className="transition-[max-height] overflow-hidden"
                   enter="duration-300 ease-in-out"
                   enterFrom="transform max-h-0"
                   enterTo="transform max-h-max"
                   leave="transition-[max-height] duration-250 ease-in-out"
                   leaveFrom="transform max-h-max"
                   leaveTo="transform max-h-0"
                 >
-                  <Disclosure.Panel className="px-6 pb-6 text-slate-400 sm:px-9 sm:pb-9 sm:text-base">
-                    {answer}
-                  </Disclosure.Panel>
+                  <div className="transition-[max-height] overflow-hidden">
+                    <Disclosure.Panel className="px-6 pb-6 text-slate-400 sm:px-9 sm:pb-9 sm:text-base">
+                      {answer}
+                    </Disclosure.Panel>
+                  </div>
                 </Transition>
               </>
             )}

diff --git a/apps/web/src/app/(cms)/academy/products/components/product-hero.tsx b/apps/web/src/app/(cms)/academy/products/components/product-hero.tsx
@@ -1,5 +1,5 @@
 import { Button, IconComponent, LinkInternal, classNames } from '@sushiswap/ui'
-import type { FC, ReactNode } from 'react'
+import type { FC, ReactNode, JSX } from 'react';
 import { ProductStat, ProductStats } from './product-stats'
 
 interface ProductHero {

diff --git a/apps/web/src/app/(cms)/academy/products/components/product-info-images.tsx b/apps/web/src/app/(cms)/academy/products/components/product-info-images.tsx
@@ -3,6 +3,8 @@ import { RouterImg } from '../assets/router-img'
 import { TokensBoardImg } from '../assets/tokens-board-img'
 import { TokensPanelImg } from '../assets/tokens-panel-img'
 
+import type { JSX } from "react";
+
 interface ProductInfoSection {
   title: string
   description: string

diff --git a/apps/web/src/app/(cms)/blog/[article-slug]/page.tsx b/apps/web/src/app/(cms)/blog/[article-slug]/page.tsx
@@ -12,14 +12,15 @@ import { ArticleFooter } from './components/article-footer'
 import { ArticleLinks } from './components/article-links/article-links'
 
 interface Props {
-  params: {
+  params: Promise<{
     'article-slug': string
-  }
+  }>
 }
 
 export const revalidate = 3600
 
-export async function generateMetadata({ params }: Props): Promise<Metadata> {
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const params = await props.params;
   const {
     articles: [article],
   } = await getBlogArticles({
@@ -68,7 +69,8 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   }
 }
 
-export default async function Page({ params }: Props) {
+export default async function Page(props: Props) {
+  const params = await props.params;
   let article
   let moreArticles
   let body

diff --git a/apps/web/src/app/(cms)/faq/[category-slug]/(category)/layout.tsx b/apps/web/src/app/(cms)/faq/[category-slug]/(category)/layout.tsx
@@ -6,13 +6,18 @@ import { CategoryLayout } from './components/category-layout'
 
 export const revalidate = 900
 
-export default async function Layout({
-  children,
-  params,
-}: {
-  children: React.ReactNode
-  params: { 'category-slug': string }
-}) {
+export default async function Layout(
+  props: {
+    children: React.ReactNode
+    params: Promise<{ 'category-slug': string }>
+  }
+) {
+  const params = await props.params;
+
+  const {
+    children
+  } = props;
+
   let category
 
   try {

diff --git a/apps/web/src/app/(cms)/faq/[category-slug]/(category)/page.tsx b/apps/web/src/app/(cms)/faq/[category-slug]/(category)/page.tsx
@@ -31,11 +31,12 @@ function AnswerGroup({
   )
 }
 
-export default async function FaqCategoryPage({
-  params,
-}: {
-  params: { 'category-slug': string }
-}) {
+export default async function FaqCategoryPage(
+  props: {
+    params: Promise<{ 'category-slug': string }>
+  }
+) {
+  const params = await props.params;
   let category
 
   try {

diff --git a/apps/web/src/app/(cms)/faq/[category-slug]/[answer-group-slug]/[answer-slug]/page.tsx b/apps/web/src/app/(cms)/faq/[category-slug]/[answer-group-slug]/[answer-slug]/page.tsx
@@ -4,9 +4,8 @@ import { getGhostBody } from 'src/app/(cms)/lib/ghost/ghost'
 
 export const revalidate = 3600
 
-export default async function AnswerPage({
-  params,
-}: { params: { 'answer-slug': string } }) {
+export default async function AnswerPage(props: { params: Promise<{ 'answer-slug': string }> }) {
+  const params = await props.params;
   let answer
   let body
 

diff --git a/apps/web/src/app/(cms)/faq/[category-slug]/[answer-group-slug]/layout.tsx b/apps/web/src/app/(cms)/faq/[category-slug]/[answer-group-slug]/layout.tsx
@@ -6,13 +6,18 @@ import { AnswerGroupLayout } from './components/answer-group-layout'
 
 export const revalidate = 900
 
-export default async function Layout({
-  children,
-  params,
-}: {
-  children: React.ReactNode
-  params: { 'answer-group-slug': string }
-}) {
+export default async function Layout(
+  props: {
+    children: React.ReactNode
+    params: Promise<{ 'answer-group-slug': string }>
+  }
+) {
+  const params = await props.params;
+
+  const {
+    children
+  } = props;
+
   let answerGroup
 
   try {

diff --git a/apps/web/src/app/(networks)/(evm)/[chainId]/(positions)/layout.tsx b/apps/web/src/app/(networks)/(evm)/[chainId]/(positions)/layout.tsx
@@ -9,13 +9,18 @@ import { Header } from '../header'
 import { Hero } from './hero'
 import { NavigationItems } from './navigation-items'
 
-export default function PositionsLayout({
-  children,
-  params,
-}: {
-  children: React.ReactNode
-  params: { chainId: string }
-}) {
+export default async function PositionsLayout(
+  props: {
+    children: React.ReactNode
+    params: Promise<{ chainId: string }>
+  }
+) {
+  const params = await props.params;
+
+  const {
+    children
+  } = props;
+
   const chainId = +params.chainId as ChainId
 
   if (!isPoolChainId(chainId)) {

diff --git a/apps/web/src/app/(networks)/(evm)/[chainId]/(positions)/migrate/page.tsx b/apps/web/src/app/(networks)/(evm)/[chainId]/(positions)/migrate/page.tsx
@@ -11,9 +11,8 @@ export const metadata: Metadata = {
   description: 'A SushiSwap V2 to V3 migration tool.',
 }
 
-export default function MigratePage({
-  params,
-}: { params: { chainId: string } }) {
+export default async function MigratePage(props: { params: Promise<{ chainId: string }> }) {
+  const params = await props.params;
   const chainId = +params.chainId as ChainId
 
   if (!isSushiSwapV2ChainId(chainId)) {