Add toggle to auto refresh on validator line chart page (#47)

Author: urnotsam

src/frontend/api/useStats.ts

@@ -20,13 +20,15 @@ export const useStats = (query: {
   fetchCoinStats?: boolean
   transactionResponseType?: string | undefined
   validatorResponseType?: string | undefined
+  refreshEnabled?: boolean
 }): StatsResult => {
   const {
     validatorStatsCount,
     transactionStatsCount,
     fetchCoinStats,
     transactionResponseType,
     validatorResponseType,
+    refreshEnabled,
   } = query
 
   // set query paths to `null` if we shouldn't fetch them
@@ -38,13 +40,28 @@ export const useStats = (query: {
     : null
   const coinStatsQuery = fetchCoinStats ? `${PATHS.STATS_COIN}` : null
 
+  const swrOptions = {
+    refreshInterval: !refreshEnabled ? 0 : undefined,
+    revalidateOnFocus: refreshEnabled,
+    revalidateOnReconnect: refreshEnabled,
+  }
+
   // get responses
-  const validatorStatsResponse = useSWR<{ validatorStats: ValidatorStats[] }>(validatorStatsQuery, fetcher)
+  const validatorStatsResponse = useSWR<{ validatorStats: ValidatorStats[] }>(
+    validatorStatsQuery,
+    fetcher,
+    swrOptions
+  )
   const transactionStatsResponse = useSWR<{ transactionStats: TransactionStats[] }>(
     transactionStatsQuery,
-    fetcher
+    fetcher,
+    swrOptions
+  )
+  const coinStatsResponse = useSWR<{ totalSupply: number; totalStaked: number }>(
+    coinStatsQuery,
+    fetcher,
+    swrOptions
   )
-  const coinStatsResponse = useSWR<{ totalSupply: number; totalStaked: number }>(coinStatsQuery, fetcher)
 
   // get values
   const validatorStats =

src/frontend/validator-line-chart/ValidatorLineChart.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import { ContentLayout, StackedLineStockChart } from '../components'
 
@@ -7,15 +7,31 @@ import { useStats } from '../api'
 import { convertValidatorStatsToSeriesData } from '../utils/transformChartData'
 
 export const ValidatorLineChart: React.FC = () => {
+  const [refreshEnabled, setRefreshDisabled] = useState(true)
   const height = 600
 
   const { validatorStats, loading } = useStats({
     validatorStatsCount: 10000000,
+    refreshEnabled,
   })
 
+  const toggleNoRefresh = (): void => setRefreshDisabled((prev) => !prev)
+
   return (
     <div className={styles.ValidatorLineChart}>
       <ContentLayout title="Active Validators per Cycle Chart">
+        <div style={{ marginBottom: '1rem' }}>
+          <label>
+            <input
+              type="checkbox"
+              checked={refreshEnabled}
+              onChange={toggleNoRefresh}
+              style={{ appearance: 'auto' }}
+            />
+            <span> Auto Refresh</span>
+          </label>
+        </div>
+
         {loading ? (
           <div>Loading...</div>
         ) : (