Merge pull request #960 from nymtech/feature/network-explorer-ui-config

Network Explorer: configure URLs with `.env` file

.github/workflows/network-explorer.yml

@@ -22,6 +22,8 @@ jobs:
         node-version: '14'
     - run: npm install
       continue-on-error: true
+    - name: Set environment from the example
+      run: cp .env.prod .env
     - run: npm run test
       continue-on-error: true
     - run: npm run build

explorer/.env.example

@@ -0,0 +1,3 @@
+EXPLORER_API_URL=https://testnet-milhon-explorer.nymtech.net
+VALIDATOR_API_URL=https://testnet-milhon-validator1.nymtech.net
+BIG_DIPPER_URL=https://testnet-milhon-blocks.nymtech.net

explorer/.env.prod

@@ -0,0 +1,3 @@
+EXPLORER_API_URL=https://testnet-milhon-explorer.nymtech.net
+VALIDATOR_API_URL=https://testnet-milhon-validator1.nymtech.net
+BIG_DIPPER_URL=https://testnet-milhon-blocks.nymtech.net

explorer/package-lock.json

@@ -50,6 +50,7 @@
         "clean-webpack-plugin": "^4.0.0",
         "css-loader": "^6.2.0",
         "css-minimizer-webpack-plugin": "^3.0.2",
+        "dotenv-webpack": "^7.0.3",
         "eslint": "7.32.0",
         "eslint-config-airbnb": "18.2.1",
         "eslint-config-prettier": "8.3.0",
@@ -6198,6 +6199,39 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/dotenv-defaults": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
+      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
+      "dev": true,
+      "dependencies": {
+        "dotenv": "^8.2.0"
+      }
+    },
+    "node_modules/dotenv-defaults/node_modules/dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/dotenv-webpack": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-7.0.3.tgz",
+      "integrity": "sha512-O0O9pOEwrk+n1zzR3T2uuXRlw64QxHSPeNN1GaiNBloQFNaCUL9V8jxSVz4jlXXFP/CIqK8YecWf8BAvsSgMjw==",
+      "dev": true,
+      "dependencies": {
+        "dotenv-defaults": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "webpack": "^4 || ^5"
+      }
+    },
     "node_modules/ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",
@@ -21882,6 +21916,32 @@
         "tslib": "^2.0.3"
       }
     },
+    "dotenv-defaults": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dotenv-defaults/-/dotenv-defaults-2.0.2.tgz",
+      "integrity": "sha512-iOIzovWfsUHU91L5i8bJce3NYK5JXeAwH50Jh6+ARUdLiiGlYWfGw6UkzsYqaXZH/hjE/eCd/PlfM/qqyK0AMg==",
+      "dev": true,
+      "requires": {
+        "dotenv": "^8.2.0"
+      },
+      "dependencies": {
+        "dotenv": {
+          "version": "8.6.0",
+          "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+          "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+          "dev": true
+        }
+      }
+    },
+    "dotenv-webpack": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-7.0.3.tgz",
+      "integrity": "sha512-O0O9pOEwrk+n1zzR3T2uuXRlw64QxHSPeNN1GaiNBloQFNaCUL9V8jxSVz4jlXXFP/CIqK8YecWf8BAvsSgMjw==",
+      "dev": true,
+      "requires": {
+        "dotenv-defaults": "^2.0.2"
+      }
+    },
     "ecc-jsbn": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz",

explorer/package.json

@@ -45,6 +45,7 @@
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.2.0",
     "css-minimizer-webpack-plugin": "^3.0.2",
+    "dotenv-webpack": "^7.0.3",
     "eslint": "7.32.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "8.3.0",

explorer/src/api/constants.ts

@@ -1,8 +1,7 @@
 // master APIs
-export const MASTER_URL = 'https://testnet-milhon-explorer.nymtech.net';
-export const MASTER_VALIDATOR_URL =
-  'https://testnet-milhon-validator1.nymtech.net';
-export const BIG_DIPPER = 'https://testnet-milhon-blocks.nymtech.net';
+export const MASTER_URL = process.env.EXPLORER_API_URL;
+export const MASTER_VALIDATOR_URL = process.env.VALIDATOR_API_URL;
+export const BIG_DIPPER = process.env.BIG_DIPPER_URL;
 
 // specific API routes
 export const MIXNODE_PING = `${MASTER_URL}/api/ping`;

explorer/webpack.common.js

@@ -5,6 +5,7 @@ const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const WebpackFavicons = require('webpack-favicons');
+const Dotenv = require('dotenv-webpack');
 
 module.exports = {
   entry: './src/index.tsx',
@@ -78,6 +79,8 @@ module.exports = {
     new WebpackFavicons({
       src: 'src/logo.svg',
     }),
+
+    new Dotenv(),
   ],
   output: {
     path: path.resolve(__dirname, 'dist'),