@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
62 lines (59 loc) • 3.03 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import { ROUTES } from '../../../constants/routes.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
import { PageContent, ModalContent, ModalBody } from '../../Common/Modal/styles.js';
import styled from '../../../styles/styled/index.js';
import { formatUsd, USD_DECIMALS } from '../../../utils/format.js';
import { isValidNumber, sanitizeNumber } from '../../../utils/validateInput.js';
import AmountInputField from '../../Common/AmountInput/AmountInputField.js';
import Button from '../../Common/Button/index.js';
import ExternalPaymentSpinner from '../../Spinners/ExternalPaymentSpinner/index.js';
const SelectDepositAddressAmount = () => {
const { paymentState, setRoute, triggerResize } = usePayContext();
const { selectedDepositAddressOption } = paymentState;
const maxUsdLimit = paymentState.getOrderUsdLimit();
const minUsd = selectedDepositAddressOption?.minimumUsd ?? 0;
const minimumMessage = minUsd > 0 ? `Minimum ${formatUsd(minUsd, "up")}` : null;
const [usdInput, setUsdInput] = useState("");
const [message, setMessage] = useState(minimumMessage);
const [continueDisabled, setContinueDisabled] = useState(true);
useEffect(() => {
triggerResize();
}, [message]); // eslint-disable-line react-hooks/exhaustive-deps
if (selectedDepositAddressOption == null) {
return jsx(PageContent, {});
}
const handleAmountChange = (e) => {
const value = e.target.value;
if (value !== "" && !isValidNumber(value, USD_DECIMALS))
return;
setUsdInput(value);
if (Number(value) > maxUsdLimit) {
setMessage(`Maximum ${formatUsd(maxUsdLimit)}`);
}
else {
setMessage(minimumMessage);
}
const usd = Number(sanitizeNumber(value));
setContinueDisabled(usd <= 0 || usd > maxUsdLimit || usd < minUsd);
};
const handleKeyDown = (e) => {
if (e.key === "Enter" && !continueDisabled) {
handleContinue();
}
};
const handleContinue = () => {
const amountUsd = Number(sanitizeNumber(usdInput));
paymentState.setChosenUsd(amountUsd);
setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS, { amountUsd });
};
return (jsxs(PageContent, { children: [jsx(ExternalPaymentSpinner, { logoURI: selectedDepositAddressOption.logoURI, logoShape: "circle" }), jsxs(ModalContent, { "$preserveDisplay": true, children: [jsx(AmountInputContainer, { children: jsx(AmountInputField, { value: usdInput, onChange: handleAmountChange, onKeyDown: handleKeyDown }) }), message && jsx(ModalBody, { children: message }), jsx(Button, { onClick: handleContinue, disabled: continueDisabled, children: "Continue" })] })] }));
};
const AmountInputContainer = styled.div `
display: flex;
align-items: center;
justify-content: center;
`;
export { SelectDepositAddressAmount as default };
//# sourceMappingURL=index.js.map