Screen · Mercado

Mercado

Tercer tab del bottom nav: el overview informativo de los activos que MiCapi ofrece (BTC, ETH, USDT). Lista simple, sin ranking emocional ni "destacados". Cada fila muestra el precio de referencia, su variación de 24h y una sparkline sobria. No es trading: sin velas, sin indicadores, sin señales. Tocar una fila abre el detalle del activo.

Tab Mercado 3 activos · orden fijo sin ranking · sin señales 3 estados · light+dark
Layout anotado · con datos

El precio que se muestra es referencial: el precio operativo real incluye spread y comisión y se fija al confirmar. La sparkline usa el color de marca (primary) y no cambia según la dirección — el color vive solo en el badge de variación, igual que en el price-chart.

← top-app-bar
← fila tappable
← sparkline
← fineprint referencia
← bottom-nav
9:41
Mercado
Precios de referencia
₿
Bitcoin
BTC
$458.320.000
+2,3%
Ethereum
ETH
$15.920.400
−0,9%
Tether
USDT
$4.190
+0,02%

Precios de referencia. El precio final se fija al confirmar e incluye spread y comisión.

Composición

  1. top-app-bar · mediumTítulo "Mercado" + subtítulo micro "Precios de referencia". Acción trailing info abre el privacy-popover que explica spread, comisión y precio fijado al confirmar.
  2. Fila de activo · tappableAvatar de marca + nombre·símbolo + sparkline + precio (mono) + variación 24h. Toda la fila es tappable (≥48dp) → detalle del activo con el flujo pre-seleccionado. Hairline entre filas, sin card.
  3. Variación 24hBadge success (sube) / error (baja) / neutro (≈plano, USDT). Mono tabular. Es el único elemento con color de dirección.
  4. Sparkline sobriaMini línea del color de marca, sin relleno, sin ejes, sin puntos. Da forma a la tendencia sin gritar. No se pinta de rojo al bajar.
  5. Orden fijoBTC · ETH · USDT, siempre el mismo. Sin "top movers", sin "destacados", sin ordenar por rendimiento — eso insinuaría recomendación.
  6. Fineprint de referenciaAclaración permanente al pie de la lista: el precio es referencial; el final se fija al confirmar e incluye spread y comisión.
  7. bottom-navMercado activo (pill + ícono line-chart filled). Persistente.
Estados de la screen

Cargando (filas skeleton) · con datos · error de carga. El chrome (app bar + bottom nav) se mantiene; cambia la zona de lista. Nunca se muestra un número falso mientras carga.

A · CARGANDO
9:41
Mercado
Precios de referencia
B · CON DATOS
9:41
Mercado
Precios de referencia
₿
Bitcoin
BTC
$458.320.000
+2,3%
Ethereum
ETH
$15.920.400
−0,9%
Tether
USDT
$4.190
+0,02%

Precios de referencia. El precio final se fija al confirmar e incluye spread y comisión.

C · ERROR DE CARGA
9:41
Mercado
Precios de referencia
No pudimos cargar los precios
Revisa tu conexión e inténtalo de nuevo. No se realizó ninguna operación.
Light y dark

En dark la sparkline usa primary-300 para sostener contraste; el resto sigue los tokens de modo oscuro. Los badges semánticos conservan su lectura.

Light
9:41
Mercado
Precios de referencia
₿
Bitcoin
BTC
$458.320.000
+2,3%
Ethereum
ETH
$15.920.400
−0,9%
Tether
USDT
$4.190
+0,02%

Precios de referencia. El precio final se fija al confirmar e incluye spread y comisión.

Dark
9:41
Mercado
Precios de referencia
₿
Bitcoin
BTC
$458.320.000
+2,3%
Ethereum
ETH
$15.920.400
−0,9%
Tether
USDT
$4.190
+0,02%

Precios de referencia. El precio final se fija al confirmar e incluye spread y comisión.

Reglas de tono (riesgo alto)

  1. Informativo, no tradingSin velas, sin RSI/MACD/medias/volumen, sin order book ni profundidad. Solo el dato neutro.
  2. Sin señalesNada de "tendencia alcista", "oportunidad", "recomendado" ni proyecciones. La lista no se ordena por rendimiento.
  3. Precio de referenciaNunca "Precio" a secas. El operativo real incluye spread + comisión y se fija al confirmar.
  4. USDT con cuidadoVariación ≈0% es correcta (sigue la TRM). El detalle añade la nota de paridad + riesgo de depeg. Nunca "USDT = 1 USD".
Qué sí y qué no en esta pantalla
Prohibido

Velas, indicadores técnicos, order book. "Top movers", "destacados", ordenar por rendimiento. Flechas/colores que insinúen rentabilidad fuera del badge de variación.

Sí

Lista de orden fijo, precio de referencia (mono), variación 24h en badge semántico, sparkline neutra de marca, fineprint de spread/comisión, nota de depeg en USDT.

Interacción

Toda la fila es tappable (≥48dp) → detalle del activo con Comprar/Vender/Intercambiar pre-seleccionados. Haptic selectionClick() al entrar. Pull-to-refresh recarga precios.

Flutter notes

MercadoTab · ListView de activos

Un ListView (o Column, son 3) de AssetRow. El orden es constante — nunca se ordena por variación. Cada fila es un InkWell que navega al detalle con el activo pre-seleccionado. La sparkline es un LineChart de fl_chart minimal (o CustomPaint) sin ejes ni touch.

AssetRow

Avatar de marca (color del activo), Text nombre + símbolo (mono), sparkline 54×28, precio mono tabular-nums y badge de variación. Alto mínimo 48dp. InkWell → Navigator.push(AssetDetail(asset)).

Sparkline

LineChartBarData con dotData: false, color: primary500 (dark: primary300), sin belowBarData, sin grilla, sin titles, sin lineTouchData. No cambia de color por dirección.

Estados

AsyncValue → skeleton (filas con shimmer), data (lista), error (ícono unplug + "Reintentar"). El precio nunca se renderiza con un placeholder numérico. RefreshIndicator para pull-to-refresh.

Tono / cumplimiento

Etiqueta siempre "Precio de referencia"; fineprint permanente con spread + comisión. Sin ranking ni señales. USDT: variación real ≈0%, sin afirmar paridad 1:1. selectionClick() al abrir un activo.

// Fila de activo — informativa, tappable, sin color por dirección
InkWell(
  onTap: () {
    HapticFeedback.selectionClick();
    Navigator.push(context, AssetDetailRoute(asset: asset));  // pre-seleccionado
  },
  child: Row(children: [
    AssetAvatar(asset),                       // ₿ / Ξ / ₮ en color de marca
    Expanded(child: AssetName(asset)),        // nombre + símbolo (mono)
    Sparkline(asset.history24h,               // línea sobria, sin ejes
      color: MiCapi.lineColor(context)),    // primary500 / primary300
    PriceAndChange(                           // $ referencia (mono) + badge 24h
      price: asset.refPrice, change: asset.change24h),
  ]),
)