@daimo/pay 0.3.21 → 1.0.0

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

@@ -0,0 +1,202 @@
+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, TickIcon } from '../../../assets/icons.js';
+import { useConnect } from '../../../hooks/useConnect.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { detectBrowser, isWalletConnectConnector } from '../../../utils/index.js';
+import { useWallet } from '../../../wallets/useWallets.js';
+import BrowserIcon from '../../Common/BrowserIcon/index.js';
+import { usePayContext } from '../../DaimoPay.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, connector: c } = usePayContext();
+    const id = c.id;
+    const wallet = useWallet(id);
+    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 expiryDefault = 9; // Starting at 10 causes layout shifting, better to start at 9
+    useState(expiryDefault);
+    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);
+        }
+    };
+    let connectTimeout;
+    useEffect(() => {
+        if (status === states.UNAVAILABLE)
+            return;
+        // UX: Give user time to see the UI before opening the extension
+        connectTimeout = setTimeout(runConnect, 600);
+        return () => {
+            clearTimeout(connectTimeout);
+        };
+    }, []);
+    /** 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." }) })] }) }));
+    }
+    // TODO: Make this more generic
+    if (isWalletConnectConnector(wallet?.connector.id)) {
+        return (jsx(PageContent, { children: jsxs(Container, { children: [jsx(ModalHeading, { children: "Invalid State" }), jsx(ModalContent, { children: jsx(Alert, { children: "WalletConnect does not have an injection flow. 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 })] }) }, 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":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,75 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { usePayContext, ROUTES } from '../DaimoPay.js';
+import { useWalletConnectModal } from '../../hooks/useWalletConnectModal.js';
+import { detectBrowser, isWalletConnectConnector } from '../../utils/index.js';
+import { OrDivider } from '../Common/Modal/index.js';
+import { PageContent, ModalContent } from '../Common/Modal/styles.js';
+import ScanIconWithLogos from '../../assets/ScanIconWithLogos.js';
+import { ExternalLinkIcon } from '../../assets/icons.js';
+import useLocales from '../../hooks/useLocales.js';
+import Button from '../Common/Button/index.js';
+import CopyToClipboard from '../Common/CopyToClipboard/index.js';
+import CustomQRCode from '../Common/CustomQRCode/index.js';
+import { useWallet } from '../../wallets/useWallets.js';
+import { useWeb3 } from '../contexts/web3/index.js';
+
+const ConnectWithQRCode = ({ switchConnectMethod }) => {
+    const context = usePayContext();
+    const id = context.connector.id;
+    const wallet = useWallet(context.connector.id);
+    const { open: openW3M, isOpen: isOpenW3M } = useWalletConnectModal();
+    const { connect: { getUri }, } = useWeb3();
+    const wcUri = getUri(id);
+    const uri = wcUri
+        ? (wallet?.getWalletConnectDeeplink?.(wcUri) ?? wcUri)
+        : undefined;
+    const locales = useLocales({
+        CONNECTORNAME: wallet?.name,
+    });
+    if (!wallet)
+        return jsxs(Fragment, { children: ["Wallet not found ", context.connector.id] });
+    const downloads = wallet?.downloadUrls;
+    const extensions = {
+        chrome: downloads?.chrome,
+        firefox: downloads?.firefox,
+        brave: downloads?.brave,
+        edge: downloads?.edge,
+        safari: downloads?.safari,
+    };
+    detectBrowser();
+    const hasApps = downloads && Object.keys(downloads).length !== 0;
+    extensions
+        ? {
+            name: Object.keys(extensions)[0],
+            label: Object.keys(extensions)[0]?.charAt(0).toUpperCase() +
+                Object.keys(extensions)[0]?.slice(1), // Capitalise first letter, but this might be better suited as a lookup table
+            url: extensions[Object.keys(extensions)[0]],
+        }
+        : undefined;
+    const showAdditionalOptions = isWalletConnectConnector(id);
+    return (jsxs(PageContent, { children: [jsxs(ModalContent, { style: { paddingBottom: 8, gap: 14 }, children: [jsx(CustomQRCode, { value: uri, image: wallet?.icon, tooltipMessage: isWalletConnectConnector(id) ? (jsxs(Fragment, { children: [jsx(ScanIconWithLogos, {}), jsx("span", { children: locales.scanScreen_tooltip_walletConnect })] })) : (jsxs(Fragment, { children: [jsx(ScanIconWithLogos, { logo: wallet?.icon }), jsx("span", { children: locales.scanScreen_tooltip_default })] })) }), showAdditionalOptions ? (jsx(OrDivider, {})) : (hasApps && jsx(OrDivider, { children: locales.dontHaveTheApp }))] }), showAdditionalOptions && ( // for walletConnect
+            jsxs("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 14,
+                }, children: [context.options?.walletConnectCTA !== "modal" && (jsx(CopyToClipboard, { variant: "button", string: uri, children: context.options?.walletConnectCTA === "link"
+                            ? locales.copyToClipboard
+                            : locales.copyCode })), context.options?.walletConnectCTA !== "link" && (jsx(Button, { icon: jsx(ExternalLinkIcon, {}), onClick: openW3M, disabled: isOpenW3M, waiting: isOpenW3M, children: context.options?.walletConnectCTA === "modal"
+                            ? locales.useWalletConnectModal
+                            : locales.useModal }))] })), hasApps && (jsx(Fragment, { children: jsx(Button, { onClick: () => {
+                        context.setRoute(ROUTES.DOWNLOAD);
+                    }, 
+                    /*
+                    icon={
+                      <div style={{ background: connectorInfo?.icon }}>
+                        {connectorInfo?.logos.default}
+                      </div>
+                    }
+                    roundedIcon
+                    */
+                    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":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,140 @@
+import { jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { useAccount } from 'wagmi';
+import Modal from '../Common/Modal/index.js';
+import { usePayContext, ROUTES } from '../DaimoPay.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 { 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 SelectDepositAddressChain from '../Pages/SelectDepositAddressChain/index.js';
+import SelectMethod from '../Pages/SelectMethod/index.js';
+import SelectToken from '../Pages/SelectToken/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 SelectSolanaToken from '../Pages/Solana/SelectSolanaToken/index.js';
+import WaitingDepositAddress from '../Pages/WaitingDepositAddress/index.js';
+import WaitingOther from '../Pages/WaitingOther/index.js';
+
+const customThemeDefault = {};
+const DaimoPayModal = ({ mode = "auto", theme = "auto", customTheme = customThemeDefault, lang = "en-US", }) => {
+    const context = usePayContext();
+    const { setSelectedExternalOption, setSelectedTokenOption, setSelectedDepositAddressOption, setSelectedSolanaTokenOption, } = context.paymentState;
+    const { isConnected, chain } = useAccount();
+    const chainIsSupported = useChainIsSupported(chain?.id);
+    //if chain is unsupported we enforce a "switch chain" prompt
+    const closeable = !(context.options?.enforceSupportedChains &&
+        isConnected &&
+        !chainIsSupported);
+    const showBackButton = closeable &&
+        context.route !== ROUTES.SELECT_METHOD &&
+        context.route !== ROUTES.CONFIRMATION;
+    const onBack = () => {
+        if (context.route === ROUTES.DOWNLOAD) {
+            context.setRoute(ROUTES.CONNECT);
+        }
+        else if (context.route === ROUTES.CONNECTORS) {
+            context.setRoute(ROUTES.SELECT_METHOD);
+        }
+        else if (context.route === ROUTES.SELECT_TOKEN) {
+            context.setRoute(ROUTES.SELECT_METHOD);
+        }
+        else if (context.route === ROUTES.WAITING_OTHER) {
+            setSelectedExternalOption(undefined);
+            context.setRoute(ROUTES.SELECT_METHOD);
+        }
+        else if (context.route === ROUTES.PAY_WITH_TOKEN) {
+            setSelectedTokenOption(undefined);
+            context.setRoute(ROUTES.SELECT_TOKEN);
+        }
+        else if (context.route === ROUTES.ONBOARDING) {
+            context.setRoute(ROUTES.CONNECTORS);
+        }
+        else if (context.route === ROUTES.WAITING_DEPOSIT_ADDRESS) {
+            setSelectedDepositAddressOption(undefined);
+            context.setRoute(ROUTES.SELECT_DEPOSIT_ADDRESS_CHAIN);
+        }
+        else if (context.route === ROUTES.SOLANA_PAY_WITH_TOKEN) {
+            setSelectedSolanaTokenOption(undefined);
+            context.setRoute(ROUTES.SOLANA_SELECT_TOKEN);
+        }
+        else {
+            context.setRoute(ROUTES.SELECT_METHOD);
+        }
+    };
+    const pages = {
+        daimoPaySelectMethod: jsx(SelectMethod, {}),
+        daimoPaySelectToken: jsx(SelectToken, {}),
+        daimoPayWaitingOther: jsx(WaitingOther, {}),
+        daimoPaySelectDepositAddressChain: jsx(SelectDepositAddressChain, {}),
+        daimoPayWaitingDepositAddress: jsx(WaitingDepositAddress, {}),
+        daimoPayConfirmation: jsx(Confirmation, {}),
+        daimoPayPayWithToken: jsx(PayWithToken, {}),
+        daimoPaySolanaConnect: jsx(ConnectSolana, {}),
+        daimoPaySolanaConnector: jsx(ConnectSolana$1, {}),
+        daimoPaySolanaSelectToken: jsx(SelectSolanaToken, {}),
+        daimoPaySolanaPayWithToken: jsx(PayWithSolanaToken, {}),
+        onboarding: jsx(Introduction, {}),
+        about: jsx(About, {}),
+        download: jsx(DownloadApp, {}),
+        connectors: jsx(Wallets, {}),
+        mobileConnectors: jsx(MobileConnectors, {}),
+        connect: jsx(ConnectUsing, {}),
+        switchNetworks: jsx(SwitchNetworks, {}),
+    };
+    function hide() {
+        context.setOpen(false);
+    }
+    useEffect(() => {
+        if (context.route === ROUTES.CONNECT ||
+            context.route === ROUTES.CONNECTORS ||
+            context.route === ROUTES.MOBILECONNECTORS) {
+            if (isConnected) {
+                context.setRoute(ROUTES.SELECT_TOKEN);
+            }
+        }
+    }, [isConnected, context.route]);
+    useEffect(() => context.setMode(mode), [mode]);
+    useEffect(() => context.setTheme(theme), [theme]);
+    useEffect(() => context.setCustomTheme(customTheme), [customTheme]);
+    useEffect(() => context.setLang(lang), [lang]);
+    /* When pulling data into WalletConnect, it prioritises the og:title tag over the title tag */
+    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);
+        /*
+        // TODO:  When pulling data into WalletConnect, figure out which icon gets used and replace with appIcon if available
+        const appIcon = getAppIcon();
+        const icon = document.createElement('link');
+        if (appIcon) {
+          icon.setAttribute('rel', 'icon');
+          icon.setAttribute('href', appIcon);
+          document.head.prepend(icon);
+        }*/
+        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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/src/components/DaimoPayThemeProvider/DaimoPayThemeProvider.js

@@ -0,0 +1,21 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import React, { createContext, createElement } from 'react';
+
+const Context = createContext(null);
+const DaimoPayThemeProvider = ({ children, theme = "auto", mode = "auto", customTheme, }) => {
+    const value = {
+        theme,
+        mode,
+        customTheme,
+    };
+    return createElement(Context.Provider, { value }, jsx(Fragment, { children: children }));
+};
+const useThemeContext = () => {
+    const context = React.useContext(Context);
+    if (!context)
+        throw Error("DaimoPayThemeProvider must be inside a Provider.");
+    return context;
+};
+
+export { DaimoPayThemeProvider, useThemeContext };
+//# sourceMappingURL=DaimoPayThemeProvider.js.map

package/build/src/components/DaimoPayThemeProvider/DaimoPayThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DaimoPayThemeProvider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}