Pattern · Swap · canvas-first

Swap

El intercambio entre criptoactivos: BTC ↔ ETH ↔ USDT. No involucra COP, ni banco, ni método de pago — es el flujo más simple de los tres operativos. Comisión 1% + IVA, ratio fijado al confirmar, 6 combinaciones posibles entre los 3 activos del MVP. El bloque "De / A" con el botón de inversión es su componente distintivo.

Cripto ↔ Cripto Comisión 1% + IVA 4 pantallas Sin COP · sin banco
Flow map · 4 pantallas · el más corto
01 · Intercambiar
Intercambiar
BTC
0,00350
ETH
0,0508
Bloque De / A
Botón de inversión
02 · Confirmar
Intercambiar
Confirmar intercambio
0,00350
0,0508
Tasa14,52
Comisión0,0000350
Hero = par de activos
Sheet persistente
03 · Procesando
Procesando
intercambio…
Casi instantáneo
Movimiento contable
OK
FAIL
04a · Éxito
Intercambio
completado
04b · Error
No completamos
tu intercambio
Saldo actualizado · o intacto
Screen 01 · Intercambiar · lienzo blanco
9:41
Intercambiar
De
Disponible 0,00350
₿
BTC
0,00350
≈ $1.604.120 COP
A
ETH
0,0508
≈ $1.588.040 COP
Tasa1 BTC = 14,52 ETH
Comisión (1%)0,0000350 BTC
IVA (19% s/comisión)0,0000067 BTC
La tasa se fijará al confirmar

Decisiones canvas-first

  1. Dos paneles sobre el lienzo"De" y "A" son secciones del canvas separadas por un hairline — no dos cards. El botón de inversión se superpone sobre ese hairline, anclado al centro.
  2. Distinción De / A sin chromeEl panel "De" tiene su label en primary y el monto con caret activo. El panel "A" tiene monto muted — es output calculado, no input. La diferencia es tipográfica, no de borde.
  3. Asset chip tappablePill con ícono brand + ticker + chevron. Tap abre bottom sheet selector con los 3 activos. El más usado de toda la pantalla.
  4. Botón de inversión flotanteCírculo 44dp con sombra sutil, superpuesto al divider. arrow-up-down en primary. Tap invierte De/A con crossfade + haptic selectionClick. Sin rotación — crossfade limpio.
  5. Semántica"De" / "A" / Origen / Destino. "Intercambias" / Swappeas / Conviertes.
  6. Disponible inline + Máx"Disponible 0,00350" con botón ghost "Máx" en el head del panel "De". Es el disponible para retiro del activo origen — excluye liquidación.
  7. Desglose en criptoTasa · Comisión · IVA, todo en unidades del activo origen (no COP). La fila Tasa destaca en primary. El swap es 100% cripto.
  8. Fiat hint discretoCada panel muestra "≈ $X COP" como referencia muted — útil para entender magnitud, pero el COP no es protagonista.
Swap block · anatomía del componente distintivo
De
Disponible 0,00350
₿
BTC
0,00350
A
ETH
0,0508
El botón ancla al centro del hairline divisor
1

Panel "De" · input activo

Label en primary, monto editable con caret. El usuario escribe aquí la cantidad del activo origen. Es el único campo de entrada del bloque.

2

Panel "A" · output calculado

Monto muted, no editable. Se recalcula automáticamente según la tasa. La diferencia visual con "De" es solo el peso/color del texto — ambos paneles comparten estructura.

3

Asset chip

Ícono brand 28dp + ticker mono + chevron. Sobre fondo surface sutil. Tap → bottom sheet selector. Presente en ambos paneles.

4

Botón de inversión

Círculo 44dp, fondo blanco, borde 1px, sombra sutil. Posición absolute centrado sobre el hairline. arrow-up-down en primary — affordance clara de "invertir direcciones".

5

Hairline divisor

Separa los dos paneles. El botón lo cruza. Sin cards, sin bordes — la jerarquía del bloque la dan los dos paneles y el botón flotante.

Botón de inversión · secuencia crossfade
01 · estado inicial
De
₿
BTC
0,00350
A
ETH
0,0508
tap +
crossfade
02 · invertido
De
ETH
0,0508
A
₿
BTC
0,00350

Reglas de la inversión

  1. Crossfade, no rotaciónEl contenido de ambos paneles se intercambia con duration-default 200ms. El botón no rota — movimiento institucional, sin gimmicks.
  2. Recálculo inmediatoAl invertir, el monto "A" se recalcula con la tasa inversa. ETH→BTC usa el ratio recíproco.
  3. Haptic selectionClickFeedback sutil de selección — no es acción financiera todavía, solo configuración.
Screen 02 · Confirmation sheet · persistente
9:41
Intercambiar
₿
BTC
0,00350

Confirmar intercambio

₿
0,00350
BTC
0,0508
ETH
Tasa1 BTC = 14,52 ETH
Comisión (1%)0,0000350 + IVA
Recibes0,0508 ETH
Al confirmar, la tasa queda fijada. El intercambio se ejecuta de forma inmediata sobre tu portafolio.
Cancelar

Sheet persistente

  1. Hero = par de activosLos dos íconos con flecha entre ellos. El destino (ETH) es ligeramente más prominente — monto 20px en primary vs 17px del origen. El usuario ve de un vistazo qué entra y qué sale.
  2. Sin gate de monto altoA diferencia de Buy ($2M) y Withdrawal ($10M), el swap no tiene checkbox de monto alto — no involucra COP ni banco, el riesgo regulatorio es menor.
  3. Detalle compactoTasa · Comisión + IVA · Recibes. Todo en cripto. Sin método de pago, sin cuenta, sin entrega estimada — el swap es interno e inmediato.
  4. Legal note breve"La tasa queda fijada" + "se ejecuta de forma inmediata". Más corto que Buy/Withdrawal porque no hay devolución bancaria que explicar.
  5. Persistente · mediumImpactisDismissible: false. Confirmar dispara haptic mediumImpact — sigue siendo acción financiera irreversible aunque sea interna.
Screens 03 — 04 · Procesando · Éxito · Error
Procesando
9:41
Procesando

Procesando tu intercambio…

Esto es casi instantáneo. Estamos actualizando tu portafolio.

Éxito
9:41

Intercambio completado

₿
0,00350
BTC
0,0508
ETH
Referencia
MCP-2026-06-882
0,0508 ETH añadido a tu portafolio
Error
9:41

No pudimos completar tu intercambio

Hubo un problema al procesar la operación. La tasa pudo haber cambiado. Intenta de nuevo.

Referencia
MCP-2026-06-882
Tu saldo no fue modificado
Swap vs. los otros patterns
Aspecto
Buy Crypto
Bank Withdrawal
Swap
Involucra COP
Sí
Sí
No
Comisión
1%
5%
1%
Saldo usado
N/A
Disponible para retiro
Disponible para retiro
Cuenta bancaria
N/A
Sí (destino)
N/A
Hero confirmation
Cripto recibido
COP recibido
Par de activos
Gate monto alto
Sí (> $2M COP)
Sí (> $10M COP)
No
Pantallas
5
4
4
Frase en error
"Tu dinero no fue debitado"
"Tu cripto no fue descontado"
"Tu saldo no fue modificado"
Dark mode · pantalla de intercambio
Light
9:41
Intercambiar
De
Disponible 0,00350
₿
BTC
0,00350
≈ $1.604.120 COP
A
ETH
0,0508
≈ $1.588.040 COP
Tasa1 BTC = 14,52 ETH
Comisión (1%)0,0000350 BTC
La tasa se fijará al confirmar
Dark
9:41
Intercambiar
De
Disponible 0,00350
₿
BTC
0,00350
≈ $1.604.120 COP
A
ETH
0,0508
≈ $1.588.040 COP
Tasa1 BTC = 14,52 ETH
Comisión (1%)0,0000350 BTC
La tasa se fijará al confirmar

Dark mode

  1. Botón de inversión sobre darkFondo #16221F (más claro que el lienzo), borde sutil, sombra negra. El ícono pasa a primary-300 para contraste. Se lee claramente como elemento flotante.
  2. Asset chips con brandNaranja BTC, azul ETH, verde USDT intactos. El fondo del chip pasa a rgba(228,236,235,0.06).
  3. Panel "A" muted legibleEl monto calculado usa neutral-400 en dark — suficiente distinción del panel "De" sin perder legibilidad.
  4. Hairline divisor sutilBaja a rgba(228,236,235,0.08). El botón sigue anclado a su centro.