From 9b75fed62d6d1f64b610fa7b058d8bf5ab3fe539 Mon Sep 17 00:00:00 2001
From: bomb-on <0nada0@gmail.com>
Date: Sat, 24 Apr 2021 22:54:52 +0000
Subject: [PATCH] wow miner!!

---
 src/components/App.js             |  9 ++++++
 src/components/ContextProvider.js | 50 ++++++++++++++++++++++++++-----
 src/components/Header.js          | 10 +++++++
 src/components/Info.js            | 27 +++++++++++++++++
 src/components/Miner.js           | 40 +++++++++++++++++++++++++
 src/components/Pool.js            | 20 ++-----------
 src/components/useAppState.js     | 16 ++++++++--
 src/helpers/ApiHelper.js          |  5 ++++
 src/helpers/Hooks.js              | 11 +++++--
 src/index.js                      | 16 +++-------
 src/static/css/main.css           | 23 ++++++++++++++
 11 files changed, 186 insertions(+), 41 deletions(-)
 create mode 100644 src/components/Header.js
 create mode 100644 src/components/Info.js
 create mode 100644 src/components/Miner.js

diff --git a/src/components/App.js b/src/components/App.js
index fe76894..11e47c5 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,6 +1,9 @@
 import React from 'react';
 
 import AppContextProvider from './ContextProvider';
+import Header from './Header';
+import Info from './Info';
+import Miner from './Miner';
 import Pool from './Pool';
 
 import '../static/css/main.css';
@@ -8,7 +11,13 @@ import '../static/css/main.css';
 
 const App = () => (
   <AppContextProvider>
+    <Header />
+    <hr />
+    <Info />
+    <hr />
     <Pool />
+    <hr />
+    <Miner />
   </AppContextProvider>
 );
 
diff --git a/src/components/ContextProvider.js b/src/components/ContextProvider.js
index 035f8ad..45053e9 100644
--- a/src/components/ContextProvider.js
+++ b/src/components/ContextProvider.js
@@ -8,10 +8,29 @@ import { useEffectOnce } from '../helpers/Hooks';
 export const AppContext = React.createContext();
 
 const AppContextProvider = props => {
-  const [state, dispatch] = useAppState();
+  const [state, dispatch, updatedState] = useAppState();
   const Api = new ApiHelper({ state });
 
 
+  const addWallet = address => {
+    // @TODO check if valid addy
+    const storedWallets = JSON.parse(localStorage.getItem('pool.wowne.ro')) || {};
+    if (!storedWallets[address]) {
+      getMinerStats(address);
+      setMinerIntervals(address);
+    }
+  };
+
+  const getMinerStats = address => {
+    const storedWallets = JSON.parse(localStorage.getItem('pool.wowne.ro')) || {};
+    Api.getMinerStats(address)
+      .then(res => {
+        storedWallets[address] = res;
+        localStorage.setItem('pool.wowne.ro', JSON.stringify(storedWallets));
+        dispatch({ type: 'UPDATE_WALLETS' });
+      });
+  };
+
   const getNetworkStats = () => {
     return Api.getNetworkStats()
       .then(networkStats => {
@@ -34,25 +53,42 @@ const AppContextProvider = props => {
   };
 
   const actions = {
-    getPoolConfig,
+    addWallet,
   };
 
-  const setIntervals = () => {
+  const setIntervals = () => new Promise((resolve, _) => {
     const { appSettings } = state;
     const intervals = [
       { fn: getPoolStats, time: appSettings.poolStatsUpdateInterval },
-      { fn: getNetworkStats, time: appSettings.networkUpdateInterval },
+      { fn: getNetworkStats, time: appSettings.networkStatsUpdateInterval },
     ];
     dispatch({ type: 'SET_INTERVALS', intervals });
+    resolve();
+  });
+
+  const setMinerIntervals = wallet => {
+    const { appSettings } = updatedState.current;
+    const intervals = [
+      { fn: getMinerStats, params: wallet, time: appSettings.minerStatsUpdateInterval },
+    ]
+    dispatch({ type: 'SET_INTERVALS', intervals });
   }
 
   useEffectOnce(() => {
+    dispatch({ type: 'UPDATE_WALLETS' });
     getPoolConfig().then(() =>
       getPoolStats().then(() =>
         getNetworkStats().then(() => {
-          // initial API responses completed, app ready now
-          setIntervals();
-          dispatch({type: 'APP_LOADED', appLoaded: true});
+          setIntervals().then(() => {
+            // app ready now
+            if (updatedState.current.user.wallets) {
+              Object.keys(updatedState.current.user.wallets).forEach(wallet => {
+                getMinerStats(wallet);
+                setMinerIntervals(wallet);
+              });
+            }
+            dispatch({ type: 'APP_LOADED', appLoaded: true });
+          });
         })
       )
     );
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..8546e04
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,10 @@
+import React from 'react';
+
+
+const Header = () => (
+  <div className="header">
+    <h1>wow!</h1>
+  </div>
+);
+
+export default Header;
diff --git a/src/components/Info.js b/src/components/Info.js
new file mode 100644
index 0000000..14fc966
--- /dev/null
+++ b/src/components/Info.js
@@ -0,0 +1,27 @@
+import React, { useContext } from 'react';
+
+import { AppContext } from './ContextProvider';
+import { ToCoins } from '../helpers/utils';
+
+
+const Info = () => {
+  const { state } = useContext(AppContext);
+  const { pool } = state;
+  const { config } = pool;
+
+  return (
+    <div className="info">
+      <p>welcome good friend &lt;3 thank so much for mining!</p>
+      <p>very mining with you from <strong>blocke 62</strong></p>
+      <p>such good pool:</p>
+      <ul>
+        <li>PPLNS fee for miner: {config.pplns_fee}%</li>
+        <li>SOLO fee for miner: {config.solo_fee}%</li>
+        <li>min payout for miner: <ToCoins coins={config.min_wallet_payout} /></li>
+        <li>min payout for miner on exchange: <ToCoins coins={config.min_exchange_payout} /></li>
+      </ul>
+    </div>
+  )
+};
+
+export default Info;
diff --git a/src/components/Miner.js b/src/components/Miner.js
new file mode 100644
index 0000000..3ff5b11
--- /dev/null
+++ b/src/components/Miner.js
@@ -0,0 +1,40 @@
+import React, { useContext } from 'react';
+
+import { AppContext } from './ContextProvider';
+import { useFormInput } from '../helpers/Hooks';
+import {ToCoins, ToDate} from '../helpers/utils';
+
+
+const Miner = () => {
+  const { actions, state } = useContext(AppContext);
+  const { addWallet } = actions;
+  const { user } = state;
+  const { wallets } = user;
+
+  const { value: address, bind: bindAddress } = useFormInput('');
+
+  return (
+    <div className="miner">
+      <form
+        onSubmit={e => {
+          e.preventDefault();
+          addWallet(address);
+        }}
+      >
+        <p>{!wallets ? 'you miner? your wow address miner pleas? ->' : 'add more address miner! ->'} <input {...bindAddress} /></p>
+      </form>
+
+      {wallets && Object.keys(wallets).map(wallet =>
+        <div key={wallet}>
+          <div>{wallet}</div>
+          <div>last hashe: <ToDate timeStamp={wallets[wallet].lastHash} /></div>
+          <div>all hashe: {wallets[wallet].totalHashes}</div>
+          <div>all pay: <ToCoins coins={wallets[wallet].amtPaid} /></div>
+          <div>still wait pay: <ToCoins coins={wallets[wallet].amtDue} /></div>
+        </div>
+      )}
+    </div>
+  )
+};
+
+export default Miner;
diff --git a/src/components/Pool.js b/src/components/Pool.js
index 3a1df9d..08e9711 100644
--- a/src/components/Pool.js
+++ b/src/components/Pool.js
@@ -7,30 +7,14 @@ import { ToCoins, ToDate, ToHashes } from '../helpers/utils';
 const Pool = () => {
   const { state } = useContext(AppContext);
   const { pool } = state;
-  const { config, networkStats, stats } = pool;
+  const { networkStats, stats } = pool;
   const { pool_statistics: poolStats } = stats;
 
   const networkHashRate = Math.floor(networkStats.difficulty / 300);
   const poolPercentage = poolStats.hashRate / networkHashRate * 100;
 
   return (
-    <div>
-      <h1>wow!</h1>
-
-      <hr />
-
-      <p>welcome good friend &lt;3 thank so much for mining!</p>
-      <p>very mining with you from <strong>blocke 62</strong></p>
-      <p>such good pool:</p>
-      <ul>
-        <li>PPLNS fee for miner: {config.pplns_fee}%</li>
-        <li>SOLO fee for miner: {config.solo_fee}%</li>
-        <li>min payout for miner: <ToCoins coins={config.min_wallet_payout} /></li>
-        <li>min payout for miner on exchange: <ToCoins coins={config.min_exchange_payout} /></li>
-      </ul>
-
-      <hr />
-
+    <div className="pool">
       <p>all wow miners: <ToHashes hashes={networkHashRate} /></p>
       <p>this pool miners: {poolStats.miners} miners digging <ToHashes hashes={poolStats.hashRate} /> (only {poolPercentage.toFixed(2)}%)</p>
       <p>world blocke: {networkStats.height} with <ToCoins coins={networkStats.value} /> discovered {<ToDate timeStamp={networkStats.ts} />}</p>
diff --git a/src/components/useAppState.js b/src/components/useAppState.js
index 8c72b0b..d88d0c3 100644
--- a/src/components/useAppState.js
+++ b/src/components/useAppState.js
@@ -7,7 +7,8 @@ const initialState = () => ({
     appLoaded: false,
     coinDecimals: 11,
     coinSymbol: 9077,  // hex 2375 (⍵) https://git.wownero.com/wownero/meta/issues/2
-    networkUpdateInterval: 15,
+    minerStatsUpdateInterval: 15,
+    networkStatsUpdateInterval: 15,
     poolStatsUpdateInterval: 30,
   },
   intervals: [],
@@ -20,6 +21,7 @@ const initialState = () => ({
   },
   user: {
     loggedIn: false,
+    wallets: null,
   },
 });
 
@@ -46,8 +48,17 @@ const reducer = (state, action) => {
         },
       };
       break;
+    case 'UPDATE_WALLETS':
+      result = {
+        ...state,
+        user: {
+          ...state.user,
+          wallets: JSON.parse(localStorage.getItem('pool.wowne.ro')),
+        },
+      };
+      break;
     case 'SET_INTERVALS':
-      const intervals = action.intervals.map(i => setInterval(i.fn, i.time * 1000));
+      const intervals = action.intervals.map(i => setInterval(i.fn, i.time * 1000, i.params));
       result = {
         ...state,
         intervals,
@@ -105,6 +116,7 @@ const reducer = (state, action) => {
     default:
       throw new Error();
   }
+
   updatedState.current = result;
   return result;
 };
diff --git a/src/helpers/ApiHelper.js b/src/helpers/ApiHelper.js
index 6c0d6eb..f914fe4 100644
--- a/src/helpers/ApiHelper.js
+++ b/src/helpers/ApiHelper.js
@@ -3,6 +3,11 @@ export default class ApiHelper {
     this.apiURL = options.state.appSettings.apiURL;
   }
 
+  getMinerStats = address => {
+    return this.fetch(`${this.apiURL}/miner/${address}/stats`, { method: 'GET' })
+      .then(res => Promise.resolve(res));
+  }
+
   getNetworkStats = () => {
     return this.fetch(`${this.apiURL}/network/stats`, { method: 'GET' })
       .then(res => Promise.resolve(res));
diff --git a/src/helpers/Hooks.js b/src/helpers/Hooks.js
index b256fa2..30b1b5a 100644
--- a/src/helpers/Hooks.js
+++ b/src/helpers/Hooks.js
@@ -1,4 +1,11 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 
-export const useEffectOnce = fn => useEffect(fn, []);
+export const useFormInput = init => {
+  const [value, setValue] = useState(init);
+  const onChange = e => setValue(e.target.value);
+  const reset = () => setValue('');
+  return { bind: { value, onChange }, reset, setValue, value };
+};
+
+export const useEffectOnce = aids => useEffect(aids, []);
diff --git a/src/index.js b/src/index.js
index 329f581..ef5f252 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,17 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './static/css/main.css';
+
 import App from './components/App';
-import reportWebVitals from './reportWebVitals';
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
+import './static/css/main.css';
+
 
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/static/css/main.css b/src/static/css/main.css
index 80c9e42..ad52963 100644
--- a/src/static/css/main.css
+++ b/src/static/css/main.css
@@ -3,3 +3,26 @@
 body {
   font-family: 'Gaegu', cursive;
 }
+
+hr {
+  background-color: rgb(238, 238, 238);
+  border: 0 none;
+  color: rgb(238, 238, 238);
+  height: 1px;
+}
+
+.header {
+  background-color: rgb(235, 18, 255);
+}
+
+.info {
+  background-color: rgb(255, 143, 5);
+}
+
+.pool {
+  background-color: rgb(255, 143, 5);
+}
+
+.miner {
+  background-color: rgb(235, 18, 255);
+}