From 5d442c0bfef24b34357c461fc2de24de00b9a9de Mon Sep 17 00:00:00 2001
From: Denis Davidyuk <denis_davidyuk@hotmail.com>
Date: Fri, 11 Aug 2023 13:06:14 +0400
Subject: [PATCH] feat: override network through env variables after build

---
 .dockerignore               |  2 +-
 Dockerfile                  |  7 ++-----
 docker/override-env.sh      |  4 ++++
 public/index.html           | 10 ++++++++++
 src/lib/networksRegistry.js | 25 +++++++++++--------------
 src/store/modules/root.js   |  6 +++---
 6 files changed, 31 insertions(+), 23 deletions(-)
 create mode 100755 docker/override-env.sh

diff --git a/.dockerignore b/.dockerignore
index 3c59030ba..a6ae799ee 100644
--- a/.dockerignore
+++ b/.dockerignore
@@ -8,4 +8,4 @@
 !.postcssrc.js
 !babel.config.js
 !vue.config.js
-!docker/nginx.conf
+!docker
diff --git a/Dockerfile b/Dockerfile
index 967e66614..05cb1eb8f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -8,11 +8,6 @@ RUN npm ci --legacy-peer-deps
 
 COPY . .
 
-ARG VUE_APP_NETWORK_NAME
-ARG VUE_APP_NODE_URL
-ARG VUE_APP_MDW_URL
-ARG VUE_APP_EXPLORER_URL
-ARG VUE_APP_COMPILER_URL
 ARG VUE_APP_BACKEND_URL
 
 # TODO: remove legacy openssl after updating @vue/cli
@@ -20,4 +15,6 @@ RUN NODE_OPTIONS=--openssl-legacy-provider npm run build
 
 FROM nginx:1.24-alpine
 COPY docker/nginx.conf /etc/nginx/nginx.conf
+COPY docker/override-env.sh /docker-entrypoint.d
 COPY --from=aepp-aepp-base-build /app/dist /usr/share/nginx/html
+RUN cp /usr/share/nginx/html/index.html /usr/share/nginx/html/index.template.html
diff --git a/docker/override-env.sh b/docker/override-env.sh
new file mode 100755
index 000000000..a54579e5c
--- /dev/null
+++ b/docker/override-env.sh
@@ -0,0 +1,4 @@
+#!/bin/sh
+set -e
+
+envsubst < /usr/share/nginx/html/index.template.html > /usr/share/nginx/html/index.html
diff --git a/public/index.html b/public/index.html
index 5fd6b7392..a198cf750 100644
--- a/public/index.html
+++ b/public/index.html
@@ -13,6 +13,16 @@
     <meta name="description" content="The æternity blockchain wallet allows users to store, send, and receive æternity coins. The wallet also features an æpps (applications running on the æternity blockchain) browser.">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
 
+    <script>
+      window.overrideNetwork = {
+        name: '$VUE_APP_NETWORK_NAME',
+        url: '$VUE_APP_NODE_URL',
+        middlewareUrl: '$VUE_APP_MIDDLEWARE_URL',
+        explorerUrl: '$VUE_APP_EXPLORER_URL',
+        compilerUrl: '$VUE_APP_COMPILER_URL',
+      };
+    </script>
+
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <% googleFontsUrl = 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap' %>
diff --git a/src/lib/networksRegistry.js b/src/lib/networksRegistry.js
index 9b6ccc23c..48f133321 100644
--- a/src/lib/networksRegistry.js
+++ b/src/lib/networksRegistry.js
@@ -14,24 +14,21 @@ const testNetwork = {
   compilerUrl: 'https://compiler.aepps.com',
 };
 
-let networks = process.env.NODE_ENV === 'production' ? [
-  mainNetwork,
-  testNetwork,
-] : [
-  testNetwork,
-  mainNetwork,
-];
-
-export const defaultNetwork = process.env.VUE_APP_NETWORK_NAME ? {
+const envNetwork = {
   name: process.env.VUE_APP_NETWORK_NAME,
   url: process.env.VUE_APP_NODE_URL,
-  middlewareUrl: process.env.VUE_APP_MDW_URL,
+  middlewareUrl: process.env.VUE_APP_MIDDLEWARE_URL,
   explorerUrl: process.env.VUE_APP_EXPLORER_URL,
   compilerUrl: process.env.VUE_APP_COMPILER_URL,
-} : mainNetwork;
+};
 
-if (process.env.VUE_APP_NETWORK_NAME) {
-  networks = [defaultNetwork];
-}
+const networks = (() => {
+  if (!['', '$VUE_APP_NETWORK_NAME'].includes(window.overrideNetwork.name)) {
+    return [window.overrideNetwork];
+  }
+  if (envNetwork.name) return [envNetwork];
+  if (process.env.NODE_ENV === 'production') return [mainNetwork, testNetwork];
+  return [testNetwork, mainNetwork];
+})();
 
 export default Object.freeze(networks.map(Object.freeze));
diff --git a/src/store/modules/root.js b/src/store/modules/root.js
index 36a6cc9a5..796b81e53 100644
--- a/src/store/modules/root.js
+++ b/src/store/modules/root.js
@@ -2,7 +2,7 @@
 
 import Vue from 'vue';
 import { update, mergeWith } from 'lodash-es';
-import networksRegistry, { defaultNetwork } from '../../lib/networksRegistry';
+import networksRegistry from '../../lib/networksRegistry';
 import { genRandomBuffer } from '../utils';
 
 const getAppByHost = (apps, appHost) => apps.find(({ host }) => host === appHost);
@@ -23,10 +23,10 @@ export default {
   getters: {
     networks: ({ customNetworks }) => [
       ...networksRegistry,
-      ...customNetworks.map((network) => ({ ...defaultNetwork, ...network, custom: true })),
+      ...customNetworks.map((network) => ({ ...networksRegistry[0], ...network, custom: true })),
     ],
     currentNetwork: ({ sdkUrl }, { networks }) => networks.find(({ url }) => url === sdkUrl) || {
-      ...defaultNetwork,
+      ...networksRegistry[0],
       name: sdkUrl,
       url: sdkUrl,
     },