@daimo/pay/build/src/components/Pages/SelectWalletAmount/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 } 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 useIsMobile from '../../../hooks/useIsMobile.js';
import styled from '../../../styles/styled/index.js';
import { USD_DECIMALS } from '../../../utils/format.js';
import { isValidNumber, sanitizeNumber } from '../../../utils/validateInput.js';
import { isExternalWallet } 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,
    paymentState: payFsmState
  } = useDaimoPay();
  const { isMobile } = useIsMobile();
  const maxUsdLimit = paymentState.getOrderUsdLimit();
  const [usdInput, setUsdInput] = useState("");
  const [continueDisabled, setContinueDisabled] = useState(true);
  if (selectedWallet == null) {
    return /* @__PURE__ */ jsx(PageContent, {});
  }
  const walletId = selectedWallet?.id;
  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);
    if (isExternalWallet(selectedWallet) && !isMobile) {
      await hydrateOrder();
      setPendingConnectorId(walletId);
      setRoute(ROUTES.CONNECT);
    } else {
      await openInWalletBrowser(selectedWallet, amountUsd);
    }
  };
  return /* @__PURE__ */ jsxs(PageContent, { children: [
    /* @__PURE__ */ jsx(
      WalletPaymentSpinner,
      {
        logo: selectedWallet.icon,
        logoShape: selectedWallet.iconShape === "square" ? "squircle" : selectedWallet.iconShape || "squircle"
      }
    ),
    /* @__PURE__ */ jsxs(ModalContent, { $preserveDisplay: true, children: [
      /* @__PURE__ */ jsx(AmountInputContainer, { children: /* @__PURE__ */ jsx(AmountInputField, { value: usdInput, onChange: handleAmountChange }) }),
      /* @__PURE__ */ 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