feat(UI): implement auto mining (#17)

Description
---
Implement auto mining behavior based on user activity 
Motivation and Context

How Has This Been Tested?
---
Manually

What process can a PR reviewer use to test or verify this change?
---
Open our app, click on Auto Miner switch button and do move mouse inside
app for 30 seconds

<!-- Checklist -->
<!-- 1. Is the title of your PR in the form that would make nice release
notes? The title, excluding the conventional commit
tag, will be included exactly as is in the CHANGELOG, so please think
about it carefully. -->


Breaking Changes
---

- [x] None
- [ ] Requires data directory on base node to be deleted
- [ ] Requires hard fork
- [ ] Other - Please specify

<!-- Does this include a breaking change? If so, include this line as a
footer -->
<!-- BREAKING CHANGE: Description what the user should do, e.g. delete a
database, resync the chain -->

package.json

@@ -17,6 +17,7 @@
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-icons": "^5.2.1",
+ "react-idle-timer": "^5.7.2",
  "zustand": "^4.5.4"
  },
  "devDependencies": {

src/containers/SideBar/Miner/components/AutoMiner.tsx

@@ -1,7 +1,54 @@
 import { FormGroup, Switch, Stack, Typography } from '@mui/material';
 import { AutoMinerContainer } from '../styles';
+import useAppStateStore from '../../../../store/appStateStore';
+import { useIdleTimer } from 'react-idle-timer'
+import React from 'react';
 
 function AutoMiner() {
+
+ const { setBackground, startMining, stopMining,setIsMining,isAutoMining,setIsAutoMining } = useAppStateStore(state => ({
+ startMining: state.startMining,
+ stopMining: state.stopMining,
+ setBackground: state.setBackground,
+ setIsMining: state.setIsMining,
+ setIsAutoMining: state.setIsAutoMining,
+ isAutoMining: state.isAutoMining,
+
+ }));
+
+ const enableAutoMining = () => {
+ startMining();
+ setIsMining(true);
+ setBackground('mining');
+ };
+ const disableAutoMining = () => {
+ stopMining();
+ setIsMining(false);
+ setBackground('idle');
+ };
+
+
+ const { start, pause } = useIdleTimer({ timeout: 1000 * 30,startManually: true, onIdle: enableAutoMining, onActive:disableAutoMining, events: ["mousemove"]});
+
+
+ React.useEffect(() => {
+ if (isAutoMining) {
+ start();
+ } else {
+ pause();
+ }
+ }, [isAutoMining]);
+
+ const handleAutoMining = () => {
+ if (isAutoMining) {
+ setIsAutoMining(false)
+ disableAutoMining();
+ } else {
+ setIsAutoMining(true);
+ }
+ };
+
+
  return (
  <Stack direction="column" spacing={1}>
  <AutoMinerContainer>
@@ -12,7 +59,7 @@ function AutoMiner() {
  </Typography>
  </Stack>
  <FormGroup>
- <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple />
+ <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple checked={isAutoMining} onChange={handleAutoMining}/>
  </FormGroup>
  </AutoMinerContainer>
  </Stack>

src/store/appStateStore.ts

@@ -25,6 +25,8 @@ interface AppState {
  setWallet: (value: { balance: number }) => void;
  isMining: boolean;
  setIsMining: (value: boolean) => void;
+ isAutoMining: boolean;
+ setIsAutoMining: (value: boolean) => void;
  sidebarOpen: boolean;
  setSidebarOpen: (value: boolean) => void;
 
@@ -74,6 +76,8 @@ const useAppStateStore = create<AppState>((set) => ({
  setWallet: (value) => set({ wallet: value }),
  isMining: false,
  setIsMining: (value) => set({ isMining: value }),
+ isAutoMining: false,
+ setIsAutoMining: (value) => set({ isAutoMining: value }),
  sidebarOpen: false,
  setSidebarOpen: (value) => set({ sidebarOpen: value }),