Context

As part of Magic’s wallet product ecosystem, users can stake their tokens to earn rewards over time. The core challenge was to design an intuitive, multi-step workflow that guided users through transferring funds, staking, monitoring progress, and claiming rewards — all without breaking the sense of continuity across asynchronous blockchain operations.

Problem

Staking is inherently non-linear. Users must:

• Approve contract interactions
• Initiate on-chain transactions
• Wait for confirmations
• Handle network conditions and wallet state
• Return later to claim rewards or unstake

Design Goals

Interruptions (refresh, navigation, loss of session) risked losing context, leading to confusion and repeated or failed actions. We needed a flow that:

• Maintained stable in‑app state during long‑running operations
• Reflected real-time chain state changes
• Clearly communicated progress and completion
• Avoided overwhelming the user with blockchain details

Constraints & Challenges

• Complex async workflows involving blockchain confirmations
• Wallet state and token balances could change outside the app
• Refreshing the page could reset UI state mid-flow
• Needed to avoid unnecessary re-renders in high-frequency state updates
• Required a UI that was trust-building, not “magic happens here”

My Role

I was the primary engineer responsible for implementing the staking user experience, including the state management, interaction patterns, and progress UI.

Specifically, I

• Partnered with design on the multi‑step staking workflow and built the end‑to‑end frontend implementation
• Implemented shared state with React Context and React Query to coordinate flow state and network data
• Set up GraphQL-driven polling and event-based updates to reflect live reward accrual
• Kept sensitive UI transitions smooth, even during async operations
• Refined messaging and progress indicators so users always knew what was happening and what would come next

Outcome

• Users progressed through staking steps reliably without losing place during async operations or in‑app navigation
• UI behavior remains consistent even under asynchronous network conditions
• Reduced user confusion and support requests related to staking flow interruptions
• The workflow patterns developed here were later reused in other multi-step funding & onboarding flows across the product