Upgrade next apps to latest version to support adding features and fixing bugs

apps/bridge-dapp/tsconfig.app.json

@@ -2,7 +2,11 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": ["node"],
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ],
     "target": "ES6",
     "strict": true
   },

apps/bridge-dapp/tsconfig.spec.json

@@ -3,7 +3,12 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": [
+      "jest",
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
   },
   "include": [
     "jest.config.ts",

apps/faucet/next.config.js

@@ -1,43 +1,18 @@
 const { withNx } = require('@nx/next/plugins/with-nx');
-const { createSecureHeaders } = require('next-secure-headers');
-
-const securityHeaders = createSecureHeaders({
-  frameGuard: 'sameorigin',
-  xssProtection: 'block-rendering',
-  referrerPolicy: 'no-referrer-when-downgrade',
-}).concat([
-  {
-    key: 'Content-Security-Policy',
-    value: 'upgrade-insecure-requests',
-  },
-  {
-    key: 'Permissions-Policy',
-    value: 'camera=(), microphone=(), geolocation=(), browsing-topics=()',
-  },
-]);
+const nextCfgBase = require('../../next.config');
 
 /**
  * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
+  ...nextCfgBase,
+
   reactStrictMode: true,
   nx: {
     // Set this to true if you would like to to use SVGR
     // See: https://github.com/gregberge/svgr
     svgr: false,
   },
-  async headers() {
-    return [
-      {
-        source: '/', // Netlify preview link doesn't work without this
-        headers: securityHeaders,
-      },
-      {
-        source: '/(.*)',
-        headers: securityHeaders,
-      },
-    ];
-  },
 };
 
 module.exports = withNx(nextConfig);

apps/faucet/project.json

@@ -6,10 +6,11 @@
   "targets": {
     "build": {
       "executor": "@nx/next:build",
-      "outputs": ["{options.outputPath}"],
+      "outputs": [
+        "{options.outputPath}"
+      ],
       "defaultConfiguration": "production",
       "options": {
-        "root": "apps/faucet",
         "outputPath": "dist/apps/faucet"
       },
       "configurations": {
@@ -46,17 +47,23 @@
     },
     "test": {
       "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "outputs": [
+        "{workspaceRoot}/coverage/{projectRoot}"
+      ],
       "options": {
         "jestConfig": "apps/faucet/jest.config.ts",
         "passWithNoTests": true
       }
     },
     "lint": {
       "executor": "@nx/linter:eslint",
-      "outputs": ["{options.outputFile}"],
+      "outputs": [
+        "{options.outputFile}"
+      ],
       "options": {
-        "lintFilePatterns": ["apps/faucet/**/*.{ts,tsx,js,jsx}"]
+        "lintFilePatterns": [
+          "apps/faucet/**/*.{ts,tsx,js,jsx}"
+        ]
       }
     }
   },

apps/faucet/src/pages/_app.tsx

@@ -2,10 +2,7 @@ import '@webb-tools/webb-ui-components/tailwind.css';
 import '../styles/globals.css';
 
 import { Footer, useDarkMode } from '@webb-tools/webb-ui-components';
-import {
-  WEBB_FAUCET_URL,
-  WEBB_MKT_URL,
-} from '@webb-tools/webb-ui-components/constants';
+import { WEBB_FAUCET_URL } from '@webb-tools/webb-ui-components/constants';
 import { AppProps } from 'next/app';
 import { DefaultSeo, DefaultSeoProps } from 'next-seo';
 import { useEffect } from 'react';
@@ -16,7 +13,7 @@ import Provider from '../provider';
 export const metadata: DefaultSeoProps = {
   additionalLinkTags: [
     {
-      href: new URL('/static/assets/favicon.png', WEBB_MKT_URL).toString(),
+      href: '/static/assets/favicon.png',
       rel: 'icon',
     },
   ],

apps/hubble-stats/app/page.tsx

@@ -15,11 +15,8 @@ export default async function Index() {
   return (
     <Suspense fallback={<LoadingScreen />}>
       <div className="py-4 space-y-6">
-        {/* @ts-expect-error Server Component */}
         <OverviewChartsContainer />
-        {/* @ts-expect-error Server Component */}
         <KeyMetricsTableContainer />
-        {/* @ts-expect-error Server Component */}
         <ShieldedTablesContainer />
       </div>
     </Suspense>

apps/hubble-stats/app/pool/[slug]/page.tsx

@@ -28,30 +28,17 @@ export default function Pool({ params }: { params: { slug: string } }) {
     <Suspense fallback={<LoadingScreen />}>
       <div className="py-4 space-y-8">
         <div className="grid grid-cols-1 items-end lg:grid-cols-[auto_minmax(0,_1fr)_minmax(0,_1fr)] gap-4">
-          {/* TypeScript doesn't understand async components. */}
-          {/* Current approach: https://github.com/vercel/next.js/issues/42292#issuecomment-1298459024 */}
-          {/* @ts-expect-error Server Component */}
           <PoolOverviewCardContainer poolAddress={poolAddress} />
-
-          {/* @ts-expect-error Server Component */}
           <PoolOverviewChartsContainer poolAddress={poolAddress} />
-
-          {/* @ts-expect-error Server Component */}
           <PoolWrappingChartsContainer poolAddress={poolAddress} />
         </div>
 
         <div className="space-y-12">
-          {/* @ts-expect-error Server Component */}
           <PoolOverviewTableContainer poolAddress={poolAddress} />
-
-          {/* @ts-expect-error Server Component */}
           <PoolWrappingTableContainer poolAddress={poolAddress} />
         </div>
 
-        {/* @ts-expect-error Server Component */}
         <PoolTransactionsTableContainer poolAddress={poolAddress} />
-
-        {/* @ts-expect-error Server Component */}
         <PoolMetadataTableContainer poolAddress={poolAddress} />
       </div>
     </Suspense>

apps/hubble-stats/containers/Layout/Layout.tsx

@@ -8,17 +8,14 @@ const Layout: FC<PropsWithChildren> = ({ children }) => {
   return (
     <>
       <SideBar />
-      <main className="h-full flex flex-col justify-between flex-1 px-3 overflow-y-auto md:px-5 lg:px-10">
+      <main className="flex flex-col justify-between flex-1 h-full px-3 overflow-y-auto md:px-5 lg:px-10">
         <div className="flex-[1]">
           {/* Header */}
           <div className="flex items-center justify-between pt-6 pb-4">
             <div className="flex items-center gap-2">
               <SideBarMenu />
               <Breadcrumbs />
             </div>
-            {/* TypeScript doesn't understand async components. */}
-            {/* Current approach: https://github.com/vercel/next.js/issues/42292#issuecomment-1298459024 */}
-            {/* @ts-expect-error Server Component */}
             <OverviewChipsContainer />
           </div>
 

apps/hubble-stats/next.config.js

@@ -1,12 +1,14 @@
 //@ts-check
 
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { composePlugins, withNx } = require('@nx/next');
+const nextConfigBase = require('../../next.config.js');
 
 /**
  * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
+  ...nextConfigBase,
+
   // at default environment variable is only accessible by the server, resulting in hydration mismatch
   // make environment variable accessible by both the server and client
   env: {
@@ -20,28 +22,12 @@ const nextConfig = {
   },
 
   experimental: {
-    appDir: true,
+    serverActions: true,
   },
 
   // webpack config for wasm support
   // following this approach: https://github.com/vercel/next.js/issues/29362#issuecomment-1149903338
-  webpack: (config, { isServer }) => {
-    // it makes a WebAssembly modules async modules
-    config.experiments = {
-      ...config.experiments,
-      syncWebAssembly: true,
-      asyncWebAssembly: true,
-      layers: true,
-    };
-
-    // generate wasm module in ".next/server" for ssr & ssg
-    if (isServer) {
-      config.output.webassemblyModuleFilename =
-        './../static/wasm/[modulehash].wasm';
-    } else {
-      config.output.webassemblyModuleFilename = 'static/wasm/[modulehash].wasm';
-    }
-
+  webpack: (config) => {
     // Hide Critical dependency warning from @graphql-mesh/* packages
     // https://github.com/i18next/next-i18next/issues/1545#issuecomment-1005990731
     // NOTE: This is a workaround as

apps/hubble-stats/project.json

@@ -6,13 +6,17 @@
   "targets": {
     "build": {
       "executor": "@nx/next:build",
-      "outputs": ["{options.outputPath}"],
+      "outputs": [
+        "{options.outputPath}"
+      ],
       "defaultConfiguration": "production",
       "options": {
-        "root": "apps/hubble-stats",
         "outputPath": "dist/apps/hubble-stats"
       },
-      "dependsOn": ["fetch-on-chain-config", "^build"],
+      "dependsOn": [
+        "fetch-on-chain-config",
+        "^build"
+      ],
       "configurations": {
         "development": {
           "outputPath": "apps/hubble-stats"
@@ -27,7 +31,10 @@
         "buildTarget": "hubble-stats:build",
         "dev": true
       },
-      "dependsOn": ["fetch-on-chain-config", "^serve"],
+      "dependsOn": [
+        "fetch-on-chain-config",
+        "^serve"
+      ],
       "configurations": {
         "development": {
           "buildTarget": "hubble-stats:build:development",
@@ -54,7 +61,9 @@
     },
     "test": {
       "executor": "@nx/jest:jest",
-      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "outputs": [
+        "{workspaceRoot}/coverage/{projectRoot}"
+      ],
       "options": {
         "jestConfig": "apps/hubble-stats/jest.config.ts",
         "passWithNoTests": true
@@ -68,9 +77,13 @@
     },
     "lint": {
       "executor": "@nx/linter:eslint",
-      "outputs": ["{options.outputFile}"],
+      "outputs": [
+        "{options.outputFile}"
+      ],
       "options": {
-        "lintFilePatterns": ["apps/hubble-stats/**/*.{ts,tsx,js,jsx}"]
+        "lintFilePatterns": [
+          "apps/hubble-stats/**/*.{ts,tsx,js,jsx}"
+        ]
       }
     }
   },

apps/stats-dapp/tsconfig.app.json

@@ -2,7 +2,11 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
-    "types": ["node"],
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ],
     "strict": true
   },
   "exclude": ["jest.config.ts", "**/*.spec.ts", "**/*.test.ts"],

apps/stats-dapp/tsconfig.spec.json

@@ -3,7 +3,12 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": [
+      "jest",
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
   },
   "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
 }

apps/tangle-website/next.config.js

@@ -1,42 +1,17 @@
 const { withNx } = require('@nx/next/plugins/with-nx');
-const { createSecureHeaders } = require('next-secure-headers');
-
-const securityHeaders = createSecureHeaders({
-  frameGuard: 'sameorigin',
-  xssProtection: 'block-rendering',
-  referrerPolicy: 'no-referrer-when-downgrade',
-}).concat([
-  {
-    key: 'Content-Security-Policy',
-    value: 'upgrade-insecure-requests',
-  },
-  {
-    key: 'Permissions-Policy',
-    value: 'camera=(), microphone=(), geolocation=(), browsing-topics=()',
-  },
-]);
+const nextCfgBase = require('../../next.config');
 
 /**
  * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
  **/
 const nextConfig = {
+  ...nextCfgBase,
+
   nx: {
     // Set this to true if you would like to to use SVGR
     // See: https://github.com/gregberge/svgr
     svgr: true,
   },
-  async headers() {
-    return [
-      {
-        source: '/', // Netlify preview link doesn't work without this
-        headers: securityHeaders,
-      },
-      {
-        source: '/(.*)',
-        headers: securityHeaders,
-      },
-    ];
-  },
 };
 
 module.exports = withNx(nextConfig);