diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
index 24ba026..1116585 100644
--- a/.github/workflows/deploy.yaml
+++ b/.github/workflows/deploy.yaml
@@ -36,6 +36,7 @@ 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
@@ -43,3 +44,6 @@ jobs:
- 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
index 6d2d6a8..8a2a7f1 100644
--- a/src/components/DropDown/index.jsx
+++ b/src/components/DropDown/index.jsx
@@ -15,7 +15,7 @@ const DropDown = (props: Props) => {
);
diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx
index b4619cb..2551b2e 100644
--- 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 = () => {
- {/*
*/}
- {/* */}
- {/* { */}
- {/* store.setNetwork(e); */}
- {/* store.getNetworkInfo(); */}
- {/* }} */}
- {/* /> */}
- {/*
*/}
+
+
+ {
+ store.setNetwork(e);
+ store.processNetworkInfo();
+ }}
+ />
+
store.changeTheme(e)} checked={store.theme === 'dark'} />
);
diff --git a/src/routes/epochs/epochs.jsx b/src/routes/epochs/epochs.jsx
index 73b3621..807f488 100644
--- 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 ;
diff --git a/src/store/index.jsx b/src/store/index.jsx
index 00dbbee..deab55b 100644
--- 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) {