V3.0.0

.github/workflows/build.yaml

@@ -19,7 +19,7 @@ jobs:
     runs-on: self-hosted-hoprnet-small
     strategy:
       matrix:
-        node-version: [20.x, 22.x]
+        node-version: [22.x, 24.x]
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

.github/workflows/release.yaml

@@ -32,7 +32,7 @@ jobs:
       - name: Setup Node.js
         uses: hoprnet/hopr-workflows/actions/setup-node-js@master
         with:
-          node-version: ${{ vars.NODE_VERSION }}
+          node-version: 22.x
 
       - name: Setup GCP
         id: gcp

.npmrc

@@ -1,4 +1,4 @@
-@hoprnet:registry=https://europe-west3-npm.pkg.dev/hoprassociation/npm/
+//@hoprnet:registry=https://europe-west3-npm.pkg.dev/hoprassociation/npm/
 
 registry=https://registry.npmjs.org/
 //registry.npmjs.org/:always-auth=false

.yarnrc

@@ -1 +1 @@
-"@hoprnet:registry" "https://europe-west3-npm.pkg.dev/hoprassociation/npm/"
+//"@hoprnet:registry" "https://europe-west3-npm.pkg.dev/hoprassociation/npm/"

Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=linux/amd64 node:20-bullseye-slim AS deps
+FROM --platform=linux/amd64 node:22-bullseye-slim AS deps
 
 SHELL ["/bin/bash", "-lc"]
 
@@ -17,7 +17,7 @@
 RUN jq .version package.json -r > /app/version.txt
 RUN yarn --frozen-lockfile --network-timeout 1000000
 
-FROM --platform=linux/amd64 node:20-bullseye-slim AS build
+FROM --platform=linux/amd64 node:22-bullseye-slim AS build
 
 WORKDIR /app
 

package.json

@@ -6,7 +6,7 @@
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.0",
-    "@hoprnet/hopr-sdk": "3.0.0-pr.148-20250709144009",
+    "@hoprnet/hopr-sdk": "3.0.1",
     "@metamask/jazzicon": "^2.0.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.0",

src/components/ConnectNode/modal.tsx

@@ -179,7 +179,7 @@
   useEffect(() => {
     // Update the Select based on loginData from the Store
     if (!loginData.apiEndpoint) return;
     const existingItemIndex = nodesSavedLocally.findIndex((item: any) => item.apiEndpoint === loginData.apiEndpoint);
     if (existingItemIndex !== -1) set_nodesSavedLocallyChosenIndex(existingItemIndex.toString());
     const existingItem = nodesSavedLocally[existingItemIndex] as ParsedNode;
     if (existingItem && existingItem.apiToken.length > 0 && loginData.apiToken === existingItem.apiToken)
@@ -291,6 +291,12 @@
             apiEndpoint: formattedApiEndpoint,
           }),
         );
+        dispatch(
+          nodeActionsAsync.getChannelsCorruptedThunk({
+            apiEndpoint,
+            apiToken: apiToken ? apiToken : '',
+          }),
+        );
         dispatch(
           nodeActionsAsync.getConfigurationThunk({
             apiToken,

src/pages/node/configuration.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState, KeyboardEvent } from 'react';
 import { useAppDispatch, useAppSelector } from '../../store';
 import { formatEther } from 'viem';
 import { rounder, rounder2 } from '../../utils/functions';
+import { exportToFile } from '../../utils/helpers';
 import yaml from 'js-yaml';
 
 // HOPR Components
@@ -10,11 +11,13 @@ import { TableExtended } from '../../future-hopr-lib-components/Table/columed-da
 import Section from '../../future-hopr-lib-components/Section';
 import Button from '../../future-hopr-lib-components/Button';
 import CodeCopyBox from '../../components/Code/CodeCopyBox';
+import IconButton from '../../future-hopr-lib-components/Button/IconButton';
 
 // Mui
 import { Paper, Switch } from '@mui/material';
 import styled from '@emotion/styled';
 import { appActions } from '../../store/slices/app';
+import GetAppIcon from '@mui/icons-material/GetApp';
 
 const NotificationsContainer = styled.div`
   display: flex;
@@ -52,6 +55,7 @@ function SettingsPage() {
   const strategy = useAppSelector((store) => store.node.configuration.data?.hopr?.strategy);
   const configuration = useAppSelector((store) => store.node.configuration.data);
   const ticketPrice = useAppSelector((store) => store.node.ticketPrice.data);
+  const myNodeAddress = useAppSelector((store) => store.node.addresses.data.native);
   const [strategiesString, set_strategiesString] = useState<string | null>(null);
   const [configurationString, set_configurationString] = useState<string | null>(null);
   const [localNotificationSettings, set_localNotificationSettings] = useState<typeof prevNotificationSettings>();
@@ -103,19 +107,40 @@ function SettingsPage() {
         },
       ];
 
-      // console.log('configs', configs);
+      let strategiesString = yaml.dump(strategyTMP);
 
-      // TODO: update this block to the new structure
-      // for (const config of configs) {
-      //   if (config.value) {
-      //     const tickets = calculateTickets(config.value, ticketPrice);
-      //     result = updateStrategyString(result, config.path[1], config.value, tickets);
-      //   }
-      // }
+      // * Add ! in front of the strategy name to make yaml copy-paste friendly
+      const strategiesSet = [];
+      if (strategyTMP.hopr.strategy.strategies) {
+        for (let i = 0; i < strategyTMP.hopr.strategy.strategies.length; i++) {
+          const strategyName = Object.keys(strategyTMP.hopr.strategy.strategies[i])[0];
+          strategiesSet.push(strategyName);
+          try {
+            const strategyDetails = strategyTMP.hopr.strategy.strategies[i][strategyName];
+            const strategyDetailsKeys = Object.keys(strategyDetails);
+            for (const key of strategyDetailsKeys) {
+              const strategyValue = strategyDetails[key];
+              if (typeof strategyValue !== 'string') continue;
+              if (
+                strategyValue.includes(' wxHOPR') ||
+                strategyValue.includes('>') ||
+                strategyValue.includes('<') ||
+                strategyValue.includes('=')
+              ) {
+                strategiesString = strategiesString.replace(`${key}: ${strategyValue}`, `${key}: "${strategyValue}"`);
+              }
+            }
+          } catch (e) {
+            console.warn(`Error while processing strategy details for ${strategyName}`, e);
+          }
+        }
+      }
+      strategiesSet.forEach((strategyName) => {
+        strategiesString = strategiesString.replace(`- ${strategyName}:`, `- !${strategyName}`);
+      });
+      // **********************************************************************
 
-      const result = yaml.dump(strategyTMP);
-
-      set_strategiesString(result);
+      set_strategiesString(strategiesString);
     } catch (e) {
       console.warn('Error while counting strategies against current ticket price.', e);
     }
@@ -142,6 +167,12 @@ function SettingsPage() {
     }
   }
 
+  const handleExport = () => {
+    if (strategiesString) {
+      exportToFile(strategiesString, `strategies-${myNodeAddress}.yaml`, 'text/yaml');
+    }
+  };
+
   return (
     <Section
       className="Section--settings"
@@ -245,7 +276,20 @@ function SettingsPage() {
             </tr>
 
             <tr>
-              <th>Strategies</th>
+              <th>
+                Strategies
+                <IconButton
+                  iconComponent={<GetAppIcon />}
+                  tooltipText={
+                    <span>
+                      EXPORT
+                      <br />
+                      strategies
+                    </span>
+                  }
+                  onClick={handleExport}
+                />
+              </th>
               <td>
                 {strategiesString && (
                   <CodeCopyBox

src/pages/node/info/index.tsx

@@ -34,6 +34,8 @@ const TdActionIcons = styled.td`
   align-items: center;
 `;
 
+const TD = styled.td``;
+
 function InfoPage() {
   const dispatch = useAppDispatch();
   const { apiEndpoint, apiToken } = useAppSelector((store) => store.auth.loginData);
@@ -62,6 +64,7 @@ function InfoPage() {
   const indexerLastLogChecksum = useAppSelector((store) => store.node.info.data?.indexerLastLogChecksum); // >=2.2.0
   const ticketPrice = useAppSelector((store) => store.node.ticketPrice.data);
   const minimumNetworkProbability = useAppSelector((store) => store.node.probability.data);
+  const channelsCorrupted = useAppSelector((store) => store.node.channels.corrupted.data.length > 0);
 
   useEffect(() => {
     fetchInfoData();
@@ -98,6 +101,12 @@ function InfoPage() {
         apiToken: apiToken ? apiToken : '',
       }),
     );
+    dispatch(
+      nodeActionsAsync.getChannelsCorruptedThunk({
+        apiEndpoint,
+        apiToken: apiToken ? apiToken : '',
+      }),
+    );
     dispatch(
       nodeActionsAsync.getAddressesThunk({
         apiEndpoint,
@@ -237,70 +246,65 @@ function InfoPage() {
             <tr>
               <th>
                 <Tooltip
-                  title="The sync process of your node with the blockchain"
-                  notWide
+                  title={
+                    <ul
+                      style={{
+                        margin: 0,
+                        padding: '0 0 0 16px',
+                      }}
+                    >
+                      <span style={{ margin: '0 0 0 -16px' }}>Possible statuses:</span>
+                      <li>Unknown: Node has just been started recently</li>
+                      <li>Red: No connection</li>
+                      <li>Orange: low-quality connection</li>
+                      <li>Yellow/Green: High-quality node</li>
+                    </ul>
+                  }
                 >
-                  <span>Sync process</span>
+                  <span>Connectivity status</span>
                 </Tooltip>
               </th>
-              <td>{nodeSync && typeof nodeSync === 'number' ? <ProgressBar value={nodeSync} /> : '-'}</td>
+              <td>
+                <ColorStatus className={`status-${info?.connectivityStatus}`}>{info?.connectivityStatus}</ColorStatus>
+              </td>
             </tr>
             <tr>
               <th>
                 <Tooltip
-                  title="The sync process indexer data source"
+                  title="The sync process of your node with the blockchain"
                   notWide
                 >
-                  <span>Indexer data source</span>
+                  <span>Sync process</span>
                 </Tooltip>
               </th>
-              <td>{indexerDataSource || '-'}</td>
+              <td>{nodeSync && typeof nodeSync === 'number' ? <ProgressBar value={nodeSync} /> : '-'}</td>
             </tr>
             <tr>
               <th>
                 <Tooltip
-                  title="The blockchain network your node is using for on-chain transactions"
+                  title="The sync process indexer data source"
                   notWide
                 >
-                  <span>Blockchain network</span>
+                  <span>Indexer data source</span>
                 </Tooltip>
               </th>
-              <td>{info?.chain}</td>
+              <td>{indexerDataSource || '-'}</td>
             </tr>
             <tr>
               <th>
                 <Tooltip
-                  title="The network/environment your node is running in"
+                  title="The RPC provider address your node uses sync"
                   notWide
                 >
-                  <span>Hopr network</span>
-                </Tooltip>
-              </th>
-              <td>{info?.network}</td>
-            </tr>
-            <tr>
-              <th>
-                <Tooltip
-                  title={
-                    <ul
-                      style={{
-                        margin: 0,
-                        padding: '0 0 0 16px',
-                      }}
-                    >
-                      <span style={{ margin: '0 0 0 -16px' }}>Possible statuses:</span>
-                      <li>Unknown: Node has just been started recently</li>
-                      <li>Red: No connection</li>
-                      <li>Orange: low-quality connection</li>
-                      <li>Yellow/Green: High-quality node</li>
-                    </ul>
-                  }
-                >
-                  <span>Connectivity status</span>
+                  <span>Provider address</span>
                 </Tooltip>
               </th>
               <td>
-                <ColorStatus className={`status-${info?.connectivityStatus}`}>{info?.connectivityStatus}</ColorStatus>
+                {channelsCorrupted ? (
+                  <span style={{ color: 'red', fontWeight: 'bold' }}>Faulty RPC | {info?.provider}</span>
+                ) : (
+                  info?.provider
+                )}
               </td>
             </tr>
             <tr>
@@ -328,13 +332,24 @@ function InfoPage() {
             <tr>
               <th>
                 <Tooltip
-                  title="The RPC provider address your node uses sync"
+                  title="The network/environment your node is running in"
                   notWide
                 >
-                  <span>Provider address</span>
+                  <span>Hopr network</span>
                 </Tooltip>
               </th>
-              <td>{info?.provider}</td>
+              <td>{info?.network}</td>
+            </tr>
+            <tr>
+              <th>
+                <Tooltip
+                  title="The blockchain network your node is using for on-chain transactions"
+                  notWide
+                >
+                  <span>Blockchain network</span>
+                </Tooltip>
+              </th>
+              <td>{info?.chain}</td>
             </tr>
             <tr>
               <th>

src/router.tsx

@@ -311,6 +311,12 @@ const LayoutEnhanced = () => {
               apiToken: apiToken ? apiToken : '',
             }),
           );
+          dispatch(
+            nodeActionsAsync.getChannelsCorruptedThunk({
+              apiEndpoint,
+              apiToken: apiToken ? apiToken : '',
+            }),
+          );
           dispatch(
             nodeActionsAsync.getTicketStatisticsThunk({
               apiEndpoint,