Migrate Legacy Node (Frontend)

nym-wallet/src/components/Balance/VestingTimeline.tsx

@@ -26,7 +26,7 @@ export const VestingTimeline: FCWithChildren<{ percentageComplete: number }> = (
 
   const nextPeriod =
     typeof currentVestingPeriod === 'object' && !!vestingAccountInfo?.periods
-      ? Number(vestingAccountInfo?.periods[currentVestingPeriod.in + 1]?.start_time)
+      ? Number(vestingAccountInfo?.periods[currentVestingPeriod.In + 1]?.start_time)
       : undefined;
 
   return (

nym-wallet/src/components/Balance/cards/VestingSchedule.tsx

@@ -23,7 +23,7 @@ const columnsHeaders: Array<{ title: string; align: TableCellProps['align'] }> =
 const vestingPeriod = (current?: Period, original?: number) => {
   if (current === 'After') return 'Complete';
 
-  if (typeof current === 'object' && typeof original === 'number') return `${current.in + 1}/${original}`;
+  if (typeof current === 'object' && typeof original === 'number') return `${current.In + 1}/${original}`;
 
   return 'N/A';
 };

nym-wallet/src/components/Bonding/Bond.tsx

@@ -20,7 +20,7 @@ export const Bond = ({
       }}
     >
       <Typography variant="body2">
-        Bond a mix node or a gateway. Learn how to set up and run a node{' '}
+        Bond a nym node. Learn how to set up and run a Nym node{' '}
         <Link href="https://nymtech.net/operators/nodes/mix-node-setup.html" target="_blank">
           here
         </Link>

nym-wallet/src/components/Bonding/BondUpdateCard.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Box, Button, Stack, Tooltip, Typography } from '@mui/material';
+import { NymCard } from 'src/components';
+
+export const BondUpdateCard = ({ setSuccesfullUpdate }: { setSuccesfullUpdate: (staus: boolean) => void }) => (
+  <Stack gap={2}>
+    <NymCard
+      borderless
+      title={
+        <Typography variant="h5" fontWeight={600} marginBottom={3}>
+          Upgrade your node!
+        </Typography>
+      }
+      subheader={
+        <Stack gap={1}>
+          <Typography variant="subtitle2" fontWeight={600} sx={{ color: 'nym.text.dark' }}>
+            It seems like your node is running outdated binaries.
+          </Typography>
+          <Typography variant="body2">Update to the latest stable Nym node binary now*</Typography>
+          <Typography variant="body2">The update takes less than a minute!</Typography>
+          <Typography variant="caption">
+            *Without updating, legacy node settings can be changed in the Nym CLI.
+          </Typography>
+        </Stack>
+      }
+      Action={
+        <Box display="flex" flexDirection="column" alignItems="flex-end" justifyContent="space-between" height={70}>
+          <Tooltip title="Update to the latest stable Nym node binary now">
+            <Box>
+              <Button
+                variant="contained"
+                color="primary"
+                // TODO wallet-smoosh: update when we have the actual endpoint
+                onClick={() => setSuccesfullUpdate(true)}
+              >
+                Upgrade to Nym Node
+              </Button>
+            </Box>
+          </Tooltip>
+        </Box>
+      }
+    />
+  </Stack>
+);

nym-wallet/src/components/Bonding/BondedGateway.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import { Box, Button, Stack, Typography } from '@mui/material';
+import { Box, Button, Stack, Tooltip, Typography } from '@mui/material';
 import { Link } from '@nymproject/react/link/Link';
-import { TBondedGateway, urls } from 'src/context';
+import { urls } from 'src/context';
 import { NymCard } from 'src/components';
 import { Network } from 'src/types';
 import { IdentityKey } from 'src/components/IdentityKey';
 import { useNavigate } from 'react-router-dom';
+import { UpgradeRounded } from '@mui/icons-material';
+import { TBondedGateway } from 'src/requests/gatewayDetails';
 import { Node as NodeIcon } from '../../svg-icons/node';
 import { Cell, Header, NodeTable } from './NodeTable';
 import { BondedGatewayActions, TBondedGatwayActions } from './BondedGatewayAction';
@@ -39,10 +41,12 @@ const headers: Header[] = [
 export const BondedGateway = ({
   gateway,
   network,
+  onShowMigrateToNymNodeModal,
   onActionSelect,
 }: {
   gateway: TBondedGateway;
   network?: Network;
+  onShowMigrateToNymNodeModal: () => void;
   onActionSelect: (action: TBondedGatwayActions) => void;
 }) => {
   const { name, bond, ip, identityKey, routingScore } = gateway;
@@ -91,16 +95,29 @@ export const BondedGateway = ({
         </Stack>
       }
       Action={
-        <Box>
+        <Stack direction="row" gap={1}>
+          <Tooltip title="Gateway settings are disabled for legacy Gateways. Please migrate your node in order to access your Gateway settings.">
+            <Box>
+              <Button
+                variant="text"
+                color="secondary"
+                onClick={() => navigate('/bonding/node-settings')}
+                startIcon={<NodeIcon />}
+                disabled
+              >
+                Gateway Settings
+              </Button>
+            </Box>
+          </Tooltip>
           <Button
-            variant="text"
-            color="secondary"
-            onClick={() => navigate('/bonding/node-settings')}
-            startIcon={<NodeIcon />}
+            startIcon={<UpgradeRounded />}
+            variant="contained"
+            disableElevation
+            onClick={onShowMigrateToNymNodeModal}
           >
-            Gateway Settings
+            Migrate to Nym Node
           </Button>
-        </Box>
+        </Stack>
       }
     >
       <NodeTable headers={headers} cells={cells} />

nym-wallet/src/components/Bonding/BondedMixnode.tsx

@@ -2,12 +2,14 @@ import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Box, Button, Chip, Stack, Tooltip, Typography } from '@mui/material';
 import { Link } from '@nymproject/react/link/Link';
-import { isMixnode, Network } from 'src/types';
-import { TBondedMixnode, urls } from 'src/context';
+import { Network } from 'src/types';
+import { urls } from 'src/context';
 import { NymCard } from 'src/components';
 import { IdentityKey } from 'src/components/IdentityKey';
 import { NodeStatus } from 'src/components/NodeStatus';
 import { getIntervalAsDate } from 'src/utils';
+import { UpgradeRounded } from '@mui/icons-material';
+import { TBondedMixnode } from 'src/requests/mixnodeDetails';
 import { Node as NodeIcon } from '../../svg-icons/node';
 import { Cell, Header, NodeTable } from './NodeTable';
 import { BondedMixnodeActions, TBondedMixnodeActions } from './BondedMixnodeActions';
@@ -60,10 +62,12 @@ const headers: Header[] = [
 export const BondedMixnode = ({
   mixnode,
   network,
+  onShowMigrateToNymNodeModal,
   onActionSelect,
 }: {
   mixnode: TBondedMixnode;
   network?: Network;
+  onShowMigrateToNymNodeModal: () => void;
   onActionSelect: (action: TBondedMixnodeActions) => void;
 }) => {
   const [nextEpoch, setNextEpoch] = useState<string | Error>();
@@ -81,6 +85,7 @@ export const BondedMixnode = ({
     status,
     identityKey,
     host,
+    isUnbonding,
   } = mixnode;
 
   const getNextInterval = async () => {
@@ -165,23 +170,37 @@ export const BondedMixnode = ({
         }
         Action={
           <Box display="flex" flexDirection="column" alignItems="flex-end" justifyContent="space-between" height={70}>
-            {isMixnode(mixnode) && (
+            <Stack direction="row" gap={1}>
               <Tooltip
-                title={mixnode.isUnbonding ? 'You have a pending unbond event. Node settings are disabled.' : ''}
+                title={
+                  mixnode.isUnbonding
+                    ? 'You have a pending unbond event. Node settings are disabled.'
+                    : 'Node settings are disabled for legacy nodes. Please migrate your node in order to access your node settings.'
+                }
               >
                 <Box>
                   <Button
                     variant="text"
                     color="secondary"
                     onClick={() => navigate('/bonding/node-settings')}
                     startIcon={<NodeIcon />}
-                    disabled={mixnode.isUnbonding}
+                    disabled
                   >
                     Node Settings
                   </Button>
                 </Box>
               </Tooltip>
-            )}
+              <Button
+                startIcon={<UpgradeRounded />}
+                variant="contained"
+                disableElevation
+                onClick={onShowMigrateToNymNodeModal}
+                disabled={isUnbonding}
+              >
+                Migrate to Nym Node
+              </Button>
+            </Stack>
+
             {nextEpoch instanceof Error ? null : (
               <Typography fontSize={14} marginRight={1}>
                 Next epoch starts at <b>{nextEpoch}</b>