wgm-swap-components/dist/TokenInput.js

A React component library for token swap interfaces

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
/**
 * Token Input Component for swap forms
 */
export var TokenInput = function (_a) {
    var label = _a.label, symbol = _a.symbol, name = _a.name, logoUrl = _a.logoUrl, value = _a.value, balance = _a.balance, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.placeholder, placeholder = _c === void 0 ? '0.0' : _c, onChange = _a.onChange, onMaxClick = _a.onMaxClick, onTokenSelect = _a.onTokenSelect, _d = _a.className, className = _d === void 0 ? '' : _d, _e = _a.backgroundColor, backgroundColor = _e === void 0 ? '#f9fafb' : _e, // default bg-gray-50
    _f = _a.textColor, // default bg-gray-50
    textColor = _f === void 0 ? '#000000' : _f;
    var _g = useState(false), isFocused = _g[0], setIsFocused = _g[1];
    var handleInputChange = function (e) {
        if (disabled)
            return;
        var inputValue = e.target.value;
        // Only allow numbers and decimal points
        if (inputValue === '' || /^\d*\.?\d*$/.test(inputValue)) {
            onChange(inputValue);
        }
    };
    var containerClasses = "\n    p-4 transition-all duration-200\n    ".concat(disabled ? 'cursor-not-allowed' : '', "\n    ").concat(className, "\n  ").trim();
    return (_jsxs("div", { className: containerClasses, style: { backgroundColor: backgroundColor }, children: [_jsxs("div", { className: 'flex justify-between gap-2 mb-2', children: [_jsx("span", { className: "text-sm", style: { color: textColor === 'white' ? '#d1d5db' : '#4b5563' }, children: label }), _jsxs("div", { className: "flex justify-end gap-2", children: [balance && (_jsxs("span", { className: "text-sm", style: { color: textColor === 'white' ? '#d1d5db' : '#4b5563' }, children: ["Balance: ", balance] })), !disabled && balance && onMaxClick && (_jsx("button", { onClick: onMaxClick, className: "px-3 py-1 text-xs font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors duration-200", children: "MAX" }))] })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("button", { onClick: onTokenSelect, className: "flex items-center gap-2 px-3 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors duration-200 disabled:cursor-not-allowed", children: [logoUrl ? (_jsx("img", { src: logoUrl, alt: symbol, className: "w-6 h-6 rounded-full" })) : (_jsx("div", { className: "w-6 h-6 wgm-token-avatar-placeholder", children: symbol === null || symbol === void 0 ? void 0 : symbol.charAt(0) })), _jsx("div", { className: "flex flex-col items-start", children: _jsx("span", { className: "font-semibold", style: { color: '#000000' }, children: symbol }) }), _jsx("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), _jsx("div", { className: "flex-1 text-right", children: _jsx("input", { type: "text", value: value, placeholder: placeholder, onChange: handleInputChange, onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, disabled: disabled, className: "w-full text-right text-2xl font-semibold bg-transparent outline-none placeholder-gray-400 disabled:cursor-not-allowed", style: { color: textColor } }) })] })] }));
};
export default TokenInput;