refactor and bug fix

nym-wallet/src/pages/balance/components/vesting-timeline.tsx

@@ -3,7 +3,7 @@ import { Box, Tooltip, Typography } from '@mui/material'
 import { format } from 'date-fns'
 import { ClientContext } from '../../../context/main'
 
-const calculateNubPosition = (arrLength: number, index: number) => (1 / arrLength) * 100 * (index + 1)
+const calculateMarkerPosition = (arrLength: number, index: number) => (1 / arrLength) * 100 * index
 
 export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ percentageComplete }) => {
   const {
@@ -12,7 +12,7 @@ export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ perc
 
   const nextPeriod =
     typeof currentVestingPeriod === 'object' && !!vestingAccountInfo?.periods
-      ? Number(vestingAccountInfo?.periods[currentVestingPeriod.In]?.start_time)
+      ? Number(vestingAccountInfo?.periods[currentVestingPeriod.In + 1]?.start_time)
       : undefined
 
   return (
@@ -20,19 +20,19 @@ export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ perc
       <svg width="100%" height="12">
         <rect y="2" width="100%" height="6" rx="0" fill="#E6E6E6" />
         <rect y="2" width={`${percentageComplete}%`} height="6" rx="0" fill="#121726" />
-        <rect width="4" height="12" rx="1" fill="#121726" />
         {vestingAccountInfo?.periods.map((period, i, arr) => (
-          <Tooltip title={format(new Date(Number(period.start_time) * 1000), 'HH:mm do MMM yyyy')} key={i}>
-            <rect
-              x={`${calculateNubPosition(arr.length, i)}%`}
-              width="4"
-              height="12"
-              rx="1"
-              fill={+percentageComplete.toFixed(2) >= calculateNubPosition(arr.length, i) ? '#121726' : '#B9B9B9'}
-              style={{ cursor: 'pointer' }}
-            />
-          </Tooltip>
+          <Marker
+            position={`${calculateMarkerPosition(arr.length, i)}%`}
+            color={+percentageComplete.toFixed(2) >= calculateMarkerPosition(arr.length, i) ? '#121726' : '#B9B9B9'}
+            tooltipText={format(new Date(Number(period.start_time) * 1000), 'HH:mm do MMM yyyy')}
+            key={i}
+          />
         ))}
+        <Marker
+          position="calc(100% - 4px)"
+          color={percentageComplete === 100 ? '#121726' : '#B9B9B9'}
+          tooltipText="End of vesting schedule"
+        />
       </svg>
       {nextPeriod && (
         <Typography variant="caption" sx={{ color: 'grey.500', position: 'absolute', top: 15, left: 0 }}>
@@ -42,3 +42,13 @@ export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ perc
     </Box>
   )
 }
+
+const Marker: React.FC<{ tooltipText: string; color: string; position: string }> = ({
+  tooltipText,
+  color,
+  position,
+}) => (
+  <Tooltip title={tooltipText}>
+    <rect x={position} width="4" height="12" rx="1" fill={color} style={{ cursor: 'pointer' }} />
+  </Tooltip>
+)