Fix: count "Unlocks In" down to the start of the unlock, not its end (#121)

The Token Vault card counted down to globalLock.endTime, the end of the linear unlock. For the
employee and investor vaults, whose unlock starts on Nov 13 and then runs for two years, that showed
"751 days" when tokens actually start unlocking in about three weeks: it was reporting the time until
the last token unlocks, i.e. the vesting duration plus the wait.

Count down to the cliff instead. It is the first moment any tokens become claimable, and after it the
lock releases tokens every block, so "Available now" is the right reading from then on. The cliff is
never before startTime and equals it when a schedule has no cliff. This matches what the vesting
chart already shows as "Unlock Start Time".

ATPCard carried its own copy of the same end-of-vesting countdown; it now uses the shared helper.
The tooltip, which described the old behaviour, is reworded. NCATP vaults keep their separate
withdrawal-timestamp countdown, and MATP vaults still show "Milestone still locked" once the time
lock has passed.

Fixes A-2456

Author: aminsammara

staking-dashboard/src/components/ATPCard/ATPCard.tsx

@@ -4,6 +4,7 @@ import styles from "./ATPCard.module.css";
 import { formatAddress } from "../../utils/formatAddress";
 import { IconCopy, IconCheck } from "@tabler/icons-react";
 import type { ATPData } from "../../hooks/atp/atpTypes";
+import { getTimeToClaimForATP } from "../../utils/atpFormatters";
 
 interface CopyButtonProps {
   address: string;
@@ -112,27 +113,6 @@ export default function ATPCard({
     return "0";
   };
 
-  // Calculate time left to claim for each ATP
-  const getTimeToClaimForATP = (atp: ATPData) => {
-    // Use globalLock data if available
-    if (atp.globalLock?.endTime) {
-      const now = Math.floor(Date.now() / 1000);
-      const endTime = Number(atp.globalLock.endTime);
-      const timeLeft = endTime - now;
-
-      if (timeLeft <= 0) {
-        return "Available now";
-      }
-
-      const days = Math.floor(timeLeft / (24 * 60 * 60));
-
-      return `${days} days`;
-    }
-
-    // Fallback for ATPs without lock data
-    return "Available now";
-  };
-
   return (
     <div key={`${atp.atpAddress}-${index}`} className={styles.atpCard}>
       <div className={styles.atpCardHeader}>

staking-dashboard/src/components/ATPStakingCard/ATPStakingCard.tsx

@@ -639,7 +639,7 @@ export const ATPStakingCard = ({
                   ? withdrawalTimestamp === undefined
                     ? "Set your Staker version to view unlock date. It is recommended that every Token Vault upgrades to the latest version."
                     : "Unlock requires staking tokens first. Then, your Token Vault unlock countdown will be displayed."
-                  : "Time remaining until the next batch of tokens completes vesting and becomes claimable from your Token Vault."
+                  : "Time remaining until tokens in your Token Vault start unlocking. From then on, tokens unlock linearly with every Ethereum block."
               }
               size="sm"
               maxWidth="max-w-xs"

staking-dashboard/src/utils/atpFormatters.ts

@@ -44,18 +44,24 @@ export function getStakeableAmount(atp: ATPData): bigint {
 }
 
 /**
- * Calculate time until claimable
+ * Calculate time until tokens start unlocking
+ *
+ * Counts down to the cliff, the first moment any tokens become claimable, not to endTime: past the
+ * cliff the lock releases tokens linearly every block, so counting to endTime reports the whole
+ * vesting duration (e.g. "751 days" for a vault whose unlock starts in three weeks).
+ * The cliff is never before startTime, and equals it when the schedule has no cliff.
+ *
  * @param atp - ATP data with globalLock info
  * @param blockTimestamp - Optional blockchain timestamp to use instead of Date.now()
  *                         This ensures consistency with anvil time warps during testing
  */
 export function getTimeToClaimForATP(atp: ATPData, blockTimestamp?: bigint): string {
-  if (atp.globalLock?.endTime) {
+  if (atp.globalLock) {
     const now = blockTimestamp
       ? Number(blockTimestamp)
       : Math.floor(Date.now() / 1000)
-    const endTime = Number(atp.globalLock.endTime)
-    const timeLeft = endTime - now
+    const unlockStart = Number(atp.globalLock.cliff || atp.globalLock.startTime)
+    const timeLeft = unlockStart - now
 
     if (timeLeft <= 0) {
       return "Available now"