Fix: label the vault countdown "Unlocks Start In", then show "% Unlocked" (#122)

* Fix: label the vault countdown "Unlocks Start In" until the unlock begins

Since #121 the countdown runs to the start of the unlock, after which tokens release linearly every
block. Under the old "Unlocks In" label, "21 days" read as the whole vault unlocking in 21 days.

Show "Unlocks Start In" while that countdown is running. Once the unlock has started the value is
"Available now" (or "Milestone still locked" for a milestone vault), and the label goes back to
"Unlocks In": "Unlocks Start In: Available now" would read oddly. NCATP vaults count down to a full
unlock at their withdrawal timestamp, so they keep "Unlocks In".

* Fix: show "% Unlocked" once a vault's unlock has started

After the unlock starts, the card showed "Unlocks In: Available now", which says nothing about how far
through the schedule the vault is. Show "% Unlocked" with the share of the allocation the schedule has
released instead, computed by useVestingCalculation so it matches the vesting chart in the details
modal. The share is rounded down to 0.01% so no vault reads 100% before its last token unlocks.

A milestone vault whose milestone is not achieved follows the same schedule but can release nothing,
so it shows the same percentage with "Milestone still locked" underneath, and the tooltip says the
unlocked tokens can't be withdrawn yet. Previously "Milestone still locked" replaced the value.

Vaults without a lock schedule, and NCATP vaults, keep "Unlocks In" and their existing values.

Author: aminsammara

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

@@ -9,6 +9,7 @@ import {
   useATPClaim,
   useUpgradeStaker,
   useUpdateStakerOperator,
+  useVestingCalculation,
 } from "@/hooks/atp";
 import { useTokenVaultSetupStatus } from "@/hooks/atp/useTokenVaultSetupStatus";
 import { useRollupData } from "@/hooks/rollup/useRollupData";
@@ -35,6 +36,9 @@ import { useMilestoneStatus, MilestoneStatus } from "@/hooks/atpRegistry/useMile
 import { MilestoneStatusBadge } from "@/components/MilestoneStatusBadge";
 import { ERC20Abi } from "@/contracts/abis/ERC20";
 
+// useVestingCalculation needs a lock on every render; vaults without one never show its result.
+const NO_GLOBAL_LOCK = { startTime: 0n, cliff: 0n, endTime: 0n, allocation: 0n };
+
 interface ATPStakingCardProps {
   data: ATPData;
   onStakeClick: (atp: ATPData) => void;
@@ -220,6 +224,11 @@ export const ATPStakingCard = ({
   const [isGovernanceModalOpen, setIsGovernanceModalOpen] = useState(false);
 
   const globalLockTimeDisplay = getTimeToClaimForATP(data, blockTimestamp);
+  // Same schedule maths as the vesting chart, so the card and the chart agree on how much has unlocked
+  const { currentVestedAmount } = useVestingCalculation(
+    data.globalLock ?? NO_GLOBAL_LOCK,
+    blockTimestamp
+  );
   const { activationThreshold } = useRollupData();
 
   const {
@@ -346,6 +355,34 @@ export const ATPStakingCard = ({
       ? getMATPlockDisplay()
       : globalLockTimeDisplay;
 
+  // Lock-scheduled vaults count down to the *start* of the unlock, after which tokens release every
+  // block. "Unlocks In: 21 days" reads as a full unlock in 21 days, so before the start the countdown
+  // is labelled for what it is, and after it the card shows how much of the allocation has unlocked.
+  // A milestone vault follows the same schedule but can't release anything until its milestone is
+  // achieved, so it also says so. NCATPs count down to a full unlock and keep "Unlocks In".
+  const hasUnlockSchedule = !isNCATP && !!data.globalLock;
+  const hasUnlockStarted =
+    hasUnlockSchedule && globalLockTimeDisplay === "Available now";
+  const isMilestoneStillLocked =
+    isMATP && hasUnlockStarted && milestoneStatus !== MilestoneStatus.Succeeded;
+
+  // Rounded down to 0.01% so a vault never shows 100% before its last token has unlocked
+  const allocationForPercent = data.globalLock?.allocation ?? 0n;
+  const unlockedBasisPoints =
+    allocationForPercent > 0n
+      ? (currentVestedAmount * 10_000n) / allocationForPercent
+      : 0n;
+  const unlockedPercentDisplay = `${(Number(unlockedBasisPoints) / 100).toLocaleString(undefined, { maximumFractionDigits: 2 })}%`;
+
+  const unlockLabel = !hasUnlockSchedule
+    ? "Unlocks In"
+    : hasUnlockStarted
+      ? "% Unlocked"
+      : "Unlocks Start In";
+  const unlockValue = hasUnlockStarted
+    ? unlockedPercentDisplay
+    : timeToClaimDisplay;
+
   // Calculate remaining allocation after withdrawals and slashing
   // Total Funds = allocation - totalWithdrawn - totalSlashed
   // Slashed tokens are burned/confiscated and should not appear as remaining funds
@@ -631,15 +668,19 @@ export const ATPStakingCard = ({
           </div>
           <div className="flex items-center gap-1">
             <div className="text-xs text-parchment/60 uppercase tracking-wide font-oracle-standard">
-              Unlocks In
+              {unlockLabel}
             </div>
             <TooltipIcon
               content={
                 isNCATP
                   ? 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 tokens in your Token Vault start unlocking. From then on, tokens unlock linearly with every Ethereum block."
+                  : hasUnlockStarted
+                    ? isMilestoneStillLocked
+                      ? "Share of this Token Vault's allocation unlocked by its schedule. Unlocked tokens can't be withdrawn until the vault's milestone is achieved."
+                      : "Share of this Token Vault's allocation unlocked so far. Tokens unlock linearly with every Ethereum block."
+                    : "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"
@@ -650,8 +691,15 @@ export const ATPStakingCard = ({
           <div className="font-mono text-lg font-bold text-parchment">
             {formatTokenAmountFull(remainingAllocation, decimals, symbol)}
           </div>
-          <div className="font-mono text-lg font-bold text-parchment">
-            {isFullyWithdrawn ? "—" : timeToClaimDisplay}
+          <div className="flex flex-col items-end">
+            <div className="font-mono text-lg font-bold text-parchment">
+              {isFullyWithdrawn ? "—" : unlockValue}
+            </div>
+            {isMilestoneStillLocked && !isFullyWithdrawn && (
+              <div className="text-xs text-parchment/60 font-oracle-standard">
+                Milestone still locked
+              </div>
+            )}
           </div>
         </div>