Money Input

Cinco elementos en un bloque

Estructura vertical. Hero amount domina visualmente. La conversión es subordinada (siempre muted). La tasa y los límites aparecen al pie, no compiten.

Precisión por moneda

Cada activo tiene reglas distintas de decimales y separadores. El input debe respetarlas — confundirlas (mostrar "$500.00" en vez de "$500.000") destruye la confianza en segundos.

Monto en palabras

Redundancia anti-error de ceros, tono de banco serio: bajo el input COP aparece el monto escrito — "un millón quinientos mil pesos". Un cero de más se detecta leyendo, no contando dígitos. Solo aplica a COP: la cripta fraccional no se verbaliza.

Tres flujos financieros

Mismo componente, distinto label y distintas monedas. Compra y retiro usan COP + cripto. Swap usa cripto + cripto — COP no participa.

Seis estados del input

Del input vacío al error de límite. Cada estado tiene tratamiento visual y, cuando aplica, mensaje de error.

Errores de tope · inline mientras se escribe

Los tres mensajes canónicos de límite se validan en vivo (debounce 300ms), inline bajo el hero — nunca SnackBar, nunca al confirmar. Los dos de nivel llevan link inline a "Niveles y límites" (screens-kyc-levels). El mensaje no revela topes de otros niveles — solo que existe un nivel superior.

Atajos de monto

Debajo del input, fila de chips que aceleran el caso común sin obligar a teclear. Dos juegos según la moneda del input: montos fijos en COP para compra, y porcentajes (25% · 50% · MAX) cuando el input es cripto. A2 · los porcentajes cripto se calculan SIEMPRE sobre "Disponible para retiro" — nunca sobre el saldo total. El saldo dual queda intacto.

Interacciones

Cada interacción referencia tokens ya definidos en foundations-motion.

Claro y oscuro

Misma jerarquía. Cambian fondo, border, color del símbolo y del chip de moneda. El live dot mantiene success en ambos.

En la pantalla de compra

El money input es el centro de la pantalla de compra. Selector de activo arriba, money input al medio, breakdown debajo, CTA fijo al fondo. Todo conduce al confirmation sheet.

Notas de implementación Flutter

// CurrencyInputFormatter — locale es-CO
class CurrencyInputFormatter extends TextInputFormatter {
  final int decimals;
  final String locale;

  const CurrencyInputFormatter({this.decimals = 0, this.locale = 'es_CO'});

  TextEditingValue formatEditUpdate(TextEditingValue oldVal, TextEditingValue newVal) {
    final raw = newVal.text.replaceAll(RegExp(r'[^\d]'), '');
    if (raw.isEmpty) return const TextEditingValue(text: '');

    final value = int.parse(raw);
    final formatted = NumberFormat.decimalPattern(locale).format(value);

    return TextEditingValue(
      text: formatted,
      selection: TextSelection.collapsed(offset: formatted.length),
    );
  }
}

// Conversión debounced
Timer? _debounce;
void _onAmountChanged(String value) {
  _debounce?.cancel();
  setState(() => _isCalculating = true);
  _debounce = Timer(const Duration(milliseconds: 300), () async {
    final converted = await ref.read(rateProvider).convert(value, from: primary, to: secondary);
    if (mounted) setState(() {
      _convertedAmount = converted;
      _isCalculating = false;
    });
  });
}

// Currency switch
void _switchCurrency() {
  HapticFeedback.selectionClick();
  setState(() {
    final tmp = primary;
    primary = secondary;
    secondary = tmp;
    // recalc el valor numérico para mantener equivalencia
    _amount = _convertedAmount;
    _convertedAmount = tmp == Currency.cop ? _amount / rate : _amount * rate;
  });
}