Skip to content

UI Consistency: Withdraw, Confirm Withdraw, and Processing States#172

Draft
swedishfrenchpress wants to merge 4 commits intomainfrom
ui/withdraw-anatimation
Draft

UI Consistency: Withdraw, Confirm Withdraw, and Processing States#172
swedishfrenchpress wants to merge 4 commits intomainfrom
ui/withdraw-anatimation

Conversation

@swedishfrenchpress
Copy link
Collaborator

UI Consistency: Withdraw + Confirm Withdraw

This PR aligns the Withdraw and Confirm Withdraw flows with Auto-Withdraw, using Auto-Withdraw as the visual source of truth.

Before

Withdraw Confirm Withdraw

After

Withdraw Confirm Withdraw

Summary of Changes

  • Matched background colors, container styles, spacing, and typography
  • Removed heavier card shadows in favor of flatter surfaces
  • Normalized section headers, input rows, and primary action buttons
  • Made Confirm Withdraw feel like a natural continuation of Withdraw
  • Refined Processing Withdrawal to better align with existing UX patterns

No behavior changes, visual consistency only.

Goal is a cohesive withdrawal experience across all related screens.

@swedishfrenchpress
Copy link
Collaborator Author

Summary for this commit: 25b3fc0

Processing Withdrawal — Replace Modal with Full-Screen Container Swap

Problem

The "Processing Withdrawal" state was presented as a dark-scrim modal with a floating white card (8dp elevation, 24dp corner radius). This was the only screen in the app using this pattern — every other processing/loading state uses either a full-screen container swap (Onboarding, Restore Wallet) or an inline overlay. The modal also:

  • Hid the confirmation details behind a dark scrim during a financial operation
  • Used 8dp elevation, contradicting the flat 0dp-elevation design language across the rest of the withdrawal flow
  • Created a jarring visual transition from dark-scrim modal → bright full-screen success screen
  • Trapped the user with no dismiss affordance or visible context

Solution

Replaced the scrim overlay with a full-screen container swap, matching the pattern used by OnboardingActivity and RestoreWalletActivity. When the user taps "Confirm Withdrawal", the confirmation content fades out and a processing view fades in — same screen, same top bar, same grey surface background.

What changed

activity_withdraw_melt_quote.xml

  • Removed the FrameLayout scrim overlay (dark backdrop + floating card)
  • Added a new ScrollView (processing_container, initially hidden) with processing content split into two flat MaterialCardViews on the grey surface:
    • Info card — amount + destination in a two-column layout
    • Progress card — spinner, status text, and 3-step indicators (Preparing → Contacting → Settling)
  • Cards use 0dp elevation and 16dp corner radius, matching the confirmation screen's cards
  • All existing view IDs preserved — step indicator logic unchanged

WithdrawMeltQuoteActivity.kt

  • setLoading(true) now fades out the confirmation ScrollView + button, then fades in the processing container with a slide-up animation (300ms, DecelerateInterpolator) — same animation pattern as OnboardingActivity
  • setLoading(false) restores confirmation content for the edge case where loading is cancelled (e.g. wallet not initialized)
  • All processing state methods (updateProcessingState, updateStepIndicators, setStepState) unchanged

Before → After

Before After
Wrapper FrameLayout with #66000000 scrim ScrollView on grey surface
Cards bg_processing_card drawable, 8dp elevation MaterialCardView, 0dp elevation, 16dp radius
Transition Overlay alpha fade (200ms) Container swap with fade + slide-up (300ms)
Context Confirmation hidden behind dark scrim Top bar stays visible, clean full-screen state
Success transition Dark modal → bright full-screen (jarring) Full-screen → full-screen (smooth)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Backlog

Development

Successfully merging this pull request may close these issues.

1 participant