chore: Update nextjs to v13.5 (#2539)

* chore: Update nextjs to v13.5

* fix: Replace optimizeImports with optimizePackageImports

* chore: Update lockfile

* Rm next-pwa patch

* Fix type issues

* Rm protobuf

* Fix tests

* Fix apps.test.tsx

---------

Co-authored-by: katspaugh <[email protected]>

jest.config.cjs

@@ -12,7 +12,9 @@ const customJestConfig = {
     // Handle module aliases (this will be automatically configured for you soon)
     '^@/(.*)$': '<rootDir>/src/$1',
     '^.+\\.(svg)$': '<rootDir>/mocks/svg.js',
+    isows: '<rootDir>/node_modules/isows/_cjs/index.js',
   },
+  transformIgnorePatterns: ['node_modules/(?!isows/)'],
   testEnvironment: 'jest-environment-jsdom',
   testEnvironmentOptions: { url: 'http://localhost/balances?safe=rin:0xb3b83bf204C458B461de9B0CD2739DB152b4fa5A' },
   globals: {

next.config.mjs

@@ -31,19 +31,8 @@ const nextConfig = {
   eslint: {
     dirs: ['src'],
   },
-  modularizeImports: {
-    '@mui/material': {
-      transform: '@mui/material/{{member}}',
-    },
-    '@mui/icons-material/?(((\\w*)?/?)*)': {
-      transform: '@mui/icons-material/{{ matches.[1] }}/{{member}}',
-    },
-    lodash: {
-      transform: 'lodash/{{member}}',
-    },
-    'date-fns': {
-      transform: 'date-fns/{{member}}',
-    },
+  experimental: {
+    optimizePackageImports: ['@mui/material', '@mui/icons-material', 'lodash', 'date-fns']
   },
   webpack(config) {
     config.module.rules.push({

package.json

@@ -19,7 +19,7 @@
     "routes": "node scripts/generate-routes.js > src/config/routes.ts && prettier -w src/config/routes.ts && cat src/config/routes.ts",
     "css-vars": "ts-node-esm ./scripts/css-vars.ts > ./src/styles/vars.css && prettier -w src/styles/vars.css",
     "generate-types": "typechain --target ethers-v5 --out-dir src/types/contracts ./node_modules/@safe-global/safe-deployments/dist/assets/**/*.json ./node_modules/@safe-global/safe-modules-deployments/dist/assets/**/*.json ./node_modules/@openzeppelin/contracts/build/contracts/ERC20.json ./node_modules/@openzeppelin/contracts/build/contracts/ERC721.json",
-    "after-install": "yarn patch-package && yarn generate-types && yarn css-vars",
+    "after-install": "yarn generate-types && yarn css-vars",
     "postinstall": "yarn after-install",
     "analyze": "cross-env ANALYZE=true yarn build",
     "cypress:open": "cross-env TZ=UTC cypress open --e2e",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@date-io/date-fns": "^2.15.0",
-    "@ducanh2912/next-pwa": "^9.5.0",
+    "@ducanh2912/next-pwa": "^9.7.1",
     "@emotion/cache": "^11.10.1",
     "@emotion/react": "^11.10.0",
     "@emotion/server": "^11.10.0",
@@ -49,16 +49,16 @@
     "@mui/material": "^5.14.3",
     "@mui/x-date-pickers": "^5.0.12",
     "@reduxjs/toolkit": "^1.9.5",
-    "@safe-global/safe-apps-sdk": "^8.0.0",
+    "@safe-global/safe-apps-sdk": "^8.1.0",
     "@safe-global/safe-core-sdk": "^3.3.5",
     "@safe-global/safe-core-sdk-utils": "^1.7.4",
     "@safe-global/safe-deployments": "1.25.0",
     "@safe-global/safe-ethers-lib": "^1.9.4",
     "@safe-global/safe-gateway-typescript-sdk": "^3.12.0",
     "@safe-global/safe-modules-deployments": "^1.0.0",
     "@safe-global/safe-react-components": "^2.0.6",
-    "@sentry/react": "^7.28.1",
-    "@sentry/tracing": "^7.28.1",
+    "@sentry/react": "^7.74.0",
+    "@sentry/tracing": "^7.74.0",
     "@truffle/hdwallet-provider": "^2.1.4",
     "@web3-onboard/coinbase": "^2.2.6",
     "@web3-onboard/core": "^2.21.2",
@@ -78,7 +78,7 @@
     "idb-keyval": "^6.2.1",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
-    "next": "^13.2.0",
+    "next": "^13.5.2",
     "papaparse": "^5.3.2",
     "qrcode.react": "^3.1.0",
     "react": "18.2.0",
@@ -95,7 +95,7 @@
     "@next/bundle-analyzer": "^13.1.1",
     "@openzeppelin/contracts": "^4.9.2",
     "@safe-global/safe-core-sdk-types": "^1.9.1",
-    "@sentry/types": "^7.28.1",
+    "@sentry/types": "^7.74.0",
     "@svgr/webpack": "^6.3.1",
     "@testing-library/cypress": "^8.0.7",
     "@testing-library/jest-dom": "^5.16.5",
@@ -107,10 +107,10 @@
     "@types/lodash": "^4.14.182",
     "@types/node": "18.11.18",
     "@types/qrcode": "^1.4.2",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
+    "@types/react": "18.2.28",
+    "@types/react-dom": "18.2.13",
     "@types/react-gtm-module": "^2.0.1",
-    "@types/react-qr-reader": "^2.1.4",
+    "@types/react-qr-reader": "^2.1.5",
     "@types/semver": "^7.3.10",
     "@typescript-eslint/eslint-plugin": "^5.47.1",
     "cross-env": "^7.0.3",
@@ -124,7 +124,6 @@
     "fake-indexeddb": "^4.0.2",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
-    "patch-package": "^8.0.0",
     "pre-commit": "^1.2.2",
     "prettier": "^2.7.0",
     "ts-node": "^10.8.2",

src/components/safe-apps/SafeAppCard/index.tsx

@@ -6,13 +6,13 @@ import CardContent from '@mui/material/CardContent'
 import Typography from '@mui/material/Typography'
 import CardActions from '@mui/material/CardActions'
 import Box from '@mui/material/Box'
-import { resolveHref } from 'next/dist/shared/lib/router/utils/resolve-href'
+import { resolveHref } from 'next/dist/client/resolve-href'
 import classNames from 'classnames'
 import type { ReactNode, SyntheticEvent } from 'react'
 import type { SafeAppData } from '@safe-global/safe-gateway-typescript-sdk'
 import type { NextRouter } from 'next/router'
-import type { UrlObject } from 'url'
 
+import type { UrlObject } from 'url'
 import SafeAppIconCard from '@/components/safe-apps/SafeAppIconCard'
 import SafeAppActionButtons from '@/components/safe-apps/SafeAppActionButtons'
 import SafeAppTags from '@/components/safe-apps/SafeAppTags'

src/components/safe-apps/hooks/useShareSafeAppUrl.ts

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import { resolveHref } from 'next/dist/shared/lib/router/utils/resolve-href'
+import { resolveHref } from 'next/dist/client/resolve-href'
 import { useEffect, useState } from 'react'
 import type { UrlObject } from 'url'
 

src/components/safe-messages/MsgSummary/index.tsx

@@ -1,5 +1,4 @@
 import { Box, CircularProgress, Typography } from '@mui/material'
-import type { Palette } from '@mui/material'
 import type { ReactElement } from 'react'
 import { SafeMessageStatus } from '@safe-global/safe-gateway-typescript-sdk'
 import type { SafeMessage } from '@safe-global/safe-gateway-typescript-sdk'
@@ -15,7 +14,7 @@ import classNames from 'classnames'
 
 import txSummaryCss from '@/components/transactions/TxSummary/styles.module.css'
 
-const getStatusColor = (value: SafeMessageStatus, palette: Palette) => {
+const getStatusColor = (value: SafeMessageStatus, palette: Record<string, Record<string, string>>): string => {
   switch (value) {
     case SafeMessageStatus.CONFIRMED:
       return palette.success.main

src/components/transactions/TxSummary/index.tsx

@@ -18,7 +18,7 @@ import useIsPending from '@/hooks/useIsPending'
 import useABTesting from '@/services/tracking/useAbTesting'
 import { AbTest } from '@/services/tracking/abTesting'
 
-const getStatusColor = (value: TransactionStatus, palette: Palette) => {
+const getStatusColor = (value: TransactionStatus, palette: Palette | Record<string, Record<string, string>>) => {
   switch (value) {
     case TransactionStatus.SUCCESS:
       return palette.success.main

src/tests/pages/apps.test.tsx

@@ -599,7 +599,7 @@ describe('AppsPage', () => {
           expect(screen.getByText('Synthetix', { selector: 'h5' })).toBeInTheDocument()
         })
 
-        const categorySelector = screen.getByRole('button', { name: 'Category Select category' })
+        const categorySelector = screen.getByText('Select category')
 
         await act(() => fireEvent.mouseDown(categorySelector))
 
@@ -652,7 +652,7 @@ describe('AppsPage', () => {
           expect(screen.getByText('Synthetix', { selector: 'h5' })).toBeInTheDocument()
         })
 
-        const categorySelector = screen.getByRole('button', { name: 'Category Select category' })
+        const categorySelector = screen.getByText('Select category')
 
         await act(() => fireEvent.mouseDown(categorySelector))
 
@@ -707,7 +707,7 @@ describe('AppsPage', () => {
           expect(screen.getByText('Synthetix', { selector: 'h5' })).toBeInTheDocument()
         })
 
-        const categorySelector = screen.getByRole('button', { name: 'Category Select category' })
+        const categorySelector = screen.getByText('Select category')
 
         await act(() => fireEvent.mouseDown(categorySelector))
 

src/tests/test-utils.tsx

@@ -1,7 +1,7 @@
 import type { RenderHookOptions } from '@testing-library/react'
 import { render, renderHook } from '@testing-library/react'
 import type { NextRouter } from 'next/router'
-import { RouterContext } from 'next/dist/shared/lib/router-context'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
 import type { Theme } from '@mui/material/styles'
 import { ThemeProvider } from '@mui/material/styles'
 import { SafeThemeProvider } from '@safe-global/safe-react-components'