@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
61 lines (57 loc) • 2.1 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { useRef, useEffect } from 'react';
import styled from '../../../styles/styled/index.js';
import { ModalBody } from '../Modal/styles.js';
const Container = styled.button `
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
background: transparent;
`;
const InputField = styled.input `
margin: 0;
padding: 0;
background: none;
border: none;
outline: none;
font-size: 30px;
font-weight: var(--ck-modal-h1-font-weight, 600);
color: var(--ck-body-color);
width: ${(props) => {
const length = props.value?.length ?? 0;
// Placeholder is "0.00", 3ch for digits + 0.55ch for decimal point
if (length === 0)
return "3.55ch";
// Reduce width when decimal or commas are present since they're smaller than normal chars
const numPunctuations = (props.value?.match(/[.,]/g) || []).length;
const adjustedLength = length - numPunctuations * 0.55;
return `${Math.min(adjustedLength, 10)}ch`;
}};
min-width: 1ch;
max-width: 10ch;
`;
const AnimatedCurrency = styled(ModalBody) `
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
animation: fadeInDown 0.3s ease-out forwards;
font-size: ${(props) => (props.$small ? "16px" : "24px")};
`;
const AmountInputField = ({ value, onChange, currency = "$", onKeyDown }) => {
// Focus the input when the component mounts so the user can start typing immediately
const inputRef = useRef(null);
useEffect(() => {
inputRef.current?.focus();
}, [value]);
return (jsxs(Container, { children: [currency === "$" && jsx(AnimatedCurrency, { children: currency }), jsx(InputField, { ref: inputRef, type: "text", inputMode: "decimal", value: value, onChange: onChange, placeholder: "0.00", onKeyDown: onKeyDown }), currency !== "$" && (jsx(AnimatedCurrency, { "$small": true, children: currency }))] }));
};
export { AmountInputField as default };
//# sourceMappingURL=AmountInputField.js.map