Add network switch

spacemeshos · Oct 30, 2024 · e5ec5f3 · e5ec5f3
1 parent 47aa18f
commit e5ec5f3
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 61 deletions.
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -36,10 +36,14 @@ jobs:
       - name: Build to Dev Explorer
         env:
           REACT_APP_DISCOVERY_SERVICE_URL: https://configs.spacemesh.network/networks-dev.json
+          REACT_APP_LABELS_PER_UNIT: 1024
           PUBLIC_URL: /spacemesh-explorer-dev/
         run: |
           yarn
           yarn build
 
       - name: Upload to Dev Explorer
         run: gsutil -m rsync -r -d ./build gs://spacemesh-explorer-dev
+
+      - name: Set cache-control headers for Dev Explorer
+        run: gsutil -m setmeta -h "Cache-Control:public, max-age=0, no-transform" -r gs://spacemesh-explorer-dev/index.html
diff --git a/src/components/DropDown/index.jsx b/src/components/DropDown/index.jsx
@@ -15,7 +15,7 @@ const DropDown = (props: Props) => {
     <Dropdown
       options={options}
       onChange={handleChange}
-      value={selectedItem.value}
+      value={selectedItem.label}
       placeholder="Select network"
     />
   );

diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
@@ -5,6 +5,8 @@ import Logo from '../Logo';
 import NavBar from '../NavBar';
 import Switcher from '../Switcher';
 import { useStore } from '../../store';
+import NetworkStatus from '../NetworkStatus';
+import DropDown from '../DropDown';
 
 const Header = () => {
   const store = useStore();
@@ -24,17 +26,17 @@ const Header = () => {
     <div className="header">
       <Logo />
       <NavBar links={links} />
-      {/* <div className="header_dropdown"> */}
-      {/*  <NetworkStatus color={store.networkColor} /> */}
-      {/*  <DropDown */}
-      {/*    options={store.networks} */}
-      {/*    selectedItem={store.network} */}
-      {/*    onSelect={(e) => { */}
-      {/*      store.setNetwork(e); */}
-      {/*      store.getNetworkInfo(); */}
-      {/*    }} */}
-      {/*  /> */}
-      {/* </div> */}
+      <div className="header_dropdown">
+        <NetworkStatus color={store.networkColor} />
+        <DropDown
+          options={store.networks}
+          selectedItem={store.network}
+          onSelect={(e) => {
+            store.setNetwork(e);
+            store.processNetworkInfo();
+          }}
+        />
+      </div>
       <Switcher id="switch" onChange={(e) => store.changeTheme(e)} checked={store.theme === 'dark'} />
     </div>
   );

diff --git a/src/routes/epochs/epochs.jsx b/src/routes/epochs/epochs.jsx
@@ -16,6 +16,8 @@ const Epochs = () => {
   const [epochs, setEpochs] = useState([]);
 
   useEffect(() => {
+    setIsFetching(true);
+    setEpochs([]);
     if (store.netInfo === null) return;
     setGenesisTime(new Date(store.netInfo.genesisTime || 0).getTime() / 1000);
 
@@ -38,7 +40,7 @@ const Epochs = () => {
         store.showThrottlePopup();
       }
     });
-  }, [store.netInfo]);
+  }, [store.network, store.netInfo]);
 
   if (isFetching) {
     return <Loader size={100} />;

diff --git a/src/store/index.jsx b/src/store/index.jsx
@@ -1,5 +1,5 @@
 import {
-  action, makeAutoObservable, observable, toJS,
+  action, makeAutoObservable, observable,
 } from 'mobx';
 import React from 'react';
 import {
@@ -144,39 +144,42 @@ export default class Store {
           dash: network.dash,
           explorer: network.explorer,
           statsAPI: network.statsAPI,
-          grpcAPI: network.grpcAPI,
+          jsonAPI: network.jsonAPI,
         }
       ));
       this.setNetworks(networks);
       this.setNetwork(networks[0]);
-
-      if (PUBLIC_API === null) {
-        this.setApiConf(new Configuration({
-          basePath: networks[0].grpcAPI.replace(/\/$/, ''),
-        }));
-      } else {
-        this.setApiConf(new Configuration({
-          basePath: PUBLIC_API.replace(/\/$/, ''),
-        }));
-      }
-      this.setApi({
-        account: new AccountServiceApi(this.apiConf),
-        activation: new ActivationServiceApi(this.apiConf),
-        layer: new LayerServiceApi(this.apiConf),
-        network: new NetworkServiceApi(this.apiConf),
-        node: new NodeServiceApi(this.apiConf),
-        reward: new RewardServiceApi(this.apiConf),
-        transaction: new TransactionServiceApi(this.apiConf),
-        malfeasance: new MalfeasanceServiceApi(this.apiConf),
-      });
-      if (STATS_API === null) {
-        this.setStatsApiUrl(networks[0].statsAPI.replace(/\/$/, ''));
-      } else {
-        this.setStatsApiUrl(STATS_API.replace(/\/$/, ''));
-      }
+      await this.processNetworkInfo();
     } catch (e) {
       console.log('Error: ', e.message);
     }
+  }
+
+  async processNetworkInfo() {
+    if (PUBLIC_API === null) {
+      this.setApiConf(new Configuration({
+        basePath: this.network.jsonAPI.replace(/\/$/, ''),
+      }));
+    } else {
+      this.setApiConf(new Configuration({
+        basePath: PUBLIC_API.replace(/\/$/, ''),
+      }));
+    }
+    this.setApi({
+      account: new AccountServiceApi(this.apiConf),
+      activation: new ActivationServiceApi(this.apiConf),
+      layer: new LayerServiceApi(this.apiConf),
+      network: new NetworkServiceApi(this.apiConf),
+      node: new NodeServiceApi(this.apiConf),
+      reward: new RewardServiceApi(this.apiConf),
+      transaction: new TransactionServiceApi(this.apiConf),
+      malfeasance: new MalfeasanceServiceApi(this.apiConf),
+    });
+    if (STATS_API === null) {
+      this.setStatsApiUrl(this.network.statsAPI.replace(/\/$/, ''));
+    } else {
+      this.setStatsApiUrl(STATS_API.replace(/\/$/, ''));
+    }
 
     try {
       this.setNodeStatus(await this.api.node.nodeServiceStatus({}));
@@ -196,28 +199,12 @@ export default class Store {
       console.log('Error: ', e.message);
     }
 
-    try {
-      const response = await fetch(`${this.statsApiUrl}/overview`);
-      if (!response.ok || response.status === 429) {
-        throw new Error('Error fetching data');
-      }
-      const res = await response.json();
-      this.setOverview(res);
-    } catch (e) {
-      console.log('Error: ', e.message);
-    }
-  }
-
-  processNetworkInfo() {
-    const { network } = toJS(this.networkInfo);
-
-    if ((network.lastlayer + 24) < network.lastapprovedlayer || network.issynced === false) {
-      this.color = 'red';
-    } else if (network.lastlayerts < ((Math.floor(Date.now() / 1000)) - (network.duration))) {
-      this.color = 'orange';
-    } else {
-      this.color = 'green';
+    const response = await fetch(`${this.statsApiUrl}/overview`);
+    if (!response.ok || response.status === 429) {
+      throw new Error('Error fetching data');
     }
+    const res = await response.json();
+    this.setOverview(res);
   }
 
   layerTimestamp(layer: number) {