Feature/next js

.babelrc

@@ -1,29 +1,12 @@
 {
-  "presets": [
+  "presets": ["next/babel"],
+  "plugins": [
     [
-      "@babel/preset-env",
+      "styled-components",
       {
-        "modules": false,
-        "useBuiltIns": "entry",
-        "corejs": 3
+        "ssr": true,
+        "displayName": true
       }
-    ],
-    "@babel/preset-react"
-  ],
-  "plugins": [
-    ["styled-components", { "displayName": true }]
-  ],
-  "env": {
-    "test": {
-      "presets": [
-        [
-          "@babel/preset-env",
-          {
-            "modules": "commonjs",
-            "targets": { "node": "current" }
-          }
-        ]
-      ]
-    }
-  }
+    ]
+  ]
 }

.gitignore

@@ -20,4 +20,4 @@ yarn-error.log*
 
 # ide
 .vscode
-
+tsconfig.tsbuildinfo

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,77 @@
+
+const path = require('path')
+const setupAliases = require('./webpack/setup-aliases')
+const setupFallbacks = require('./webpack/setup-fallbacks')
+const setupAdditionalPlugins = require('./webpack/setup-additional-plugins')
+
+
+// const withSass = require('@zeit/next-sass')
+const withImages = require('next-images')
+
+
+const internalNodeModulesRegExp = /use-wallet(?!.*node_modules)/;
+const externalNodeModulesRegExp = /node_modules(?!\/use-wallet(?!.*node_modules))/;
+
+
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  distDir: 'build',
+
+  webpack: function includeExtraPlugins(config, { webpack, buildId, dev, isServer, defaultLoaders  }) {
+      setupAliases(config)
+
+      setupFallbacks(config)
+
+      setupAdditionalPlugins(config, webpack)
+
+      config.module.rules.push({
+          test: /\.(png|svg|jpg|jpeg|gif)$/i,
+          type: 'asset/resource',
+          include: [path.resolve(__dirname,'node_modules/use-wallet/esm'),path.resolve(__dirname,'node_modules/use-wallet/dist/cjs'),path.resolve(__dirname,'public')]
+      })
+
+    //   config.externals = config.externals.map(external => {
+
+    //     if (typeof external !== "function") return external
+    //     return ({ctx, req}, cb) => (internalNodeModulesRegExp.test(req) ? cb() : external(ctx, req, cb))
+    // });
+
+    // config.module.rules.push({
+    //     test: /\.(png|jpe?g|gif|webp)$/i,
+    //     use: [
+    //         {
+    //             loader: 'url-loader',
+    //             options: {
+    //                 outputPath: 'images/',
+    //                 publicPath: '/_next/',
+    //                 name: dev ? '[name]-[hash].[ext]' : '[hash].[ext]',
+    //                 limit: 4000,
+    //             },
+    //         },
+    //     ],
+    // });
+
+    return config
+  },
+
+//   webpackDevMiddleware: config => {
+//     const ignored = [ config.watchOptions.ignored[ 0 ], externalNodeModulesRegExp ]
+//     config.watchOptions.ignored = ignored
+//     return config
+// },
+
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/home',
+        permanent: true,
+      },
+    ]
+  },
+}
+
+module.exports = nextConfig
+// module.exports = withImages(nextConfig)

package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "yarn run check-env && yarn run sync-assets && react-app-rewired start",
-    "build": "yarn run sync-assets && react-app-rewired build",
+    "dev": "yarn sync-assets && next dev",
+    "build": "yarn sync-assets && next build",
+    "start": "yarn sync-assets && next start",
     "lint": "eslint ./src",
+    "typecheck": "tsc -p ./tsconfig.json",
     "sync-assets": "yarn copy-aragon-ui-assets ./public",
     "bundlewatch": "bundlewatch",
     "prettier-ai": "prettier --write 'src/**/*.{ts,tsx,js}' --loglevel=error --ignore-path .prettier-imports-ignore",
@@ -34,6 +36,8 @@
     "fork-bn.js": "^4.11.8",
     "https-browserify": "^1.0.0",
     "is-ipfs": "^2.0.0",
+    "next": "^12.1.0",
+    "next-images": "^1.8.4",
     "os-browserify": "^0.3.0",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
@@ -42,7 +46,7 @@
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.3.4",
     "react-lottie-player": "^1.3.3",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.2.1",
     "react-sanitized-html": "^2.0.0",
     "react-spring": "^8.0.27",
     "react-use-gesture": "5.2.4",
@@ -54,7 +58,7 @@
     "timers-browserify": "^2.0.12",
     "url": "^0.11.0",
     "urql": "^1.10.1",
-    "use-wallet": "npm:@1hive/use-wallet@1.1.1",
+    "use-wallet": "npm:@1hive/use-wallet@0.13.1",
     "web3-utils": "^1.2.0"
   },
   "browserslist": {
@@ -71,6 +75,7 @@
   },
   "jest": {
     "moduleNameMapper": {
+      "^@images(.*)$": "<rootDir>/public$1",
       "^@assets(.*)$": "<rootDir>/src/assets$1",
       "^@abis(.*)$": "<rootDir>/src/abi$1",
       "^@components(.*)$": "<rootDir>/src/components$1",
@@ -90,7 +95,6 @@
     "@types/node": "^16.11.12",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
-    "@types/react-router-dom": "^5.3.2",
     "@types/resize-observer-browser": "^0.1.6",
     "@types/styled-components": "^5.1.17",
     "@typescript-eslint/eslint-plugin": "^5.8.0",
@@ -99,7 +103,6 @@
     "babel-plugin-styled-components": "^2.0.2",
     "bundlewatch": "^0.3.2",
     "cross-env": "^7.0.3",
-    "customize-cra": "^1.0.0",
     "eslint": "7.18.0",
     "eslint-config-prettier": "7.2.0",
     "eslint-config-standard": "^16.0.3",
@@ -116,9 +119,7 @@
     "prettier": "^2.5.1",
     "react-app-polyfill": "^3.0.0",
     "react-app-rewire-provide-plugin": "^1.0.0",
-    "react-app-rewired": "^2.1.9",
     "react-dev-utils": "^12.0.0",
-    "react-scripts": "^5.0.0",
     "rimraf": "^2.6.2",
     "svgo": "^2.8.0",
     "ts-node": "^10.4.0",

paths-tsconfig.json

@@ -2,16 +2,21 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*" ],
+      "@/*": [
+        "./src/*"
+      ],
       "@components/*": [
         "./src/components/*"
       ],
       "@abis/*": [
-        "./src/abis/*"
+        "./src/abi/*"
       ],
       "@assets/*": [
         "./src/assets/*"
       ],
+      "@images/*": [
+        "./public/*"
+      ],
       "@hooks/*": [
         "./src/hooks/*"
       ],
@@ -26,4 +31,4 @@
       ]
     }
   }
-} 
+}

src/App.tsx

@@ -1,44 +1,44 @@
-import React from 'react'
-import GlobalErrorHandler from './GlobalErrorHandler'
-import { GardensProvider } from './providers/Gardens'
-import { ProfileProvider } from './providers/Profile'
-import { UserProvider } from './providers/User'
-import { WalletProvider } from './providers/Wallet'
-import Routes from './routes/Routes'
-import { Main } from '@1hive/1hive-ui'
-import MainView from '@components/MainView'
-import { useAppTheme } from './providers/AppTheme'
-import WelcomeLoader from '@components/Welcome/WelcomeLoader'
-import { HashRouter } from 'react-router-dom'
+// import React from 'react'
+// import GlobalErrorHandler from './GlobalErrorHandler'
+// import { GardensProvider } from './providers/Gardens'
+// import { ProfileProvider } from './providers/Profile'
+// import { UserProvider } from './providers/User'
+// import { WalletProvider } from './providers/Wallet'
+// import Routes from './routes/Routes'
+// import { Main } from '@1hive/1hive-ui'
+// import MainView from '@components/MainView'
+// import { useAppTheme } from './providers/AppTheme'
+// import WelcomeLoader from '@components/Welcome/WelcomeLoader'
+// import { HashRouter } from 'react-router-dom'
 
-function App() {
-  const { appearance } = useAppTheme()
+// function App() {
+//   const { appearance } = useAppTheme()
 
-  return (
-    <HashRouter>
-      <Main
-        assetsUrl="/aragon-ui/"
-        layout={false}
-        scrollView={false}
-        theme={appearance}
-      >
-        <WalletProvider>
-          <GlobalErrorHandler>
-            <ProfileProvider>
-              <UserProvider>
-                <GardensProvider>
-                  <WelcomeLoader />
-                  <MainView>
-                    <Routes />
-                  </MainView>
-                </GardensProvider>
-              </UserProvider>
-            </ProfileProvider>
-          </GlobalErrorHandler>
-        </WalletProvider>
-      </Main>
-    </HashRouter>
-  )
-}
+//   return (
+//     <HashRouter>
+//       <Main
+//         assetsUrl="/aragon-ui/"
+//         layout={false}
+//         scrollView={false}
+//         theme={appearance}
+//       >
+//         <WalletProvider>
+//           <GlobalErrorHandler>
+//             <ProfileProvider>
+//               <UserProvider>
+//                 <GardensProvider>
+//                   <WelcomeLoader />
+//                   <MainView>
+//                     <Routes />
+//                   </MainView>
+//                 </GardensProvider>
+//               </UserProvider>
+//             </ProfileProvider>
+//           </GlobalErrorHandler>
+//         </WalletProvider>
+//       </Main>
+//     </HashRouter>
+//   )
+// }
 
-export default App
+// export default App