Upgrading nextjs to 12.3

.github/workflows/ousd.yml

@@ -100,6 +100,25 @@ jobs:
       - run: yarn prettier:check
         working-directory: ./dapp
 
+  dapp-biuld:
+    name: "DApp Build"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "16.x"
+          cache: "yarn"
+          cache-dependency-path: dapp/yarn.lock
+
+      - run: yarn install --frozen-lockfile
+        working-directory: ./dapp
+
+      - run: yarn build
+        working-directory: ./dapp
+
   slither:
     name: "Slither"
     # As long as we need Python 3.6 here in the test, we can only use up to Ubuntu 20.

README.md

@@ -5,7 +5,7 @@ Checkout our [docs](https://docs.ousd.com) for more details about the product.
 
 ## Requirements
 - Node Version
-  - `^8.11.2 >= node <=^14.0.0`
+  - `^12.22.0 >= node <=^14.0.0`
   - Recommended: `^14.0.0`
 - Web3 Wallet
   - Recommended: [Metamask](https://metamask.io/) 

dapp/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    "babel-plugin-fbt",
+    "babel-plugin-fbt-runtime"
+  ]
+}

dapp/Dockerfile

@@ -0,0 +1,15 @@
+FROM node:16-bullseye
+
+COPY . .
+
+RUN yarn install --non-interactive --frozen-lockfile
+
+ENV NODE_ENV=production
+ENV PORT 8080
+
+RUN yarn run gcp-build
+RUN rm -Rf node_modules
+
+RUN yarn install --non-interactive --frozen-lockfile --production
+
+CMD yarn start

dapp/jsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+        "constants/*": ["src/constants/*"],
+        "components/*": ["src/components/*"],
+        "hoc/*": ["src/hoc/*"],
+        "hooks/*": ["src/hooks/*"],
+        "pages/*": ["src/pages/*"],
+        "stores/*": ["src/stores/*"],
+        "utils/*": ["src/utils/*"],
+     }
+  }
+}

dapp/next.config.js

@@ -33,16 +33,16 @@ try {
 const config = {
   webpack: (config, { isServer, buildId }) => {
     // Fixes npm packages that depend on `fs` module
-    config.node = {
-      fs: 'empty',
-    }
+    config.resolve.fallback = { fs: false };
     /**
      * Returns environment variables as an object
      */
-    const env = Object.keys(process.env).reduce((acc, curr) => {
-      acc[`process.env.${curr}`] = JSON.stringify(process.env[curr])
-      return acc
-    }, {})
+    const env = Object.keys(process.env)
+                      .filter(k => !['__NEXT_REACT_ROOT', 'NEXT_RUNTIME'].includes(k))
+                      .reduce((acc, curr) => {
+                        acc[`process.env.${curr}`] = JSON.stringify(process.env[curr])
+                        return acc
+                      }, {})
 
     //console.log("CONFIG: ", JSON.stringify(config.module.rules))
 
@@ -59,13 +59,10 @@ const config = {
 
     if (!isServer) {
       config.resolve.alias['@sentry/node'] = '@sentry/browser'
-    }  
+    }
 
     return config
   },
-  cssLoaderOptions: {
-    url: false,
-  },
   async redirects() {
     return [
       {
@@ -133,4 +130,8 @@ if (process.env.DEPLOY_MODE === 'ipfs') {
   config.assetPrefix = './'
 }
 
+config.experimental = {
+  esmExternals: false
+};
+
 module.exports = config

dapp/package.json

@@ -2,6 +2,10 @@
   "name": "origin-dollar-dapp",
   "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": ">=14.9",
+    "npm": "6.x"
+  },
   "description": "Origin Dollar Dapp",
   "main": "index.js",
   "author": "Origin Protocol <[email protected]>",
@@ -68,7 +72,6 @@
     "babel-loader": "8.2.2",
     "babel-plugin-fbt": "^0.20.3",
     "babel-plugin-fbt-runtime": "^0.9.17",
-    "babel-plugin-module-resolver": "^4.1.0",
     "classnames": "^2.3.1",
     "dateformat": "^4.6.1",
     "deficonnect": "1.6.14-dev.2",
@@ -78,21 +81,20 @@
     "file-loader": "6.2.0",
     "lodash": "^4.17.21",
     "mixpanel-browser": "^2.41.0",
+    "next": "^13.1.3",
     "moment": "^2.29.4",
-    "next": "10.2.3",
     "next-cookies": "^2.0.3",
     "per-env": "^1.0.2",
     "postcss-flexbugs-fixes": "^5.0.0",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.4.0",
     "pullstate": "^1.23.0",
-    "react": "^16.14.0",
+    "react": "^18.2.0",
     "react-autosize-textarea": "^7.1.0",
     "react-bootstrap": "^1.6.2",
     "react-cookie": "^4.1.0",
     "react-copy-to-clipboard": "^5.0.3",
-    "react-countdown": "^2.3.2",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-facebook-pixel": "^1.0.4",
     "react-query": "^3.34.16",
     "react-router-dom": "5.3.0",
@@ -101,29 +103,6 @@
     "sass": "^1.39.2",
     "use-analytics": "^0.0.5"
   },
-  "babel": {
-    "presets": [
-      "next/babel"
-    ],
-    "plugins": [
-      [
-        "module-resolver",
-        {
-          "alias": {
-            "components": "./src/components",
-            "constants": "./src/constants",
-            "utils": "./src/utils",
-            "pages": "./src/pages",
-            "hoc": "./src/hoc",
-            "stores": "./src/stores",
-            "hooks": "./src/hooks"
-          }
-        }
-      ],
-      "babel-plugin-fbt",
-      "babel-plugin-fbt-runtime"
-    ]
-  },
   "husky": {
     "hooks": {
       "pre-push": "yarn run prettier:check"

dapp/prod.app.yaml

@@ -1,6 +1,6 @@
 runtime: nodejs
 env: flex
-instance_class: B2
+instance_class: B4
 manual_scaling:
   instances: 3
 service: ousd-prod

dapp/scripts/fbtToCrowdin.js

@@ -33,7 +33,7 @@ function b64Encode(str) {
   return new Buffer.from(str).toString('base64')
     .replace(/=/g, '')       // Strip base64 padding. It is not essential.
     .replace(/\//g, 'SLASH')  // Replace '/' since otherwise MT alters the string.
-    .replace(/\+/g, 'PLUS')   // Replace '+' since otherwise MT alters the string.
+    .replace(/\+/g, 'PLUS');   // Replace '+' since otherwise MT alters the string.
 }
 
 function encodeVarName(varName) {