@daimo/pay 0.3.21 → 1.0.0

package/build/src/components/DaimoPay.js

@@ -0,0 +1,232 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { DaimoPayOrderMode, DaimoPayOrderStatusSource, DaimoPayIntentStatus, retryBackoff, debugJson } from '@daimo/common';
+import { Buffer } from 'buffer';
+import React, { createContext, useState, useEffect, useMemo, createElement } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { WagmiContext, useAccount } from 'wagmi';
+import { REQUIRED_CHAINS } from '../defaultConfig.js';
+import { useChainIsSupported } from '../hooks/useChainIsSupported.js';
+import { useChains } from '../hooks/useChains.js';
+import { useConnectCallback } from '../hooks/useConnectCallback.js';
+import { useThemeFont } from '../hooks/useGoogleFont.js';
+import { usePaymentState } from '../hooks/usePaymentState.js';
+import defaultTheme from '../styles/defaultTheme.js';
+import { createTrpcClient } from '../utils/trpc.js';
+import { DaimoPayModal } from './DaimoPayModal/index.js';
+import { SolanaContextProvider } from './contexts/solana/index.js';
+import { Web3ContextProvider } from './contexts/web3/index.js';
+
+var ROUTES;
+(function (ROUTES) {
+    ROUTES["SELECT_METHOD"] = "daimoPaySelectMethod";
+    ROUTES["SELECT_TOKEN"] = "daimoPaySelectToken";
+    ROUTES["WAITING_OTHER"] = "daimoPayWaitingOther";
+    ROUTES["SELECT_DEPOSIT_ADDRESS_CHAIN"] = "daimoPaySelectDepositAddressChain";
+    ROUTES["WAITING_DEPOSIT_ADDRESS"] = "daimoPayWaitingDepositAddress";
+    ROUTES["PAY_WITH_TOKEN"] = "daimoPayPayWithToken";
+    ROUTES["CONFIRMATION"] = "daimoPayConfirmation";
+    ROUTES["SOLANA_CONNECT"] = "daimoPaySolanaConnect";
+    ROUTES["SOLANA_CONNECTOR"] = "daimoPaySolanaConnector";
+    ROUTES["SOLANA_SELECT_TOKEN"] = "daimoPaySolanaSelectToken";
+    ROUTES["SOLANA_PAY_WITH_TOKEN"] = "daimoPaySolanaPayWithToken";
+    // Unused routes. Kept to minimize connectkit merge conflicts.
+    ROUTES["ONBOARDING"] = "onboarding";
+    ROUTES["ABOUT"] = "about";
+    ROUTES["CONNECTORS"] = "connectors";
+    ROUTES["MOBILECONNECTORS"] = "mobileConnectors";
+    ROUTES["CONNECT"] = "connect";
+    ROUTES["DOWNLOAD"] = "download";
+    ROUTES["SWITCHNETWORKS"] = "switchNetworks";
+})(ROUTES || (ROUTES = {}));
+/** Meant for internal use. This will be non-exported in a future SDK version. */
+const Context = createContext(null);
+const DaimoPayProviderWithoutSolana = ({ children, theme = "auto", mode = "auto", customTheme, options, onConnect, onDisconnect, debugMode = false, payApiUrl = "https://pay-api.daimo.xyz", }) => {
+    // DaimoPayProvider must be within a WagmiProvider
+    if (!React.useContext(WagmiContext)) {
+        throw Error("DaimoPayProvider must be within a WagmiProvider");
+    }
+    // Only allow for mounting DaimoPayProvider once, so we avoid weird global
+    // state collisions.
+    if (React.useContext(Context)) {
+        throw new Error("Multiple, nested usages of DaimoPayProvider detected. Please use only one.");
+    }
+    useConnectCallback({
+        onConnect,
+        onDisconnect,
+    });
+    const chains = useChains();
+    for (const requiredChain of REQUIRED_CHAINS) {
+        if (!chains.some((c) => c.id === requiredChain.id)) {
+            throw new Error(`Daimo Pay requires chains ${REQUIRED_CHAINS.map((c) => c.name).join(", ")}. Use \`getDefaultConfig\` to automatically configure required chains.`);
+        }
+    }
+    // Default config options
+    const defaultOptions = {
+        language: "en-US",
+        hideBalance: false,
+        hideTooltips: false,
+        hideQuestionMarkCTA: false,
+        hideNoWalletCTA: false,
+        walletConnectCTA: "link",
+        hideRecentBadge: false,
+        avoidLayoutShift: true,
+        embedGoogleFonts: false,
+        truncateLongENSAddress: true,
+        walletConnectName: undefined,
+        reducedMotion: false,
+        disclaimer: null,
+        bufferPolyfill: true,
+        customAvatar: undefined,
+        initialChainId: undefined,
+        enforceSupportedChains: false,
+        ethereumOnboardingUrl: undefined,
+        walletOnboardingUrl: undefined,
+        overlayBlur: undefined,
+    };
+    const opts = Object.assign({}, defaultOptions, options);
+    if (typeof window !== "undefined") {
+        // Buffer Polyfill, needed for bundlers that don't provide Node polyfills (e.g CRA, Vite, etc.)
+        if (opts.bufferPolyfill)
+            window.Buffer = window.Buffer ?? Buffer;
+        // Some bundlers may need `global` and `process.env` polyfills as well
+        // Not implemented here to avoid unexpected behaviors, but leaving example here for future reference
+        /*
+         * window.global = window.global ?? window;
+         * window.process = window.process ?? { env: {} };
+         */
+    }
+    const [ckTheme, setTheme] = useState(theme);
+    const [ckMode, setMode] = useState(mode);
+    const [ckCustomTheme, setCustomTheme] = useState(customTheme ?? {});
+    const [ckLang, setLang] = useState("en-US");
+    const [open, setOpen] = useState(false);
+    const [connector, setConnector] = useState({
+        id: "",
+    });
+    const [solanaConnector, setSolanaConnector] = useState();
+    const [route, setRoute] = useState(ROUTES.SELECT_METHOD);
+    const [errorMessage, setErrorMessage] = useState("");
+    const [resize, onResize] = useState(0);
+    // Include Google Font that is needed for a themes
+    if (opts.embedGoogleFonts)
+        useThemeFont(theme);
+    // Other Configuration
+    useEffect(() => setTheme(theme), [theme]);
+    useEffect(() => setLang(opts.language || "en-US"), [opts.language]);
+    useEffect(() => setErrorMessage(null), [route, open]);
+    // Check if chain is supported, elsewise redirect to switches page
+    const { chain, isConnected } = useAccount();
+    const isChainSupported = useChainIsSupported(chain?.id);
+    useEffect(() => {
+        if (isConnected && opts.enforceSupportedChains && !isChainSupported) {
+            setOpen(true);
+            setRoute(ROUTES.SWITCHNETWORKS);
+        }
+    }, [isConnected, isChainSupported, chain, route, open]);
+    const log = debugMode ? console.log : () => { };
+    // Connect to the Daimo Pay TRPC API
+    const trpc = useMemo(() => createTrpcClient(payApiUrl), [payApiUrl]);
+    // PaymentInfo is a second, inner context object containing a DaimoPayOrder
+    // plus all associated status and callbacks. In order for useContext() and
+    // downstream hooks like useDaimoPayStatus() to work correctly, we must set
+    // set refresh context when payment status changes; done via setDaimoPayOrder.
+    const [daimoPayOrder, setDaimoPayOrder] = useState();
+    const paymentState = usePaymentState({
+        trpc,
+        daimoPayOrder,
+        setDaimoPayOrder,
+        setOpen,
+        log,
+    });
+    // When a payment is in progress, poll for status updates. Do this regardless
+    // of whether the modal is still being displayed for useDaimoPayStatus().
+    useEffect(() => {
+        // Order just updated...
+        if (daimoPayOrder?.mode !== DaimoPayOrderMode.HYDRATED)
+            return;
+        const { sourceStatus, intentStatus } = daimoPayOrder;
+        let intervalMs = 0;
+        if (sourceStatus === DaimoPayOrderStatusSource.WAITING_PAYMENT) {
+            intervalMs = 2500; // additional, faster polling in WaitingOther
+        }
+        else if (intentStatus === DaimoPayIntentStatus.PENDING) {
+            intervalMs = 300; // poll fast from (payment initiated) to (finished)
+        }
+        else {
+            return;
+        }
+        log(`[PAY] polling in ${intervalMs}ms`);
+        setTimeout(() => retryBackoff("refreshOrder", () => paymentState.refreshOrder()), intervalMs);
+    }, [daimoPayOrder]);
+    const showPayment = async (modalOptions) => {
+        const { daimoPayOrder, payParams } = paymentState;
+        const id = daimoPayOrder?.id;
+        log(`[PAY] showing payment ${debugJson({ id, payParams, modalOptions })}`);
+        paymentState.setModalOptions(modalOptions);
+        if (daimoPayOrder &&
+            daimoPayOrder.mode === DaimoPayOrderMode.HYDRATED &&
+            (daimoPayOrder.destFastFinishTxHash || daimoPayOrder.destClaimTxHash)) {
+            setRoute(ROUTES.CONFIRMATION);
+        }
+        else {
+            setRoute(ROUTES.SELECT_METHOD);
+        }
+        setOpen(true);
+    };
+    const value = {
+        theme: ckTheme,
+        setTheme,
+        mode: ckMode,
+        setMode,
+        customTheme,
+        setCustomTheme,
+        lang: ckLang,
+        setLang,
+        open,
+        setOpen,
+        route,
+        setRoute,
+        connector,
+        setConnector,
+        solanaConnector,
+        setSolanaConnector,
+        onConnect,
+        // Other configuration
+        options: opts,
+        errorMessage,
+        debugMode,
+        log,
+        displayError: (message, code) => {
+            setErrorMessage(message);
+            console.log("---------DAIMOPAY DEBUG---------");
+            console.log(message);
+            if (code)
+                console.table(code);
+            console.log("---------/DAIMOPAY DEBUG---------");
+        },
+        resize,
+        triggerResize: () => onResize((prev) => prev + 1),
+        // Above: generic ConnectKit context
+        // Below: Daimo Pay context
+        showPayment,
+        paymentState,
+        trpc,
+    };
+    return createElement(Context.Provider, { value }, jsx(Web3ContextProvider, { enabled: open, children: jsxs(ThemeProvider, { theme: defaultTheme, children: [children, jsx(DaimoPayModal, { lang: ckLang, theme: ckTheme, mode: mode, customTheme: ckCustomTheme })] }) }));
+};
+/**
+ * Provides context for DaimoPayButton and hooks. Place in app root or layout.
+ */
+const DaimoPayProvider = (props) => {
+    return (jsx(SolanaContextProvider, { solanaRpcUrl: props.solanaRpcUrl, children: jsx(DaimoPayProviderWithoutSolana, { ...props }) }));
+};
+/** Daimo Pay internal context. */
+const usePayContext = () => {
+    const context = React.useContext(Context);
+    if (!context)
+        throw Error("DaimoPay Hook must be inside a Provider.");
+    return context;
+};
+
+export { Context, DaimoPayProvider, ROUTES, usePayContext };
+//# sourceMappingURL=DaimoPay.js.map

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

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

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

@@ -0,0 +1,133 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import useIsMounted from '../../hooks/useIsMounted.js';
+import { usePayContext } from '../DaimoPay.js';
+import { TextContainer } from './styles.js';
+import { DaimoPayOrderMode, DaimoPayOrderStatusSource, writeDaimoPayOrderID, assertNotNull, DaimoPayIntentStatus } from '@daimo/common';
+import { AnimatePresence } from 'framer-motion';
+import { ResetContainer } from '../../styles/index.js';
+import ThemedButton from '../Common/ThemedButton/index.js';
+import { ThemeContainer } from '../Common/ThemedButton/styles.js';
+
+/**
+ * A button that shows the Daimo Pay checkout. Replaces the traditional
+ * Connect Wallet » approve » execute sequence with a single action.
+ */
+function DaimoPayButton(props) {
+    const { theme, mode, customTheme } = props;
+    const context = usePayContext();
+    return (jsx(DaimoPayButtonCustom, { ...props, children: ({ show }) => (jsx(ResetContainer, { "$useTheme": theme ?? context.theme, "$useMode": mode ?? context.mode, "$customTheme": customTheme ?? context.customTheme, children: jsx(ThemeContainer, { onClick: !props.disabled && show, children: jsx(ThemedButton, { theme: theme ?? context.theme, mode: mode ?? context.mode, customTheme: customTheme ?? context.customTheme, children: jsx(DaimoPayButtonInner, { disabled: props.disabled }) }) }) })) }));
+}
+/** Like DaimoPayButton, but with custom styling. */
+function DaimoPayButtonCustom(props) {
+    const isMounted = useIsMounted();
+    const context = usePayContext();
+    // Pre-load payment info in background.
+    // Reload when any of the info changes.
+    let payParams = "appId" in props
+        ? {
+            appId: props.appId,
+            toChain: props.toChain,
+            toAddress: props.toAddress,
+            toToken: props.toToken,
+            toUnits: props.toUnits,
+            toCallData: props.toCallData,
+            isAmountEditable: props.amountEditable ?? false,
+            intent: props.intent,
+            paymentOptions: props.paymentOptions,
+            preferredChains: props.preferredChains,
+            preferredTokens: props.preferredTokens,
+        }
+        : null;
+    let payId = "payId" in props ? props.payId : null;
+    const { paymentState } = context;
+    useEffect(() => {
+        if (payId != null) {
+            paymentState.setPayId(payId);
+        }
+        else if (payParams != null) {
+            paymentState.setPayParams(payParams);
+        }
+    }, [payId, ...Object.values(payParams || {})]);
+    // Payment events: call these three event handlers.
+    const { onPaymentStarted, onPaymentCompleted, onPaymentBounced } = props;
+    const order = paymentState.daimoPayOrder;
+    const hydOrder = order?.mode === DaimoPayOrderMode.HYDRATED ? order : null;
+    const isStarted = hydOrder?.sourceStatus !== DaimoPayOrderStatusSource.WAITING_PAYMENT;
+    useEffect(() => {
+        if (hydOrder == null || !isStarted)
+            return;
+        onPaymentStarted?.({
+            paymentId: writeDaimoPayOrderID(hydOrder.id),
+            type: "payment_started",
+            chainId: assertNotNull(hydOrder.sourceTokenAmount).token.chainId,
+            txHash: assertNotNull(hydOrder.sourceInitiateTxHash),
+        });
+    }, [isStarted]);
+    useEffect(() => {
+        if (hydOrder == null)
+            return;
+        if (hydOrder.intentStatus === DaimoPayIntentStatus.PENDING)
+            return;
+        const commonFields = {
+            paymentId: writeDaimoPayOrderID(hydOrder.id),
+            chainId: assertNotNull(hydOrder.destFinalCallTokenAmount).token.chainId,
+            txHash: assertNotNull(hydOrder.destFastFinishTxHash ?? hydOrder.destClaimTxHash),
+        };
+        if (hydOrder.intentStatus === DaimoPayIntentStatus.SUCCESSFUL) {
+            onPaymentCompleted?.({ type: "payment_completed", ...commonFields });
+        }
+        else if (hydOrder.intentStatus === DaimoPayIntentStatus.REFUNDED) {
+            onPaymentBounced?.({ type: "payment_bounced", ...commonFields });
+        }
+    }, [hydOrder?.intentStatus]);
+    // Validation
+    if ((payId == null) == (payParams == null)) {
+        throw new Error("Must specify either payId or appId, not both");
+    }
+    const { children, closeOnSuccess } = props;
+    const modalOptions = { closeOnSuccess };
+    const show = () => context.showPayment(modalOptions);
+    const hide = () => context.setOpen(false);
+    if (!isMounted)
+        return null;
+    return jsx(Fragment, { children: children({ show, hide }) });
+}
+DaimoPayButtonCustom.displayName = "DaimoPayButton.Custom";
+DaimoPayButton.Custom = DaimoPayButtonCustom;
+const contentVariants = {
+    initial: {
+        zIndex: 2,
+        opacity: 0,
+        x: "-100%",
+    },
+    animate: {
+        opacity: 1,
+        x: 0.1,
+        transition: {
+            duration: 0.4,
+            ease: [0.25, 1, 0.5, 1],
+        },
+    },
+    exit: {
+        zIndex: 1,
+        opacity: 0,
+        x: "-100%",
+        pointerEvents: "none",
+        position: "absolute",
+        transition: {
+            duration: 0.4,
+            ease: [0.25, 1, 0.5, 1],
+        },
+    },
+};
+function DaimoPayButtonInner({ disabled }) {
+    const { paymentState } = usePayContext();
+    const label = paymentState?.daimoPayOrder?.metadata?.intent ?? "Pay";
+    return (jsx(AnimatePresence, { initial: false, children: jsx(TextContainer, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, style: {
+                height: 40,
+            }, children: label }) }));
+}
+
+export { DaimoPayButton };
+//# sourceMappingURL=index.js.map

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

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

package/build/src/components/DaimoPayButton/styles.js

@@ -0,0 +1,50 @@
+import { motion } from 'framer-motion';
+import styled from '../../styles/styled/index.js';
+
+const TextContainer = styled(motion.div) `
+  top: 0;
+  bottom: 0;
+  left: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+`;
+styled(motion.div) `
+  position: relative;
+  width: 24px;
+  height: 24px;
+  border-radius: 12px;
+  overflow: hidden;
+  svg {
+    display: block;
+  }
+`;
+styled(motion.div) `
+  pointer-events: none;
+  user-select: none;
+  position: relative;
+  width: 24px;
+  height: 24px;
+  margin-right: 8px;
+`;
+styled(motion.div) `
+  z-index: 1;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
+  background: var(--ck-body-color-danger, red);
+  color: #fff;
+  svg {
+    display: block;
+    position: relative;
+    top: -1px;
+  }
+`;
+
+export { TextContainer };
+//# sourceMappingURL=styles.js.map

package/build/src/components/DaimoPayButton/styles.js.map

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

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

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useState, useEffect } from 'react';
+import { useWallet } from '../../wallets/useWallets.js';
+import { usePayContext } from '../DaimoPay.js';
+import ConnectWithInjector from './ConnectWithInjector/index.js';
+import ConnectWithQRCode from './ConnectWithQRCode.js';
+import Alert from '../Common/Alert/index.js';
+import { contentVariants } from '../Common/Modal/index.js';
+
+const states = {
+    QRCODE: "qrcode",
+    INJECTOR: "injector",
+};
+const ConnectUsing = () => {
+    const context = usePayContext();
+    const wallet = useWallet(context.connector.id);
+    // If cannot be scanned, display injector flow, which if extension is not installed will show CTA to install it
+    const isQrCode = !wallet?.isInstalled && wallet?.getWalletConnectDeeplink;
+    const [status, setStatus] = useState(isQrCode ? states.QRCODE : states.INJECTOR);
+    useEffect(() => {
+        // if no provider, change to qrcode
+        const checkProvider = async () => {
+            const res = await wallet?.connector.getProvider();
+            if (!res) {
+                setStatus(states.QRCODE);
+                setTimeout(context.triggerResize, 10); // delay required here for modal to resize
+            }
+        };
+        if (status === states.INJECTOR)
+            checkProvider();
+    }, []);
+    if (!wallet)
+        return jsxs(Alert, { children: ["Connector not found ", context.connector.id] });
+    return (jsxs(AnimatePresence, { children: [status === states.QRCODE && (jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsx(ConnectWithQRCode, { switchConnectMethod: (id) => {
+                        //if (id) setId(id);
+                        setStatus(states.INJECTOR);
+                    } }) }, states.QRCODE)), status === states.INJECTOR && (jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants: contentVariants, children: jsx(ConnectWithInjector, { switchConnectMethod: (id) => {
+                        //if (id) setId(id);
+                        setStatus(states.QRCODE);
+                    } }) }, states.INJECTOR))] }));
+};
+
+export { ConnectUsing as default };
+//# sourceMappingURL=ConnectUsing.js.map

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

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