delegations layout and tooltip when delegate with vesting

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

@@ -28,16 +28,20 @@ export const DelegationItem = ({
   onItemActionClick?: (item: DelegationWithEverything, action: DelegationListItemActions) => void;
 }) => {
   const operatingCost = isDelegation(item) && item.cost_params?.interval_operating_cost;
+  const usesVestingContractTokens = item.uses_vesting_contract_tokens;
+
+  const tooltipText = () => {
+    if (nodeIsUnbonded) {
+      return 'This node has unbonded and it does not exist anymore. You need to undelegate from it to get your stake and outstanding rewards (if any) back.';
+    } else if (usesVestingContractTokens) {
+      return 'Delegation made with locked tockens';
+    } else {
+      return '';
+    }
+  };
 
   return (
-    <Tooltip
-      arrow
-      title={
-        nodeIsUnbonded
-          ? 'This node has unbonded and it does not exist anymore. You need to undelegate from it to get your stake and outstanding rewards (if any) back.'
-          : ''
-      }
-    >
+    <Tooltip arrow title={tooltipText()}>
       <TableRow key={item.node_identity} sx={{ color: !item.node_identity ? 'error.main' : 'inherit' }}>
         <TableCell sx={{ color: 'inherit', pr: 1 }} padding="normal">
           {nodeIsUnbonded ? (

nym-wallet/src/pages/delegation/index.tsx

@@ -343,42 +343,45 @@ export const Delegation: FC<{ isStorybook?: boolean }> = ({ isStorybook }) => {
     <>
       <Paper elevation={0} sx={{ p: 3, mt: 4 }}>
         <Stack spacing={3}>
-          <Typography variant="h6" lineHeight={1.334} fontWeight={600}>
-            Delegations
-          </Typography>
+          <Box display="flex" justifyContent="space-between">
+            {' '}
+            <Box display="flex" flexDirection="column">
+              <Typography variant="h6" lineHeight={1.334} fontWeight={600}>
+                Delegations
+              </Typography>
+              {!!delegations?.length && (
+                <Link
+                  href={`${urls(network).networkExplorer}/network-components/mixnodes/`}
+                  target="_blank"
+                  rel="noreferrer"
+                  text="Network Explorer"
+                  fontSize={14}
+                  fontWeight={theme.palette.mode === 'light' ? 400 : 600}
+                  noIcon
+                  marginTop={1.5}
+                />
+              )}
+            </Box>
+            {!!delegations?.length && (
+              <Button
+                variant="contained"
+                disableElevation
+                onClick={() => setShowNewDelegationModal(true)}
+                sx={{ py: 1.5, px: 5, color: 'primary.contrastText', height: 'fit-content' }}
+              >
+                Delegate
+              </Button>
+            )}
+          </Box>
 
           {!!delegations?.length && (
             <Box display="flex" justifyContent="space-between" alignItems="end">
-              <Box display="flex" flexDirection="column">
-                {!!delegations?.length && (
-                  <Link
-                    href={`${urls(network).networkExplorer}/network-components/mixnodes/`}
-                    target="_blank"
-                    rel="noreferrer"
-                    text="Network Explorer"
-                    fontSize={14}
-                    fontWeight={theme.palette.mode === 'light' ? 400 : 600}
-                    noIcon
-                    marginBottom={3}
-                  />
-                )}
-                <RewardsSummary isLoading={isLoading} totalDelegation={totalDelegations} totalRewards={totalRewards} />
-              </Box>
-              <Box display="flex" flexDirection="column">
-                <Button
-                  variant="contained"
-                  disableElevation
-                  onClick={() => setShowNewDelegationModal(true)}
-                  sx={{ py: 1.5, px: 5, color: 'primary.contrastText' }}
-                >
-                  Delegate
-                </Button>
-                {nextEpoch instanceof Error ? null : (
-                  <Typography fontSize={14} marginRight={1}>
-                    Next epoch starts at <b>{nextEpoch}</b>
-                  </Typography>
-                )}
-              </Box>
+              <RewardsSummary isLoading={isLoading} totalDelegation={totalDelegations} totalRewards={totalRewards} />
+              {nextEpoch instanceof Error ? null : (
+                <Typography fontSize={14}>
+                  Next epoch starts at <b>{nextEpoch}</b>
+                </Typography>
+              )}
             </Box>
           )}
           {delegationsComponent(delegations)}