Screen · Detalle de activo

Detalle de activo

Pantalla interior (sin bottom nav) a la que se llega al tocar un activo en Mercado o en el balance-card del dashboard. Reúne, de arriba a abajo: el price-chart completo, tu posición en el activo, las acciones (comprar / vender / intercambiar + fila Cripto: recibir / retirar por-activo), el bloque educativo Acerca de y tus operaciones con ese activo. Sigue las líneas rojas de Mercado: informativo, no trading.

pantalla interior · sin bottom nav price-chart · tx-list · buttons · alert BTC · ETH · USDT con saldo · sin saldo · depeg · cargando
Layout anotado · Bitcoin con saldo e historial

El precio del encabezado es referencial: el operativo incluye spread + comisión y se fija al confirmar. Arrastra el dedo sobre el gráfico para leer el histórico (scrub Opción B, header sincronizado). La pantalla es un lienzo continuo: secciones separadas por hairline, sin cards apiladas.

← top-app-bar compacta
← price-chart
← tu posición
← acciones
← acerca de
← tus operaciones
9:41
₿
Bitcoin
Precio de referencia
· 24h
Tu posición
Tu saldo
0,00412 BTC≈ $1.890.000
Disponible para retiro0,00350 BTC
En liquidación · máx. 24h0,00062 BTC
Cripto
Acerca de Bitcoin

Bitcoin es la primera y mayor criptomoneda por capitalización. Opera sobre su propia red (Bitcoin mainnet).

Red: Bitcoin (mainnet)

Los retiros salen únicamente por la red de Bitcoin. Enviar a una red distinta puede causar la pérdida de los fondos.

Tus operaciones con BTC
Ver todas
Compra de BTC
Hoy · 14:32 · Bre-B
+0,00123 BTC
$564.000
Intercambio USDT → BTC
12 Jun · 09:14
+0,00210 BTC
240,50 USDT
Retiro a wallet externa
10 May · bc1q…m5n9k3
−0,00080 BTC
Completado

Composición

  1. top-app-bar · compactaBack + avatar del activo en color de marca + nombre ("Bitcoin"). Acción trailing info abre el privacy-popover (spread, comisión, precio fijado al confirmar). Sin bottom nav: es pantalla interior.
  2. price-chart · completoEl componente tal cual: "Precio de referencia" + variación del frame + timeframes 24h·7D·1M·1A·Máx + scrub (Opción B, header sincronizado). La línea no cambia de color por dirección.
  3. Tu posiciónSaldo en cripto (mono) + estimado en COP. Saldo dual cuando difieren: disponible para retiro vs. en liquidación (máx. 24h). Si no hay saldo → empty-state inline sutil.
  4. AccionesComprar (primario) · Vender · Intercambiar (secundarios). Llevan al flujo respectivo con el activo pre-seleccionado. Inline, no barra fija (ver decisión).
  5. Cripto · Recibir / RetirarFila secundaria por-activo bajo el label "Cripto": Recibir (qr-code → deposit-crypto) y Retirar (send → withdraw-crypto), con el activo pre-seleccionado — como está cableado en Flutter. Botones terciarios (borde neutral-400, 40dp): no compiten con las 3 acciones primarias. Es el único lugar de estas acciones — no van en el dashboard. Sin saldo disponible, Retirar se deshabilita.
  6. Acerca deCopy neutro/educativo: qué es y sobre qué red opera. Nunca "buena inversión", proyecciones ni rentabilidad. Incluye la red soportada + recordatorio de retiro por la red correcta.
  7. tx-list · filtradaLas operaciones del usuario con ese activo (compra, intercambio, retiro). "Ver todas" abre el historial pre-filtrado. Sin saldo/historial → empty inline "Sin operaciones con BTC".
Caso USDT · paridad y riesgo de depeg

USDT sigue la tasa del dólar (TRM): su línea en COP es casi recta — y está bien así. Comunicamos qué busca hacer (paridad) y el riesgo de no lograrlo (depeg). Nunca "1 USD" ni paridad garantizada; el alert de depeg es permanente, no descartable.

← variante casi-plana
← etiqueta de paridad
← alert de depeg
9:41
Tether
Precio de referencia
· 24h
USDT busca mantener paridad con el dólar estadounidense.
Riesgo de desviación de paridad (depeg)El valor puede desviarse de su paridad. MiCapi no garantiza la convertibilidad 1:1 con el dólar.
Tu posición
Tu saldo
240,50 USDT≈ $1.007.700
Cripto
Acerca de Tether

Tether (USDT) es una stablecoin que busca mantener paridad con el dólar estadounidense. Opera aquí sobre la red Ethereum (ERC-20).

Red: Ethereum (ERC-20)

Los retiros salen únicamente por la red Ethereum (ERC-20). Enviar a una red distinta puede causar la pérdida de los fondos.

Tus operaciones con USDT
Ver todas
Compra de USDT
22 Jun · 11:02 · Nequi
+120,00 USDT
$502.800
Intercambio ETH → USDT
18 Jun · 16:40
+120,50 USDT
0,032 ETH

Reglas del caso stablecoin

  1. Variante casi-planaEl gráfico es prácticamente recto y no se fuerza volatilidad. El eje Y se ajusta a un rango estrecho para leer micro-movimientos de la TRM, sin exagerar la amplitud.
  2. Variación neutra realBadge neutro con ícono minus. Se muestra el dato real (≈0,02%), no un 0,0% inventado. La línea sigue siendo del color de marca.
  3. Etiqueta de paridad"USDT busca mantener paridad…" — verbo busca, nunca es ni equivale a. Acento en el verde del activo.
  4. Alert de depeg · permanenteAlert warning bajo el gráfico. No descartable en el detalle: es información de riesgo, no una notificación.
  5. Acerca de · red ERC-20Indica que aquí USDT opera sobre Ethereum (ERC-20) + recordatorio de retiro por la red correcta. Sin afirmar convertibilidad 1:1.
Estados · sin saldo e inicializando

El chrome (status bar + app bar) se mantiene siempre. Sin saldo: empty inline sutil en la posición + empty inline en operaciones — el resto de la pantalla (chart, acciones, acerca de) sigue presente. Cargando: skeleton del chart + skeletons de posición e historial; nunca se muestra un número falso.

A · SIN SALDO (BTC)
9:41
₿
Bitcoin
Precio de referencia
· 24h
Tu posición
Aún no tienes BTC
Compra para empezar tu posición en Bitcoin.
Cripto
Acerca de Bitcoin

Bitcoin es la primera y mayor criptomoneda por capitalización. Opera sobre su propia red (Bitcoin mainnet).

Red: Bitcoin (mainnet)
Tus operaciones con BTC
Sin operaciones con BTC
Las operaciones que hagas con BTC aparecerán aquí.
B · CARGANDO
9:41
₿
Bitcoin
Tu posición
Tus operaciones

Reglas de estado

  1. Sin saldo ≠ pantalla vacíaSolo la posición y operaciones usan empty inline. El chart, las acciones y el "acerca de" siguen ahí: el usuario llegó a informarse del activo, no necesariamente a operar.
  2. Vender deshabilitadoSin saldo, Vender queda disabled (opacity 0.4). Comprar e Intercambiar siguen activos.
  3. Cargando no mienteEl precio y la posición son skeleton — nunca un placeholder numérico. Crossfade a real al llegar data (duration-default 200ms).
  4. Altura estableChart y filas reservan su alto: la pantalla no salta al pasar de skeleton a contenido.
Light y dark · mockups completos

Bitcoin (saldo + historial) y Tether (depeg) en modo oscuro. La línea del chart usa primary-300; los badges semánticos y el alert conservan su lectura. Comparar con los mockups light de arriba.

Bitcoin · dark
9:41
₿
Bitcoin
Precio de referencia
· 24h
Tu posición
Tu saldo
0,00412 BTC≈ $1.890.000
Disponible para retiro0,00350 BTC
En liquidación · máx. 24h0,00062 BTC
Cripto
Acerca de Bitcoin

Bitcoin es la primera y mayor criptomoneda por capitalización. Opera sobre su propia red (Bitcoin mainnet).

Red: Bitcoin (mainnet)
Tus operaciones con BTC
Ver todas
Compra de BTC
Hoy · 14:32 · Bre-B
+0,00123 BTC
$564.000
Retiro a wallet externa
10 May · bc1q…m5n9k3
−0,00080 BTC
Completado
Tether · dark · depeg
9:41
Tether
Precio de referencia
· 24h
USDT busca mantener paridad con el dólar estadounidense.
Riesgo de depegEl valor puede desviarse de su paridad. MiCapi no garantiza la convertibilidad 1:1 con el dólar.
Tu posición
Tu saldo
240,50 USDT≈ $1.007.700
Cripto
Acerca de Tether

Tether (USDT) es una stablecoin que busca mantener paridad con el dólar estadounidense. Opera aquí sobre la red Ethereum (ERC-20).

Red: Ethereum (ERC-20)

Notas de modo oscuro

  1. Línea en primary-300El chart sube su luminancia para sostener contraste sobre el fondo oscuro. Sigue sin cambiar de color por dirección.
  2. Avatar del activo intactoEl color de marca del activo (₿ naranja, ₮ verde) se mantiene en ambos modos — es identidad, no estado.
  3. Alert legibleEl alert warning usa su variante dark (fondo translúcido + ícono ámbar) sin perder el border-left semántico.
  4. Saldo dual y monoMontos en JetBrains Mono tabular en fg claro; labels secundarios en neutral-300.
Copy de "Acerca de" · referencia (BTC · ETH · USDT)

Texto neutro/educativo aprobado por activo. Sin "buena inversión", sin proyecciones, sin rentabilidad. Todos indican la red soportada; todos recuerdan que los retiros van solo por la red correcta.

₿
BitcoinBTC
Bitcoin es la primera y mayor criptomoneda por capitalización. Opera sobre su propia red Bitcoin mainnet.
Ξ
EthereumETH
Ethereum es una red de contratos inteligentes. ETH es su criptomoneda nativa. Red soportada: Ethereum (mainnet).
TetherUSDT
Tether (USDT) es una stablecoin que busca mantener paridad con el dólar estadounidense. Opera aquí sobre la red Ethereum (ERC-20).+ alert de depeg permanente: "El valor puede desviarse de su paridad. MiCapi no garantiza convertibilidad 1:1 con el dólar."
Qué sí y qué no en esta pantalla
Prohibido

Velas, indicadores, señales ni recomendaciones. "Precio" a secas (es precio de referencia). Para USDT: "1 USD" o paridad garantizada. Copy persuasivo en "Acerca de" (proyecciones, rentabilidad, "buena inversión").

Sí

price-chart informativo, posición con saldo dual, acciones pre-seleccionadas, copy educativo neutro, red soportada + recordatorio de retiro, tx-list filtrada, empties inline, depeg siempre visible en USDT.

Interacción

Pantalla interior: back vuelve a Mercado/dashboard. Scrub para leer histórico. Comprar/Vender/Intercambiar abren su flujo con el activo pre-seleccionado. selectionClick() al tocar una acción.

Decisión · ubicación de las acciones
Decisión tomada

Acciones inline, no barra inferior fija

Las acciones viven inline después de la posición, no en una barra fija al pie. Una barra "Comprar" siempre presente empujaría a transar y rompería la postura de Mercado (informativo, no trading). Inline, la compra es una opción dentro de una lectura calmada del activo, no una presión permanente. La barra fija queda registrada como alternativa.

A · Acciones inlineElegida

Botones tras la posición, dentro del flujo de scroll. Coherente con el tono no-trading: comprar es una opción, no un llamado constante. El usuario decide tras informarse (chart + acerca de).

B · Barra inferior fijaAlternativa

"Comprar/Vender" sticky al pie, siempre visible. Más conversión, pero presiona a operar y compite con la lectura informativa. Descartada para mantener la línea roja de Mercado.

Flutter notes

AssetDetailScreen · scroll vertical, pantalla interior

Una ruta empujada con Navigator.push (sin BottomNavigationBar). Cuerpo: CustomScrollView con un SliverAppBar compacto (back + avatar + nombre) y secciones separadas por hairlines. El estado del activo es un AsyncValue: skeleton / data / error. Posición e historial se filtran por assetId.

Top app bar compacta

SliverAppBar(pinned: true) con leading: BackButton, title: Row([AssetAvatar(asset), Text(asset.name)]) y actions: [InfoButton] (abre el privacy-popover). Sin bottomNavigationBar en esta ruta.

Posición · saldo dual

Si locked > 0 renderiza el desglose: available (retirable) + locked ("en liquidación · máx. 24h"). Si balance == 0 → EmptyState.inline "Aún no tienes BTC". Montos en mono tabular.

Acciones pre-seleccionadas

Comprar primario, Vender / Intercambiar secundarios. Cada uno: Navigator.push(BuyFlow(asset: asset)) con el activo fijado. Vender queda disabled si balance == 0. HapticFeedback.selectionClick().

USDT · paridad + depeg

Para asset.isStablecoin: etiqueta de paridad bajo el header del chart + Alert.warning de depeg no descartable. Texto fijo: nunca "1 USD" ni paridad garantizada. Red ERC-20 en "Acerca de".

// Pantalla interior — sin bottom nav, scroll vertical
CustomScrollView(slivers: [
  SliverAppBar(
    pinned: true, leading: const BackButton(),
    title: Row(children: [AssetAvatar(asset), SizedBox(width: 8), Text(asset.name)]),
    actions: [IconButton(icon: Icon(LucideIcons.info), onPressed: showRefPricePopover)],
  ),
  SliverList(delegate: SliverChildListDelegate([
    PriceChart(asset: asset),                       // componente: ref-price + scrub Opción B
    if (asset.isStablecoin) DepegAlert(),          // no descartable
    PositionSection(asset: asset),                  // saldo dual / empty inline
    ActionButtons(asset: asset),                    // Comprar(primary) · Vender · Intercambiar
    AboutSection(asset: asset),                     // copy neutro + red + recordatorio retiro
    AssetTxList(assetId: asset.id),                 // tx-list filtrada / empty inline
  ])),
])