Screen · Dashboard (Inicio)

Dashboard (Inicio)

Screen de validación, no de componente: prueba que las piezas ya construidas componen bien en la primera pantalla del usuario con cuenta activa (Home post-KYC). Cada zona referencia un componente existente del DS — aquí no se inventan estilos ni tokens.

Tab Inicio top-app-bar · balance-card · buttons · tx-list · bottom-nav 360dp Android
Layout anotado · estado con datos

Cada etiqueta marca qué componente del DS provee esa zona. El chrome (app bar, bottom nav) es persistente; el cuerpo scrollea.

← top-app-bar · home
← balance-card
← buttons · quick
← tx-list
← bottom-nav
9:41
Hola, William
Tu portafolio hoy
Valor estimado en COP
$2.845.320
COP
+2,3% · 24h
₿
Bitcoin
BTC
0,01548 BTC
≈ $1.878.640
Ethereum
ETH
0,2156 ETH
≈ $786.180
Tether
USDT
45,0000 USDT
≈ $180.500

Recientes

Ver todo
Compra BTC
Hoy · 9:12
+0,00120 BTC
$145.500
Swap ETH → USDT
Ayer · 18:45
+12,5 USDT
−0,003 ETH
Venta a Bancolombia
21 may · 11:02
−$320.000
ref. 8741

Composición

  1. top-app-bar · homeWordmark "MiCapi" a la izquierda, campana con dot badge (notificaciones sin leer) a la derecha. Sin back — es pantalla raíz.
  2. Saludo"Hola, William" (heading) + "Tu portafolio hoy" (muted). Da contexto humano antes del dato duro. No es un componente, es composición de tipografía.
  3. balance-card · con datosValorización COP como referencia + variación 24h en success + 3 activos con saldo cripto y equivalente COP. Toggle de privacidad (ojo). Único card contenido — grupo heterogéneo (excepción canvas-first del DS §4.7b).
  4. buttons · quick actionsComprar (primario verde), Vender + Intercambiar (secundarios). Touch target ≥ 48dp. Cada uno entra a su pattern: buy-crypto, bank-withdrawal, swap. Recibir/Retirar NO van aquí (decisión canónica): son acciones por-activo y viven en el detalle de activo, sección "Cripto".
  5. tx-list · RecientesHeader con "Ver todo" → Historial. 3 rows mezclando compra, swap y venta. Ícono de tipo + descripción + fecha mono + monto con signo y color semántico.
  6. bottom-nav4 tabs, Inicio activo (ícono filled + pill primary-100). Persistente — no scrollea con el cuerpo.
Tres estados

Cargando (skeletons) · con datos · usuario nuevo (vacío). El chrome y las quick actions se mantienen en los tres — solo cambian balance-card y Recientes.

A · CARGANDO
9:41
Hola, William
Tu portafolio hoy
Valor estimado en COP

Recientes

B · CON DATOS
9:41
Hola, William
Tu portafolio hoy
Valor estimado en COP
$2.845.320
COP
+2,3% · 24h
₿
Bitcoin
BTC
0,01548 BTC
≈ $1.878.640
Ethereum
ETH
0,2156 ETH
≈ $786.180
Tether
USDT
45,0000 USDT
≈ $180.500

Recientes

Ver todo
Compra BTC
Hoy · 9:12
+0,00120 BTC
$145.500
Swap ETH → USDT
Ayer · 18:45
+12,5 USDT
−0,003 ETH
Venta a Bancolombia
21 may · 11:02
−$320.000
ref. 8741
C · USUARIO NUEVO
9:41
Hola, William
Empieza tu portafolio
Valor estimado en COP
$0
COP
Aún no tienes criptoactivos
Tu portafolio aparecerá aquí después de tu primera compra.
Compra tu primer Bitcoin

Recientes

Aún no tienes transacciones
Cuando hagas tu primera operación, la verás aquí.
Motion de entrada

Sutil y funcional. Todos los valores salen de foundations-motion — no se inventa nada. La regla más importante: los montos no se animan.

Chrome instantáneo

App bar y bottom nav aparecen sin animación. Son el marco estable; animarlos haría sentir la app lenta.

Fade-in + slide-up

Balance card y secciones entran con translateY 8dp → 0 + fade. duration-default (200ms) · ease-standard. Stagger ligero (~50ms) entre balance card y Recientes.

Skeleton → contenido

Crossfade de 200ms al llegar la data (cf. components-skeleton). Sin salto de layout — el skeleton tiene la misma forma que el contenido real.

Los montos NO se animan

Sin count-up, sin tickers. Los números financieros aparecen estáticos — el usuario los lee, no los ve "subir". Animar dinero implica imprecisión.

Pull-to-refresh

RefreshIndicator estándar de Material. Al refrescar, las zonas de data vuelven a skeleton mientras el provider revalida.

Sin haptic de entrada

El dashboard al cargar no vibra. El haptic se reserva para acciones confirmatorias (cf. foundations-motion §4), no para navegación pasiva.

Light y dark · con datos
LIGHT
9:41
Hola, William
Tu portafolio hoy
Valor estimado en COP
$2.845.320
COP
+2,3% · 24h
₿
Bitcoin
BTC
0,01548 BTC
≈ $1.878.640
Ethereum
ETH
0,2156 ETH
≈ $786.180

Recientes

Ver todo
Compra BTC
Hoy · 9:12
+0,00120 BTC
$145.500
Swap ETH → USDT
Ayer · 18:45
+12,5 USDT
−0,003 ETH
DARK
9:41
Hola, William
Tu portafolio hoy
Valor estimado en COP
$2.845.320
COP
+2,3% · 24h
₿
Bitcoin
BTC
0,01548 BTC
≈ $1.878.640
Ethereum
ETH
0,2156 ETH
≈ $786.180

Recientes

Ver todo
Compra BTC
Hoy · 9:12
+0,00120 BTC
$145.500
Swap ETH → USDT
Ayer · 18:45
+12,5 USDT
−0,003 ETH

Notas de modo

  1. Lienzo oscuroBody #0F1A19; el balance-card se eleva a #16221F para diferenciarse sin bordes pesados.
  2. Marcas cripto intactasNaranja BTC, azul ETH, verde USDT — no se reinterpretan en oscuro.
  3. Pill activa del navPasa a rgba(39,168,156,0.18) con ícono primary-300 para contraste AA.
  4. Variación en successEl chip +2,3% mantiene el verde semántico; legible en ambos fondos.