@daimo/pay/build/src/components/Pages/SelectExternalAmount/index.js

Seamless crypto payments. Onboard users from any chain, any coin into your app with one click.

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 SelectExternalAmount = () => {
  const { paymentState, setRoute, triggerResize } = usePayContext();
  const { selectedExternalOption } = paymentState;
  const maxUsdLimit = paymentState.getOrderUsdLimit();
  const minimumMessage = (selectedExternalOption?.minimumUsd ?? 0) > 0 ? `Minimum ${formatUsd(selectedExternalOption?.minimumUsd ?? 0, "up")}` : null;
  const [usdInput, setUsdInput] = useState("");
  const [message, setMessage] = useState(minimumMessage);
  const [continueDisabled, setContinueDisabled] = useState(true);
  useEffect(() => {
    triggerResize();
  }, [message]);
  if (selectedExternalOption == null) {
    return /* @__PURE__ */ 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 < (selectedExternalOption.minimumUsd ?? 0) || usd > maxUsdLimit
    );
  };
  const handleKeyDown = (e) => {
    if (e.key === "Enter" && !continueDisabled) {
      handleContinue();
    }
  };
  const handleContinue = () => {
    const amountUsd = Number(sanitizeNumber(usdInput));
    paymentState.setChosenUsd(amountUsd);
    setRoute(ROUTES.WAITING_EXTERNAL, { amountUsd });
  };
  return /* @__PURE__ */ jsxs(PageContent, { children: [
    /* @__PURE__ */ jsx(
      ExternalPaymentSpinner,
      {
        logoURI: selectedExternalOption.logoURI,
        logoShape: selectedExternalOption.logoShape
      }
    ),
    /* @__PURE__ */ jsxs(ModalContent, { $preserveDisplay: true, children: [
      /* @__PURE__ */ jsx(AmountInputContainer, { children: /* @__PURE__ */ jsx(
        AmountInputField,
        {
          value: usdInput,
          onChange: handleAmountChange,
          onKeyDown: handleKeyDown
        }
      ) }),
      message && /* @__PURE__ */ jsx(ModalBody, { children: message }),
      /* @__PURE__ */ jsx(Button, { onClick: handleContinue, disabled: continueDisabled, children: "Continue" })
    ] })
  ] });
};
const AmountInputContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
`;

export { SelectExternalAmount as default };
//# sourceMappingURL=index.js.map