@daimo/pay/build/src/components/DaimoPayModal/index.js

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

import { jsx } from 'react/jsx-runtime';
import { useWallet } from '@solana/wallet-adapter-react';
import { useRef, useEffect } from 'react';
import { useAccount, useConnect } from 'wagmi';
import { ExternalPaymentOptions, DepositAddressPaymentOptions } from '@daimo/pay-common';
import { ROUTES } from '../../constants/routes.js';
import { getAppName } from '../../defaultConfig.js';
import { useChainIsSupported } from '../../hooks/useChainIsSupported.js';
import { useConnector } from '../../hooks/useConnectors.js';
import { useDaimoPay } from '../../hooks/useDaimoPay.js';
import useIsMobile from '../../hooks/useIsMobile.js';
import { usePayContext } from '../../hooks/usePayContext.js';
import { useWallet as useWallet$1, isExternalWallet } from '../../wallets/useWallets.js';
import { walletConfigs } from '../../wallets/walletConfigs.js';
import Modal from '../Common/Modal/index.js';
import { DaimoPayThemeProvider } from '../DaimoPayThemeProvider/DaimoPayThemeProvider.js';
import About from '../Pages/About/index.js';
import Confirmation from '../Pages/Confirmation/index.js';
import Wallets from '../Pages/Connectors/index.js';
import ErrorPage from '../Pages/Error/index.js';
import MobileConnectors from '../Pages/MobileConnectors/index.js';
import Introduction from '../Pages/Onboarding/index.js';
import PayWithToken from '../Pages/PayWithToken/index.js';
import SelectAmount from '../Pages/SelectAmount/index.js';
import SelectDepositAddressAmount from '../Pages/SelectDepositAddressAmount/index.js';
import SelectDepositAddressChain from '../Pages/SelectDepositAddressChain/index.js';
import SelectExchange from '../Pages/SelectExchange/index.js';
import SelectExternalAmount from '../Pages/SelectExternalAmount/index.js';
import SelectMethod from '../Pages/SelectMethod/index.js';
import SelectToken from '../Pages/SelectToken/index.js';
import SelectWalletAmount from '../Pages/SelectWalletAmount/index.js';
import SelectWalletChain from '../Pages/SelectWalletChain/index.js';
import SelectZKP from '../Pages/SelectZKP/index.js';
import ConnectSolana from '../Pages/Solana/ConnectorSolana/index.js';
import PayWithSolanaToken from '../Pages/Solana/PayWithSolanaToken/index.js';
import SelectSolanaAmount from '../Pages/Solana/SelectSolanaAmount/index.js';
import SwitchNetworks from '../Pages/SwitchNetworks/index.js';
import WaitingDepositAddress, { beforeLeave } from '../Pages/WaitingDepositAddress/index.js';
import WaitingExternal from '../Pages/WaitingExternal/index.js';
import WaitingWallet from '../Pages/WaitingWallet/index.js';
import ConnectUsing from './ConnectUsing.js';

function isWalletOption(option) {
  return Object.keys(walletConfigs).some((id) => {
    walletConfigs[id].name === option;
  });
}
const DaimoPayModal = ({
  mode,
  theme,
  customTheme,
  lang,
  disableMobileInjector
}) => {
  const context = usePayContext();
  const {
    setMode,
    setTheme,
    setCustomTheme,
    setLang,
    setDisableMobileInjector
  } = context;
  const paymentState = context.paymentState;
  const {
    generatePreviewOrder,
    isDepositFlow,
    setPaymentWaitingMessage,
    setSelectedExternalOption,
    setSelectedTokenOption,
    setSelectedSolanaTokenOption,
    setSelectedDepositAddressOption,
    setSelectedWallet
  } = paymentState;
  const daimo = useDaimoPay();
  const { paymentState: paymentFsmState, order } = daimo;
  const {
    isConnected: isEthConnected,
    connector,
    chain,
    address
  } = useAccount();
  const { connected: isSolanaConnected } = useWallet();
  const chainIsSupported = useChainIsSupported(chain?.id);
  const pendingWallet = useWallet$1(context.pendingConnectorId || "");
  const prioritizedWalletId = paymentState.buttonProps?.prioritizedWalletId;
  const prioritizedConnector = useConnector(prioritizedWalletId ?? "");
  const { connect } = useConnect();
  const hasHandledInitialOpen = useRef(false);
  const closeable = !(context.options?.enforceSupportedChains && isEthConnected && !chainIsSupported);
  const showBackButton = closeable && context.route !== context.uniquePaymentMethodPage && context.route !== ROUTES.SELECT_METHOD && context.route !== ROUTES.CONFIRMATION && context.route !== ROUTES.SELECT_TOKEN && context.route !== ROUTES.ERROR && paymentFsmState !== "error" && paymentFsmState !== "warning";
  const onBack = () => {
    const meta = { event: "click-back" };
    if (context.route === ROUTES.CONNECTORS) {
      context.setRoute(context.uniquePaymentMethodPage, meta);
    } else if (context.route === ROUTES.SELECT_AMOUNT) {
      setSelectedTokenOption(void 0);
      context.setRoute(ROUTES.SELECT_TOKEN, meta);
    } else if (context.route === ROUTES.SELECT_EXTERNAL_AMOUNT) {
      setSelectedExternalOption(void 0);
      context.setRoute(context.uniquePaymentMethodPage, meta);
    } else if (context.route === ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT) {
      const isTronTopLevel = paymentState.topOptionsOrder.includes("Tron");
      const isTronSelected = paymentState.selectedDepositAddressOption?.id === DepositAddressPaymentOptions.TRON_USDT;
      if (isDepositFlow) {
        generatePreviewOrder();
      }
      setSelectedDepositAddressOption(void 0);
      if (isTronTopLevel && isTronSelected) {
        context.setRoute(ROUTES.SELECT_METHOD, meta);
      } else {
        context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN, meta);
      }
    } else if (context.route === ROUTES.WAITING_EXTERNAL) {
      setPaymentWaitingMessage(void 0);
      if (isDepositFlow) {
        generatePreviewOrder();
        context.setRoute(ROUTES.SELECT_EXTERNAL_AMOUNT, meta);
      } else {
        setSelectedExternalOption(void 0);
        context.setRoute(context.uniquePaymentMethodPage, meta);
      }
    } else if (context.route === ROUTES.PAY_WITH_TOKEN) {
      if (isDepositFlow) {
        generatePreviewOrder();
        context.setRoute(ROUTES.SELECT_AMOUNT, meta);
      } else {
        setSelectedTokenOption(void 0);
        context.setRoute(ROUTES.SELECT_TOKEN, meta);
      }
    } else if (context.route === ROUTES.MOBILECONNECTORS) {
      context.setRoute(ROUTES.CONNECTORS, meta);
    } else if (context.route === ROUTES.ONBOARDING) {
      context.setRoute(ROUTES.CONNECTORS, meta);
    } else if (context.route === ROUTES.WAITING_DEPOSIT_ADDRESS) {
      const isTronTopLevel = paymentState.topOptionsOrder.includes("Tron");
      const isTronSelected = paymentState.selectedDepositAddressOption?.id === DepositAddressPaymentOptions.TRON_USDT;
      if (isDepositFlow) {
        generatePreviewOrder();
        if (paymentState.selectedDepositAddressOption === void 0) {
          context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN, meta);
        } else {
          context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT, meta);
        }
      } else {
        setSelectedDepositAddressOption(void 0);
        if (isTronTopLevel && isTronSelected) {
          context.setRoute(ROUTES.SELECT_METHOD, meta);
        } else {
          context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN, meta);
        }
      }
    } else if (context.route === ROUTES.WAITING_WALLET) {
      if (isDepositFlow) {
        generatePreviewOrder();
        context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);
      } else {
        setSelectedWallet(void 0);
        context.setRoute(ROUTES.CONNECTORS, meta);
      }
    } else if (context.route === ROUTES.SOLANA_SELECT_AMOUNT) {
      setSelectedSolanaTokenOption(void 0);
      context.setRoute(ROUTES.SELECT_TOKEN, meta);
    } else if (context.route === ROUTES.SOLANA_PAY_WITH_TOKEN) {
      if (isDepositFlow) {
        generatePreviewOrder();
        context.setRoute(ROUTES.SOLANA_SELECT_AMOUNT, meta);
      } else {
        setSelectedSolanaTokenOption(void 0);
        context.setRoute(ROUTES.SELECT_TOKEN, meta);
      }
    } else if (context.route === ROUTES.CONNECT) {
      if (isDepositFlow && isExternalWallet(pendingWallet)) {
        generatePreviewOrder();
        context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);
      } else {
        context.setRoute(context.uniquePaymentMethodPage, meta);
      }
    } else {
      context.setRoute(context.uniquePaymentMethodPage, meta);
    }
  };
  const pages = {
    [ROUTES.SELECT_METHOD]: /* @__PURE__ */ jsx(SelectMethod, {}),
    [ROUTES.SELECT_TOKEN]: /* @__PURE__ */ jsx(SelectToken, {}),
    [ROUTES.SELECT_AMOUNT]: /* @__PURE__ */ jsx(SelectAmount, {}),
    [ROUTES.SELECT_EXTERNAL_AMOUNT]: /* @__PURE__ */ jsx(SelectExternalAmount, {}),
    [ROUTES.SELECT_EXCHANGE]: /* @__PURE__ */ jsx(SelectExchange, {}),
    [ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT]: /* @__PURE__ */ jsx(SelectDepositAddressAmount, {}),
    [ROUTES.SELECT_WALLET_AMOUNT]: /* @__PURE__ */ jsx(SelectWalletAmount, {}),
    [ROUTES.SELECT_WALLET_CHAIN]: /* @__PURE__ */ jsx(SelectWalletChain, {}),
    [ROUTES.WAITING_EXTERNAL]: /* @__PURE__ */ jsx(WaitingExternal, {}),
    [ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN]: /* @__PURE__ */ jsx(SelectDepositAddressChain, {}),
    [ROUTES.WAITING_DEPOSIT_ADDRESS]: /* @__PURE__ */ jsx(WaitingDepositAddress, {}),
    [ROUTES.SELECT_ZKP2P]: /* @__PURE__ */ jsx(SelectZKP, {}),
    [ROUTES.WAITING_WALLET]: /* @__PURE__ */ jsx(WaitingWallet, {}),
    [ROUTES.CONFIRMATION]: /* @__PURE__ */ jsx(Confirmation, {}),
    [ROUTES.ERROR]: /* @__PURE__ */ jsx(ErrorPage, {}),
    [ROUTES.PAY_WITH_TOKEN]: /* @__PURE__ */ jsx(PayWithToken, {}),
    [ROUTES.SOLANA_CONNECTOR]: /* @__PURE__ */ jsx(ConnectSolana, {}),
    [ROUTES.SOLANA_SELECT_AMOUNT]: /* @__PURE__ */ jsx(SelectSolanaAmount, {}),
    [ROUTES.SOLANA_PAY_WITH_TOKEN]: /* @__PURE__ */ jsx(PayWithSolanaToken, {}),
    // Unused routes. Kept to minimize connectkit merge conflicts.
    [ROUTES.ONBOARDING]: /* @__PURE__ */ jsx(Introduction, {}),
    [ROUTES.ABOUT]: /* @__PURE__ */ jsx(About, {}),
    [ROUTES.CONNECTORS]: /* @__PURE__ */ jsx(Wallets, {}),
    [ROUTES.MOBILECONNECTORS]: /* @__PURE__ */ jsx(MobileConnectors, {}),
    [ROUTES.CONNECT]: /* @__PURE__ */ jsx(ConnectUsing, {}),
    [ROUTES.SWITCHNETWORKS]: /* @__PURE__ */ jsx(SwitchNetworks, {})
  };
  const leaveGuards = {
    [ROUTES.WAITING_DEPOSIT_ADDRESS]: () => beforeLeave(context.trpc, order?.id?.toString())
  };
  const guardedAction = async (action) => {
    const guard = leaveGuards[context.route];
    if (!guard) {
      action();
      return;
    }
    let canProceed = false;
    try {
      canProceed = await guard();
    } catch (error) {
      console.error("error in leave guard:", error);
      return;
    }
    if (!canProceed) return;
    try {
      action();
    } catch (error) {
      console.error("error performing guarded action:", error);
      return;
    }
    if (paymentFsmState === "warning") {
      try {
        daimo.dismissWarning();
      } catch (error) {
        console.error("error dismissing warning:", error);
      }
    }
  };
  function hide() {
    if (isDepositFlow) {
      generatePreviewOrder();
    }
    context.setOpen(false, { event: "click-close" });
  }
  const goToManualAddressScreen = (eventSuffix) => {
    if (paymentState.isDepositFlow) {
      context.setUniquePaymentMethodPage(ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT);
      context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT, {
        event: `unique_payment_option_deposit_${eventSuffix}`
      });
    } else {
      context.setUniquePaymentMethodPage(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);
      context.setRoute(ROUTES.WAITING_DEPOSIT_ADDRESS, {
        event: `unique_payment_option_${eventSuffix}`
      });
    }
  };
  const goToExternalScreen = (eventSuffix) => {
    if (paymentState.isDepositFlow) {
      context.setUniquePaymentMethodPage(ROUTES.SELECT_EXTERNAL_AMOUNT);
      context.setRoute(ROUTES.SELECT_EXTERNAL_AMOUNT, {
        event: `unique_payment_option_${eventSuffix}_deposit`
      });
    } else {
      context.setUniquePaymentMethodPage(ROUTES.WAITING_EXTERNAL);
      context.setRoute(ROUTES.WAITING_EXTERNAL, {
        event: `unique_payment_option_${eventSuffix}`
      });
    }
  };
  const { isMobile } = useIsMobile();
  useEffect(() => {
    if (!context.open) {
      hasHandledInitialOpen.current = false;
      return;
    }
    if (context.route !== ROUTES.SELECT_METHOD) return;
    const paymentOptions = paymentState.buttonProps?.paymentOptions;
    const hasUniqueOption = paymentOptions && paymentOptions.length === 1;
    if (hasUniqueOption) {
      const option = paymentOptions[0];
      if (Array.isArray(option)) {
        context.setUniquePaymentMethodPage(ROUTES.CONNECTORS);
        context.setRoute(ROUTES.CONNECTORS, {
          event: "unique_payment_option_wallets"
        });
        return;
      }
      switch (option) {
        case "Tron":
          const tronOption = paymentState.depositAddressOptions.options?.find(
            (option2) => option2.id === DepositAddressPaymentOptions.TRON_USDT
          );
          if (tronOption) {
            setSelectedDepositAddressOption(tronOption);
            goToManualAddressScreen("tron");
          } else if (!paymentState.depositAddressOptions.loading) {
            context.setUniquePaymentMethodPage(
              ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN
            );
            context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN, {
              event: "unique_payment_option_tron_fallback"
            });
          }
          break;
        case "AllExchanges":
          context.setUniquePaymentMethodPage(ROUTES.SELECT_EXCHANGE);
          context.setRoute(ROUTES.SELECT_EXCHANGE, {
            event: "unique_payment_option_all_exchanges"
          });
          break;
        case "AllAddresses":
          context.setUniquePaymentMethodPage(
            ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN
          );
          context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN, {
            event: "unique_payment_option_manual_address"
          });
          break;
        case "Base":
          const baseOption = paymentState.depositAddressOptions.options?.find(
            (option2) => option2.id === DepositAddressPaymentOptions.BASE
          );
          if (baseOption) {
            setSelectedDepositAddressOption(baseOption);
            goToManualAddressScreen("base");
          } else if (!paymentState.depositAddressOptions.loading) {
            context.setUniquePaymentMethodPage(
              ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN
            );
            context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN, {
              event: "unique_payment_option_base_fallback"
            });
          }
          break;
        case "Arbitrum":
          const arbitrumOption = paymentState.depositAddressOptions.options?.find(
            (option2) => option2.id === DepositAddressPaymentOptions.ARBITRUM
          );
          if (arbitrumOption) {
            setSelectedDepositAddressOption(arbitrumOption);
            goToManualAddressScreen("arbitrum");
          } else if (!paymentState.depositAddressOptions.loading) {
            context.setUniquePaymentMethodPage(
              ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN
            );
            context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN, {
              event: "unique_payment_option_arbitrum_fallback"
            });
          }
          break;
        case "Optimism":
          const optimismOption = paymentState.depositAddressOptions.options?.find(
            (option2) => option2.id === DepositAddressPaymentOptions.OP_MAINNET
          );
          if (optimismOption) {
            setSelectedDepositAddressOption(optimismOption);
            goToManualAddressScreen("optimism");
          } else if (!paymentState.depositAddressOptions.loading) {
            context.setUniquePaymentMethodPage(
              ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN
            );
            context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN, {
              event: "unique_payment_option_optimism_fallback"
            });
          }
          break;
        case "Polygon":
          const polygonOption = paymentState.depositAddressOptions.options?.find(
            (option2) => option2.id === DepositAddressPaymentOptions.POLYGON
          );
          if (polygonOption) {
            setSelectedDepositAddressOption(polygonOption);
            goToManualAddressScreen("polygon");
          } else if (!paymentState.depositAddressOptions.loading) {
            context.setUniquePaymentMethodPage(
              ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN
            );
            context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN, {
              event: "unique_payment_option_polygon_fallback"
            });
          }
          break;
        case "Ethereum":
          const ethereumOption = paymentState.depositAddressOptions.options?.find(
            (option2) => option2.id === DepositAddressPaymentOptions.ETH_L1
          );
          if (ethereumOption) {
            setSelectedDepositAddressOption(ethereumOption);
            goToManualAddressScreen("ethereum");
          } else if (!paymentState.depositAddressOptions.loading) {
            context.setUniquePaymentMethodPage(
              ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN
            );
            context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN, {
              event: "unique_payment_option_ethereum_fallback"
            });
          }
          break;
        case "Binance":
          const exchangeOptions = paymentState.externalPaymentOptions.options.get("exchange");
          const binanceOption = exchangeOptions?.find(
            (option2) => option2.id === ExternalPaymentOptions.Binance
          );
          if (binanceOption) {
            setSelectedExternalOption(binanceOption);
            goToExternalScreen("binance");
          } else if (!paymentState.externalPaymentOptions.loading) {
            context.setUniquePaymentMethodPage(ROUTES.SELECT_EXCHANGE);
            context.setRoute(ROUTES.SELECT_EXCHANGE, {
              event: "unique_payment_option_binance_fallback"
            });
          }
          break;
        case "Coinbase":
          const coinbaseExchangeOptions = paymentState.externalPaymentOptions.options.get("exchange");
          const coinbaseOption = coinbaseExchangeOptions?.find(
            (option2) => option2.id === ExternalPaymentOptions.Coinbase
          );
          if (coinbaseOption) {
            setSelectedExternalOption(coinbaseOption);
            goToExternalScreen("coinbase");
          } else if (!paymentState.externalPaymentOptions.loading) {
            context.setUniquePaymentMethodPage(ROUTES.SELECT_EXCHANGE);
            context.setRoute(ROUTES.SELECT_EXCHANGE, {
              event: "unique_payment_option_coinbase_fallback"
            });
          }
          break;
        case "Lemon":
          const lemonExternalOptions = paymentState.externalPaymentOptions.options.get("external");
          const lemonOption = lemonExternalOptions?.find(
            (option2) => option2.id === ExternalPaymentOptions.Lemon
          );
          if (lemonOption) {
            setSelectedExternalOption(lemonOption);
            goToExternalScreen("lemon");
          } else if (!paymentState.externalPaymentOptions.loading) {
            console.warn(
              "[DaimoPayModal] Lemon not found in external payment options"
            );
            context.setUniquePaymentMethodPage(ROUTES.SELECT_METHOD);
            context.setRoute(ROUTES.SELECT_METHOD, {
              event: "unique_payment_option_lemon_not_found"
            });
          }
          break;
        case "AllWallets":
          context.setUniquePaymentMethodPage(ROUTES.CONNECTORS);
          context.setRoute(ROUTES.CONNECTORS, {
            event: "unique_payment_option_wallets"
          });
          break;
        default:
          const singleOption = option;
          if (isWalletOption(singleOption)) {
            const walletId = Object.keys(walletConfigs).find((id) => {
              const wallet = walletConfigs[id];
              const optionLower = singleOption.toLowerCase();
              return wallet.name?.toLowerCase() === optionLower || wallet.shortName?.toLowerCase() === optionLower || wallet.name?.toLowerCase().includes(optionLower) || id.toLowerCase() === optionLower || id.toLowerCase().includes(optionLower);
            });
            if (walletId) {
              const wallet = walletConfigs[walletId];
              paymentState.setSelectedWallet(wallet);
              if (paymentState.isDepositFlow) {
                context.setUniquePaymentMethodPage(ROUTES.SELECT_WALLET_AMOUNT);
                context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, {
                  event: "single_option_wallet_deposit",
                  wallet: singleOption
                });
              } else if (!isMobile && wallet.getDaimoPayDeeplink) {
                context.setPendingConnectorId(walletId);
                context.setUniquePaymentMethodPage(ROUTES.CONNECT);
                context.setRoute(ROUTES.CONNECT, {
                  event: "single_option_wallet_qr",
                  wallet: singleOption
                });
              } else if (isMobile && wallet.getDaimoPayDeeplink) {
                paymentState.openInWalletBrowser(wallet);
              } else {
                context.setRoute(ROUTES.CONNECTORS, {
                  event: "single_option_wallet",
                  wallet: singleOption
                });
              }
            } else {
              context.setUniquePaymentMethodPage(ROUTES.SELECT_METHOD);
            }
          } else {
            context.setUniquePaymentMethodPage(ROUTES.SELECT_METHOD);
          }
          break;
      }
    }
    const isWalletsUniquePaymentOption = hasUniqueOption && (Array.isArray(paymentOptions[0]) || paymentOptions[0] === "AllWallets");
    const evmOptionsCount = paymentState.walletPaymentOptions.options?.length ?? 0;
    const isEvmLoading = paymentState.walletPaymentOptions.isLoading;
    const solanaOptionsCount = paymentState.solanaPaymentOptions.options?.length ?? 0;
    const isSolanaLoading = paymentState.solanaPaymentOptions.isLoading;
    if ((!hasUniqueOption || isWalletsUniquePaymentOption) && isEthConnected && !isSolanaConnected && (!isMobile || !disableMobileInjector) && !isEvmLoading && evmOptionsCount > 0) {
      if (!hasHandledInitialOpen.current) {
        hasHandledInitialOpen.current = true;
        if (prioritizedWalletId && prioritizedConnector && connector?.id !== prioritizedWalletId) {
          connect({ connector: prioritizedConnector });
        }
      }
      paymentState.setTokenMode("evm");
      context.setRoute(ROUTES.SELECT_TOKEN, {
        event: "eth_connected_on_open",
        walletId: connector?.id,
        chainId: chain?.id,
        address
      });
    } else if ((!hasUniqueOption || isWalletsUniquePaymentOption) && isSolanaConnected && !isEthConnected && !disableMobileInjector && !isSolanaLoading && solanaOptionsCount > 0) {
      hasHandledInitialOpen.current = true;
      paymentState.setTokenMode("solana");
      context.setRoute(ROUTES.SELECT_TOKEN, {
        event: "solana_connected_on_open"
      });
    }
  }, [
    context.open,
    paymentState.walletPaymentOptions.options,
    paymentState.walletPaymentOptions.isLoading,
    paymentState.solanaPaymentOptions.options,
    paymentState.solanaPaymentOptions.isLoading,
    paymentState.externalPaymentOptions.options,
    paymentState.externalPaymentOptions.loading,
    paymentState.depositAddressOptions.options,
    paymentState.depositAddressOptions.loading,
    address,
    chain?.id,
    connector?.id,
    context.uniquePaymentMethodPage
  ]);
  useEffect(() => {
    if (context.route === ROUTES.CONNECT || context.route === ROUTES.CONNECTORS || context.route === ROUTES.MOBILECONNECTORS) {
      if (isEthConnected) {
        paymentState.setTokenMode("evm");
        context.setRoute(ROUTES.SELECT_TOKEN, {
          event: "connected",
          walletId: connector?.id,
          chainId: chain?.id,
          address
        });
      }
    }
  }, [isEthConnected, context.route, connector?.id, chain?.id, address]);
  useEffect(() => {
    if (!context.open) return;
    if (context.route !== ROUTES.SELECT_TOKEN) return;
    if (hasHandledInitialOpen.current) return;
    if (!isEthConnected) return;
    if (prioritizedWalletId && prioritizedConnector && connector?.id !== prioritizedWalletId) {
      hasHandledInitialOpen.current = true;
      connect({ connector: prioritizedConnector });
    }
  }, [
    context.open,
    context.route,
    isEthConnected,
    prioritizedWalletId,
    prioritizedConnector,
    connector?.id,
    connect
  ]);
  useEffect(() => setMode(mode), [mode, setMode]);
  useEffect(() => setTheme(theme), [theme, setTheme]);
  useEffect(() => setCustomTheme(customTheme), [customTheme, setCustomTheme]);
  useEffect(() => setLang(lang), [lang, setLang]);
  useEffect(
    () => setDisableMobileInjector(disableMobileInjector),
    [disableMobileInjector, setDisableMobileInjector]
  );
  useEffect(() => {
    const appName = getAppName();
    if (!appName || !context.open) return;
    const title = document.createElement("meta");
    title.setAttribute("property", "og:title");
    title.setAttribute("content", appName);
    document.head.prepend(title);
    return () => {
      try {
        document.head.removeChild(title);
      } catch {
      }
    };
  }, [context.open]);
  return /* @__PURE__ */ jsx(DaimoPayThemeProvider, { theme, customTheme, mode, children: /* @__PURE__ */ jsx(
    Modal,
    {
      open: context.open,
      pages,
      pageId: context.route,
      onClose: closeable && paymentFsmState !== "warning" ? () => guardedAction(hide) : void 0,
      onInfo: void 0,
      onBack: showBackButton ? () => guardedAction(onBack) : void 0
    }
  ) });
};

export { DaimoPayModal };
//# sourceMappingURL=index.js.map