@daimo/pay 1.17.3 → 1.17.5

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

@@ -0,0 +1,197 @@
+import { jsx } from 'react/jsx-runtime';
+import { useEffect, useCallback, useRef } from 'react';
+import { usePayContext } from '../../hooks/usePayContext.js';
+import { TextContainer } from './styles.js';
+import { getOrderSourceChainId, DaimoPayEventType, writeDaimoPayOrderID, getDaimoPayOrderView, getOrderDestChainId, assertNotNull } from '@daimo/pay-common';
+import { AnimatePresence } from 'framer-motion';
+import { useDaimoPay } from '../../hooks/useDaimoPay.js';
+import useLocales from '../../hooks/useLocales.js';
+import { ResetContainer } from '../../styles/index.js';
+import ThemedButton from '../Common/ThemedButton/index.js';
+import { ThemeContainer } from '../Common/ThemedButton/styles.js';
+
+function DaimoPayButton(props) {
+  const { theme, mode, customTheme } = props;
+  const context = usePayContext();
+  return /* @__PURE__ */ jsx(DaimoPayButtonCustom, { ...props, children: ({ show }) => /* @__PURE__ */ jsx(
+    ResetContainer,
+    {
+      $useTheme: theme ?? context.theme,
+      $useMode: mode ?? context.mode,
+      $customTheme: customTheme ?? context.customTheme,
+      children: /* @__PURE__ */ jsx(ThemeContainer, { onClick: props.disabled ? void 0 : show, children: /* @__PURE__ */ jsx(
+        ThemedButton,
+        {
+          theme: theme ?? context.theme,
+          mode: mode ?? context.mode,
+          customTheme: customTheme ?? context.customTheme,
+          children: /* @__PURE__ */ jsx(DaimoPayButtonInner, {})
+        }
+      ) })
+    }
+  ) });
+}
+function DaimoPayButtonCustom(props) {
+  const context = usePayContext();
+  let payParams = "appId" in props ? {
+    appId: props.appId,
+    toChain: props.toChain,
+    toAddress: props.toAddress,
+    toToken: props.toToken,
+    toUnits: props.toUnits,
+    toCallData: props.toCallData,
+    intent: props.intent,
+    paymentOptions: props.paymentOptions,
+    preferredChains: props.preferredChains,
+    preferredTokens: props.preferredTokens,
+    evmChains: props.evmChains,
+    externalId: props.externalId,
+    metadata: props.metadata,
+    refundAddress: props.refundAddress,
+    passthroughTokens: props.passthroughTokens,
+    uniquePaymentOption: props.uniquePaymentOption
+  } : null;
+  let payId = "payId" in props ? props.payId : null;
+  const { paymentState } = context;
+  const { order, paymentState: payState } = useDaimoPay();
+  useEffect(() => {
+    if (payId != null) {
+      paymentState.setPayId(payId);
+    } else if (payParams != null) {
+      paymentState.setPayParams(payParams);
+    }
+    paymentState.setButtonProps(props);
+  }, [payId, JSON.stringify(payParams || {})]);
+  const { setConfirmationMessage } = context;
+  useEffect(() => {
+    if (props.confirmationMessage) {
+      setConfirmationMessage(props.confirmationMessage);
+    }
+  }, [props.confirmationMessage, setConfirmationMessage]);
+  const { setRedirectReturnUrl } = context;
+  useEffect(() => {
+    if (props.redirectReturnUrl) {
+      setRedirectReturnUrl(props.redirectReturnUrl);
+    }
+  }, [props.redirectReturnUrl, setRedirectReturnUrl]);
+  const { setOnOpen, setOnClose } = context;
+  useEffect(() => {
+    setOnOpen(props.onOpen);
+    return () => setOnOpen(void 0);
+  }, [props.onOpen, setOnOpen]);
+  useEffect(() => {
+    setOnClose(props.onClose);
+    return () => setOnClose(void 0);
+  }, [props.onClose, setOnClose]);
+  const { onPaymentStarted, onPaymentCompleted, onPaymentBounced } = props;
+  const { children, closeOnSuccess, resetOnSuccess, connectedWalletOnly } = props;
+  const show = useCallback(() => {
+    const modalOptions = {
+      closeOnSuccess,
+      resetOnSuccess,
+      connectedWalletOnly
+    };
+    context.showPayment(modalOptions);
+  }, [connectedWalletOnly, closeOnSuccess, resetOnSuccess, context]);
+  const hide = useCallback(() => context.setOpen(false), [context]);
+  const sentStart = useRef(false);
+  useEffect(() => {
+    if (sentStart.current) return;
+    if (payState !== "payment_started") return;
+    const sourceChainId = getOrderSourceChainId(order);
+    if (sourceChainId == null) return;
+    sentStart.current = true;
+    onPaymentStarted?.({
+      type: DaimoPayEventType.PaymentStarted,
+      paymentId: writeDaimoPayOrderID(order.id),
+      chainId: sourceChainId,
+      txHash: order.sourceInitiateTxHash,
+      payment: getDaimoPayOrderView(order)
+    });
+  }, [order, payState]);
+  const sentComplete = useRef(false);
+  useEffect(() => {
+    if (sentComplete.current) return;
+    if (payState !== "payment_completed" && payState !== "payment_bounced")
+      return;
+    sentComplete.current = true;
+    const eventType = payState === "payment_completed" ? DaimoPayEventType.PaymentCompleted : DaimoPayEventType.PaymentBounced;
+    const passthroughTxHash = order.passedToAddress == null ? void 0 : order.sourceInitiateTxHash;
+    const event = {
+      type: eventType,
+      paymentId: writeDaimoPayOrderID(order.id),
+      chainId: getOrderDestChainId(order),
+      txHash: assertNotNull(
+        order.destFastFinishTxHash ?? order.destClaimTxHash ?? passthroughTxHash,
+        `[PAY BUTTON] dest tx hash null on order ${order.id} when intent status is ${order.intentStatus}`
+      ),
+      payment: getDaimoPayOrderView(order)
+    };
+    if (payState === "payment_completed") {
+      onPaymentCompleted?.(event);
+    } else if (payState === "payment_bounced") {
+      onPaymentBounced?.(event);
+    }
+  }, [order, payState]);
+  const hasAutoOpened = useRef(false);
+  useEffect(() => {
+    if (!props.defaultOpen || hasAutoOpened.current) return;
+    if (order == null) return;
+    show();
+    hasAutoOpened.current = true;
+  }, [order, props.defaultOpen, hasAutoOpened.current]);
+  if (payId == null == (payParams == null)) {
+    throw new Error("Must specify either payId or appId, not both");
+  }
+  return 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() {
+  const { order } = useDaimoPay();
+  const locales = useLocales();
+  const defaultLabel = locales.payButton_defaultLabel;
+  const label = order?.metadata?.intent ?? defaultLabel;
+  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
+    TextContainer,
+    {
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      variants: contentVariants,
+      style: {
+        height: 40
+      },
+      children: label
+    }
+  ) });
+}
+
+export { DaimoPayButton, DaimoPayButtonInner };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/DaimoPayButton/index.tsx"],"sourcesContent":["import { ReactElement, useCallback, useEffect, useRef } from \"react\";\n\nimport { usePayContext } from \"../../hooks/usePayContext\";\nimport { TextContainer } from \"./styles\";\n\nimport {\n  assertNotNull,\n  DaimoPayEventType,\n  DaimoPayOrderView,\n  DaimoPayUserMetadata,\n  ExternalPaymentOptionsString,\n  getDaimoPayOrderView,\n  getOrderDestChainId,\n  getOrderSourceChainId,\n  PaymentBouncedEvent,\n  PaymentCompletedEvent,\n  PaymentStartedEvent,\n  UniquePaymentOptionsString,\n  writeDaimoPayOrderID,\n} from \"@daimo/pay-common\";\nimport { AnimatePresence, Variants } from \"framer-motion\";\nimport { Address, Hex } from \"viem\";\nimport { useDaimoPay } from \"../../hooks/useDaimoPay\";\nimport useLocales from \"../../hooks/useLocales\";\nimport { PayParams } from \"../../payment/paymentFsm\";\nimport { ResetContainer } from \"../../styles\";\nimport { CustomTheme, Mode, Theme } from \"../../types\";\nimport ThemedButton, { ThemeContainer } from \"../Common/ThemedButton\";\n\n/** Payment details and status. */\nexport type DaimoPayment = DaimoPayOrderView;\n\n/** Props for DaimoPayButton. */\nexport type PayButtonPaymentProps =\n  | {\n      /**\n       * Your public app ID. Specify either (payId) or (appId + parameters).\n       */\n      appId: string;\n      /**\n       * Destination chain ID. Defaults to Celo (42220) if omitted.\n       */\n      toChain?: number;\n      /**\n       * The destination token to send, completing payment. Must be an ERC-20\n       * token or the zero address, indicating the native token / ETH.\n       */\n      toToken: Address;\n      /**\n       * The amount of destination token to send (transfer or approve).\n       * If not provided, the user will be prompted to enter an amount.\n       */\n      toUnits?: string;\n      /**\n       * The destination address to transfer to, or contract to call.\n       */\n      toAddress: Address;\n      /**\n       * Optional calldata to call an arbitrary function on `toAddress`.\n       */\n      toCallData?: Hex;\n      /**\n       * The intent verb, such as \"Pay\", \"Deposit\", or \"Purchase\".\n       */\n      intent?: string;\n      /**\n       * Payment options. By default, all are enabled.\n       */\n      paymentOptions?: ExternalPaymentOptionsString[];\n      /**\n       * Preferred chain IDs. Assets on these chains will appear first.\n       */\n      preferredChains?: number[];\n      /**\n       * Preferred tokens. These appear first in the token list.\n       */\n      preferredTokens?: { chain: number; address: Address }[];\n      /**\n       * Only allow payments on these EVM chains.\n       */\n      evmChains?: number[];\n      /**\n       * External ID. E.g. a correlation ID.\n       */\n      externalId?: string;\n      /**\n       * Developer metadata. E.g. correlation ID.\n       * */\n      metadata?: DaimoPayUserMetadata;\n      /**\n       * The address to refund to if the payment bounces.\n       */\n      refundAddress?: Address;\n      /**\n       * Pass-through tokens. If the user pays via a pass-through\n       * token, it is sent directly to `toAddress` with no swapping or bridging.\n       */\n      passthroughTokens?: PassthroughToken[];\n      /** Only show one payment option to the user. */\n      uniquePaymentOption?: UniquePaymentOptionsString;\n    }\n  | {\n      /** The payment ID, generated via the Daimo Pay API. Replaces params above. */\n      payId: string;\n      /** Payment options. By default, all are enabled. */\n      paymentOptions?: ExternalPaymentOptionsString[];\n      /** Only show one payment option to the user. */\n      uniquePaymentOption?: UniquePaymentOptionsString;\n    };\n\n/**\n * Represents a pass-through token. If the user pays via a pass-through\n * token, it is sent directly to `toAddress` with no swapping or bridging.\n */\ntype PassthroughToken = {\n  chain: number;\n  address: Address;\n};\n\ntype PayButtonCommonProps = PayButtonPaymentProps & {\n  /** Called when user sends payment and transaction is seen on chain */\n  onPaymentStarted?: (event: PaymentStartedEvent) => void;\n  /** Called when destination transfer or call completes successfully */\n  onPaymentCompleted?: (event: PaymentCompletedEvent) => void;\n  /** Called when destination call reverts and funds are refunded */\n  onPaymentBounced?: (event: PaymentBouncedEvent) => void;\n  /** Called when the modal is opened. */\n  onOpen?: () => void;\n  /** Called when the modal is closed. */\n  onClose?: () => void;\n  /** Open the modal by default. */\n  defaultOpen?: boolean;\n  /** Automatically close the modal after a successful payment. */\n  closeOnSuccess?: boolean;\n  /** Reset the payment after a successful payment. */\n  resetOnSuccess?: boolean;\n  /** Go directly to tokens in already-connected Ethereum and Solana wallet(s).\n   * Don't let the user pick any other payment method. Used in embedded flows.*/\n  connectedWalletOnly?: boolean;\n  /** Custom message to display on confirmation page. */\n  confirmationMessage?: string;\n  /** Redirect URL to return to the app. E.g. after Coinbase, Binance, RampNetwork. */\n  redirectReturnUrl?: string;\n};\n\nexport type DaimoPayButtonProps = PayButtonCommonProps & {\n  /** Light mode, dark mode, or auto. */\n  mode?: Mode;\n  /** Named theme. See docs for options. */\n  theme?: Theme;\n  /** Custom theme. See docs for options. */\n  customTheme?: CustomTheme;\n  /** Disable interaction. */\n  disabled?: boolean;\n};\n\nexport type DaimoPayButtonCustomProps = PayButtonCommonProps & {\n  /** Custom renderer */\n  children: (renderProps: {\n    show: () => void;\n    hide: () => void;\n  }) => ReactElement;\n};\n\n/**\n * A button that shows the Daimo Pay checkout. Replaces the traditional\n * Connect Wallet » approve » execute sequence with a single action.\n */\nexport function DaimoPayButton(props: DaimoPayButtonProps): JSX.Element {\n  const { theme, mode, customTheme } = props;\n  const context = usePayContext();\n\n  return (\n    <DaimoPayButtonCustom {...props}>\n      {({ show }) => (\n        <ResetContainer\n          $useTheme={theme ?? context.theme}\n          $useMode={mode ?? context.mode}\n          $customTheme={customTheme ?? context.customTheme}\n        >\n          <ThemeContainer onClick={props.disabled ? undefined : show}>\n            <ThemedButton\n              theme={theme ?? context.theme}\n              mode={mode ?? context.mode}\n              customTheme={customTheme ?? context.customTheme}\n            >\n              <DaimoPayButtonInner />\n            </ThemedButton>\n          </ThemeContainer>\n        </ResetContainer>\n      )}\n    </DaimoPayButtonCustom>\n  );\n}\n\n/** Like DaimoPayButton, but with custom styling. */\nfunction DaimoPayButtonCustom(props: DaimoPayButtonCustomProps): JSX.Element {\n  const context = usePayContext();\n\n  // Pre-load payment info in background.\n  // Reload when any of the info changes.\n  let payParams: PayParams | null =\n    \"appId\" in props\n      ? {\n          appId: props.appId,\n          toChain: props.toChain,\n          toAddress: props.toAddress,\n          toToken: props.toToken,\n          toUnits: props.toUnits,\n          toCallData: props.toCallData,\n          intent: props.intent,\n          paymentOptions: props.paymentOptions,\n          preferredChains: props.preferredChains,\n          preferredTokens: props.preferredTokens,\n          evmChains: props.evmChains,\n          externalId: props.externalId,\n          metadata: props.metadata,\n          refundAddress: props.refundAddress,\n          passthroughTokens: props.passthroughTokens,\n          uniquePaymentOption: props.uniquePaymentOption,\n        }\n      : null;\n  let payId = \"payId\" in props ? props.payId : null;\n\n  const { paymentState } = context;\n  const { order, paymentState: payState } = useDaimoPay();\n\n  // Set the payId or payParams\n  useEffect(() => {\n    if (payId != null) {\n      paymentState.setPayId(payId);\n    } else if (payParams != null) {\n      paymentState.setPayParams(payParams);\n    }\n    paymentState.setButtonProps(props);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [payId, JSON.stringify(payParams || {})]);\n\n  // Set the confirmation message\n  const { setConfirmationMessage } = context;\n  useEffect(() => {\n    if (props.confirmationMessage) {\n      setConfirmationMessage(props.confirmationMessage);\n    }\n  }, [props.confirmationMessage, setConfirmationMessage]);\n\n  // Set the redirect return url\n  const { setRedirectReturnUrl } = context;\n  useEffect(() => {\n    if (props.redirectReturnUrl) {\n      setRedirectReturnUrl(props.redirectReturnUrl);\n    }\n  }, [props.redirectReturnUrl, setRedirectReturnUrl]);\n\n  // Set the onOpen and onClose callbacks\n  const { setOnOpen, setOnClose } = context;\n  useEffect(() => {\n    setOnOpen(props.onOpen);\n    return () => setOnOpen(undefined);\n  }, [props.onOpen, setOnOpen]);\n\n  useEffect(() => {\n    setOnClose(props.onClose);\n    return () => setOnClose(undefined);\n  }, [props.onClose, setOnClose]);\n\n  // Payment events: call these three event handlers.\n  const { onPaymentStarted, onPaymentCompleted, onPaymentBounced } = props;\n\n  // Functions to show and hide the modal\n  const { children, closeOnSuccess, resetOnSuccess, connectedWalletOnly } =\n    props;\n  const show = useCallback(() => {\n    const modalOptions = {\n      closeOnSuccess,\n      resetOnSuccess,\n      connectedWalletOnly,\n    };\n    context.showPayment(modalOptions);\n  }, [connectedWalletOnly, closeOnSuccess, resetOnSuccess, context]);\n  const hide = useCallback(() => context.setOpen(false), [context]);\n\n  // Emit onPaymentStart handler when payment state changes to payment_started\n  const sentStart = useRef(false);\n  useEffect(() => {\n    if (sentStart.current) return;\n    if (payState !== \"payment_started\") return;\n\n    // TODO: Populate source payment details immediately when the user pays.\n    // Use this hack because source chain id is not immediately populated when\n    // payment_started\n    const sourceChainId = getOrderSourceChainId(order);\n    if (sourceChainId == null) return;\n\n    sentStart.current = true;\n    onPaymentStarted?.({\n      type: DaimoPayEventType.PaymentStarted,\n      paymentId: writeDaimoPayOrderID(order.id),\n      chainId: sourceChainId,\n      txHash: order.sourceInitiateTxHash,\n      payment: getDaimoPayOrderView(order),\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [order, payState]);\n\n  // Emit onPaymentComplete or onPaymentBounced handler when payment state\n  // changes to payment_completed or payment_bounced\n  const sentComplete = useRef(false);\n  useEffect(() => {\n    if (sentComplete.current) return;\n    if (payState !== \"payment_completed\" && payState !== \"payment_bounced\")\n      return;\n\n    sentComplete.current = true;\n    const eventType =\n      payState === \"payment_completed\"\n        ? DaimoPayEventType.PaymentCompleted\n        : DaimoPayEventType.PaymentBounced;\n    const passthroughTxHash =\n      order.passedToAddress == null ? undefined : order.sourceInitiateTxHash;\n    const event = {\n      type: eventType,\n      paymentId: writeDaimoPayOrderID(order.id),\n      chainId: getOrderDestChainId(order),\n      txHash: assertNotNull(\n        order.destFastFinishTxHash ??\n          order.destClaimTxHash ??\n          passthroughTxHash,\n        `[PAY BUTTON] dest tx hash null on order ${order.id} when intent status is ${order.intentStatus}`,\n      ),\n      payment: getDaimoPayOrderView(order),\n    };\n\n    if (payState === \"payment_completed\") {\n      onPaymentCompleted?.(event as PaymentCompletedEvent);\n    } else if (payState === \"payment_bounced\") {\n      onPaymentBounced?.(event as PaymentBouncedEvent);\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [order, payState]);\n\n  // Open the modal by default if the defaultOpen prop is true\n  const hasAutoOpened = useRef(false);\n  useEffect(() => {\n    if (!props.defaultOpen || hasAutoOpened.current) return;\n    if (order == null) return;\n    show();\n    hasAutoOpened.current = true;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [order, props.defaultOpen, hasAutoOpened.current]);\n\n  // Validation\n  if ((payId == null) == (payParams == null)) {\n    throw new Error(\"Must specify either payId or appId, not both\");\n  }\n\n  return children({ show, hide });\n}\n\nDaimoPayButtonCustom.displayName = \"DaimoPayButton.Custom\";\n\nDaimoPayButton.Custom = DaimoPayButtonCustom;\n\nconst contentVariants: Variants = {\n  initial: {\n    zIndex: 2,\n    opacity: 0,\n    x: \"-100%\",\n  },\n  animate: {\n    opacity: 1,\n    x: 0.1,\n    transition: {\n      duration: 0.4,\n      ease: [0.25, 1, 0.5, 1],\n    },\n  },\n  exit: {\n    zIndex: 1,\n    opacity: 0,\n    x: \"-100%\",\n    pointerEvents: \"none\",\n    position: \"absolute\",\n    transition: {\n      duration: 0.4,\n      ease: [0.25, 1, 0.5, 1],\n    },\n  },\n};\n\nexport function DaimoPayButtonInner() {\n  const { order } = useDaimoPay();\n  const locales = useLocales();\n  const defaultLabel = locales.payButton_defaultLabel;\n  const label = order?.metadata?.intent ?? defaultLabel;\n\n  return (\n    <AnimatePresence initial={false}>\n      <TextContainer\n        initial={\"initial\"}\n        animate={\"animate\"}\n        exit={\"exit\"}\n        variants={contentVariants}\n        style={{\n          height: 40,\n        }}\n      >\n        {label}\n      </TextContainer>\n    </AnimatePresence>\n  );\n}\n"],"names":[],"mappings":"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"}

package/build/connectkit/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/connectkit/src/components/DaimoPayButton/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/DaimoPayButton/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport styled from \"./../../styles/styled\";\n\nexport const TextContainer = styled(motion.div)`\n  top: 0;\n  bottom: 0;\n  left: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  white-space: nowrap;\n`;\n\nexport const ChainContainer = styled(motion.div)`\n  position: relative;\n  width: 24px;\n  height: 24px;\n  border-radius: 12px;\n  overflow: hidden;\n  svg {\n    display: block;\n  }\n`;\nexport const IconContainer = styled(motion.div)`\n  pointer-events: none;\n  user-select: none;\n  position: relative;\n  width: 24px;\n  height: 24px;\n  margin-right: 8px;\n`;\n\nexport const UnsupportedNetworkContainer = styled(motion.div)`\n  z-index: 1;\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 100%;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);\n  background: var(--ck-body-color-danger, red);\n  color: #fff;\n  svg {\n    display: block;\n    position: relative;\n    top: -1px;\n  }\n`;\n"],"names":[],"mappings":";;;AAGa,MAAA,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAUhB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAUlB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AASH,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

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

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useState, useEffect } from 'react';
+import { usePayContext } from '../../hooks/usePayContext.js';
+import { useWallet } from '../../wallets/useWallets.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 { pendingConnectorId } = context;
+  const wallet = useWallet(pendingConnectorId ?? "");
+  const isQrCode = !wallet?.isInstalled;
+  const [status, setStatus] = useState(
+    isQrCode ? states.QRCODE : states.INJECTOR
+  );
+  useEffect(() => {
+    const checkProvider = async () => {
+      const res = await wallet?.connector?.getProvider();
+      if (!res) {
+        setStatus(states.QRCODE);
+        setTimeout(context.triggerResize, 10);
+      }
+    };
+    if (status === states.INJECTOR) checkProvider();
+  }, []);
+  if (!wallet) return /* @__PURE__ */ jsx(Alert, { children: "Connector not found" });
+  return /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+    status === states.QRCODE && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        variants: contentVariants,
+        children: /* @__PURE__ */ jsx(ConnectWithQRCode, {})
+      },
+      states.QRCODE
+    ),
+    status === states.INJECTOR && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: "initial",
+        animate: "animate",
+        exit: "exit",
+        variants: contentVariants,
+        children: /* @__PURE__ */ jsx(
+          ConnectWithInjector,
+          {
+            switchConnectMethod: () => {
+              setStatus(states.QRCODE);
+            }
+          }
+        )
+      },
+      states.INJECTOR
+    )
+  ] });
+};
+
+export { ConnectUsing as default };
+//# sourceMappingURL=ConnectUsing.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectUsing.js","sources":["../../../../../src/components/DaimoPayModal/ConnectUsing.tsx"],"sourcesContent":["import { AnimatePresence, motion } from \"framer-motion\";\nimport { useEffect, useState } from \"react\";\n\nimport { usePayContext } from \"../../hooks/usePayContext\";\nimport { useWallet } from \"../../wallets/useWallets\";\n\nimport ConnectWithInjector from \"./ConnectWithInjector\";\nimport ConnectWithQRCode from \"./ConnectWithQRCode\";\n\nimport Alert from \"../Common/Alert\";\nimport { contentVariants } from \"../Common/Modal\";\n\nconst states = {\n  QRCODE: \"qrcode\",\n  INJECTOR: \"injector\",\n};\n\nconst ConnectUsing = () => {\n  const context = usePayContext();\n  const { pendingConnectorId } = context;\n\n  const wallet = useWallet(pendingConnectorId ?? \"\");\n  // If cannot be scanned, display injector flow, which if extension is not installed will show CTA to install it\n  const isQrCode = !wallet?.isInstalled;\n\n  const [status, setStatus] = useState(\n    isQrCode ? states.QRCODE : states.INJECTOR,\n  );\n\n  useEffect(() => {\n    // if no provider, change to qrcode\n    const checkProvider = async () => {\n      const res = await wallet?.connector?.getProvider();\n      if (!res) {\n        setStatus(states.QRCODE);\n        setTimeout(context.triggerResize, 10); // delay required here for modal to resize\n      }\n    };\n    if (status === states.INJECTOR) checkProvider();\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n\n  if (!wallet) return <Alert>Connector not found</Alert>;\n\n  return (\n    <AnimatePresence>\n      {status === states.QRCODE && (\n        <motion.div\n          key={states.QRCODE}\n          initial={\"initial\"}\n          animate={\"animate\"}\n          exit={\"exit\"}\n          variants={contentVariants}\n        >\n          <ConnectWithQRCode />\n        </motion.div>\n      )}\n      {status === states.INJECTOR && (\n        <motion.div\n          key={states.INJECTOR}\n          initial={\"initial\"}\n          animate={\"animate\"}\n          exit={\"exit\"}\n          variants={contentVariants}\n        >\n          <ConnectWithInjector\n            switchConnectMethod={() => {\n              setStatus(states.QRCODE);\n            }}\n          />\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport default ConnectUsing;\n"],"names":[],"mappings":";;;;;;;;;;AAYA,MAAM,MAAS,GAAA;AAAA,EACb,MAAQ,EAAA,QAAA;AAAA,EACR,QAAU,EAAA,UAAA;AACZ,CAAA,CAAA;AAEA,MAAM,eAAe,MAAM;AACzB,EAAA,MAAM,UAAU,aAAc,EAAA,CAAA;AAC9B,EAAM,MAAA,EAAE,oBAAuB,GAAA,OAAA,CAAA;AAE/B,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,kBAAA,IAAsB,EAAE,CAAA,CAAA;AAEjD,EAAM,MAAA,QAAA,GAAW,CAAC,MAAQ,EAAA,WAAA,CAAA;AAE1B,EAAM,MAAA,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAA,QAAA;AAAA,IAC1B,QAAA,GAAW,MAAO,CAAA,MAAA,GAAS,MAAO,CAAA,QAAA;AAAA,GACpC,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AAEd,IAAA,MAAM,gBAAgB,YAAY;AAChC,MAAA,MAAM,GAAM,GAAA,MAAM,MAAQ,EAAA,SAAA,EAAW,WAAY,EAAA,CAAA;AACjD,MAAA,IAAI,CAAC,GAAK,EAAA;AACR,QAAA,SAAA,CAAU,OAAO,MAAM,CAAA,CAAA;AACvB,QAAW,UAAA,CAAA,OAAA,CAAQ,eAAe,EAAE,CAAA,CAAA;AAAA,OACtC;AAAA,KACF,CAAA;AACA,IAAI,IAAA,MAAA,KAAW,MAAO,CAAA,QAAA,EAAwB,aAAA,EAAA,CAAA;AAAA,GAChD,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,IAAI,CAAC,MAAA,EAAe,uBAAA,GAAA,CAAC,SAAM,QAAmB,EAAA,qBAAA,EAAA,CAAA,CAAA;AAE9C,EAAA,4BACG,eACE,EAAA,EAAA,QAAA,EAAA;AAAA,IAAA,MAAA,KAAW,OAAO,MACjB,oBAAA,GAAA;AAAA,MAAC,MAAO,CAAA,GAAA;AAAA,MAAP;AAAA,QAEC,OAAS,EAAA,SAAA;AAAA,QACT,OAAS,EAAA,SAAA;AAAA,QACT,IAAM,EAAA,MAAA;AAAA,QACN,QAAU,EAAA,eAAA;AAAA,QAEV,8BAAC,iBAAkB,EAAA,EAAA,CAAA;AAAA,OAAA;AAAA,MANd,MAAO,CAAA,MAAA;AAAA,KAOd;AAAA,IAED,MAAA,KAAW,OAAO,QACjB,oBAAA,GAAA;AAAA,MAAC,MAAO,CAAA,GAAA;AAAA,MAAP;AAAA,QAEC,OAAS,EAAA,SAAA;AAAA,QACT,OAAS,EAAA,SAAA;AAAA,QACT,IAAM,EAAA,MAAA;AAAA,QACN,QAAU,EAAA,eAAA;AAAA,QAEV,QAAA,kBAAA,GAAA;AAAA,UAAC,mBAAA;AAAA,UAAA;AAAA,YACC,qBAAqB,MAAM;AACzB,cAAA,SAAA,CAAU,OAAO,MAAM,CAAA,CAAA;AAAA,aACzB;AAAA,WAAA;AAAA,SACF;AAAA,OAAA;AAAA,MAVK,MAAO,CAAA,QAAA;AAAA,KAWd;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}