@daimo/pay
Version:
Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.
57 lines (54 loc) • 2.75 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { useState } from 'react';
import { ROUTES } from '../../../constants/routes.js';
import { usePayContext } from '../../../hooks/usePayContext.js';
import { PageContent, ModalContent } from '../../Common/Modal/styles.js';
import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
import styled from '../../../styles/styled/index.js';
import { USD_DECIMALS } from '../../../utils/format.js';
import { isValidNumber, sanitizeNumber } from '../../../utils/validateInput.js';
import { WALLET_ID_MOBILE_WALLETS } from '../../../wallets/useWallets.js';
import AmountInputField from '../../Common/AmountInput/AmountInputField.js';
import Button from '../../Common/Button/index.js';
import WalletPaymentSpinner from '../../Spinners/WalletPaymentSpinner/index.js';
const SelectWalletAmount = () => {
const { paymentState, setPendingConnectorId, setRoute } = usePayContext();
const { selectedWallet, openInWalletBrowser } = paymentState;
const { setChosenUsd, hydrateOrder } = useDaimoPay();
const maxUsdLimit = paymentState.getOrderUsdLimit();
const [usdInput, setUsdInput] = useState("");
const [continueDisabled, setContinueDisabled] = useState(true);
if (selectedWallet == null) {
return jsx(PageContent, {});
}
const handleAmountChange = (e) => {
const value = e.target.value;
if (value !== "" && !isValidNumber(value, USD_DECIMALS))
return;
setUsdInput(value);
const usd = Number(sanitizeNumber(value));
setContinueDisabled(usd <= 0 || usd > maxUsdLimit);
};
const handleContinue = async () => {
const amountUsd = Number(sanitizeNumber(usdInput));
setChosenUsd(amountUsd);
await hydrateOrder();
if (selectedWallet.id === WALLET_ID_MOBILE_WALLETS) {
setPendingConnectorId(WALLET_ID_MOBILE_WALLETS);
setRoute(ROUTES.CONNECT);
}
else {
openInWalletBrowser(selectedWallet, amountUsd);
}
};
return (jsxs(PageContent, { children: [jsx(WalletPaymentSpinner, { logo: selectedWallet.icon, logoShape: selectedWallet.iconShape === "square"
? "squircle"
: selectedWallet.iconShape || "squircle" }), jsxs(ModalContent, { "$preserveDisplay": true, children: [jsx(AmountInputContainer, { children: jsx(AmountInputField, { value: usdInput, onChange: handleAmountChange }) }), jsx(Button, { onClick: handleContinue, disabled: continueDisabled, children: "Continue" })] })] }));
};
const AmountInputContainer = styled.div `
display: flex;
align-items: center;
justify-content: center;
`;
export { SelectWalletAmount as default };
//# sourceMappingURL=index.js.map