fix linting

nym-connect/desktop/Cargo.lock

@@ -4026,7 +4026,7 @@ dependencies = [
 
 [[package]]
 name = "nym-connect"
-version = "1.1.20"
+version = "1.1.21"
 dependencies = [
  "anyhow",
  "bip39",

nym-connect/desktop/src/growth.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ClientContextProvider } from './context/main';
 import { ErrorFallback } from './components/Error';
@@ -7,17 +7,19 @@ import { NymShipyardTheme } from './theme';
 import { TestAndEarnPopup } from './components/Growth/TestAndEarnPopup';
 import { TestAndEarnContextProvider } from './components/Growth/context/TestAndEarnContext';
 
-const root = document.getElementById('root-growth');
+const elem = document.getElementById('root-growth');
 
-ReactDOM.render(
-  <ErrorBoundary FallbackComponent={ErrorFallback}>
-    <ClientContextProvider>
-      <TestAndEarnContextProvider>
-        <NymShipyardTheme mode="dark">
-          <TestAndEarnPopup />
-        </NymShipyardTheme>
-      </TestAndEarnContextProvider>
-    </ClientContextProvider>
-  </ErrorBoundary>,
-  root,
-);
+if (elem) {
+  const root = createRoot(elem);
+  root.render(
+    <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <ClientContextProvider>
+        <TestAndEarnContextProvider>
+          <NymShipyardTheme mode="dark">
+            <TestAndEarnPopup />
+          </NymShipyardTheme>
+        </TestAndEarnContextProvider>
+      </ClientContextProvider>
+    </ErrorBoundary>,
+  );
+}

nym-connect/desktop/src/log.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
 import { LogViewer } from './components/LogViewer';
 import { ErrorFallback } from './components/ErrorFallback';
@@ -13,6 +13,9 @@ const Log = () => (
   </ErrorBoundary>
 );
 
-const root = document.getElementById('root-log');
+const elem = document.getElementById('root-log');
 
-ReactDOM.render(<Log />, root);
+if (elem) {
+  const root = createRoot(elem);
+  root.render(<Log />);
+}

nym-wallet/package.json

@@ -31,7 +31,7 @@
     "@nymproject/mui-theme": "^1.0.0",
     "@nymproject/react": "^1.0.0",
     "@nymproject/types": "^1.0.0",
-    "@nymproject/node-tester": ">=1.2.0-rc.1 || ^1",
+    "@nymproject/node-tester": ">=1.2.0-rc.5",
     "@storybook/react": "^6.5.15",
     "@tauri-apps/api": "^1.2.0",
     "@tauri-apps/tauri-forage": "^1.0.0-beta.2",

nym-wallet/src/components/Delegation/DelegationActions.tsx

@@ -89,7 +89,7 @@ export const DelegationsActionsMenu: FCWithChildren<{
       />
       <ActionsMenuItem title="Undelegate" Icon={<Undelegate />} onClick={() => handleActionSelect('undelegate')} />
       <ActionsMenuItem
-        title="Claim"
+        title="Claim rewards"
         description="Transfer your rewards to your balance"
         Icon={<Typography sx={{ pl: 1, fontWeight: 700 }}>C</Typography>}
         onClick={() => handleActionSelect('redeem')}

nym-wallet/src/components/Delegation/DelegationList.tsx

@@ -1,16 +1,5 @@
 import React from 'react';
-import {
-  Box,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TableSortLabel,
-  Typography,
-} from '@mui/material';
+import { Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel } from '@mui/material';
 import { visuallyHidden } from '@mui/utils';
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { orderBy as _orderBy } from 'lodash';
@@ -20,7 +9,6 @@ import { isDelegation, isPendingDelegation, TDelegations } from '../../context/d
 import { DelegationItem } from './DelegationItem';
 import { PendingDelegationItem } from './PendingDelegationItem';
 import { LoadingModal } from '../Modals/LoadingModal';
-import { InfoTooltip } from '../InfoToolTip';
 
 type Order = 'asc' | 'desc';
 type AdditionalTypes = { profit_margin_percent: number; operating_cost: number };
@@ -48,12 +36,7 @@ const headCells: HeadCell[] = [
   { id: 'stake_saturation', label: 'Stake saturation', sortable: true, align: 'left' },
   {
     id: 'delegated_on_iso_datetime',
-    label: (
-      <Stack direction="row" alignItems="center" gap={1}>
-        <InfoTooltip title="The date you made your delegation. Once you claim rewards for a node, the delegation date resets to the date you claim the reward." />
-        <Typography variant="body2">Delegated on</Typography>
-      </Stack>
-    ),
+    label: 'Delegated on',
     sortable: true,
     align: 'left',
   },

nym-wallet/src/components/Rewards/RewardsSummary.tsx

@@ -1,8 +1,8 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { CircularProgress, Stack, Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
-import { InfoTooltip } from '../InfoToolTip';
 import { useDelegationContext } from 'src/context/delegations';
+import { InfoTooltip } from '../InfoToolTip';
 
 export const RewardsSummary: FCWithChildren<{
   isLoading?: boolean;
@@ -16,21 +16,21 @@ export const RewardsSummary: FCWithChildren<{
     <Stack direction="row" justifyContent="space-between" marginTop={3}>
       <Stack direction="row" spacing={5}>
         <Stack direction="row" spacing={1} alignItems="center">
-          <InfoTooltip title="This is the total amount you have delegated to node(s) in the network" />
+          <InfoTooltip title="The total amount you have delegated to node(s) in the network. The amount also includes the rewards you have accrued since last time you claimed your rewards" />
           <Typography>Total delegations:</Typography>
           <Typography fontWeight={600} fontSize={16} textTransform="uppercase">
             {isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalDelegationsAndRewards || '-'}
           </Typography>
         </Stack>
         <Stack direction="row" spacing={1} alignItems="center">
-          <InfoTooltip title="This is the total amount you have delegated to node(s) in the network" />
+          <InfoTooltip title="The initial amount you delegated to the node(s)" />
           <Typography>Original delegations:</Typography>
           <Typography fontWeight={600} fontSize={16} textTransform="uppercase">
             {isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalDelegation || '-'}
           </Typography>
         </Stack>
         <Stack direction="row" spacing={1} alignItems="center">
-          <InfoTooltip title="The total amount you have delegated to node(s) in the network. The amount also includes the rewards you have accrued since last time you claimed your rewards" />
+          <InfoTooltip title="The rewards you have accrued since the last time you claimed your rewards. Rewards are automatically compounded. You can claim your rewards at any time." />
           <Typography>Total rewards:</Typography>
           <Typography fontWeight={600} fontSize={16} textTransform="uppercase">
             {isLoading ? <CircularProgress size={theme.typography.fontSize} /> : totalRewards || '-'}

nym-wallet/src/context/delegations.tsx

@@ -111,13 +111,13 @@ export const DelegationContextProvider: FC<{
         },
       }));
 
-      const totalDelegationsAndRewards = (+data.total_delegations.amount + +data.total_rewards.amount).toFixed(6);
+      const delegationsAndRewards = (+data.total_delegations.amount + +data.total_rewards.amount).toFixed(6);
 
       setPendingDelegations(pending);
       setDelegations([...items, ...pendingOnNewNodes]);
       setTotalDelegations(`${data.total_delegations.amount} ${data.total_delegations.denom}`);
       setTotalRewards(`${data.total_rewards.amount} ${data.total_rewards.denom}`);
-      setTotalDelegationsAndRewards(`${totalDelegationsAndRewards} ${data.total_delegations.denom}`);
+      setTotalDelegationsAndRewards(`${delegationsAndRewards} ${data.total_delegations.denom}`);
     } catch (e) {
       Console.error(e);
     }

nym-wallet/src/log.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
 import { LogViewer } from './components/LogViewer';
 import { ErrorFallback } from './components';
@@ -13,6 +13,9 @@ const Log = () => (
   </ErrorBoundary>
 );
 
-const root = document.getElementById('root-log');
+const elem = document.getElementById('root-log');
 
-ReactDOM.render(<Log />, root);
+if (elem) {
+  const root = createRoot(elem);
+  root.render(<Log />);
+}