Update 2.1.0 (#610)

* clean-up * block number and checksum in info * Send message modal - order of peers: me, aliases, peers * sortAddresses add comment * swap Array.includes check to Object[key] check * order of peers: me, aliases (sorted by aliases), peers (sorted by peersIds)
hoprnet · Jul 15, 2024 · 4ee1d63 · 4ee1d63
1 parent dcc1281
commit 4ee1d63
Show file tree

Hide file tree

Showing 13 changed files with 118 additions and 230 deletions.
diff --git a/index.html b/index.html
@@ -39,7 +39,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>HOPR</title>
+    <title>HOPR | Node Admin</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hopr-admin",
-  "version": "1.2.2",
+  "version": "2.1.0",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -24,8 +24,6 @@ function App() {
   useEffect(() => {
     if (environment === 'node') {
       Fathom.load('MJISRYNH', { url: 'https://cdn-eu.usefathom.com/script.js', spa: 'auto', excludedDomains: ['localhost:5173'] });
-    } else if (environment === 'web3') {
-      Fathom.load('KBDXKTMO', { url: 'https://cdn-eu.usefathom.com/script.js', spa: 'auto', excludedDomains: ['localhost:5173']  });
     }
   }, []);
 

diff --git a/src/components/Modal/node/AddAliasModal.tsx b/src/components/Modal/node/AddAliasModal.tsx
@@ -137,7 +137,7 @@ export const CreateAliasModal = (props: CreateAliasModalProps) => {
             type="text"
             name="peerId"
             label="Peer ID"
-            placeholder="16Uiu2HA..."
+            placeholder="12D3Ko...Z3rz5F"
             onChange={handleChangePeerId}
             value={peerId}
           />

diff --git a/src/components/Modal/node/OpenMultipleChannelsModal.tsx b/src/components/Modal/node/OpenMultipleChannelsModal.tsx
@@ -201,7 +201,7 @@ export const OpenMultipleChannelsModal = () => {
           <STextField
             label="Peer Ids"
             type="string"
-            placeholder="16Uiu2HA...,16Uiu2HA...,16Uiu2HA...,16Uiu2HA..."
+            placeholder="12D3Ko...Z3rz5F,12D3Ko...wxd4zv,12D3Ko...zF8c7u"
             value={peerIds.join(',\n')}
             multiline
             rows={8}

diff --git a/src/components/Modal/node/PingModal.tsx b/src/components/Modal/node/PingModal.tsx
@@ -125,7 +125,7 @@ export const PingModal = (props: PingModalProps) => {
             type="text"
             name="peerId"
             label="Peer ID"
-            placeholder="16Uiu2HA..."
+            placeholder="12D3Ko...Z3rz5F"
             onChange={handleChange}
             value={peerId}
           />

diff --git a/src/components/Modal/node/SendMessageModal.tsx b/src/components/Modal/node/SendMessageModal.tsx
@@ -26,6 +26,14 @@ import ForwardToInboxIcon from '@mui/icons-material/ForwardToInbox';
 import { useAppDispatch, useAppSelector } from '../../../store';
 import { actionsAsync } from '../../../store/slices/node/actionsAsync';
 
+import type {
+  GetPeersResponseType,
+  GetAliasesResponseType
+} from '@hoprnet/hopr-sdk';
+import type {
+  AddressesType
+} from '../../../store/slices/node/initialState';
+
 const PathOrHops = styled.div`
   display: flex;
   flex-direction: row;
@@ -67,6 +75,24 @@ type SendMessageModalProps = {
   tooltip?: JSX.Element | string;
 };
 
+// order of peers: me, aliases (sorted by aliases), peers (sorted by peersIds)
+function sortAddresses(
+  peers: GetPeersResponseType | null,
+  me: AddressesType,
+  peerIdToAliasLink: {
+    [peerId: string]: string
+  }
+) : string[] {
+  if(!peers || !me) return [];
+  const connectedPeers = peers.connected;
+  const myAddress = me.hopr as string;
+  const peerIdsWithAliases = Object.keys(peerIdToAliasLink).sort((a, b) => peerIdToAliasLink[a] < peerIdToAliasLink[b] ? -1 : 1 );
+  if(peerIdsWithAliases.length === 0) return [myAddress, ...connectedPeers.map(peer => peer.peerId).sort()];
+  const peerIdsWithAliasesWithoutMyAddress = peerIdsWithAliases.filter(peerId => peerId !== myAddress);
+  const connectedPeersWithoutAliases = connectedPeers.filter(peer => !peerIdToAliasLink[peer.peerId]).map(peer => peer.peerId).sort();
+  return [myAddress, ...peerIdsWithAliasesWithoutMyAddress, ...connectedPeersWithoutAliases];
+}
+
 export const SendMessageModal = (props: SendMessageModalProps) => {
   const dispatch = useAppDispatch();
   const [path, set_path] = useState<string>('');
@@ -78,9 +104,10 @@ export const SendMessageModal = (props: SendMessageModalProps) => {
   const [openModal, set_openModal] = useState<boolean>(false);
   const loginData = useAppSelector((store) => store.auth.loginData);
   const aliases = useAppSelector((store) => store.node.aliases.data);
-  const peers = useAppSelector((store) => store.node.peers.data?.connected);
+  const peerIdToAliasLink = useAppSelector((store) => store.node.links.peerIdToAlias);
+  const peers = useAppSelector((store) => store.node.peers.data);
   const addresses = useAppSelector((store) => store.node.addresses.data);
-  const peersAndOwnNode = peers && addresses.hopr && addresses.native ? [...peers.map(peer => peer.peerId), addresses.hopr] : [];
+  const sendMessageAddressBook = sortAddresses(peers, addresses, peerIdToAliasLink);
   const [selectedReceiver, set_selectedReceiver] = useState<string | null>(props.peerId ? props.peerId : null);
 
   const maxLength = 500;
@@ -120,7 +147,7 @@ export const SendMessageModal = (props: SendMessageModalProps) => {
       apiEndpoint: loginData.apiEndpoint,
       body: message,
       peerId: selectedReceiver,
-      tag: 1,
+      tag: 4677,
     };
     if (sendMode === 'automaticPath') {
       messagePayload.hops = 1;
@@ -287,7 +314,7 @@ export const SendMessageModal = (props: SendMessageModalProps) => {
             onChange={(event, newValue) => {
               set_selectedReceiver(newValue);
             }}
-            options={peersAndOwnNode}
+            options={sendMessageAddressBook}
             getOptionLabel={(peerId) =>
               hasAlias(peerId)
                 ? `${findAlias(peerId)} (${peerId})`

diff --git a/src/pages/node/info/index.tsx b/src/pages/node/info/index.tsx
@@ -50,12 +50,11 @@ function InfoPage() {
   const peersFetching = useAppSelector((store) => store.node.peers.isFetching);
   const aliases = useAppSelector((store) => store.node.aliases.data);
   const aliasesFetching = useAppSelector((store) => store.node.aliases.isFetching);
-  const statistics = useAppSelector((store) => store.node.statistics.data);
-  const statisticsFetching = useAppSelector((store) => store.node.statistics.isFetching);
-  const nodeStartedEpoch = useAppSelector((store) => store.node.metrics.data.parsed?.hopr_up?.data[0]);
+  const nodeStartedEpoch = useAppSelector((store) => store.node.metricsParsed.nodeStartEpoch);
   const nodeStartedTime = nodeStartedEpoch && typeof(nodeStartedEpoch) === 'number'? new Date(nodeStartedEpoch*1000).toJSON().replace('T', ' ').replace('Z', ' UTC') : '-';
   const nodeSync = useAppSelector((store) => store.node.metricsParsed.nodeSync);
-
+  const blockNumber = useAppSelector((store) => store.node.metricsParsed.blockNumber);
+  const blockNumberCheckSum = useAppSelector((store) => store.node.metricsParsed.checksum);
 
   useEffect(() => {
     fetchInfoData();
@@ -147,7 +146,6 @@ function InfoPage() {
     infoFetching,
     peersFetching,
     aliasesFetching,
-    statisticsFetching,
   ].includes(true);
 
   const noCopyPaste = !(window.location.protocol === 'https:' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
@@ -227,11 +225,22 @@ function InfoPage() {
                   title="The blockchain network your node is using for on-chain transactions"
                   notWide
                 >
-                  <span>Blockchain Network</span>
+                  <span>Blockchain network</span>
                 </Tooltip>
               </th>
               <td>{info?.chain}</td>
             </tr>
+            <tr>
+              <th>
+                <Tooltip
+                  title="The network/environment your node is running in"
+                  notWide
+                >
+                  <span>Hopr network</span>
+                </Tooltip>
+              </th>
+              <td>{info?.network}</td>
+            </tr>
             <tr>
               <th>
                 <Tooltip
@@ -277,6 +286,28 @@ function InfoPage() {
               </th>
               <td>{info?.listeningAddress}</td>
             </tr>
+            <tr>
+              <th>
+                <Tooltip
+                  title=""
+                  notWide
+                >
+                  <span>Block number</span>
+                </Tooltip>
+              </th>
+              <td>{blockNumber ? blockNumber : '-'}</td>
+            </tr>
+            <tr>
+              <th>
+                <Tooltip
+                  title=""
+                  notWide
+                >
+                  <span>Block checksum</span>
+                </Tooltip>
+              </th>
+              <td>{blockNumberCheckSum ? blockNumberCheckSum : '-'}</td>
+            </tr>
           </tbody>
         </TableExtended>
 
@@ -567,17 +598,6 @@ function InfoPage() {
               </th>
               <td>{version?.replaceAll('"', '')}</td>
             </tr>
-            <tr>
-              <th>
-                <Tooltip
-                  title="The environment your node is running in"
-                  notWide
-                >
-                  <span>Environment</span>
-                </Tooltip>
-              </th>
-              <td>{info?.network}</td>
-            </tr>
             <tr
               key='node-startdate'
             >

diff --git a/src/pages/node/ping.tsx b/src/pages/node/ping.tsx
@@ -80,7 +80,7 @@ function PingPage() {
       <TextField
         type="text"
         label="Peer ID"
-        placeholder="16Uiu2HA..."
+        placeholder="12D3Ko...Z3rz5F"
         value={peerId}
         onChange={(e) => set_peerId(e.target.value)}
         fullWidth