Screen · Flujo end-to-end
Compra · recorrido completo
Screen de validación de recorrido: a diferencia del pattern buy-crypto (que documenta anatomía, estados y edge cases de cada pantalla), aquí validamos que el loop se cierra — el usuario sale del Dashboard, compra, y vuelve al Dashboard con el saldo y el historial ya actualizados. Cada transición está anotada con su token de motion y su haptic.
6 pasos · loop cerrado
Dashboard → compra → Dashboard
haptic en confirmación
Storyboard del recorrido
Lee de izquierda a derecha. Los conectores muestran qué transición de foundations-motion ocurre entre cada par de pantallas.
9:41
Hola, William
Tu portafolio hoy
Valor en COP
$2.845.320
+2,3% · 24h
Recientes
Swap ETH → USDT
Ayer · 18:45
+12,5 USDT
tap Comprar
page transition
slide+fade
350ms · standard
9:41
Pagas
$500.000COP
Recibes ≈ 0,00109 BTC
Tasa$458.320.000 / BTC
Comisión (1%)$5.000
IVA (19%)$950
Total a pagar$505.950
Continuar
tap Continuar
bottom sheet
slide up
300ms · drawer
9:41
Confirmar compra
0,00109 BTC
≈ $500.000 COP
Pagas$505.950
Comisión$5.000 + $950 IVA
MétodoBre-B
Al confirmar, el precio queda fijado. Si no se ejecuta en 24h, tu dinero se devuelve.
Confirmar compra
Cancelar
tap Confirmar
mediumImpact
sheet → estado
crossfade 200ms
9:41
Procesando tu compra…
Estamos confirmando la operación. No cierres la app.
resultado
crossfade
200ms · standard
montos
estáticos
9:41
Compra completada
0,00109 BTC
≈ $500.000 COP
ref. MCP-2026-06-014
Añadido a tu portafolio.
Ir al inicio
tap Ir al inicio
page transition
slide+fade
(pop) 350ms
9:42
Hola, William
Tu portafolio hoy
Valor en COP
$2.990.820
+$145.500 nuevo
Recientesnuevo
Swap ETH → USDT
Ayer · 18:45
+12,5 USDT
El loop se cierra
El usuario vuelve al Dashboard (paso 6 = paso 1 con estado nuevo): saldo recalculado a $2.990.820, la compra encabeza Recientes resaltada, y la valorización refleja el monto. Sin pantalla muerta, sin callejón sin salida.
Qué valida este recorrido
Cada ítem confirma que los componentes y reglas del DS funcionan combinados, no solo en aislamiento.
Continuidad de navegación
El back y el "Ir al inicio" devuelven al Dashboard con pop slide+fade. El bottom nav reaparece (oculto en el flujo de compra).
Sheet persistente
El paso 3 usa el ConfirmationSheet canónico: no se cierra por tap-out, solo con Confirmar/Cancelar.
Haptic en el punto justo
mediumImpact() solo al confirmar (paso 3→4). Ni en navegación, ni al abrir el sheet, ni al cargar el éxito.
Montos estáticos
El nuevo saldo y la cifra de la compra aparecen sin count-up. Crossfade del estado, nunca animación de números.
Estado fresco visible
La transacción nueva se resalta en Recientes y la valorización marca el delta — el usuario ve el efecto de su acción.
Cifras consistentes
Tasa canónica $458.320.000/BTC, comisión 1% + IVA, total $505.950 — coherente con el pattern y el ConfirmationSheet.