getNodeData (#463)

* getNodeData

* update-version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hopr-admin",
-  "version": "0.6.5",
+  "version": "0.6.6",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.0",
@@ -36,6 +36,7 @@
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.11.2",
+    "react-timeago": "^7.2.0",
     "react-toastify": "^9.1.3",
     "redux": "^4.2.1",
     "typescript": "^5.1.6",
@@ -81,6 +82,7 @@
     "@types/canvas-confetti": "^1.6.0",
     "@types/lodash": "^4.14.197",
     "@types/md5": "^2.3.2",
+    "@types/react-timeago": "^4.1.4",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
     "@vitejs/plugin-react": "^4.0.0",

src/components/ConnectWeb3/index.tsx

@@ -24,10 +24,10 @@ const AppBarContainer = styled(Button)`
   justify-content: center;
   width: 285px;
   border-radius: 0;
-  & .image-container {
+  .image-container {
     height: 50px;
     width: 50px;
-    & img {
+    img {
       width: 100%;
       height: 100%;
     }

src/future-hopr-lib-components/Progressbar/index.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+const Bar = styled.div`
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    height: 26px;
+    border-radius: 2px;
+ //   width: 120px;
+`
+
+const Value = styled.div`
+    position: absolute;
+    line-height: 24px;
+    width: 100%;
+    display: flex;
+    -webkit-box-pack: center;
+    justify-content: center;
+`
+
+const Progress = styled.div`
+    height: 100%;
+    max-width: ${props => props.percentage};
+    &.red {
+        background-color: rgb(244, 67, 54);
+    }
+    &.orange {
+        background-color: rgba(239, 187, 90, 0.64);
+    }
+    &.green {
+        background-color: rgba(8, 130, 8, 0.64);
+    }
+`
+
+function ProgressBar(props) {
+
+    function percentage() {
+        if(!props.value) return '0%'
+        if(props.value>1) return '100%'
+        return `${Math.round(props.value*1000)/10}%`;
+    }
+
+    function color() {
+        if(!props.value || props.value <= 0.25) return 'red';
+        if(props.value <= 0.76) return 'orange';
+        return 'green'
+    }
+
+    return (
+        <Bar>
+            <Value className="value">{percentage()}</Value>
+            <Progress 
+                className={`progress ${color()}`}
+                percentage={percentage()}
+            />
+        </Bar>
+    );
+}
+
+export default ProgressBar;

src/pages/staking-hub/dashboard/node.tsx

@@ -5,7 +5,7 @@ import { useAppDispatch, useAppSelector } from '../../../store';
 import { safeActionsAsync } from '../../../store/slices/safe';
 import { useEthersSigner } from '../../../hooks';
 
-import Button from '../../../future-hopr-lib-components/Button';
+
 import { Card, Chip, IconButton } from '@mui/material';
 import { Link, useNavigate } from 'react-router-dom';
 
@@ -14,6 +14,12 @@ import CloseIcon from '@mui/icons-material/Close';
 import CopyIcon from '@mui/icons-material/ContentCopy';
 import LaunchIcon from '@mui/icons-material/Launch';
 
+// HOPR components
+import Button from '../../../future-hopr-lib-components/Button';
+import { Table } from '../../../future-hopr-lib-components/Table/columed-data'
+import ProgressBar from '../../../future-hopr-lib-components/Progressbar'
+import { formatDate } from '../../../utils/date';
+
 //web3
 import { Address } from 'viem';
 import { browserClient } from '../../../providers/wagmi';
@@ -120,11 +126,11 @@ const NodeGraphic = styled.div`
     display: block;
     height: 100%;
     width: 100%;
+    object-fit: contain;
   }
 `;
 
 const NodeInfo = styled.div`
-  align-self: flex-end;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -250,7 +256,7 @@ const NodeAdded = () => {
   const nodeNativeAddress = useAppSelector((store) => store.node.addresses.data.native);
   const nodeHoprAddress = useAppSelector((store) => store.stakingHub.onboarding.nodeAddress);
   const nodeBalance = useAppSelector((store) => store.stakingHub.onboarding.nodeBalance.xDai.formatted);
-  const wxHoprAllowance = useAppSelector((store) => store.stakingHub.safeInfo.data.allowance.wxHoprAllowance);
+  const nodes = useAppSelector((store) => store.stakingHub.nodes);
 
   return (
     <Content>
@@ -262,56 +268,86 @@ const NodeAdded = () => {
               alt="Node Graphic"
             />
           </NodeGraphic>
-          <NodeInfo>
-            <NodeInfoRow>
-              <p>Node Address</p>
-              {nodeHoprAddress ? (
-                <>
-                  <p>{truncateHOPRPeerId(nodeHoprAddress)}</p>
-                  <SquaredIconButton
-                    onClick={() => nodeHoprAddress && navigator.clipboard.writeText(nodeHoprAddress)}
-                  >
-                    <CopyIcon />
-                  </SquaredIconButton>
-                  <Link to={`https://gnosisscan.io/address/${nodeNativeAddress}`}>
-                    <SquaredIconButton>
-                      <LaunchIcon />
+          <Table>
+            <tbody>
+              <tr>
+                <th>Node Address
+                  <div>
+                    <SquaredIconButton
+                      onClick={() => nodeHoprAddress && navigator.clipboard.writeText(nodeHoprAddress)}
+                    >
+                      <CopyIcon />
                     </SquaredIconButton>
-                  </Link>
-                </>
-              ) : (
-                <p>-</p>
-              )}
-            </NodeInfoRow>
-            <NodeInfoRow>
-              <p>Last seen</p>
-              <p>- mins</p>
-            </NodeInfoRow>
-            <NodeInfoRow>
-              <p>Ping</p>
-              <p>-</p>
-            </NodeInfoRow>
-            <NodeInfoRow>
-              <p>24h Avail.</p>
-              <p>-%</p>
-            </NodeInfoRow>
-            <NodeInfoRow>
-              <p>Availability</p>
-              <p>-%</p>
-            </NodeInfoRow>
-            <NodeInfoRow>
-              <p id="actions">Actions</p>
-              <StyledIconButton
-                onClick={() => { } /*navigate(`/node/configuration?${queryParams}`)*/}
-                disabled
-              >
-                <SettingsIcon />
-              </StyledIconButton>
-              <StyledIconButton disabled>
-                <CloseIcon />
-              </StyledIconButton>
-            </NodeInfoRow>
-          </NodeInfo>
+                    <Link to={`https://gnosisscan.io/address/${nodeNativeAddress}`}>
+                      <SquaredIconButton>
+                        <LaunchIcon />
+                      </SquaredIconButton>
+                    </Link>
+                  </div>
+                </th>
+                <td>
+                  <p
+                    style={{
+                      maxHeight: '72px',
+                      textOverflow: 'ellipsis',
+                      overflow: 'hidden',
+                      margin: '0',
+                    }}
+                  >
+                    {nodeHoprAddress}
+                  </p>
+                </td>
+              </tr>
+              <tr>
+                <th>Last seen</th>
+                <td>
+                  <p
+                    style={{
+                      maxHeight: '72px',
+                      textOverflow: 'ellipsis',
+                      overflow: 'hidden',
+                      margin: '0',
+                    }}
+                  >{nodes[0]?.lastSeen ? formatDate(nodes[0]?.lastSeen) : '-'}
+                  </p>
+                </td>
+              </tr>
+              <tr>
+                <th>Ping count</th>
+                <td>{nodes[0]?.count || '-'}</td>
+              </tr>
+              <tr>
+                <th>24h Availability</th>
+                <td>
+                  {
+                    nodes[0]?.availability24h ?
+                      <ProgressBar
+                        value={nodes[0].availability24h}
+                      />
+                      :
+                      '-'
+                  }
+                </td>
+              </tr>
+              <tr>
+                <th>Availability</th>
+                <td>
+                  {
+                    nodes[0]?.availability ?
+                      <ProgressBar
+                        value={nodes[0].availability}
+                      />
+                      :
+                      '-'
+                  }
+                </td>
+              </tr>
+              <tr>
+                <th>Last seen version</th>
+                <td>{nodes[0]?.version || '-'}</td>
+              </tr>
+            </tbody>
+          </Table>
         </Graphic>
       </GrayCard>
       <GrayCard

src/store/slices/stakingHub/actionsAsync.ts

@@ -16,6 +16,7 @@ import { Address, PublicClient, WalletClient, parseEther, publicActions } from '
 import { gql } from 'graphql-request';
 import { stakingHubActions } from '.';
 import { safeActionsAsync } from '../safe';
+import { NodePayload } from './initialState';
 
 const getHubSafesByOwnerThunk = createAsyncThunk<
   {
@@ -200,6 +201,11 @@ const getSubgraphDataThunk = createAsyncThunk<
       if (json.nodeManagementModules.length > 0) output.module = json.nodeManagementModules[0];
       if (json.balances.length > 0) output.overall_staking_v2_balances = json.balances[0];
 
+      if (output.registeredNodesInNetworkRegistry?.length > 0) {
+        let nodeAddress = output.registeredNodesInNetworkRegistry[0].node.id;
+        dispatch(getNodeDataThunk(nodeAddress));
+      }
+
       console.log('SubgraphParsedOutput', output);
       return output;
     } catch (e) {
@@ -435,9 +441,37 @@ const getOnboardingDataThunk = createAsyncThunk<
   dispatch(stakingHubActions.onboardingIsFetching(false));
 });
 
+const getNodeDataThunk = createAsyncThunk<
+  NodePayload[], 
+  string, 
+  { state: RootState }
+>(
+  'stakingHub/getNodeData',
+  async (payload, {
+    rejectWithValue,
+    dispatch,
+  }) => {
+    console.log('getNodeData', payload);
+    dispatch(setNodeDataFetching(true));
+    const rez = await fetch(`https://network.hoprnet.org/api/getNode?env=37&nodeAddress=${payload}`);
+    const json = await rez.json();
+    return json;
+  },
+  { condition: (_payload, { getState }) => {
+    if(getState().stakingHub.nodes.length > 0) {
+      const isFetching = getState().stakingHub.nodes[0].isFetching;
+      if (isFetching) {
+        return false;
+      }
+    }
+    return true;
+  } },
+);
+
 // Helper actions to update the isFetching state
 const setHubSafesByOwnerFetching = createAction<boolean>('stakingHub/setHubSafesByOwnerFetching');
 const setSubgraphDataFetching = createAction<boolean>('stakingHub/setSubgraphDataFetching');
+const setNodeDataFetching = createAction<boolean>('stakingHub/setNodeDataFetching');
 
 export const createAsyncReducer = (builder: ActionReducerMapBuilder<typeof initialState>) => {
   builder.addCase(getHubSafesByOwnerThunk.fulfilled, (state, action) => {
@@ -493,6 +527,15 @@ export const createAsyncReducer = (builder: ActionReducerMapBuilder<typeof initi
       }
     }
   });
+  builder.addCase(getNodeDataThunk.fulfilled, (state, action) => {
+    if(action.payload.length > 0) {
+      state.nodes.push(action.payload[0]);
+    }
+    state.nodes[0].isFetching = false;
+  });
+  builder.addCase(getNodeDataThunk.rejected, (state, action) => {
+    state.nodes[0].isFetching = false;
+  });
 };
 
 export const actionsAsync = {

src/store/slices/stakingHub/initialState.ts

@@ -36,8 +36,22 @@ type InitialState = {
       isFetching: boolean;
     }
   },
+  nodes: NodePayload[]
 };
 
+export type NodePayload = {
+  nodeAddress: string,
+  peerId?: string,
+  lastSeen?: number,
+  latencyAverage?: number,
+  count?: number,
+  since1667080800count?: number,
+  availability?: number,
+  availability24h?: number,
+  version?: string
+  isFetching: boolean;
+}
+
 export type SubgraphParsedOutput = {
   balance: {
     mHoprBalance: string | null;
@@ -172,5 +186,6 @@ export const initialState: InitialState = {
       strategy: null,
       isFetching: false,
     }
-  }
+  },
+  nodes: [],
 };