fix(webapp): remove redux

webapp/package.json

@@ -34,8 +34,6 @@
     "@mui/lab": "^5.0.0-alpha.90",
     "@mui/material": "^5.9.0",
     "@mui/styles": "^5.9.0",
-    "@rematch/core": "^2.2.0",
-    "@rematch/loading": "^2.1.2",
     "apollo-cache-inmemory": "^1.6.6",
     "apollo-client": "^2.6.10",
     "apollo-link": "^1.2.14",
@@ -73,13 +71,11 @@
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.7.0",
     "react-perfect-scrollbar": "^1.5.8",
-    "react-redux": "^7.2.0",
     "react-router": "^5.1.2",
     "react-router-dom": "^6.4.3",
     "react-scripts": "^3.4.1",
     "react-simple-maps": "^2.0.0",
     "recharts": "^1.8.5",
-    "redux": "^4.0.5",
     "reselect": "^4.0.0",
     "styled-components": "^5.2.0",
     "subscriptions-transport-ws": "^0.9.17",

webapp/src/components/ContractTables/TableData.js

@@ -19,6 +19,10 @@ const TableData = ({ tableData, fields, handleSubmit }) => {
   const classes = useStyles()
   const { t } = useTranslation('contractTablesComponent')
 
+  const handleOnSubmit = () => {
+    handleSubmit(tableData.next_key)
+  }
+
   if (!tableData) return <></>
 
   return (
@@ -60,11 +64,7 @@ const TableData = ({ tableData, fields, handleSubmit }) => {
       </Table>
       {tableData?.more && (
         <div className={classes.loadMore}>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={() => handleSubmit(tableData.next_key)}
-          >
+          <Button variant="contained" color="primary" onClick={handleOnSubmit}>
             {t('loadMore')}
           </Button>
         </div>

webapp/src/components/ContractTables/index.js

@@ -116,7 +116,8 @@ const ContractTables = ({
 
   useEffect(() => {
     handleSubmit(null)
-  }, [debouncedFilter, handleSubmit])
+    // eslint-disable-next-line
+  }, [debouncedFilter])
 
   return (
     <div>

webapp/src/components/TransactionsLineChart/index.js

@@ -6,20 +6,20 @@ import Highcharts from 'highcharts'
 const TransactionsLineChart = ({ data, xAxisProps, title, yAxisProps }) => {
   const options = {
     time: {
-      timezoneOffset: new Date().getTimezoneOffset()
+      timezoneOffset: new Date().getTimezoneOffset(),
     },
     title: {
-      text: title
+      text: title,
     },
     chart: {
       animation: false,
-      type: 'spline'
+      type: 'spline',
     },
     credits: {
-      enabled: false
+      enabled: false,
     },
     xAxis: xAxisProps,
-    yAxis: yAxisProps
+    yAxis: yAxisProps,
   }
 
   return (
@@ -28,7 +28,7 @@ const TransactionsLineChart = ({ data, xAxisProps, title, yAxisProps }) => {
         highcharts={Highcharts}
         options={{
           ...options,
-          series: data
+          series: data,
         }}
       />
     </div>
@@ -39,14 +39,14 @@ TransactionsLineChart.propTypes = {
   data: PropTypes.array,
   xAxisProps: PropTypes.object,
   yAxisProps: PropTypes.object,
-  title: PropTypes.string
+  title: PropTypes.string,
 }
 
 TransactionsLineChart.defaultProps = {
   data: [],
   xAxisProps: { xAxisVisible: false },
   yAxisProps: {},
-  title: ''
+  title: '',
 }
 
 export default TransactionsLineChart

webapp/src/context/state.context.js

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
 
 import useLightUAL from '../hooks/useUAL'
 import { ualConfig } from '../config'
+import eosApi from '../utils/eosapi'
 
 const SharedStateContext = React.createContext()
 
@@ -34,6 +35,27 @@ const sharedStateReducer = (state, action) => {
       }
     }
 
+    case 'updateInfo': {
+      return {
+        ...state,
+        info: action.payload,
+      }
+    }
+
+    case 'updateTransactionsStats': {
+      return {
+        ...state,
+        ...action.payload,
+      }
+    }
+
+    case 'updateSchedule': {
+      return {
+        ...state,
+        schedule: action.payload,
+      }
+    }
+
     default: {
       throw new Error(`Unsupported action type: ${action.type}`)
     }
@@ -49,6 +71,14 @@ const initialValue = {
     currentEntity: null,
     dynamicTitle: '',
   },
+  schedule: {
+    version: '',
+    producers: [],
+  },
+  info: {},
+  tps: new Array(30).fill({ blocks: [], transactions: 0 }),
+  tpb: new Array(60).fill({ blocks: [], transactions: 0 }),
+  tpsWaitingBlock: null,
 }
 
 export const SharedStateProvider = ({ ...props }) => {
@@ -83,6 +113,9 @@ export const useSharedState = () => {
   }
 
   const [state, dispatch] = context
+  let infoInterval
+  let scheduleInterval
+
   const update = (payload) => dispatch({ type: 'update', payload })
   const login = (type) => {
     state.ual.login(type)
@@ -104,6 +137,125 @@ export const useSharedState = () => {
     })
   }
 
+  const getBlock = async (block) => {
+    try {
+      const data = await eosApi.getBlock(block)
+      let tpb = state.tpb
+
+      if (state.tpb.length >= 60) {
+        tpb.pop()
+      }
+
+      tpb = [
+        {
+          blocks: [block],
+          transactions: data.transactions.length,
+        },
+        ...tpb,
+      ]
+
+      if (!state.tpsWaitingBlock) {
+        dispatch({
+          type: 'updateTransactionsStats',
+          payload: {
+            tpb,
+            tpsWaitingBlock: {
+              block,
+              transactions: data.transactions.length,
+            },
+          },
+        })
+
+        return
+      }
+
+      let tps = state.tps
+
+      if (state.tps.length >= 30) {
+        tps.pop()
+      }
+
+      tps = [
+        {
+          blocks: [state.tpsWaitingBlock.block, block],
+          transactions:
+            state.tpsWaitingBlock.transactions + data.transactions.length,
+        },
+        ...tps,
+      ]
+
+      dispatch({
+        type: 'updateTransactionsStats',
+        payload: {
+          tps,
+          tpb,
+          tpsWaitingBlock: null,
+        },
+      })
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  const startTrackingProducerSchedule = async ({ interval = 120 } = {}) => {
+    if (scheduleInterval) {
+      return
+    }
+
+    const handle = async () => {
+      try {
+        const result = await eosApi.getProducerSchedule(true)
+
+        dispatch({ type: 'updateSchedule', payload: result.active })
+      } catch (error) {
+        console.error(error)
+      }
+    }
+
+    await handle()
+    scheduleInterval = setInterval(handle, interval * 1000)
+  }
+
+  const startTrackingInfo = async ({ interval = 1 } = {}) => {
+    if (infoInterval) return
+
+    const handle = async () => {
+      try {
+        const info = await eosApi.getInfo({})
+
+        dispatch({
+          type: 'updateInfo',
+          payload: info,
+        })
+        getBlock(info.head_block_num)
+      } catch (error) {
+        console.error(error)
+      }
+    }
+
+    if (interval === 0) {
+      await handle()
+      return
+    }
+
+    await handle()
+    infoInterval = setInterval(handle, interval * 1000)
+  }
+
+  const stopTrackingInfo = async () => {
+    if (!infoInterval) return
+
+    clearInterval(infoInterval)
+    infoInterval = null
+  }
+
+  const stopTrackingProducerSchedule = () => {
+    if (!scheduleInterval) return
+
+    clearInterval(scheduleInterval)
+    scheduleInterval = null
+  }
+
   return [
     state,
     {
@@ -112,6 +264,10 @@ export const useSharedState = () => {
       logout,
       handleOpenMenu,
       handleCloseMenu,
+      stopTrackingProducerSchedule,
+      stopTrackingInfo,
+      startTrackingInfo,
+      startTrackingProducerSchedule,
     },
   ]
 }

webapp/src/index.js

@@ -1,13 +1,11 @@
 import React from 'react'
-import { Provider } from 'react-redux'
 import { createRoot } from 'react-dom/client'
 import { ApolloProvider } from '@apollo/client'
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles'
 import { StylesProvider } from '@mui/styles'
 import { ThemeProvider } from 'styled-components'
 
 import App from './App'
-import store from './store'
 import theme from './theme'
 import { client } from './graphql'
 import * as serviceWorker from './serviceWorker'
@@ -18,15 +16,13 @@ const root = createRoot(container)
 
 root.render(
   <ApolloProvider client={client}>
-    <Provider store={store}>
-      <StylesProvider injectFirst>
-        <MuiThemeProvider theme={theme[0]}>
-          <ThemeProvider theme={theme[0]}>
-            <App />
-          </ThemeProvider>
-        </MuiThemeProvider>
-      </StylesProvider>
-    </Provider>
+    <StylesProvider injectFirst>
+      <MuiThemeProvider theme={theme[0]}>
+        <ThemeProvider theme={theme[0]}>
+          <App />
+        </ThemeProvider>
+      </MuiThemeProvider>
+    </StylesProvider>
   </ApolloProvider>,
 )