@daimo/pay 1.19.5 → 1.19.6

package/build/pay/packages/connectkit/src/components/Pages/WaitingExternal/index.js

@@ -0,0 +1,174 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { PageContent, ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
+import { ExternalPaymentOptions, shouldShowExternalQRCodeOnDesktop } from '@daimo/pay-common';
+import { ExternalLinkIcon } from '../../../assets/icons.js';
+import useIsMobile from '../../../hooks/useIsMobile.js';
+import useLocales from '../../../hooks/useLocales.js';
+import styled from '../../../styles/styled/index.js';
+import Button from '../../Common/Button/index.js';
+import ConnectWithQRCode from '../../DaimoPayModal/ConnectWithQRCode.js';
+import ExternalPaymentSpinner from '../../Spinners/ExternalPaymentSpinner/index.js';
+
+const WaitingExternal = () => {
+  const context = usePayContext();
+  const { triggerResize, paymentState } = context;
+  const { isMobile } = useIsMobile();
+  const locales = useLocales();
+  const { selectedExternalOption, payWithExternal, paymentWaitingMessage } = paymentState;
+  useDaimoPay();
+  let isCoinbase = false;
+  let isBinance = false;
+  if (selectedExternalOption) {
+    isCoinbase = selectedExternalOption.id === ExternalPaymentOptions.Coinbase;
+    isBinance = selectedExternalOption.id === ExternalPaymentOptions.Binance;
+  }
+  const [externalURL, setExternalURL] = useState(null);
+  const [isRegenerating, setIsRegenerating] = useState(false);
+  useEffect(() => {
+    if (!selectedExternalOption) return;
+    payWithExternal(selectedExternalOption.id).then((url) => {
+      setExternalURL(url);
+      if (!shouldShowExternalQRCodeOnDesktop) {
+        openExternalWindow(url);
+      }
+    });
+  }, [selectedExternalOption]);
+  const openExternalWindow = (url) => {
+    if (!isCoinbase || isMobile) {
+      window.open(url, "_blank");
+    } else {
+      let width = 500;
+      let height = 700;
+      const left = Math.max(
+        0,
+        Math.floor((window.innerWidth - width) / 2) + window.screenX
+      );
+      const top = Math.max(
+        0,
+        Math.floor((window.innerHeight - height) / 2) + window.screenY
+      );
+      window.open(
+        url,
+        "popupWindow",
+        `width=${width},height=${height},left=${left},top=${top},scrollbars=yes`
+      );
+    }
+  };
+  const regenerateOrder = async () => {
+    if (!selectedExternalOption) return;
+    setIsRegenerating(true);
+    setExternalURL(null);
+    try {
+      payWithExternal(selectedExternalOption.id).then((url) => {
+        setExternalURL(url);
+        setIsRegenerating(false);
+      });
+    } catch (error) {
+      console.error("failed to regenerate order:", error);
+    }
+  };
+  const waitingMessageLength = paymentWaitingMessage?.length;
+  useEffect(() => {
+    triggerResize();
+  }, [waitingMessageLength, externalURL]);
+  if (!selectedExternalOption) {
+    return /* @__PURE__ */ jsx(PageContent, {});
+  }
+  return shouldShowExternalQRCodeOnDesktop(selectedExternalOption.id) && !isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ConnectWithQRCode, { externalUrl: externalURL ?? "" }),
+    isBinance && paymentWaitingMessage && !isRegenerating && /* @__PURE__ */ jsx(RegenerateContainer, { children: /* @__PURE__ */ jsx(
+      RegenerateLink,
+      {
+        as: "button",
+        onClick: regenerateOrder,
+        disabled: isRegenerating,
+        children: /* @__PURE__ */ jsxs("span", { children: [
+          locales.notWorking,
+          " ",
+          /* @__PURE__ */ jsx(Underline, { children: locales.regenerateOrder })
+        ] })
+      }
+    ) })
+  ] }) : /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsx(
+      ExternalPaymentSpinner,
+      {
+        logoURI: selectedExternalOption.logoURI,
+        logoShape: selectedExternalOption.logoShape
+      }
+    ),
+    /* @__PURE__ */ jsxs(ModalContent, { style: { marginLeft: 24, marginRight: 24 }, children: [
+      /* @__PURE__ */ jsx(ModalH1, { children: locales.waitingForPayment }),
+      paymentWaitingMessage && /* @__PURE__ */ jsx(ModalBody, { style: { marginTop: 12, marginBottom: 12 }, children: paymentWaitingMessage })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: /* @__PURE__ */ jsx(ExternalLinkIcon, {}),
+        onClick: () => {
+          if (externalURL) {
+            openExternalWindow(externalURL);
+          }
+        },
+        children: selectedExternalOption.cta
+      }
+    ),
+    isBinance && paymentWaitingMessage && /* @__PURE__ */ jsx(RegenerateContainer, { children: /* @__PURE__ */ jsx(
+      RegenerateLink,
+      {
+        as: "button",
+        onClick: regenerateOrder,
+        disabled: isRegenerating,
+        children: /* @__PURE__ */ jsx("span", { children: isRegenerating ? /* @__PURE__ */ jsx(Fragment, { children: locales.generatingNewOrder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          locales.notWorking,
+          " ",
+          /* @__PURE__ */ jsx(Underline, { children: locales.regenerateOrder })
+        ] }) })
+      }
+    ) })
+  ] });
+};
+const RegenerateContainer = styled.div`
+  text-align: center;
+  margin-top: 16px;
+  margin-bottom: -4px;
+`;
+const RegenerateLink = styled.a`
+  appearance: none;
+  user-select: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  height: 42px;
+  padding: 0 16px;
+  border-radius: 6px;
+  border: none;
+  background: none;
+  color: var(--ck-body-color-muted);
+  text-decoration-color: var(--ck-body-color-muted);
+  font-size: 15px;
+  line-height: 18px;
+  font-weight: 400;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  span {
+    opacity: 1;
+    transition: opacity 300ms ease;
+  }
+`;
+const Underline = styled.span`
+  text-underline-offset: 2px;
+  text-decoration: underline;
+`;
+
+export { WaitingExternal as default };
+//# sourceMappingURL=index.js.map

package/build/pay/packages/connectkit/src/components/Pages/WaitingExternal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/Pages/WaitingExternal/index.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport {\n  ModalBody,\n  ModalContent,\n  ModalH1,\n  PageContent,\n} from \"../../Common/Modal/styles\";\n\nimport {\n  ExternalPaymentOptions,\n  shouldShowExternalQRCodeOnDesktop,\n} from \"@daimo/pay-common\";\nimport { ExternalLinkIcon } from \"../../../assets/icons\";\nimport useIsMobile from \"../../../hooks/useIsMobile\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport styled from \"../../../styles/styled\";\nimport Button from \"../../Common/Button\";\nimport ConnectWithQRCode from \"../../DaimoPayModal/ConnectWithQRCode\";\nimport ExternalPaymentSpinner from \"../../Spinners/ExternalPaymentSpinner\";\n\nconst WaitingExternal: React.FC = () => {\n  const context = usePayContext();\n  const { triggerResize, paymentState } = context;\n  const { isMobile } = useIsMobile();\n  const locales = useLocales();\n  const { selectedExternalOption, payWithExternal, paymentWaitingMessage } =\n    paymentState;\n  const { order } = useDaimoPay();\n\n  let isCoinbase = false;\n  let isBinance = false;\n  if (selectedExternalOption) {\n    isCoinbase = selectedExternalOption.id === ExternalPaymentOptions.Coinbase;\n    isBinance = selectedExternalOption.id === ExternalPaymentOptions.Binance;\n  }\n\n  const [externalURL, setExternalURL] = useState<string | null>(null);\n  const [isRegenerating, setIsRegenerating] = useState(false);\n\n  useEffect(() => {\n    if (!selectedExternalOption) return;\n    payWithExternal(selectedExternalOption.id).then((url) => {\n      setExternalURL(url);\n      if (!shouldShowExternalQRCodeOnDesktop) {\n        openExternalWindow(url);\n      }\n    });\n  }, [selectedExternalOption]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const openExternalWindow = (url: string) => {\n    if (!isCoinbase || isMobile) {\n      // for non-exchange apps: open in a new tab\n      window.open(url, \"_blank\");\n    } else {\n      // for Coinbase: open in a popup window\n      // in portrait mode in the center of the screen\n      let width = 500;\n      let height = 700;\n      const left = Math.max(\n        0,\n        Math.floor((window.innerWidth - width) / 2) + window.screenX,\n      );\n      const top = Math.max(\n        0,\n        Math.floor((window.innerHeight - height) / 2) + window.screenY,\n      );\n\n      window.open(\n        url,\n        \"popupWindow\",\n        `width=${width},height=${height},left=${left},top=${top},scrollbars=yes`,\n      );\n    }\n  };\n\n  const regenerateOrder = async () => {\n    if (!selectedExternalOption) return;\n\n    setIsRegenerating(true);\n    setExternalURL(null);\n    try {\n      payWithExternal(selectedExternalOption.id).then((url) => {\n        setExternalURL(url);\n        setIsRegenerating(false);\n      });\n    } catch (error) {\n      console.error(\"failed to regenerate order:\", error);\n    }\n  };\n\n  const waitingMessageLength = paymentWaitingMessage?.length;\n\n  useEffect(() => {\n    triggerResize();\n  }, [waitingMessageLength, externalURL]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  if (!selectedExternalOption) {\n    return <PageContent></PageContent>;\n  }\n\n  return shouldShowExternalQRCodeOnDesktop(selectedExternalOption.id) &&\n    !isMobile ? (\n    <>\n      <ConnectWithQRCode externalUrl={externalURL ?? \"\"} />\n      {isBinance && paymentWaitingMessage && !isRegenerating && (\n        <RegenerateContainer>\n          <RegenerateLink\n            as=\"button\"\n            onClick={regenerateOrder}\n            disabled={isRegenerating}\n          >\n            <span>\n              {locales.notWorking}{\" \"}\n              <Underline>{locales.regenerateOrder}</Underline>\n            </span>\n          </RegenerateLink>\n        </RegenerateContainer>\n      )}\n    </>\n  ) : (\n    <PageContent>\n      <ExternalPaymentSpinner\n        logoURI={selectedExternalOption.logoURI}\n        logoShape={selectedExternalOption.logoShape}\n      />\n      <ModalContent style={{ marginLeft: 24, marginRight: 24 }}>\n        <ModalH1>{locales.waitingForPayment}</ModalH1>\n        {paymentWaitingMessage && (\n          <ModalBody style={{ marginTop: 12, marginBottom: 12 }}>\n            {paymentWaitingMessage}\n          </ModalBody>\n        )}\n      </ModalContent>\n      <Button\n        icon={<ExternalLinkIcon />}\n        onClick={() => {\n          if (externalURL) {\n            openExternalWindow(externalURL);\n          }\n        }}\n      >\n        {selectedExternalOption.cta}\n      </Button>\n      {isBinance && paymentWaitingMessage && (\n        <RegenerateContainer>\n          <RegenerateLink\n            as=\"button\"\n            onClick={regenerateOrder}\n            disabled={isRegenerating}\n          >\n            <span>\n              {isRegenerating ? (\n                <>{locales.generatingNewOrder}</>\n              ) : (\n                <>\n                  {locales.notWorking}{\" \"}\n                  <Underline>{locales.regenerateOrder}</Underline>\n                </>\n              )}\n            </span>\n          </RegenerateLink>\n        </RegenerateContainer>\n      )}\n    </PageContent>\n  );\n};\n\nconst RegenerateContainer = styled.div`\n  text-align: center;\n  margin-top: 16px;\n  margin-bottom: -4px;\n`;\n\nconst RegenerateLink = styled.a`\n  appearance: none;\n  user-select: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  height: 42px;\n  padding: 0 16px;\n  border-radius: 6px;\n  border: none;\n  background: none;\n  color: var(--ck-body-color-muted);\n  text-decoration-color: var(--ck-body-color-muted);\n  font-size: 15px;\n  line-height: 18px;\n  font-weight: 400;\n  cursor: pointer;\n\n  &:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  span {\n    opacity: 1;\n    transition: opacity 300ms ease;\n  }\n`;\n\nconst Underline = styled.span`\n  text-underline-offset: 2px;\n  text-decoration: underline;\n`;\n\nexport default WaitingExternal;\n"],"names":[],"mappings":"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"}

package/build/pay/packages/connectkit/src/components/Pages/WaitingWallet/index.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { PageContent, ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
+import { ExternalLinkIcon } from '../../../assets/icons.js';
+import Button from '../../Common/Button/index.js';
+import WalletPaymentSpinner from '../../Spinners/WalletPaymentSpinner/index.js';
+
+const WaitingWallet = () => {
+  const context = usePayContext();
+  const { paymentState } = context;
+  const { selectedWallet, paymentWaitingMessage, selectedWalletDeepLink } = paymentState;
+  const openWalletWindow = (url) => {
+    window.open(url, "_blank");
+  };
+  if (!selectedWallet) {
+    return /* @__PURE__ */ jsx(PageContent, { children: " No wallet selected " });
+  }
+  return /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsx(
+      WalletPaymentSpinner,
+      {
+        logo: selectedWallet.icon,
+        logoShape: selectedWallet.iconShape === "square" ? "squircle" : selectedWallet.iconShape || "squircle"
+      }
+    ),
+    /* @__PURE__ */ jsxs(ModalContent, { style: { marginLeft: 24, marginRight: 24 }, children: [
+      /* @__PURE__ */ jsxs(ModalH1, { children: [
+        "Continue in ",
+        selectedWallet.shortName ?? selectedWallet.name
+      ] }),
+      paymentWaitingMessage && /* @__PURE__ */ jsx(ModalBody, { style: { marginTop: 12, marginBottom: 12 }, children: paymentWaitingMessage })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: /* @__PURE__ */ jsx(ExternalLinkIcon, {}),
+        onClick: () => {
+          if (selectedWalletDeepLink) {
+            openWalletWindow(selectedWalletDeepLink);
+          }
+        },
+        children: `Open ${selectedWallet.name}`
+      }
+    )
+  ] });
+};
+
+export { WaitingWallet as default };
+//# sourceMappingURL=index.js.map

package/build/pay/packages/connectkit/src/components/Pages/WaitingWallet/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/Pages/WaitingWallet/index.tsx"],"sourcesContent":["import React from \"react\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport {\n  ModalBody,\n  ModalContent,\n  ModalH1,\n  PageContent,\n} from \"../../Common/Modal/styles\";\n\nimport { ExternalLinkIcon } from \"../../../assets/icons\";\nimport Button from \"../../Common/Button\";\nimport WalletPaymentSpinner from \"../../Spinners/WalletPaymentSpinner\";\n\nconst WaitingWallet: React.FC = () => {\n  const context = usePayContext();\n  const { paymentState } = context;\n\n  const { selectedWallet, paymentWaitingMessage, selectedWalletDeepLink } =\n    paymentState;\n\n  const openWalletWindow = (url: string) => {\n    window.open(url, \"_blank\");\n  };\n\n  if (!selectedWallet) {\n    return <PageContent> No wallet selected </PageContent>;\n  }\n\n  return (\n    <PageContent>\n      <WalletPaymentSpinner\n        logo={selectedWallet.icon}\n        logoShape={\n          selectedWallet.iconShape === \"square\"\n            ? \"squircle\"\n            : selectedWallet.iconShape || \"squircle\"\n        }\n      />\n      <ModalContent style={{ marginLeft: 24, marginRight: 24 }}>\n        <ModalH1>\n          Continue in {selectedWallet.shortName ?? selectedWallet.name}\n        </ModalH1>\n        {paymentWaitingMessage && (\n          <ModalBody style={{ marginTop: 12, marginBottom: 12 }}>\n            {paymentWaitingMessage}\n          </ModalBody>\n        )}\n      </ModalContent>\n      <Button\n        icon={<ExternalLinkIcon />}\n        onClick={() => {\n          if (selectedWalletDeepLink) {\n            openWalletWindow(selectedWalletDeepLink);\n          }\n        }}\n      >\n        {`Open ${selectedWallet.name}`}\n      </Button>\n    </PageContent>\n  );\n};\n\nexport default WaitingWallet;\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,gBAA0B,MAAM;AACpC,EAAA,MAAM,UAAU,aAAc,EAAA,CAAA;AAC9B,EAAM,MAAA,EAAE,cAAiB,GAAA,OAAA,CAAA;AAEzB,EAAA,MAAM,EAAE,cAAA,EAAgB,qBAAuB,EAAA,sBAAA,EAC7C,GAAA,YAAA,CAAA;AAEF,EAAM,MAAA,gBAAA,GAAmB,CAAC,GAAgB,KAAA;AACxC,IAAO,MAAA,CAAA,IAAA,CAAK,KAAK,QAAQ,CAAA,CAAA;AAAA,GAC3B,CAAA;AAEA,EAAA,IAAI,CAAC,cAAgB,EAAA;AACnB,IAAO,uBAAA,GAAA,CAAC,eAAY,QAAoB,EAAA,sBAAA,EAAA,CAAA,CAAA;AAAA,GAC1C;AAEA,EAAA,4BACG,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,oBAAA;AAAA,MAAA;AAAA,QACC,MAAM,cAAe,CAAA,IAAA;AAAA,QACrB,WACE,cAAe,CAAA,SAAA,KAAc,QACzB,GAAA,UAAA,GACA,eAAe,SAAa,IAAA,UAAA;AAAA,OAAA;AAAA,KAEpC;AAAA,oBACA,IAAA,CAAC,gBAAa,KAAO,EAAA,EAAE,YAAY,EAAI,EAAA,WAAA,EAAa,IAClD,EAAA,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,OAAQ,EAAA,EAAA,QAAA,EAAA;AAAA,QAAA,cAAA;AAAA,QACM,cAAA,CAAe,aAAa,cAAe,CAAA,IAAA;AAAA,OAC1D,EAAA,CAAA;AAAA,MACC,qBAAA,oBACE,GAAA,CAAA,SAAA,EAAA,EAAU,KAAO,EAAA,EAAE,WAAW,EAAI,EAAA,YAAA,EAAc,EAAG,EAAA,EACjD,QACH,EAAA,qBAAA,EAAA,CAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAA,sBAAO,gBAAiB,EAAA,EAAA,CAAA;AAAA,QACxB,SAAS,MAAM;AACb,UAAA,IAAI,sBAAwB,EAAA;AAC1B,YAAA,gBAAA,CAAiB,sBAAsB,CAAA,CAAA;AAAA,WACzC;AAAA,SACF;AAAA,QAEC,QAAA,EAAA,CAAA,KAAA,EAAQ,eAAe,IAAI,CAAA,CAAA;AAAA,OAAA;AAAA,KAC9B;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/build/pay/packages/connectkit/src/components/Pages/Warning/index.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ModalBody, PageContent, ModalContent } from '../../Common/Modal/styles.js';
+import styled from '../../../styles/styled/index.js';
+import Button from '../../Common/Button/index.js';
+
+function WarningPage({
+  body,
+  primaryLabel,
+  secondaryLabel,
+  onPrimary,
+  onSecondary
+}) {
+  return /* @__PURE__ */ jsx(PageContent, { style: { paddingTop: 8 }, children: /* @__PURE__ */ jsx(
+    ModalContent,
+    {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        paddingBottom: 0,
+        paddingTop: 0,
+        position: "relative"
+      },
+      children: /* @__PURE__ */ jsxs(CenterContainer, { children: [
+        /* @__PURE__ */ jsx(WarningBody, { style: { textAlign: "center" }, children: body }),
+        /* @__PURE__ */ jsx("div", { style: { height: 8 } }),
+        /* @__PURE__ */ jsx(Button, { onClick: onPrimary, children: primaryLabel }),
+        /* @__PURE__ */ jsx("div", { style: { height: 8 } }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            style: { background: "var(--ck-body-color-danger)", color: "#fff" },
+            variant: "secondary",
+            onClick: onSecondary,
+            children: secondaryLabel
+          }
+        )
+      ] })
+    }
+  ) });
+}
+const CenterContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  max-width: 100%;
+`;
+const WarningBody = styled(ModalBody)`
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export { WarningPage as default };
+//# sourceMappingURL=index.js.map

package/build/pay/packages/connectkit/src/components/Pages/Warning/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/Pages/Warning/index.tsx"],"sourcesContent":["import {\n  ModalBody,\n  ModalContent,\n  PageContent,\n} from \"../../Common/Modal/styles\";\n\nimport styled from \"../../../styles/styled\";\nimport Button from \"../../Common/Button\";\n\ntype WarningProps = {\n  body: React.ReactNode;\n  primaryLabel: string;\n  secondaryLabel: string;\n  onPrimary: () => void;\n  onSecondary: () => void;\n};\n\nexport default function WarningPage({\n  body,\n  primaryLabel,\n  secondaryLabel,\n  onPrimary,\n  onSecondary,\n}: WarningProps) {\n  return (\n    <PageContent style={{ paddingTop: 8 }}>\n      <ModalContent\n        style={{\n          display: \"flex\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          paddingBottom: 0,\n          paddingTop: 0,\n          position: \"relative\",\n        }}\n      >\n        <CenterContainer>\n          <WarningBody style={{ textAlign: \"center\" }}>{body}</WarningBody>\n          <div style={{ height: 8 }} />\n          <Button onClick={onPrimary}>{primaryLabel}</Button>\n          <div style={{ height: 8 }} />\n          <Button\n            style={{ background: \"var(--ck-body-color-danger)\", color: \"#fff\" }}\n            variant=\"secondary\"\n            onClick={onSecondary}\n          >\n            {secondaryLabel}\n          </Button>\n        </CenterContainer>\n      </ModalContent>\n    </PageContent>\n  );\n}\n\nconst CenterContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 16px;\n  max-width: 100%;\n`;\n\nconst WarningBody = styled(ModalBody)`\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n"],"names":[],"mappings":";;;;;AAiBA,SAAwB,WAAY,CAAA;AAAA,EAClC,IAAA;AAAA,EACA,YAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AACF,CAAiB,EAAA;AACf,EAAA,2BACG,WAAY,EAAA,EAAA,KAAA,EAAO,EAAE,UAAA,EAAY,GAChC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,OAAS,EAAA,MAAA;AAAA,QACT,cAAgB,EAAA,QAAA;AAAA,QAChB,UAAY,EAAA,QAAA;AAAA,QACZ,aAAe,EAAA,CAAA;AAAA,QACf,UAAY,EAAA,CAAA;AAAA,QACZ,QAAU,EAAA,UAAA;AAAA,OACZ;AAAA,MAEA,+BAAC,eACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,eAAY,KAAO,EAAA,EAAE,SAAW,EAAA,QAAA,IAAa,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,4BAClD,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,MAAA,EAAQ,GAAK,EAAA,CAAA;AAAA,wBAC1B,GAAA,CAAA,MAAA,EAAA,EAAO,OAAS,EAAA,SAAA,EAAY,QAAa,EAAA,YAAA,EAAA,CAAA;AAAA,4BACzC,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,MAAA,EAAQ,GAAK,EAAA,CAAA;AAAA,wBAC3B,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAO,EAAA,EAAE,UAAY,EAAA,6BAAA,EAA+B,OAAO,MAAO,EAAA;AAAA,YAClE,OAAQ,EAAA,WAAA;AAAA,YACR,OAAS,EAAA,WAAA;AAAA,YAER,QAAA,EAAA,cAAA;AAAA,WAAA;AAAA,SACH;AAAA,OACF,EAAA,CAAA;AAAA,KAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ,CAAA;AAEA,MAAM,kBAAkB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAQ/B,MAAM,WAAA,GAAc,OAAO,SAAS,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}

package/build/pay/packages/connectkit/src/components/Spinners/CircleSpinner/index.js

@@ -0,0 +1,104 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { LogoContainer, Logo, SpinnerContainer, Spinner, ExpiringSpinner } from './styles.js';
+import { AnimatePresence } from 'framer-motion';
+
+const CircleSpinner = ({
+  logo,
+  smallLogo,
+  loading = true,
+  unavailable = false,
+  countdown = false
+}) => {
+  return /* @__PURE__ */ jsxs(
+    LogoContainer,
+    {
+      transition: { duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] },
+      children: [
+        /* @__PURE__ */ jsx(
+          Logo,
+          {
+            $small: !unavailable && smallLogo,
+            style: unavailable ? { borderRadius: 0 } : void 0,
+            children: logo
+          }
+        ),
+        /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsxs(AnimatePresence, { children: [
+          loading && /* @__PURE__ */ jsx(
+            Spinner,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: {
+                opacity: 0,
+                transition: {
+                  duration: countdown ? 1 : 0
+                }
+              },
+              children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  "aria-hidden": "true",
+                  width: "102",
+                  height: "102",
+                  viewBox: "0 0 102 102",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M52 100C24.3858 100 2 77.6142 2 50",
+                        stroke: "url(#paint0_linear_1943_4139)",
+                        strokeWidth: "3.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+                      "linearGradient",
+                      {
+                        id: "paint0_linear_1943_4139",
+                        x1: "2",
+                        y1: "48.5",
+                        x2: "53",
+                        y2: "100",
+                        gradientUnits: "userSpaceOnUse",
+                        children: [
+                          /* @__PURE__ */ jsx("stop", { stopColor: "var(--ck-spinner-color)" }),
+                          /* @__PURE__ */ jsx(
+                            "stop",
+                            {
+                              offset: "1",
+                              stopColor: "var(--ck-spinner-color)",
+                              stopOpacity: "0"
+                            }
+                          )
+                        ]
+                      }
+                    ) })
+                  ]
+                }
+              )
+            }
+          ),
+          countdown && /* @__PURE__ */ jsxs(
+            ExpiringSpinner,
+            {
+              initial: { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition: { duration: 0.25 },
+              children: [
+                /* @__PURE__ */ jsx("div", {}),
+                /* @__PURE__ */ jsx("div", {})
+              ]
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+
+export { CircleSpinner as default };
+//# sourceMappingURL=index.js.map

package/build/pay/packages/connectkit/src/components/Spinners/CircleSpinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/Spinners/CircleSpinner/index.tsx"],"sourcesContent":["import {\n  ExpiringSpinner,\n  Logo,\n  LogoContainer,\n  Spinner,\n  SpinnerContainer,\n} from \"./styles\";\n\nimport { AnimatePresence } from \"framer-motion\";\nimport React from \"react\";\n\nconst CircleSpinner = ({\n  logo,\n  smallLogo,\n  loading = true,\n  unavailable = false,\n  countdown = false,\n}: {\n  logo?: React.ReactNode;\n  smallLogo?: boolean;\n  loading?: boolean;\n  unavailable?: boolean;\n  countdown?: boolean;\n}) => {\n  return (\n    <LogoContainer\n      transition={{ duration: 0.5, ease: [0.175, 0.885, 0.32, 0.98] }}\n    >\n      <Logo\n        $small={!unavailable && smallLogo}\n        style={unavailable ? { borderRadius: 0 } : undefined}\n      >\n        {logo}\n      </Logo>\n      <SpinnerContainer>\n        <AnimatePresence>\n          {loading && (\n            <Spinner\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{\n                opacity: 0,\n                transition: {\n                  duration: countdown ? 1 : 0,\n                },\n              }}\n            >\n              <svg\n                aria-hidden=\"true\"\n                width=\"102\"\n                height=\"102\"\n                viewBox=\"0 0 102 102\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M52 100C24.3858 100 2 77.6142 2 50\"\n                  stroke=\"url(#paint0_linear_1943_4139)\"\n                  strokeWidth=\"3.5\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n                <defs>\n                  <linearGradient\n                    id=\"paint0_linear_1943_4139\"\n                    x1=\"2\"\n                    y1=\"48.5\"\n                    x2=\"53\"\n                    y2=\"100\"\n                    gradientUnits=\"userSpaceOnUse\"\n                  >\n                    <stop stopColor=\"var(--ck-spinner-color)\" />\n                    <stop\n                      offset=\"1\"\n                      stopColor=\"var(--ck-spinner-color)\"\n                      stopOpacity=\"0\"\n                    />\n                  </linearGradient>\n                </defs>\n              </svg>\n            </Spinner>\n          )}\n          {countdown && (\n            <ExpiringSpinner\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={{ duration: 0.25 }}\n            >\n              <div />\n              <div />\n            </ExpiringSpinner>\n          )}\n        </AnimatePresence>\n      </SpinnerContainer>\n    </LogoContainer>\n  );\n};\n\nexport default CircleSpinner;\n"],"names":[],"mappings":"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"}

package/build/pay/packages/connectkit/src/components/Spinners/CircleSpinner/styles.js

@@ -0,0 +1,117 @@
+import { motion } from 'framer-motion';
+import { css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+const LogoContainer = styled(motion.div)`
+  z-index: 4;
+  position: relative;
+  width: 100px;
+  height: 100px;
+  svg {
+    z-index: 3;
+    position: relative;
+    display: block;
+  }
+`;
+const Logo = styled(motion.div)`
+  z-index: 2;
+  position: absolute;
+  overflow: hidden;
+  inset: 6px;
+  border-radius: 50px;
+  background: var(--ck-body-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg,
+  img {
+    pointer-events: none;
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+    height: 100%;
+    ${(props) => props.$small && css`
+        width: 85%;
+        height: 85%;
+      `}
+  }
+`;
+const SpinnerContainer = styled(motion.div)`
+  position: absolute;
+  inset: -2px;
+`;
+const ExpiringSpinner = styled(motion.div)`
+  pointer-events: none;
+  user-select: none;
+  z-index: 1;
+  position: absolute;
+  inset: -25%;
+  background: var(--ck-body-background);
+  div:first-child {
+    position: absolute;
+    left: 50%;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow: hidden;
+    &:before {
+      position: absolute;
+      content: "";
+      inset: 0;
+      background: var(--ck-spinner-color);
+      transform-origin: 0% 50%;
+      animation: rotateExpiringSpinner 5000ms ease-in both;
+    }
+  }
+  div:last-child {
+    position: absolute;
+    left: 0;
+    right: 50%;
+    top: 0;
+    bottom: 0;
+    overflow: hidden;
+    &:before {
+      position: absolute;
+      content: "";
+      inset: 0;
+      background: var(--ck-spinner-color);
+      transform-origin: 100% 50%;
+      animation: rotateExpiringSpinner 5000ms ease-out 5000ms both;
+    }
+  }
+  @keyframes rotateExpiringSpinner {
+    0% {
+      transform: rotate(-180deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+`;
+const Spinner = styled(motion.div)`
+  pointer-events: none;
+  user-select: none;
+  z-index: 1;
+  position: absolute;
+  inset: 0;
+  svg {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    animation: rotateSpinner 1200ms linear infinite;
+  }
+  @keyframes rotateSpinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export { ExpiringSpinner, Logo, LogoContainer, Spinner, SpinnerContainer };
+//# sourceMappingURL=styles.js.map

package/build/pay/packages/connectkit/src/components/Spinners/CircleSpinner/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../../src/components/Spinners/CircleSpinner/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { css } from \"styled-components\";\nimport styled from \"./../../../styles/styled\";\n\nexport const LogoContainer = styled(motion.div)`\n  z-index: 4;\n  position: relative;\n  width: 100px;\n  height: 100px;\n  svg {\n    z-index: 3;\n    position: relative;\n    display: block;\n  }\n`;\nexport const Logo = styled(motion.div)<{ $small?: boolean }>`\n  z-index: 2;\n  position: absolute;\n  overflow: hidden;\n  inset: 6px;\n  border-radius: 50px;\n  background: var(--ck-body-background);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  svg,\n  img {\n    pointer-events: none;\n    display: block;\n    margin: 0 auto;\n    width: 100%;\n    height: 100%;\n    ${(props) =>\n      props.$small &&\n      css`\n        width: 85%;\n        height: 85%;\n      `}\n  }\n`;\n\nexport const SpinnerContainer = styled(motion.div)`\n  position: absolute;\n  inset: -2px;\n`;\nexport const ExpiringSpinner = styled(motion.div)`\n  pointer-events: none;\n  user-select: none;\n  z-index: 1;\n  position: absolute;\n  inset: -25%;\n  background: var(--ck-body-background);\n  div:first-child {\n    position: absolute;\n    left: 50%;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    overflow: hidden;\n    &:before {\n      position: absolute;\n      content: \"\";\n      inset: 0;\n      background: var(--ck-spinner-color);\n      transform-origin: 0% 50%;\n      animation: rotateExpiringSpinner 5000ms ease-in both;\n    }\n  }\n  div:last-child {\n    position: absolute;\n    left: 0;\n    right: 50%;\n    top: 0;\n    bottom: 0;\n    overflow: hidden;\n    &:before {\n      position: absolute;\n      content: \"\";\n      inset: 0;\n      background: var(--ck-spinner-color);\n      transform-origin: 100% 50%;\n      animation: rotateExpiringSpinner 5000ms ease-out 5000ms both;\n    }\n  }\n  @keyframes rotateExpiringSpinner {\n    0% {\n      transform: rotate(-180deg);\n    }\n    100% {\n      transform: rotate(0deg);\n    }\n  }\n`;\nexport const Spinner = styled(motion.div)`\n  pointer-events: none;\n  user-select: none;\n  z-index: 1;\n  position: absolute;\n  inset: 0;\n  svg {\n    display: block;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    animation: rotateSpinner 1200ms linear infinite;\n  }\n  @keyframes rotateSpinner {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n"],"names":[],"mappings":";;;;AAIa,MAAA,aAAA,GAAgB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAWjC,MAAA,IAAA,GAAO,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiB/B,EAAA,CAAC,KACD,KAAA,KAAA,CAAM,MACN,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA,MAGC,CAAA,CAAA;AAAA;AAAA,EAAA;AAIM,MAAA,gBAAA,GAAmB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAIpC,MAAA,eAAA,GAAkB,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAgDnC,MAAA,OAAA,GAAU,MAAO,CAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

package/build/pay/packages/connectkit/src/components/Spinners/ExternalPaymentSpinner/index.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { AnimatePresence } from 'framer-motion';
+import CircleSpinner from '../CircleSpinner/index.js';
+import SquircleSpinner from '../SquircleSpinner/index.js';
+import { LoadingContainer, AnimationContainer } from '../styles.js';
+
+const ExternalPaymentSpinner = ({
+  logoURI,
+  logoShape
+}) => {
+  const optionSpinner = (() => {
+    if (logoShape === "circle") {
+      return /* @__PURE__ */ jsx(
+        CircleSpinner,
+        {
+          logo: /* @__PURE__ */ jsx("img", { src: logoURI }),
+          loading: false,
+          unavailable: false
+        }
+      );
+    } else {
+      return /* @__PURE__ */ jsx(SquircleSpinner, { logo: /* @__PURE__ */ jsx("img", { src: logoURI }), loading: false });
+    }
+  })();
+  return /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(AnimationContainer, { $circle: logoShape === "circle", children: /* @__PURE__ */ jsx(AnimatePresence, { children: optionSpinner }) }) });
+};
+
+export { ExternalPaymentSpinner as default };
+//# sourceMappingURL=index.js.map

package/build/pay/packages/connectkit/src/components/Spinners/ExternalPaymentSpinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/Spinners/ExternalPaymentSpinner/index.tsx"],"sourcesContent":["import { AnimatePresence } from \"framer-motion\";\nimport CircleSpinner from \"../CircleSpinner\";\nimport SquircleSpinner from \"../SquircleSpinner\";\nimport { AnimationContainer, LoadingContainer } from \"../styles\";\n\nconst ExternalPaymentSpinner = ({\n  logoURI,\n  logoShape,\n}: {\n  logoURI: string;\n  logoShape: \"circle\" | \"squircle\";\n}) => {\n  const optionSpinner = (() => {\n    if (logoShape === \"circle\") {\n      return (\n        <CircleSpinner\n          logo={<img src={logoURI} />}\n          loading={false}\n          unavailable={false}\n        />\n      );\n    } else {\n      return <SquircleSpinner logo={<img src={logoURI} />} loading={false} />;\n    }\n  })();\n\n  return (\n    <LoadingContainer>\n      <AnimationContainer $circle={logoShape === \"circle\"}>\n        <AnimatePresence>{optionSpinner}</AnimatePresence>\n      </AnimationContainer>\n    </LoadingContainer>\n  );\n};\n\nexport default ExternalPaymentSpinner;\n"],"names":[],"mappings":";;;;;;AAKA,MAAM,yBAAyB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA,SAAA;AACF,CAGM,KAAA;AACJ,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAA,IAAI,cAAc,QAAU,EAAA;AAC1B,MACE,uBAAA,GAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,IAAM,kBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAK,OAAS,EAAA,CAAA;AAAA,UACzB,OAAS,EAAA,KAAA;AAAA,UACT,WAAa,EAAA,KAAA;AAAA,SAAA;AAAA,OACf,CAAA;AAAA,KAEG,MAAA;AACL,MAAO,uBAAA,GAAA,CAAC,mBAAgB,IAAM,kBAAA,GAAA,CAAC,SAAI,GAAK,EAAA,OAAA,EAAS,CAAI,EAAA,OAAA,EAAS,KAAO,EAAA,CAAA,CAAA;AAAA,KACvE;AAAA,GACC,GAAA,CAAA;AAEH,EACE,uBAAA,GAAA,CAAC,gBACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,kBAAmB,EAAA,EAAA,OAAA,EAAS,SAAc,KAAA,QAAA,EACzC,QAAC,kBAAA,GAAA,CAAA,eAAA,EAAA,EAAiB,QAAc,EAAA,aAAA,EAAA,CAAA,EAClC,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}