From e5ec5f3ae2328de0878af1a00571b4ad1559aea8 Mon Sep 17 00:00:00 2001 From: Kacper Sawicki Date: Wed, 30 Oct 2024 14:46:54 +0100 Subject: [PATCH] Add network switch --- .github/workflows/deploy.yaml | 4 ++ src/components/DropDown/index.jsx | 2 +- src/components/Header/index.jsx | 24 +++++---- src/routes/epochs/epochs.jsx | 4 +- src/store/index.jsx | 83 +++++++++++++------------------ 5 files changed, 56 insertions(+), 61 deletions(-) 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) {