@daimo/pay 1.19.5 → 1.19.6

package/build/pay/packages/connectkit/src/components/DaimoPayModal/index.js

@@ -0,0 +1,605 @@
+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