From 5a2e06e41d410512ef4c69e428c75f01fb423422 Mon Sep 17 00:00:00 2001
From: Felix Egbert <47861849+fegbert@users.noreply.github.com>
Date: Wed, 23 Feb 2022 15:05:30 +0100
Subject: [PATCH] feat: List localhost:8545 only in dev mode (#109)

---
 core/src/constants/NETWORKS.ts                      |  9 ++++++++-
 frontend/components/layout/Header.stories.js        | 10 ++++++++++
 frontend/components/layout/Header.vue               |  5 +++++
 .../modals/ChangePageNetworkModal.stories.js        | 13 +++++++++----
 .../components/modals/ChangePageNetworkModal.vue    |  8 ++++++--
 .../components/modals/ChangeWalletNetworkModal.vue  | 12 ++++++++----
 frontend/components/utils/FormatAddress.vue         |  6 +++---
 .../components/utils/NetworkSelector.stories.js     | 13 +++++++++----
 frontend/components/utils/NetworkSelector.vue       |  8 ++++++--
 frontend/layouts/default.vue                        |  6 ++++++
 10 files changed, 70 insertions(+), 20 deletions(-)

diff --git a/core/src/constants/NETWORKS.ts b/core/src/constants/NETWORKS.ts
index fee51a709..38b42c051 100644
--- a/core/src/constants/NETWORKS.ts
+++ b/core/src/constants/NETWORKS.ts
@@ -81,4 +81,11 @@ export const getNetworkTitleByChainId = function (chainId: string | undefined) {
     return NETWORK_TITLES[chainId];
 };
 
-export default NETWORKS;
+export const getNetworks = function (isDev: boolean): Record<string, NetworkConfig> {
+    if (isDev) {
+        return NETWORKS;
+    }
+    //eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { localhost, ...otherNetworks } = NETWORKS;
+    return otherNetworks;
+};
diff --git a/frontend/components/layout/Header.stories.js b/frontend/components/layout/Header.stories.js
index 9d977feec..8f72ad257 100644
--- a/frontend/components/layout/Header.stories.js
+++ b/frontend/components/layout/Header.stories.js
@@ -24,6 +24,16 @@ storiesOf('Layout/Header', module)
         @update:isExplanationsShown="updateIsExplanationsShown"
     />`,
     }))
+    .add('Dev Mode', () => ({
+        ...common,
+        template: `<Header
+        :network.sync="network"
+        :isExplanationsShown.sync="isExplanationsShown"
+        @update:network="updateNetwork"
+        @update:isExplanationsShown="updateIsExplanationsShown"
+        is-dev
+    />`,
+    }))
     .add('Unified Auctions Page', () => ({
         ...common,
         template: `<Header
diff --git a/frontend/components/layout/Header.vue b/frontend/components/layout/Header.vue
index 77d958d0b..630af72aa 100644
--- a/frontend/components/layout/Header.vue
+++ b/frontend/components/layout/Header.vue
@@ -29,6 +29,7 @@
                         <NetworkSelector
                             v-if="!isUnifiedPage && !isMinimal"
                             :network="network"
+                            :is-dev="isDev"
                             @update:network="$emit('update:network', $event)"
                         />
 
@@ -109,6 +110,10 @@ export default Vue.extend({
             type: String,
             default: undefined,
         },
+        isDev: {
+            type: Boolean,
+            default: false,
+        },
     },
     computed: {
         isUnifiedPage() {
diff --git a/frontend/components/modals/ChangePageNetworkModal.stories.js b/frontend/components/modals/ChangePageNetworkModal.stories.js
index 71ef89115..e0a4cea60 100644
--- a/frontend/components/modals/ChangePageNetworkModal.stories.js
+++ b/frontend/components/modals/ChangePageNetworkModal.stories.js
@@ -12,7 +12,12 @@ const common = {
     },
 };
 
-storiesOf('Modals/ChangePageNetworkModal', module).add('Default', () => ({
-    ...common,
-    template: '<ChangePageNetworkModal :invalid-network="chainId" @setNetwork="setNetwork" />',
-}));
+storiesOf('Modals/ChangePageNetworkModal', module)
+    .add('Default', () => ({
+        ...common,
+        template: '<ChangePageNetworkModal :invalid-network="chainId" @setNetwork="setNetwork" />',
+    }))
+    .add('Dev Mode', () => ({
+        ...common,
+        template: '<ChangePageNetworkModal :invalid-network="chainId" @setNetwork="setNetwork" is-dev />',
+    }));
diff --git a/frontend/components/modals/ChangePageNetworkModal.vue b/frontend/components/modals/ChangePageNetworkModal.vue
index c228b8f9c..20200a088 100644
--- a/frontend/components/modals/ChangePageNetworkModal.vue
+++ b/frontend/components/modals/ChangePageNetworkModal.vue
@@ -30,7 +30,7 @@
 <script lang="ts">
 import { Modal, Alert } from 'ant-design-vue';
 import Vue from 'vue';
-import NETWORKS from 'auctions-core/src/constants/NETWORKS';
+import { getNetworks } from 'auctions-core/src/constants/NETWORKS';
 
 export default Vue.extend({
     name: 'ChangePageNetworkModal',
@@ -40,11 +40,15 @@ export default Vue.extend({
             type: String,
             default: '',
         },
+        isDev: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
             options: [
-                ...Object.entries(NETWORKS).map(([name, propeties]) => {
+                ...Object.entries(getNetworks(this.isDev)).map(([name, propeties]) => {
                     return { label: propeties.title, value: name };
                 }),
             ],
diff --git a/frontend/components/modals/ChangeWalletNetworkModal.vue b/frontend/components/modals/ChangeWalletNetworkModal.vue
index d760e9024..c847b25f2 100644
--- a/frontend/components/modals/ChangeWalletNetworkModal.vue
+++ b/frontend/components/modals/ChangeWalletNetworkModal.vue
@@ -32,7 +32,7 @@
 <script lang="ts">
 import { Modal, Alert } from 'ant-design-vue';
 import Vue from 'vue';
-import NETWORKS from 'auctions-core/src/constants/NETWORKS';
+import { getNetworks } from 'auctions-core/src/constants/NETWORKS';
 import BaseButton from '~/components/common/BaseButton';
 
 export default Vue.extend({
@@ -47,19 +47,23 @@ export default Vue.extend({
             type: String,
             required: true,
         },
+        isDev: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
             options: [
-                ...Object.entries(NETWORKS).map(([name, propeties]) => {
+                ...Object.entries(getNetworks(this.isDev)).map(([name, propeties]) => {
                     return { label: propeties.title, value: name };
                 }),
             ],
         };
     },
     computed: {
-        isWalletNetworkSuppotedByTheWebsite(): string {
-            return !!NETWORKS[this.invalidNetwork];
+        isWalletNetworkSuppotedByTheWebsite(): boolean {
+            return !!getNetworks(this.isDev)[this.invalidNetwork];
         },
     },
 });
diff --git a/frontend/components/utils/FormatAddress.vue b/frontend/components/utils/FormatAddress.vue
index fc43bb76f..9b20be5cc 100644
--- a/frontend/components/utils/FormatAddress.vue
+++ b/frontend/components/utils/FormatAddress.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import NETWORKS from 'auctions-core/src/constants/NETWORKS';
+import { getNetworkConfigByType } from 'auctions-core/src/constants/NETWORKS';
 
 const TRIM_POSITION_FROM_START = 5;
 const TRIM_POSITION_FROM_END = 4;
@@ -60,8 +60,8 @@ export default Vue.extend({
                 return 'https://etherscan.io';
             }
             const network = this.$store.getters['network/getMakerNetwork'];
-            if (NETWORKS[network]) {
-                return NETWORKS[network].etherscanUrl;
+            if (getNetworkConfigByType(network)) {
+                return getNetworkConfigByType(network).etherscanUrl;
             }
             return 'https://etherscan.io';
         },
diff --git a/frontend/components/utils/NetworkSelector.stories.js b/frontend/components/utils/NetworkSelector.stories.js
index c2aca7b45..a640ce7ba 100644
--- a/frontend/components/utils/NetworkSelector.stories.js
+++ b/frontend/components/utils/NetworkSelector.stories.js
@@ -9,7 +9,12 @@ const common = {
     },
 };
 
-storiesOf('Utils/NetworkSelector', module).add('Default', () => ({
-    ...common,
-    template: '<network-selector @select="select"/>',
-}));
+storiesOf('Utils/NetworkSelector', module)
+    .add('Default', () => ({
+        ...common,
+        template: '<network-selector @select="select"/>',
+    }))
+    .add('Dev Mode', () => ({
+        ...common,
+        template: '<network-selector @select="select" is-dev />',
+    }));
diff --git a/frontend/components/utils/NetworkSelector.vue b/frontend/components/utils/NetworkSelector.vue
index 86c96f808..6573a28be 100644
--- a/frontend/components/utils/NetworkSelector.vue
+++ b/frontend/components/utils/NetworkSelector.vue
@@ -9,7 +9,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { Icon } from 'ant-design-vue';
-import NETWORKS from 'auctions-core/src/constants/NETWORKS';
+import { getNetworks } from 'auctions-core/src/constants/NETWORKS';
 import Select from '~/components/common/Select.vue';
 import { FAKE_NETWORK_NAME } from '~/store/network';
 
@@ -24,11 +24,15 @@ export default Vue.extend({
             type: String,
             default: null,
         },
+        isDev: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
             options: [
-                ...Object.entries(NETWORKS).map(([name, propeties]) => {
+                ...Object.entries(getNetworks(this.isDev)).map(([name, propeties]) => {
                     return { label: propeties.title, value: name as string | null };
                 }),
                 { label: 'Stub data', value: FAKE_NETWORK_NAME },
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 2890eea0c..7dfade25a 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -9,6 +9,7 @@
             :is-wallet-loading="isWalletLoading"
             :has-accepted-terms="hasAcceptedTerms"
             :staging-banner-url="stagingBannerURL"
+            :is-dev="isDev"
             @changeWalletType="changeWalletType"
             @openTermsModal="setTermsModal(true)"
         />
@@ -16,12 +17,14 @@
         <ChangePageNetworkModal
             v-if="!isPageNetworkValid"
             :invalid-network="getPageNetwork"
+            :is-dev="isDev"
             @setPageNetwork="setPageNetwork"
         />
         <ChangeWalletNetworkModal
             v-else-if="!isWalletNetworkValid"
             :invalid-network="getWalletNetworkTitle"
             :page-network="network"
+            :is-dev="isDev"
             @setPageNetwork="setPageNetwork"
             @fixWalletNetwork="fixWalletNetwork"
         />
@@ -93,6 +96,9 @@ export default Vue.extend({
         stagingBannerURL() {
             return process.env.STAGING_BANNER_URL;
         },
+        isDev() {
+            return this.$nuxt?.context?.isDev;
+        },
     },
     methods: {
         ...mapActions('network', ['setPageNetwork', 'fixWalletNetwork']),