Fix: Add Warnings to Delegation Actions (Issue #194)

[Roaring30s]

Add Delegation Warnings for LIP-36 Compliance

Fixes #194

Overview

This PR implements user-facing warnings for delegation actions that may result in forfeited rewards and fees, as specified in LIP-36.

Changes

Core Logic

New Hook: useDelegationReview (hooks/useDelegationReview.tsx)

• Centralized warning logic for all delegation actions
• Returns a single delegationWarning string (or null if no warning needed)
• Warning Condition: Displays warning when orchestrator's lastRewardRound < currentRound
  • This indicates the orchestrator hasn't called reward() yet this round
  • Per LIP-36, performing delegation actions before reward() is called forfeits rewards/fees

Action-Specific Messages:

• Redelegate: "Rebonding will forfeit rewards and fees for the current round on your entire stake."
• Move Stake: "Moving stake to a different orchestrator will forfeit rewards and fees for the current round."
• Default (delegate/undelegate/withdrawFees): "Performing this action before your orchestrator calls reward will forfeit rewards and fees for the current round."

UI Components

Updated DelegationReview Component (components/DelegationReview/index.tsx)

• Refactored from warnings: string[] to warning?: string | null
• Simplified rendering logic (no more array mapping)
• Displays single warning with yellow alert styling

Tooltip Integration (components/Redelegate/index.tsx, components/RedelegateFromUndelegated/index.tsx)

• Added warning icon (⚠️) next to Redelegate buttons in StakeTransactions cards
• Uses ExplorerTooltip to show full warning message on hover
• Mobile-responsive layout with flexDirection: row-reverse

Inline Warnings (components/DelegatingView/index.tsx, components/DelegatingWidget/Footer.tsx)

• Inline warning display for delegate/undelegate/withdrawFees actions
• Appears below action buttons with proper spacing

Additional Improvements

Performance Optimization (components/DelegatingWidget/Footer.tsx)

• Removed unnecessary useMemo wrappers for simple property access (tokenBalance, transferAllowance)

Mobile Layout Fixes (components/StakeTransactions/index.tsx)

• Improved button/icon/LPT amount alignment on mobile and desktop
• Better vertical centering and spacing

⚠️ Reviewer Feedback Requested

This is a first-pass implementation and I'd appreciate feedback on the following:

Warning Display Strategy

Currently, warnings are displayed inline within each component that handles delegation actions. This means:

Potential Issue: On the account page, users may see the same warning component if they have both:

1. Pending fees to withdraw
2. Stake to undelegate

Questions for Reviewers:

1. Are you comfortable with dedicated warnings in each component?

   • ✅ Pro: Contextual, appears exactly where the action is
   • ❌ Con: Possible duplication on the same page

2. Would you prefer alternative warning methods?

   • Toast notifications (one-time, dismissible)
   • Page-level banner (single warning at top of page)
   • Modal confirmation (before action execution)

3. Any other UX improvements you'd suggest?

We're treating this as a first iteration and welcome any feedback to refine the user experience!

Testing

• ✅ Warnings display correctly when lastRewardRound < currentRound
• ✅ No warnings when orchestrator has called reward() this round
• ✅ Action-specific messages are accurate
• ✅ Mobile and desktop layouts work correctly
• ✅ Tooltips function properly on hover/tap

[vercel]

@Roaring30s is attempting to deploy a commit to the Livepeer Foundation Team on Vercel.

A member of the Team first needs to authorize it.