use REACT_APP_ prefix for public variables

js/package.json

@@ -43,6 +43,7 @@
     ]
   },
   "dependencies": {
+    "next": "^11.0.1",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },

js/packages/web/.gitignore

@@ -1,2 +1,3 @@
 target
 .next
+.env.local

js/packages/web/next.config.js

@@ -1,6 +1,32 @@
+const withPlugins = require('next-compose-plugins');
 const withLess = require('next-with-less');
+const nextEnv = require('next-env');
+const dotenvLoad = require('dotenv-load');
 
-module.exports = withLess({
+dotenvLoad();
+
+const plugins = [
+  nextEnv({
+    publicPrefix: 'REACT_APP_',
+  }),
+  [
+    withLess,
+    {
+      lessLoaderOptions: {
+        lessOptions: {
+          modifyVars: {
+            '@primary-color': '#768BF9',
+            '@text-color': 'rgba(255, 255, 255)',
+          },
+          javascriptEnabled: true,
+        },
+      },
+    },
+  ],
+];
+
+module.exports = withPlugins(plugins, {
+  reactStrictMode: true,
   async rewrites() {
     return [
       {
@@ -9,13 +35,4 @@ module.exports = withLess({
       },
     ];
   },
-  lessLoaderOptions: {
-    lessOptions: {
-      modifyVars: {
-        '@primary-color': '#768BF9',
-        '@text-color': 'rgba(255, 255, 255)',
-      },
-      javascriptEnabled: true,
-    },
-  },
 });

js/packages/web/package.json

@@ -24,11 +24,14 @@
     "bs58": "^4.0.1",
     "buffer-layout": "^1.2.0",
     "canvas-confetti": "^1.4.0",
+    "dotenv-load": "^2.0.0",
     "eventemitter3": "^4.0.7",
     "less": "^4.1.1",
     "less-loader": "^10.0.1",
     "lodash": "^4.17.20",
     "next": "^11.0.1",
+    "next-compose-plugins": "^2.2.1",
+    "next-env": "^1.1.1",
     "next-with-less": "^1.0.0",
     "react": "16.13.1",
     "react-content-loader": "^6.0.3",
@@ -89,10 +92,12 @@
     "typescript": "^4.1.3"
   },
   "peerDependencies": {
+    "next": "*",
     "react": "*",
     "react-dom": "*"
   },
   "resolutions": {
+    "next": "11.0.1",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },

js/yarn.lock

@@ -6022,11 +6022,30 @@ dot-prop@^5.1.0:
   dependencies:
     is-obj "^2.0.0"
 
+dotenv-expand@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-4.2.0.tgz#def1f1ca5d6059d24a766e587942c21106ce1275"
+  integrity sha1-3vHxyl1gWdJKdm5YeULCEQbOEnU=
+
+dotenv-load@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv-load/-/dotenv-load-2.0.0.tgz#2c25a4ef8e809a2c635755925c2d9b35c6548c23"
+  integrity sha512-A6XbeIi3LZcNgH1MxBvAw1ZamYr9GosuDHiqqlMsOVeJnRUNY/8gDJ1NvQiSkVZwiscSyBNKsXXmP3xGezweVA==
+  dependencies:
+    dotenv "^5.0.0"
+    dotenv-expand "^4.2.0"
+    shelljs "^0.8.1"
+
 dotenv@8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
   integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
 
+dotenv@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef"
+  integrity sha512-4As8uPrjfwb7VXC+WnLCbXK7y+Ueb2B3zgNCePYfhxS1PYeaO1YTeplffTEcbfLhvFNGLAz90VvJs9yomG7bow==
+
 dotignore@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/dotignore/-/dotignore-0.1.2.tgz#f942f2200d28c3a76fbdd6f0ee9f3257c8a2e905"
@@ -10601,6 +10620,16 @@ neo-async@^2.6.0:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+next-compose-plugins@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/next-compose-plugins/-/next-compose-plugins-2.2.1.tgz#020fc53f275a7e719d62521bef4300fbb6fde5ab"
+  integrity sha512-OjJ+fV15FXO2uQXQagLD4C0abYErBjyjE0I0FHpOEIB8upw0hg1ldFP6cqHTJBH1cZqy96OeR3u1dJ+Ez2D4Bg==
+
+next-env@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/next-env/-/next-env-1.1.1.tgz#4ec4c1f745f36a24fe95d500d1118a3e934d6d6e"
+  integrity sha512-uZo/u0GhmkUaSg4Dcx39QsEGRFw2eianNsdzdm/9Bd4bTAfzDH/D6y0WyB34sESZ5hXPctHg3t3Q3U99QAMc1w==
+
 next-tick@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
@@ -13353,7 +13382,7 @@ shell-quote@1.7.2, shell-quote@^1.6.1:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
   integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
 
-"shelljs@>= 0.4.0":
+"shelljs@>= 0.4.0", shelljs@^0.8.1:
   version "0.8.4"
   resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.4.tgz#de7684feeb767f8716b326078a8a00875890e3c2"
   integrity sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==