Merge pull request #1783 from sushi-labs/nextjs-15

feat(apps/web): next15
sushi-labs · Jan 14, 2025 · 3a31376 · 3a31376
2 parents 15769b9 + c7bf0c2
commit 3a31376
Show file tree

Hide file tree

Showing 111 changed files with 3,617 additions and 6,317 deletions.
diff --git a/apps/storybook/.storybook/main.ts b/apps/storybook/.storybook/main.ts
@@ -3,19 +3,19 @@
 // Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite)
 import type { StorybookConfig } from '@storybook/react-vite'
 
-import path from 'path'
+import path, { dirname, join } from 'path'
 import { mergeConfig } from 'vite'
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.stories.tsx'],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-styling',
-    '@storybook/addon-designs',
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-themes'),
+    getAbsolutePath('@storybook/addon-designs'),
   ],
   framework: {
-    name: '@storybook/react-vite',
+    name: getAbsolutePath('@storybook/react-vite'),
     options: {},
   },
   docs: {
@@ -61,3 +61,7 @@ const config: StorybookConfig = {
 }
 
 export default config
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -17,31 +17,30 @@
     "@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.23"
   },
   "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-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/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-themes": "^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",
     "postcss": "8.4.23",
     "serve": "14.2.0",
-    "storybook": "7.4.6",
+    "storybook": "8.4.7",
     "tailwindcss": "3.3.2",
     "typescript": "5.7.2",
     "vite": "4.3.9"

diff --git a/apps/storybook/stories/dialog.stories.tsx b/apps/storybook/stories/dialog.stories.tsx
@@ -31,7 +31,7 @@ export default meta
 type Story = StoryObj<typeof Dialog>
 
 export const LosslessDialog = {
-  storyName: 'Simple dialog with no followup',
+  name: 'Simple dialog with no followup',
   args: {},
   render: () => {
     return (

diff --git a/apps/storybook/stories/dialogconfirm.stories.tsx b/apps/storybook/stories/dialogconfirm.stories.tsx
@@ -37,7 +37,7 @@ export default meta
 type Story = StoryObj<typeof DialogConfirm>
 
 export const Pending = {
-  storyName: 'Pending',
+  name: 'Pending',
   args: {},
   render: () => {
     return (
@@ -80,7 +80,7 @@ export const Pending = {
         </DialogReview>
         <DialogConfirm
           chainId={1}
-          status="loading"
+          status="pending"
           testId="incentivize-confirmation-modal"
           successMessage={'Successfully incentivized V3 pool'}
           txHash="0x58c018d0f15df78c392e0850f5ee5e74e1e919213552646d979c9a37e6f5119a"
@@ -91,7 +91,7 @@ export const Pending = {
 } satisfies Story
 
 export const Success = {
-  storyName: 'Success',
+  name: 'Success',
   args: { chainId: 1, status: 'success' },
   render: () => {
     return (
@@ -146,7 +146,7 @@ export const Success = {
 
 // biome-ignore lint/suspicious/noShadowRestrictedNames: This is a storybook
 export const Error = {
-  storyName: 'Error',
+  name: 'Error',
   args: { chainId: 1, status: 'error' },
   render: () => {
     return (

diff --git a/apps/storybook/stories/popover.stories.tsx b/apps/storybook/stories/popover.stories.tsx
@@ -46,7 +46,7 @@ export const Default = {
 } satisfies Story
 
 export const PopoverWithMenu = {
-  storyName: 'Popover example with command',
+  name: 'Popover example with command',
   args: {
     children: 'Popover',
   },

diff --git a/apps/storybook/stories/select.stories.tsx b/apps/storybook/stories/select.stories.tsx
@@ -56,7 +56,7 @@ export const Default = {
 } satisfies Story
 
 export const Trigger = {
-  storyName: 'Custom trigger',
+  name: 'Custom trigger',
   args: {
     children: 'Select',
   },
@@ -78,7 +78,7 @@ export const Trigger = {
 } satisfies Story
 
 export const Caption = {
-  storyName: 'Including a caption',
+  name: 'Including a caption',
   args: {
     children: 'Select',
   },
@@ -104,7 +104,7 @@ export const Caption = {
 
 // biome-ignore lint/suspicious/noShadowRestrictedNames: This is a storybook
 export const Error = {
-  storyName: 'Error caption',
+  name: 'Error caption',
   args: {
     children: 'Select',
   },

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",
@@ -20,20 +20,21 @@
     "@aptos-labs/wallet-adapter-core": "3.10.0",
     "@aptos-labs/wallet-adapter-react": "2.3.1",
     "@cloudinary/url-gen": "1.11.2",
-    "@fuul/sdk": "^4.11.1",
-    "@headlessui/react": "1.7.7",
+    "@fuul/sdk": "4.11.1",
+    "@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({
@@ -66,7 +67,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, JSX, ReactNode } 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({
@@ -65,7 +66,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