diff --git a/app.config.js b/app.config.js index 96d69508..4ac3cca7 100644 --- a/app.config.js +++ b/app.config.js @@ -97,8 +97,14 @@ module.exports = { // Display alert banner for the developer preview deployment showPreviewAlert: process.env.NEXT_PUBLIC_SHOW_PREVIEW_ALERT || 'false', - // Show network alerts based on chainId - networkAlertApi: { - 100: 'https://status.genx.delta-dao.com/api/check-blocks' + networkAlertConfig: { + // Refresh interval for network status - 30 sec + refreshInterval: 30000, + // Margin of error for block count (how much difference between min / max block numbers before showing an alert) + errorMargin: 10, + // Map chainIds to their respective status endpoints + statusEndpoints: { + 100: 'https://status.genx.delta-dao.com/api/check-blocks' + } } } diff --git a/src/@context/MarketMetadata/_types.ts b/src/@context/MarketMetadata/_types.ts index 2aa8d3f8..1d41d4dc 100644 --- a/src/@context/MarketMetadata/_types.ts +++ b/src/@context/MarketMetadata/_types.ts @@ -36,8 +36,15 @@ export interface AppConfig { roughTxGasEstimate: number } showPreviewAlert: string - networkAlertApi: { - [chainId: number]: string + networkAlertConfig: { + // Refresh interval for network status - 30 sec + refreshInterval: number + // Margin of error for block count (how much difference between min / max block numbers before showing an alert) + errorMargin: number + // Map chainIds to their respective status endpoints + statusEndpoints: { + [chainId: number]: string + } } } export interface SiteContent { diff --git a/src/components/@shared/NetworkStatus/index.tsx b/src/components/@shared/NetworkStatus/index.tsx index 3ae5145c..8d65ef78 100644 --- a/src/components/@shared/NetworkStatus/index.tsx +++ b/src/components/@shared/NetworkStatus/index.tsx @@ -10,21 +10,18 @@ export default function NetworkStatus({ }: { className?: string }): ReactElement { - const [showNetworkAlert, setShowNetworkAlert] = useState(false) + const [showNetworkAlert, setShowNetworkAlert] = useState(true) const [network, setNetwork] = useState() const { appConfig } = useMarketMetadata() const { chain } = useNetwork() - // Refresh interval for network status - 30 sec - const refreshInterval = 30000 - // Margin of error for block count (how much difference between min / max block numbers before showing an alert) - const errorMargin = 5 + const { networkAlertConfig } = appConfig const fetchNetworkStatus = useCallback( async (chainId: number) => { if (!chainId) return setNetwork(chain?.name) - const apiEndpoint = appConfig.networkAlertApi[chainId] + const apiEndpoint = networkAlertConfig.statusEndpoints[chainId] if (!apiEndpoint) return LoggerInstance.log(`[NetworkStatus] retrieving network status`, { apiEndpoint @@ -39,7 +36,7 @@ export default function NetworkStatus({ if (!minBlock || block < minBlock) minBlock = block if (!maxBlock || block > maxBlock) maxBlock = block }) - const hasError = maxBlock - minBlock > errorMargin + const hasError = maxBlock - minBlock > networkAlertConfig.errorMargin setShowNetworkAlert(hasError) LoggerInstance.log(`[NetworkStatus] network status updated:`, { minBlock, @@ -53,7 +50,7 @@ export default function NetworkStatus({ ) } }, - [appConfig.networkAlertApi, chain] + [networkAlertConfig, chain] ) useEffect(() => { @@ -64,7 +61,7 @@ export default function NetworkStatus({ // init periodic refresh for network status const networkStatusInterval = setInterval( () => fetchNetworkStatus(chain?.id), - refreshInterval + networkAlertConfig.refreshInterval ) return () => {