@daimo/pay 1.10.2 → 1.11.1

package/build/src/components/DaimoPayModal/ConnectWithInjector/index.js

@@ -0,0 +1,195 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { AnimatePresence } from 'framer-motion';
+import { useState, useEffect } from 'react';
+import { Container, ConnectingContainer, ConnectingAnimation, RetryButton, RetryIconContainer, Content } from './styles.js';
+import Alert from '../../Common/Alert/index.js';
+import Button from '../../Common/Button/index.js';
+import { PageContent, ModalHeading, ModalContent, ModalContentContainer, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
+import Tooltip from '../../Common/Tooltip/index.js';
+import SquircleSpinner from '../../Spinners/SquircleSpinner/index.js';
+import { RetryIconCircle, AlertIcon, ExternalLinkIcon, TickIcon } from '../../../assets/icons.js';
+import { useConnect } from '../../../hooks/useConnect.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { detectBrowser } from '../../../utils/index.js';
+import { useWallet } from '../../../wallets/useWallets.js';
+import BrowserIcon from '../../Common/BrowserIcon/index.js';
+import CircleSpinner from '../../Spinners/CircleSpinner/index.js';
+
+const states = {
+    CONNECTED: "connected",
+    CONNECTING: "connecting",
+    EXPIRING: "expiring",
+    FAILED: "failed",
+    REJECTED: "rejected",
+    NOTCONNECTED: "notconnected",
+    UNAVAILABLE: "unavailable",
+};
+const contentVariants = {
+    initial: {
+        willChange: "transform,opacity",
+        position: "relative",
+        opacity: 0,
+        scale: 0.95,
+    },
+    animate: {
+        position: "relative",
+        opacity: 1,
+        scale: 1,
+        transition: {
+            ease: [0.16, 1, 0.3, 1],
+            duration: 0.4,
+            delay: 0.05,
+            position: { delay: 0 },
+        },
+    },
+    exit: {
+        position: "absolute",
+        opacity: 0,
+        scale: 0.95,
+        transition: {
+            ease: [0.16, 1, 0.3, 1],
+            duration: 0.3,
+        },
+    },
+};
+const ConnectWithInjector = ({ switchConnectMethod, forceState }) => {
+    const { connect } = useConnect({
+        mutation: {
+            onMutate: (connector) => {
+                if (connector.connector) {
+                    setStatus(states.CONNECTING);
+                }
+                else {
+                    setStatus(states.UNAVAILABLE);
+                }
+            },
+            onError(err) {
+                console.error(err);
+            },
+            onSettled(data, error) {
+                if (error) {
+                    setShowTryAgainTooltip(true);
+                    setTimeout(() => setShowTryAgainTooltip(false), 3500);
+                    if (error.code) {
+                        // https://github.com/MetaMask/eth-rpc-errors/blob/main/src/error-constants.ts
+                        switch (error.code) {
+                            case -32002:
+                                setStatus(states.NOTCONNECTED);
+                                break;
+                            case 4001:
+                                setStatus(states.REJECTED);
+                                break;
+                            default:
+                                setStatus(states.FAILED);
+                                break;
+                        }
+                    }
+                    else {
+                        // Sometimes the error doesn't respond with a code
+                        if (error.message) {
+                            switch (error.message) {
+                                case "User rejected request":
+                                    setStatus(states.REJECTED);
+                                    break;
+                                default:
+                                    setStatus(states.FAILED);
+                                    break;
+                            }
+                        }
+                    }
+                }
+                setTimeout(triggerResize, 100);
+            },
+        },
+    });
+    const { triggerResize } = usePayContext();
+    const { pendingConnectorId } = usePayContext();
+    const wallet = useWallet(pendingConnectorId ?? "");
+    const walletInfo = {
+        name: wallet?.name,
+        shortName: wallet?.shortName ?? wallet?.name,
+        icon: wallet?.iconConnector ?? wallet?.icon,
+        iconShape: wallet?.iconShape ?? "circle",
+        iconShouldShrink: wallet?.iconShouldShrink,
+    };
+    const [showTryAgainTooltip, setShowTryAgainTooltip] = useState(false);
+    const browser = detectBrowser();
+    const extensionUrl = wallet?.downloadUrls?.[browser];
+    const suggestedExtension = wallet?.downloadUrls
+        ? {
+            name: Object.keys(wallet?.downloadUrls)[0],
+            label: Object.keys(wallet?.downloadUrls)[0]?.charAt(0).toUpperCase() +
+                Object.keys(wallet?.downloadUrls)[0]?.slice(1), // Capitalise first letter, but this might be better suited as a lookup table
+            url: wallet?.downloadUrls[Object.keys(wallet?.downloadUrls)[0]],
+        }
+        : undefined;
+    const [status, setStatus] = useState(forceState
+        ? forceState
+        : !wallet?.isInstalled
+            ? states.UNAVAILABLE
+            : states.CONNECTING);
+    const locales = useLocales({
+        CONNECTORNAME: walletInfo.name,
+        CONNECTORSHORTNAME: walletInfo.shortName ?? walletInfo.name,
+        SUGGESTEDEXTENSIONBROWSER: suggestedExtension?.label ?? "your browser",
+    });
+    const runConnect = async () => {
+        if (wallet?.isInstalled && wallet?.connector) {
+            connect({ connector: wallet?.connector });
+        }
+        else {
+            setStatus(states.UNAVAILABLE);
+        }
+    };
+    useEffect(() => {
+        if (status === states.UNAVAILABLE)
+            return;
+        // UX: Give user time to see the UI before opening the extension
+        const connectTimeout = setTimeout(runConnect, 600);
+        return () => {
+            clearTimeout(connectTimeout);
+        };
+    }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    /** Timeout functionality if necessary
+    let expiryTimeout: any;
+    useEffect(() => {
+      if (status === states.EXPIRING) {
+        expiryTimeout = setTimeout(
+          () => {
+            if (expiryTimer <= 0) {
+              setStatus(states.FAILED);
+              setExpiryTimer(expiryDefault);
+            } else {
+              setExpiryTimer(expiryTimer - 1);
+            }
+          },
+          expiryTimer === 9 ? 1500 : 1000 // Google: Chronostasis
+        );
+      }
+      return () => {
+        clearTimeout(expiryTimeout);
+      };
+    }, [status, expiryTimer]);
+    */
+    if (!wallet) {
+        return (jsx(PageContent, { children: jsxs(Container, { children: [jsx(ModalHeading, { children: "Invalid State" }), jsx(ModalContent, { children: jsx(Alert, { children: "No connectors match the id given. This state should never happen." }) })] }) }));
+    }
+    return (jsx(PageContent, { children: jsxs(Container, { children: [jsx(ConnectingContainer, { children: jsxs(ConnectingAnimation, { "$shake": status === states.FAILED || status === states.REJECTED, "$circle": walletInfo.iconShape === "circle", children: [jsx(AnimatePresence, { children: (status === states.FAILED || status === states.REJECTED) && (jsx(RetryButton, { "aria-label": "Retry", initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, whileTap: { scale: 0.9 }, transition: { duration: 0.1 }, onClick: runConnect, children: jsx(RetryIconContainer, { children: jsx(Tooltip, { open: showTryAgainTooltip &&
+                                                (status === states.FAILED || status === states.REJECTED), message: locales.tryAgainQuestion, xOffset: -6, children: jsx(RetryIconCircle, {}) }) }) })) }), walletInfo.iconShape === "circle" ? (jsx(CircleSpinner, { logo: status === states.UNAVAILABLE ? (jsx("div", { style: {
+                                        transform: "scale(1.14)",
+                                        position: "relative",
+                                        width: "100%",
+                                    }, children: walletInfo.icon })) : (jsx(Fragment, { children: walletInfo.icon })), smallLogo: walletInfo.iconShouldShrink, loading: status === states.CONNECTING, unavailable: status === states.UNAVAILABLE })) : (jsx(SquircleSpinner, { logo: status === states.UNAVAILABLE ? (jsx("div", { style: {
+                                        transform: "scale(1.14)",
+                                        position: "relative",
+                                        width: "100%",
+                                    }, children: walletInfo.icon })) : (jsx(Fragment, { children: walletInfo.icon })), loading: status === states.CONNECTING }))] }) }), jsx(ModalContentContainer, { children: jsxs(AnimatePresence, { initial: false, children: [status === states.FAILED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsxs(ModalContent, { children: [jsxs(ModalH1, { "$error": true, children: [jsx(AlertIcon, {}), locales.injectionScreen_failed_h1] }), jsx(ModalBody, { children: locales.injectionScreen_failed_p })] }) }, states.FAILED)), status === states.REJECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsxs(ModalContent, { style: { paddingBottom: 28 }, children: [jsx(ModalH1, { children: locales.injectionScreen_rejected_h1 }), jsx(ModalBody, { children: locales.injectionScreen_rejected_p })] }) }, states.REJECTED)), (status === states.CONNECTING || status === states.EXPIRING) && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsxs(ModalContent, { style: { paddingBottom: 28 }, children: [jsx(ModalH1, { children: wallet.connector?.id === "injected"
+                                                ? locales.injectionScreen_connecting_injected_h1
+                                                : locales.injectionScreen_connecting_h1 }), jsx(ModalBody, { children: wallet.connector?.id === "injected"
+                                                ? locales.injectionScreen_connecting_injected_p
+                                                : locales.injectionScreen_connecting_p }), jsxs(Button, { icon: jsx(ExternalLinkIcon, {}), onClick: runConnect, children: ["Connect ", walletInfo.name] })] }) }, states.CONNECTING)), status === states.CONNECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsxs(ModalContent, { children: [jsxs(ModalH1, { "$valid": true, children: [jsx(TickIcon, {}), " ", locales.injectionScreen_connected_h1] }), jsx(ModalBody, { children: locales.injectionScreen_connected_p })] }) }, states.CONNECTED)), status === states.NOTCONNECTED && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsxs(ModalContent, { children: [jsx(ModalH1, { children: locales.injectionScreen_notconnected_h1 }), jsx(ModalBody, { children: locales.injectionScreen_notconnected_p })] }) }, states.NOTCONNECTED)), status === states.UNAVAILABLE && (jsx(Content, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: !extensionUrl ? (jsxs(Fragment, { children: [jsxs(ModalContent, { style: { paddingBottom: 12 }, children: [jsx(ModalH1, { children: locales.injectionScreen_unavailable_h1 }), jsx(ModalBody, { children: locales.injectionScreen_unavailable_p })] }), !wallet.isInstalled && suggestedExtension && (jsxs(Button, { href: suggestedExtension?.url, icon: jsx(BrowserIcon, { browser: suggestedExtension?.name }), children: ["Install on ", suggestedExtension?.label] }))] })) : (jsxs(Fragment, { children: [jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { children: locales.injectionScreen_install_h1 }), jsx(ModalBody, { children: locales.injectionScreen_install_p })] }), !wallet.isInstalled && extensionUrl && (jsx(Button, { href: extensionUrl, icon: jsx(BrowserIcon, {}), children: locales.installTheExtension }))] })) }, states.UNAVAILABLE))] }) })] }) }));
+};
+
+export { ConnectWithInjector as default, states };
+//# sourceMappingURL=index.js.map

package/build/src/components/DaimoPayModal/ConnectWithInjector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/DaimoPayModal/ConnectWithInjector/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/build/src/components/DaimoPayModal/ConnectWithInjector/styles.js

@@ -0,0 +1,133 @@
+import { motion } from 'framer-motion';
+import { keyframes, css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+import { ModalContent } from '../../Common/Modal/styles.js';
+
+const Content = styled(motion.div) `
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  position: relative;
+  left: 0;
+  right: 0;
+  ${ModalContent} {
+    padding: 0 8px 32px;
+    gap: 12px;
+  }
+`;
+const dist = 2;
+const shakeKeyframes = keyframes `
+  0%{ transform:none; }
+  25%{ transform:translateX(${dist}px); }
+  50%{ transform:translateX(-${dist}px); }
+  75%{ transform:translateX(${dist}px); }
+  100%{ transform:none; }
+`;
+const outlineKeyframes = keyframes `
+  0%{ opacity:1; }
+  100%{ opacity:0; }
+`;
+const Container = styled(motion.div) `
+  /*
+  background: var(
+    --ck-body-background
+  ); // To stop the overlay issue during transition for the squircle spinner
+  */
+`;
+const ConnectingContainer = styled(motion.div) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 10px auto 16px;
+  height: 120px;
+  //transform: scale(1.001); // fixes shifting issue between states
+`;
+const ConnectingAnimation = styled(motion.div) `
+  user-select: none;
+  position: relative;
+  --spinner-error-opacity: 0;
+  &:before {
+    content: "";
+    position: absolute;
+    inset: 1px;
+    opacity: 0;
+    background: var(--ck-body-color-danger);
+    ${(props) => props.$circle &&
+    css `
+        inset: -5px;
+        border-radius: 50%;
+        background: none;
+        box-shadow: inset 0 0 0 3.5px var(--ck-body-color-danger);
+      `}
+  }
+  ${(props) => props.$shake &&
+    css `
+      animation: ${shakeKeyframes} 220ms ease-out both;
+      &:before {
+        animation: ${outlineKeyframes} 220ms ease-out 750ms both;
+      }
+    `}
+`;
+const RetryButton = styled(motion.button) `
+  z-index: 5;
+  appearance: none;
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 16px;
+  cursor: pointer;
+  overflow: hidden;
+  background: none;
+
+  color: var(--ck-body-background);
+  transition: color 200ms ease;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
+
+  &:before {
+    z-index: 3;
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    transition: opacity 200ms ease;
+    background: var(--ck-body-color);
+  }
+
+  &:hover:before {
+    opacity: 0.1;
+  }
+`;
+const RetryIconContainer = styled(motion.div) `
+  position: absolute;
+  inset: 0;
+
+  &:before {
+    z-index: 1;
+    content: "";
+    position: absolute;
+    inset: 3px;
+    border-radius: 16px;
+    background: conic-gradient(
+      from 90deg,
+      currentColor 10%,
+      var(--ck-body-color) 80%
+    );
+  }
+
+  svg {
+    z-index: 2;
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+`;
+
+export { ConnectingAnimation, ConnectingContainer, Container, Content, RetryButton, RetryIconContainer };
+//# sourceMappingURL=styles.js.map

package/build/src/components/DaimoPayModal/ConnectWithInjector/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/DaimoPayModal/ConnectWithInjector/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMa,MAAA,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;IAOrC,YAAY,CAAA;;;;EAId;AAEF,MAAM,IAAI,GAAG,CAAC,CAAC;AACf,MAAM,cAAc,GAAG,SAAS,CAAA,CAAA;;8BAEF,IAAI,CAAA;+BACH,IAAI,CAAA;8BACL,IAAI,CAAA;;CAEjC,CAAC;AACF,MAAM,gBAAgB,GAAG,SAAS,CAAA,CAAA;;;CAGjC,CAAC;AACW,MAAA,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;EAMzC;AACW,MAAA,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;EAOnD;AACW,MAAA,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAGnD,CAAA;;;;;;;;;;AAUI,IAAA,EAAA,CAAC,KAAK,KACN,KAAK,CAAC,OAAO;AACb,IAAA,GAAG,CAAA,CAAA;;;;;AAKF,MAAA,CAAA,CAAA;;AAEH,EAAA,EAAA,CAAC,KAAK,KACN,KAAK,CAAC,MAAM;AACZ,IAAA,GAAG,CAAA,CAAA;mBACY,cAAc,CAAA;;qBAEZ,gBAAgB,CAAA;;AAEhC,IAAA,CAAA,CAAA;EACH;AAEW,MAAA,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkC9C;AACW,MAAA,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/DaimoPayModal/ConnectWithQRCode.js

@@ -0,0 +1,47 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { ROUTES } from '../../constants/routes.js';
+import { usePayContext } from '../../hooks/usePayContext.js';
+import { OrDivider } from '../Common/Modal/index.js';
+import { PageContent, ModalContent } from '../Common/Modal/styles.js';
+import ScanIconWithLogos from '../../assets/ScanIconWithLogos.js';
+import { useDaimoPay } from '../../hooks/useDaimoPay.js';
+import useLocales from '../../hooks/useLocales.js';
+import Button from '../Common/Button/index.js';
+import '../Common/CopyToClipboard/index.js';
+import CustomQRCode from '../Common/CustomQRCode/index.js';
+import { writeDaimoPayOrderID } from '@daimo/pay-common';
+import { MobileWithLogos } from '../../assets/MobileWithLogos.js';
+import { useWallet } from '../../wallets/useWallets.js';
+
+const ConnectWithQRCode = () => {
+    const context = usePayContext();
+    const { pendingConnectorId } = context;
+    const wallet = useWallet(pendingConnectorId ?? "");
+    const pay = useDaimoPay();
+    const locales = useLocales({
+        CONNECTORNAME: wallet?.name,
+    });
+    if (!wallet)
+        return jsxs(Fragment, { children: ["Wallet not found ", pendingConnectorId] });
+    const downloads = wallet?.downloadUrls;
+    const hasApps = downloads && Object.keys(downloads).length !== 0;
+    const showAdditionalOptions = false;
+    const payId = pay.order ? writeDaimoPayOrderID(pay.order.id) : "";
+    return (jsxs(PageContent, { children: [jsxs(ModalContent, { style: { paddingBottom: 8, gap: 14 }, children: [jsx(CustomQRCode, { value: `https://pay.daimo.com/pay?id=${payId}`, image: jsx("div", { style: {
+                                width: "100%",
+                                height: "100%",
+                                borderRadius: "22.5%",
+                                overflow: "hidden",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                backgroundColor: "var(--ck-body-background)",
+                                transform: "scale(1.3) translateY(5%)",
+                                transformOrigin: "center center",
+                            }, children: jsx(MobileWithLogos, {}) }), tooltipMessage: wallet?.id === "Mobile Wallets" ? (jsxs(Fragment, { children: [jsx(ScanIconWithLogos, {}), jsxs("span", { children: ["Finish the payment ", jsx("br", {}), "on your mobile phone"] })] })) : (jsxs(Fragment, { children: [jsx(ScanIconWithLogos, { logo: wallet?.icon }), jsx("span", { children: locales.scanScreen_tooltip_default })] })) }), (hasApps && jsx(OrDivider, { children: locales.dontHaveTheApp }))] }), showAdditionalOptions , hasApps && (jsx(Fragment, { children: jsx(Button, { onClick: () => {
+                        context.setRoute(ROUTES.DOWNLOAD);
+                    }, download: true, children: locales.getWalletName }) }))] }));
+};
+
+export { ConnectWithQRCode as default };
+//# sourceMappingURL=ConnectWithQRCode.js.map

package/build/src/components/DaimoPayModal/ConnectWithQRCode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectWithQRCode.js","sources":["../../../../src/components/DaimoPayModal/ConnectWithQRCode.tsx"],"sourcesContent":[null],"names":["_jsxs","_Fragment","_jsx"],"mappings":"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"}

package/build/src/components/DaimoPayModal/index.js

@@ -0,0 +1,251 @@
+import { jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { useAccount } from 'wagmi';
+import { ROUTES } from '../../constants/routes.js';
+import { usePayContext } from '../../hooks/usePayContext.js';
+import Modal from '../Common/Modal/index.js';
+import About from '../Pages/About/index.js';
+import Wallets from '../Pages/Connectors/index.js';
+import DownloadApp from '../Pages/DownloadApp/index.js';
+import MobileConnectors from '../Pages/MobileConnectors/index.js';
+import Introduction from '../Pages/Onboarding/index.js';
+import SwitchNetworks from '../Pages/SwitchNetworks/index.js';
+import ConnectUsing from './ConnectUsing.js';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { getAppName } from '../../defaultConfig.js';
+import { useChainIsSupported } from '../../hooks/useChainIsSupported.js';
+import { DaimoPayThemeProvider } from '../DaimoPayThemeProvider/DaimoPayThemeProvider.js';
+import Confirmation from '../Pages/Confirmation/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 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 SelectZKP from '../Pages/SelectZKP/index.js';
+import ConnectSolana$1 from '../Pages/Solana/ConnectorSolana/index.js';
+import ConnectSolana from '../Pages/Solana/ConnectSolana/index.js';
+import PayWithSolanaToken from '../Pages/Solana/PayWithSolanaToken/index.js';
+import SelectSolanaAmount from '../Pages/Solana/SelectSolanaAmount/index.js';
+import WaitingDepositAddress from '../Pages/WaitingDepositAddress/index.js';
+import WaitingExternal from '../Pages/WaitingExternal/index.js';
+import WaitingWallet from '../Pages/WaitingWallet/index.js';
+
+const DaimoPayModal = ({ mode, theme, customTheme, lang, }) => {
+    const context = usePayContext();
+    const { setMode, setTheme, setCustomTheme, setLang } = context;
+    const paymentState = context.paymentState;
+    const { generatePreviewOrder, isDepositFlow, showSolanaPaymentMethod, setPaymentWaitingMessage, setSelectedExternalOption, setSelectedTokenOption, setSelectedSolanaTokenOption, setSelectedDepositAddressOption, setSelectedWallet, } = paymentState;
+    const { isConnected: isEthConnected, connector, chain, address, } = useAccount();
+    const { connected: isSolanaConnected } = useWallet();
+    const chainIsSupported = useChainIsSupported(chain?.id);
+    //if chain is unsupported we enforce a "switch chain" prompt
+    const closeable = !(context.options?.enforceSupportedChains &&
+        isEthConnected &&
+        !chainIsSupported);
+    const showBackButton = closeable &&
+        context.route !== ROUTES.SELECT_METHOD &&
+        context.route !== ROUTES.CONFIRMATION &&
+        context.route !== ROUTES.SELECT_TOKEN;
+    const onBack = () => {
+        const meta = { event: "click-back" };
+        if (context.route === ROUTES.DOWNLOAD) {
+            context.setRoute(ROUTES.CONNECT, meta);
+        }
+        else if (context.route === ROUTES.CONNECTORS) {
+            context.setRoute(ROUTES.SELECT_METHOD, meta);
+        }
+        else if (context.route === ROUTES.SELECT_AMOUNT) {
+            setSelectedTokenOption(undefined);
+            context.setRoute(ROUTES.SELECT_TOKEN, meta);
+        }
+        else if (context.route === ROUTES.SELECT_EXTERNAL_AMOUNT) {
+            setSelectedExternalOption(undefined);
+            context.setRoute(ROUTES.SELECT_METHOD, meta);
+        }
+        else if (context.route === ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT) {
+            setSelectedDepositAddressOption(undefined);
+            context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN, meta);
+        }
+        else if (context.route === ROUTES.SELECT_ZKP2P) {
+            context.setRoute(ROUTES.SELECT_METHOD, meta);
+        }
+        else if (context.route === ROUTES.WAITING_EXTERNAL) {
+            setPaymentWaitingMessage(undefined);
+            if (isDepositFlow) {
+                generatePreviewOrder();
+                context.setRoute(ROUTES.SELECT_EXTERNAL_AMOUNT, meta);
+            }
+            else {
+                setSelectedExternalOption(undefined);
+                context.setRoute(ROUTES.SELECT_METHOD, meta);
+            }
+        }
+        else if (context.route === ROUTES.PAY_WITH_TOKEN) {
+            if (isDepositFlow) {
+                generatePreviewOrder();
+                context.setRoute(ROUTES.SELECT_AMOUNT, meta);
+            }
+            else {
+                setSelectedTokenOption(undefined);
+                context.setRoute(ROUTES.SELECT_TOKEN, meta);
+            }
+        }
+        else if (context.route === ROUTES.ONBOARDING) {
+            context.setRoute(ROUTES.CONNECTORS, meta);
+        }
+        else if (context.route === ROUTES.WAITING_DEPOSIT_ADDRESS) {
+            if (isDepositFlow) {
+                generatePreviewOrder();
+                context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT, meta);
+            }
+            else {
+                setSelectedDepositAddressOption(undefined);
+                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(undefined);
+                context.setRoute(ROUTES.SELECT_METHOD, meta);
+            }
+        }
+        else if (context.route === ROUTES.SOLANA_SELECT_AMOUNT) {
+            setSelectedSolanaTokenOption(undefined);
+            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(undefined);
+                context.setRoute(ROUTES.SELECT_TOKEN, meta);
+            }
+        }
+        else {
+            context.setRoute(ROUTES.SELECT_METHOD, meta);
+        }
+    };
+    const pages = {
+        [ROUTES.SELECT_METHOD]: jsx(SelectMethod, {}),
+        [ROUTES.SELECT_TOKEN]: jsx(SelectToken, {}),
+        [ROUTES.SELECT_AMOUNT]: jsx(SelectAmount, {}),
+        [ROUTES.SELECT_EXTERNAL_AMOUNT]: jsx(SelectExternalAmount, {}),
+        [ROUTES.SELECT_DEPOSIT_ADDRESS_AMOUNT]: jsx(SelectDepositAddressAmount, {}),
+        [ROUTES.SELECT_WALLET_AMOUNT]: jsx(SelectWalletAmount, {}),
+        [ROUTES.WAITING_EXTERNAL]: jsx(WaitingExternal, {}),
+        [ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN]: jsx(SelectDepositAddressChain, {}),
+        [ROUTES.WAITING_DEPOSIT_ADDRESS]: jsx(WaitingDepositAddress, {}),
+        [ROUTES.SELECT_ZKP2P]: jsx(SelectZKP, {}),
+        [ROUTES.WAITING_WALLET]: jsx(WaitingWallet, {}),
+        [ROUTES.CONFIRMATION]: jsx(Confirmation, {}),
+        [ROUTES.PAY_WITH_TOKEN]: jsx(PayWithToken, {}),
+        [ROUTES.SOLANA_CONNECT]: jsx(ConnectSolana, {}),
+        [ROUTES.SOLANA_CONNECTOR]: jsx(ConnectSolana$1, {}),
+        [ROUTES.SOLANA_SELECT_AMOUNT]: jsx(SelectSolanaAmount, {}),
+        [ROUTES.SOLANA_PAY_WITH_TOKEN]: jsx(PayWithSolanaToken, {}),
+        // Unused routes. Kept to minimize connectkit merge conflicts.
+        [ROUTES.ONBOARDING]: jsx(Introduction, {}),
+        [ROUTES.ABOUT]: jsx(About, {}),
+        [ROUTES.DOWNLOAD]: jsx(DownloadApp, {}),
+        [ROUTES.CONNECTORS]: jsx(Wallets, {}),
+        [ROUTES.MOBILECONNECTORS]: jsx(MobileConnectors, {}),
+        [ROUTES.CONNECT]: jsx(ConnectUsing, {}),
+        [ROUTES.SWITCHNETWORKS]: jsx(SwitchNetworks, {}),
+    };
+    function hide() {
+        if (isDepositFlow) {
+            generatePreviewOrder();
+        }
+        context.setOpen(false, { event: "click-close" });
+    }
+    // If the user has a wallet already connected upon opening the modal, go
+    // straight to the select token screen
+    useEffect(() => {
+        if (!context.open)
+            return;
+        if (context.route !== ROUTES.SELECT_METHOD)
+            return;
+        // Skip to token selection if exactly one wallet is connected. If both
+        // wallets are connected, stay on the SELECT_METHOD screen to allow the
+        // user to select which wallet to use
+        if (isEthConnected && !isSolanaConnected) {
+            paymentState.setTokenMode("evm");
+            context.setRoute(ROUTES.SELECT_TOKEN, {
+                event: "eth_connected_on_open",
+                walletId: connector?.id,
+                chainId: chain?.id,
+                address,
+            });
+        }
+        else if (isSolanaConnected &&
+            !isEthConnected &&
+            showSolanaPaymentMethod) {
+            paymentState.setTokenMode("solana");
+            context.setRoute(ROUTES.SELECT_TOKEN, {
+                event: "solana_connected_on_open",
+            });
+        }
+        // Don't include context.route in the dependency array otherwise the user
+        // can't go back from the select token screen to the select method screen
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        context.open,
+        paymentState.walletPaymentOptions.options,
+        paymentState.solanaPaymentOptions.options,
+        showSolanaPaymentMethod,
+        address,
+        chain?.id,
+        connector?.id,
+    ]);
+    // If we're on the connect page and the user successfully connects their
+    // wallet, go to the select token page
+    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,
+                });
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isEthConnected, context.route, connector?.id, chain?.id, address]);
+    useEffect(() => setMode(mode), [mode, setMode]);
+    useEffect(() => setTheme(theme), [theme, setTheme]);
+    useEffect(() => setCustomTheme(customTheme), [customTheme, setCustomTheme]);
+    useEffect(() => setLang(lang), [lang, setLang]);
+    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 { }
+            //if (appIcon) document.head.removeChild(icon);
+        };
+    }, [context.open]);
+    return (jsx(DaimoPayThemeProvider, { theme: theme, customTheme: customTheme, mode: mode, children: jsx(Modal, { open: context.open, pages: pages, pageId: context.route, onClose: closeable ? hide : undefined, onInfo: undefined, onBack: showBackButton ? onBack : undefined }) }));
+};
+
+export { DaimoPayModal };
+//# sourceMappingURL=index.js.map