@daimo/pay 1.18.2 → 1.19.0

package/build/connectkit/src/components/Pages/Confirmation/index.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo, useEffect } from 'react';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { PageContent, ModalContent, ModalH1, Link, ModalBody } from '../../Common/Modal/styles.js';
+import { getOrderDestChainId, assertNotNull, getOrderSourceChainId, assert, getChainExplorerTxUrl } from '@daimo/pay-common';
+import { motion } from 'framer-motion';
+import { TickIcon, LoadingCircleIcon } from '../../../assets/icons.js';
+import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
+import styled from '../../../styles/styled/index.js';
+import { getSupportUrl } from '../../../utils/supportUrl.js';
+import PoweredByFooter from '../../Common/PoweredByFooter/index.js';
+
+const Confirmation = () => {
+  const { showContactSupport, confirmationMessage, onSuccess } = usePayContext();
+  const { order, paymentState } = useDaimoPay();
+  const { done, txURL } = useMemo(() => {
+    if (paymentState === "payment_completed" || paymentState === "payment_bounced") {
+      let finalChainId;
+      let finalTxHash;
+      if (order.passedToAddress == null) {
+        finalChainId = getOrderDestChainId(order);
+        finalTxHash = order.destFastFinishTxHash ?? order.destClaimTxHash;
+      } else {
+        finalChainId = assertNotNull(getOrderSourceChainId(order));
+        finalTxHash = order.sourceInitiateTxHash;
+      }
+      assert(
+        finalTxHash != null,
+        `[CONFIRMATION] paymentState: ${paymentState}, but missing txHash`
+      );
+      const txURL2 = getChainExplorerTxUrl(finalChainId, finalTxHash);
+      return { done: true, txURL: txURL2 };
+    }
+    return { done: false, txURL: void 0 };
+  }, [paymentState, order]);
+  useEffect(() => {
+    if (done) {
+      onSuccess();
+    }
+  }, [done, onSuccess]);
+  return /* @__PURE__ */ jsx(
+    PageContent,
+    {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: /* @__PURE__ */ jsxs(
+        ModalContent,
+        {
+          style: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            paddingBottom: 0
+          },
+          children: [
+            /* @__PURE__ */ jsx(AnimationContainer, { children: /* @__PURE__ */ jsxs(InsetContainer, { children: [
+              /* @__PURE__ */ jsx(Spinner, { $status: done }),
+              /* @__PURE__ */ jsx(SuccessIcon, { $status: done })
+            ] }) }),
+            !done ? /* @__PURE__ */ jsx(ModalH1, { children: "Confirming..." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(ModalH1, { children: /* @__PURE__ */ jsx(Link, { href: txURL, target: "_blank", rel: "noopener noreferrer", children: "Payment Completed" }) }),
+              confirmationMessage && /* @__PURE__ */ jsx(ModalBody, { children: confirmationMessage })
+            ] }),
+            /* @__PURE__ */ jsx(
+              PoweredByFooter,
+              {
+                supportUrl: showContactSupport ? getSupportUrl(
+                  order?.id?.toString() ?? "",
+                  done ? "Confirmed" : "Confirming"
+                ) : void 0
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const AnimationContainer = styled(motion.div)`
+  position: relative;
+  width: 100px;
+  height: 100px;
+  transition: transform 0.5s ease-in-out;
+  margin-bottom: 16px;
+`;
+const InsetContainer = styled(motion.div)`
+  position: absolute;
+  overflow: hidden;
+  inset: 6px;
+  border-radius: 50px;
+  background: var(--ck-body-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+`;
+const SuccessIcon = styled(TickIcon)`
+  color: var(--ck-body-color-valid);
+  transition: all 0.2s ease-in-out;
+  position: absolute;
+  opacity: ${(props) => props.$status ? 1 : 0};
+  transform: ${(props) => props.$status ? "scale(1)" : "scale(0.5)"};
+`;
+const Spinner = styled(LoadingCircleIcon)`
+  position: absolute;
+  transition: all 0.2s ease-in-out;
+  animation: rotateSpinner 400ms linear infinite;
+  opacity: ${(props) => props.$status ? 0 : 1};
+
+  @keyframes rotateSpinner {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export { Confirmation as default };
+//# sourceMappingURL=index.js.map

package/build/connectkit/src/components/Pages/Confirmation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Pages/Confirmation/index.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport {\n  Link,\n  ModalBody,\n  ModalContent,\n  ModalH1,\n  PageContent,\n} from \"../../Common/Modal/styles\";\n\nimport {\n  assert,\n  assertNotNull,\n  getChainExplorerTxUrl,\n  getOrderDestChainId,\n  getOrderSourceChainId,\n} from \"@daimo/pay-common\";\nimport { motion } from \"framer-motion\";\nimport { Hex } from \"viem\";\nimport { LoadingCircleIcon, TickIcon } from \"../../../assets/icons\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport styled from \"../../../styles/styled\";\nimport { getSupportUrl } from \"../../../utils/supportUrl\";\nimport PoweredByFooter from \"../../Common/PoweredByFooter\";\n\nconst Confirmation: React.FC = () => {\n  const { showContactSupport, confirmationMessage, onSuccess } =\n    usePayContext();\n  const { order, paymentState } = useDaimoPay();\n\n  const { done, txURL } = useMemo(() => {\n    if (\n      paymentState === \"payment_completed\" ||\n      paymentState === \"payment_bounced\"\n    ) {\n      let finalChainId: number;\n      let finalTxHash: Hex | null;\n\n      if (order.passedToAddress == null) {\n        finalChainId = getOrderDestChainId(order);\n        finalTxHash = order.destFastFinishTxHash ?? order.destClaimTxHash;\n      } else {\n        finalChainId = assertNotNull(getOrderSourceChainId(order));\n        finalTxHash = order.sourceInitiateTxHash;\n      }\n      assert(\n        finalTxHash != null,\n        `[CONFIRMATION] paymentState: ${paymentState}, but missing txHash`,\n      );\n      const txURL = getChainExplorerTxUrl(finalChainId, finalTxHash);\n\n      return { done: true, txURL };\n    }\n    return { done: false, txURL: undefined };\n  }, [paymentState, order]);\n\n  useEffect(() => {\n    if (done) {\n      onSuccess();\n    }\n  }, [done, onSuccess]);\n\n  return (\n    <PageContent\n      style={{\n        display: \"flex\",\n        justifyContent: \"center\",\n        alignItems: \"center\",\n      }}\n    >\n      <ModalContent\n        style={{\n          display: \"flex\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          paddingBottom: 0,\n        }}\n      >\n        <AnimationContainer>\n          <InsetContainer>\n            <Spinner $status={done} />\n            <SuccessIcon $status={done} />\n          </InsetContainer>\n        </AnimationContainer>\n\n        {!done ? (\n          <ModalH1>Confirming...</ModalH1>\n        ) : (\n          <>\n            <ModalH1>\n              <Link href={txURL} target=\"_blank\" rel=\"noopener noreferrer\">\n                Payment Completed\n              </Link>\n            </ModalH1>\n            {confirmationMessage && (\n              <ModalBody>{confirmationMessage}</ModalBody>\n            )}\n          </>\n        )}\n\n        <PoweredByFooter\n          // If showContactSupport is false, we don't want to show the support\n          // link, so we pass undefined\n          supportUrl={\n            showContactSupport\n              ? getSupportUrl(\n                  order?.id?.toString() ?? \"\",\n                  done ? \"Confirmed\" : \"Confirming\",\n                )\n              : undefined\n          }\n        />\n      </ModalContent>\n    </PageContent>\n  );\n};\n\nconst AnimationContainer = styled(motion.div)`\n  position: relative;\n  width: 100px;\n  height: 100px;\n  transition: transform 0.5s ease-in-out;\n  margin-bottom: 16px;\n`;\n\nconst InsetContainer = styled(motion.div)`\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    position: absolute;\n    width: 100%;\n    height: 100%;\n  }\n`;\n\nconst SuccessIcon = styled(TickIcon)<{ $status: boolean }>`\n  color: var(--ck-body-color-valid);\n  transition: all 0.2s ease-in-out;\n  position: absolute;\n  opacity: ${(props) => (props.$status ? 1 : 0)};\n  transform: ${(props) => (props.$status ? \"scale(1)\" : \"scale(0.5)\")};\n`;\n\nconst Spinner = styled(LoadingCircleIcon)<{ $status: boolean }>`\n  position: absolute;\n  transition: all 0.2s ease-in-out;\n  animation: rotateSpinner 400ms linear infinite;\n  opacity: ${(props) => (props.$status ? 0 : 1)};\n\n  @keyframes rotateSpinner {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n`;\n\nexport default Confirmation;\n"],"names":["txURL"],"mappings":"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"}

package/build/connectkit/src/components/Pages/Connectors/index.js

@@ -0,0 +1,28 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { PageContent, Disclaimer } from '../../Common/Modal/styles.js';
+import { DaimoPayOrderMode } from '@daimo/pay-common';
+import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
+import useLocales from '../../../hooks/useLocales.js';
+import ConnectorList from '../../Common/ConnectorList/index.js';
+import { OrderHeader } from '../../Common/OrderHeader/index.js';
+
+const Wallets = () => {
+  const context = usePayContext();
+  useLocales({});
+  const { hydrateOrder, order } = useDaimoPay();
+  useEffect(() => {
+    if (!context.paymentState.isDepositFlow && order != null && order.mode !== DaimoPayOrderMode.HYDRATED) {
+      hydrateOrder();
+    }
+  }, [context.paymentState.isDepositFlow, hydrateOrder, order]);
+  return /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsx(OrderHeader, { minified: true }),
+    /* @__PURE__ */ jsx(ConnectorList, {}),
+    context.options?.disclaimer && /* @__PURE__ */ jsx(Disclaimer, { style: { visibility: "hidden", pointerEvents: "none" }, children: /* @__PURE__ */ jsx("div", { children: context.options?.disclaimer }) })
+  ] });
+};
+
+export { Wallets as default };
+//# sourceMappingURL=index.js.map

package/build/connectkit/src/components/Pages/Connectors/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Pages/Connectors/index.tsx"],"sourcesContent":["import React, { useEffect } from \"react\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\n\nimport { Disclaimer, PageContent } from \"../../Common/Modal/styles\";\n\nimport { DaimoPayOrderMode } from \"@daimo/pay-common\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport useLocales from \"../../../hooks/useLocales\";\nimport ConnectorList from \"../../Common/ConnectorList\";\nimport { OrderHeader } from \"../../Common/OrderHeader\";\n\nconst Wallets: React.FC = () => {\n  const context = usePayContext();\n  const locales = useLocales({});\n\n  const { hydrateOrder, order } = useDaimoPay();\n\n  // If we're not in deposit mode, hydrate immediately.\n  useEffect(() => {\n    if (\n      !context.paymentState.isDepositFlow &&\n      order != null &&\n      order.mode !== DaimoPayOrderMode.HYDRATED\n    ) {\n      hydrateOrder();\n    }\n  }, [context.paymentState.isDepositFlow, hydrateOrder, order]);\n\n  return (\n    <PageContent>\n      <OrderHeader minified />\n      <ConnectorList />\n      {context.options?.disclaimer && (\n        <Disclaimer style={{ visibility: \"hidden\", pointerEvents: \"none\" }}>\n          <div>{context.options?.disclaimer}</div>\n        </Disclaimer>\n      )}\n    </PageContent>\n  );\n};\n\nexport default Wallets;\n"],"names":[],"mappings":";;;;;;;;;;AAWA,MAAM,UAAoB,MAAM;AAC9B,EAAA,MAAM,UAAU,aAAc,EAAA,CAAA;AAC9B,EAAgB,UAAW,CAAA,EAAE,EAAA;AAE7B,EAAA,MAAM,EAAE,YAAA,EAAc,KAAM,EAAA,GAAI,WAAY,EAAA,CAAA;AAG5C,EAAA,SAAA,CAAU,MAAM;AACd,IACE,IAAA,CAAC,QAAQ,YAAa,CAAA,aAAA,IACtB,SAAS,IACT,IAAA,KAAA,CAAM,IAAS,KAAA,iBAAA,CAAkB,QACjC,EAAA;AACA,MAAa,YAAA,EAAA,CAAA;AAAA,KACf;AAAA,KACC,CAAC,OAAA,CAAQ,aAAa,aAAe,EAAA,YAAA,EAAc,KAAK,CAAC,CAAA,CAAA;AAE5D,EAAA,4BACG,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,WAAA,EAAA,EAAY,UAAQ,IAAC,EAAA,CAAA;AAAA,wBACrB,aAAc,EAAA,EAAA,CAAA;AAAA,IACd,QAAQ,OAAS,EAAA,UAAA,oBACf,GAAA,CAAA,UAAA,EAAA,EAAW,OAAO,EAAE,UAAA,EAAY,QAAU,EAAA,aAAA,EAAe,QACxD,EAAA,QAAA,kBAAA,GAAA,CAAC,SAAK,QAAQ,EAAA,OAAA,CAAA,OAAA,EAAS,YAAW,CACpC,EAAA,CAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/build/connectkit/src/components/Pages/DownloadApp/index.js

@@ -0,0 +1,35 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { PageContent, ModalContent, ModalBody } from '../../Common/Modal/styles.js';
+import CustomQRCode from '../../Common/CustomQRCode/index.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { useWallet } from '../../../wallets/useWallets.js';
+
+const DownloadApp = () => {
+  const { pendingConnectorId } = usePayContext();
+  const wallet = useWallet(pendingConnectorId ?? "");
+  const locales = useLocales({
+    CONNECTORNAME: wallet?.name
+  });
+  if (!wallet) return /* @__PURE__ */ jsx(Fragment, { children: "Wallet not found" });
+  const downloads = {
+    ios: wallet.downloadUrls?.ios,
+    android: wallet.downloadUrls?.android,
+    redirect: wallet.downloadUrls?.download
+  };
+  const bodycopy = downloads.ios && downloads.android ? locales.downloadAppScreen_iosAndroid : downloads.ios ? locales.downloadAppScreen_ios : locales.downloadAppScreen_android;
+  return /* @__PURE__ */ jsx(PageContent, { children: /* @__PURE__ */ jsxs(ModalContent, { style: { paddingBottom: 4, gap: 14 }, children: [
+    downloads.redirect && /* @__PURE__ */ jsx(CustomQRCode, { value: downloads.redirect }),
+    !downloads.redirect && /* @__PURE__ */ jsx(Fragment, { children: "No download link available" }),
+    /* @__PURE__ */ jsx(
+      ModalBody,
+      {
+        style: { fontSize: 15, lineHeight: "20px", padding: "0 12px" },
+        children: bodycopy
+      }
+    )
+  ] }) });
+};
+
+export { DownloadApp as default };
+//# sourceMappingURL=index.js.map

package/build/connectkit/src/components/Pages/DownloadApp/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Pages/DownloadApp/index.tsx"],"sourcesContent":["import {\n  ModalBody,\n  ModalContent,\n  PageContent,\n} from \"../../Common/Modal/styles\";\n\nimport CustomQRCode from \"../../Common/CustomQRCode\";\n\nimport useLocales from \"../../../hooks/useLocales\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport { useWallet } from \"../../../wallets/useWallets\";\n\nconst DownloadApp = () => {\n  const { pendingConnectorId } = usePayContext();\n  const wallet = useWallet(pendingConnectorId ?? \"\");\n\n  const locales = useLocales({\n    CONNECTORNAME: wallet?.name,\n  });\n\n  if (!wallet) return <>Wallet not found</>;\n\n  const downloads = {\n    ios: wallet.downloadUrls?.ios,\n    android: wallet.downloadUrls?.android,\n    redirect: wallet.downloadUrls?.download,\n  };\n\n  const bodycopy =\n    downloads.ios && downloads.android\n      ? locales.downloadAppScreen_iosAndroid\n      : downloads.ios\n        ? locales.downloadAppScreen_ios\n        : locales.downloadAppScreen_android;\n\n  return (\n    <PageContent>\n      <ModalContent style={{ paddingBottom: 4, gap: 14 }}>\n        {downloads.redirect && <CustomQRCode value={downloads.redirect} />}\n        {!downloads.redirect && <>No download link available</>}\n        <ModalBody\n          style={{ fontSize: 15, lineHeight: \"20px\", padding: \"0 12px\" }}\n        >\n          {bodycopy}\n        </ModalBody>\n      </ModalContent>\n    </PageContent>\n  );\n};\n\nexport default DownloadApp;\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,cAAc,MAAM;AACxB,EAAM,MAAA,EAAE,kBAAmB,EAAA,GAAI,aAAc,EAAA,CAAA;AAC7C,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,kBAAA,IAAsB,EAAE,CAAA,CAAA;AAEjD,EAAA,MAAM,UAAU,UAAW,CAAA;AAAA,IACzB,eAAe,MAAQ,EAAA,IAAA;AAAA,GACxB,CAAA,CAAA;AAED,EAAA,IAAI,CAAC,MAAA,EAAe,uBAAA,GAAA,CAAA,QAAA,EAAA,EAAE,QAAgB,EAAA,kBAAA,EAAA,CAAA,CAAA;AAEtC,EAAA,MAAM,SAAY,GAAA;AAAA,IAChB,GAAA,EAAK,OAAO,YAAc,EAAA,GAAA;AAAA,IAC1B,OAAA,EAAS,OAAO,YAAc,EAAA,OAAA;AAAA,IAC9B,QAAA,EAAU,OAAO,YAAc,EAAA,QAAA;AAAA,GACjC,CAAA;AAEA,EAAM,MAAA,QAAA,GACJ,SAAU,CAAA,GAAA,IAAO,SAAU,CAAA,OAAA,GACvB,OAAQ,CAAA,4BAAA,GACR,SAAU,CAAA,GAAA,GACR,OAAQ,CAAA,qBAAA,GACR,OAAQ,CAAA,yBAAA,CAAA;AAEhB,EACE,uBAAA,GAAA,CAAC,WACC,EAAA,EAAA,QAAA,kBAAA,IAAA,CAAC,YAAa,EAAA,EAAA,KAAA,EAAO,EAAE,aAAe,EAAA,CAAA,EAAG,GAAK,EAAA,EAAA,EAC3C,EAAA,QAAA,EAAA;AAAA,IAAA,SAAA,CAAU,QAAY,oBAAA,GAAA,CAAC,YAAa,EAAA,EAAA,KAAA,EAAO,UAAU,QAAU,EAAA,CAAA;AAAA,IAC/D,CAAC,SAAA,CAAU,QAAY,oBAAA,GAAA,CAAA,QAAA,EAAA,EAAE,QAA0B,EAAA,4BAAA,EAAA,CAAA;AAAA,oBACpD,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,QAAA,EAAU,IAAI,UAAY,EAAA,MAAA,EAAQ,SAAS,QAAS,EAAA;AAAA,QAE5D,QAAA,EAAA,QAAA;AAAA,OAAA;AAAA,KACH;AAAA,GAAA,EACF,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/build/connectkit/src/components/Pages/Error/index.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ModalBody, PageContent, ModalContent } from '../../Common/Modal/styles.js';
+import { AlertIcon } from '../../../assets/icons.js';
+import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
+import styled from '../../../styles/styled/index.js';
+import { getSupportUrl } from '../../../utils/supportUrl.js';
+import PoweredByFooter from '../../Common/PoweredByFooter/index.js';
+
+function ErrorPage() {
+  const pay = useDaimoPay();
+  let errorBody = "Unknown error";
+  if (pay.paymentState === "error") {
+    errorBody = pay.paymentErrorMessage;
+  }
+  const supportUrl = getSupportUrl(pay.order?.id?.toString() ?? "", errorBody);
+  return /* @__PURE__ */ jsx(PageContent, { children: /* @__PURE__ */ jsxs(
+    ModalContent,
+    {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        paddingBottom: 0,
+        position: "relative"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(CenterContainer, { children: [
+          /* @__PURE__ */ jsx(FailIcon, {}),
+          /* @__PURE__ */ jsx(ErrorBody, { children: /* @__PURE__ */ jsx("strong", { children: errorBody }) })
+        ] }),
+        /* @__PURE__ */ jsx(PoweredByFooter, { supportUrl, showNeedHelpImmediately: true })
+      ]
+    }
+  ) });
+}
+const CenterContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px;
+  max-width: 100%;
+`;
+const ErrorBody = styled(ModalBody)`
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const FailIcon = styled(AlertIcon)`
+  color: var(--ck-body-color-alert);
+  width: 32px;
+  height: 32px;
+  margin-top: auto;
+  margin-bottom: 16px;
+`;
+
+export { ErrorPage as default };
+//# sourceMappingURL=index.js.map

package/build/connectkit/src/components/Pages/Error/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Pages/Error/index.tsx"],"sourcesContent":["import {\n  ModalBody,\n  ModalContent,\n  PageContent,\n} from \"../../Common/Modal/styles\";\n\nimport { AlertIcon } from \"../../../assets/icons\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport styled from \"../../../styles/styled\";\nimport { getSupportUrl } from \"../../../utils/supportUrl\";\nimport PoweredByFooter from \"../../Common/PoweredByFooter\";\n\nexport default function ErrorPage() {\n  const pay = useDaimoPay();\n\n  let errorBody = \"Unknown error\";\n  if (pay.paymentState === \"error\") {\n    errorBody = pay.paymentErrorMessage;\n  }\n\n  const supportUrl = getSupportUrl(pay.order?.id?.toString() ?? \"\", errorBody);\n\n  return (\n    <PageContent>\n      <ModalContent\n        style={{\n          display: \"flex\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          paddingBottom: 0,\n          position: \"relative\",\n        }}\n      >\n        <CenterContainer>\n          <FailIcon />\n          <ErrorBody>\n            <strong>{errorBody}</strong>\n          </ErrorBody>\n        </CenterContainer>\n        <PoweredByFooter supportUrl={supportUrl} showNeedHelpImmediately />\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 ErrorBody = styled(ModalBody)`\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nconst FailIcon = styled(AlertIcon)`\n  color: var(--ck-body-color-alert);\n  width: 32px;\n  height: 32px;\n  margin-top: auto;\n  margin-bottom: 16px;\n`;\n"],"names":[],"mappings":";;;;;;;;AAYA,SAAwB,SAAY,GAAA;AAClC,EAAA,MAAM,MAAM,WAAY,EAAA,CAAA;AAExB,EAAA,IAAI,SAAY,GAAA,eAAA,CAAA;AAChB,EAAI,IAAA,GAAA,CAAI,iBAAiB,OAAS,EAAA;AAChC,IAAA,SAAA,GAAY,GAAI,CAAA,mBAAA,CAAA;AAAA,GAClB;AAEA,EAAM,MAAA,UAAA,GAAa,cAAc,GAAI,CAAA,KAAA,EAAO,IAAI,QAAS,EAAA,IAAK,IAAI,SAAS,CAAA,CAAA;AAE3E,EAAA,2BACG,WACC,EAAA,EAAA,QAAA,kBAAA,IAAA;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,QAAU,EAAA,UAAA;AAAA,OACZ;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,eACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAS,EAAA,EAAA,CAAA;AAAA,0BACT,GAAA,CAAA,SAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA,EAAQ,qBAAU,CACrB,EAAA,CAAA;AAAA,SACF,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,eAAA,EAAA,EAAgB,UAAwB,EAAA,uBAAA,EAAuB,IAAC,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAErE,EAAA,CAAA,CAAA;AAEJ,CAAA;AAEA,MAAM,kBAAkB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAQ/B,MAAM,SAAA,GAAY,OAAO,SAAS,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAMlC,MAAM,QAAA,GAAW,OAAO,SAAS,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}

package/build/connectkit/src/components/Pages/MobileConnectors/index.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ROUTES } from '../../../constants/routes.js';
+import { useConnect } from '../../../hooks/useConnect.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { walletConfigs } from '../../../wallets/walletConfigs.js';
+import { PageContent, ModalContent } from '../../Common/Modal/styles.js';
+import { ScrollArea } from '../../Common/ScrollArea/index.js';
+import { Container, WalletList, WalletItem, WalletIcon, WalletLabel } from './styles.js';
+
+const MobileConnectors = () => {
+  const context = usePayContext();
+  const { paymentState, setRoute } = context;
+  useConnect();
+  const walletsIdsToDisplay = Object.keys(walletConfigs).filter((walletId) => {
+    const wallet = walletConfigs[walletId];
+    if (!wallet.showInMobileConnectors) return false;
+    if (wallet.isSolanaOnly && !context.paymentState.showSolanaPaymentMethod)
+      return false;
+    return true;
+  }) ?? [];
+  const goToWallet = (wallet) => {
+    if (wallet.getDaimoPayDeeplink == null) {
+      console.error(`wallet ${wallet.name} has no deeplink`);
+      return;
+    }
+    if (paymentState.isDepositFlow) {
+      context.paymentState.setSelectedWallet(wallet);
+      setRoute(ROUTES.SELECT_WALLET_AMOUNT);
+    } else {
+      paymentState.openInWalletBrowser(wallet);
+    }
+  };
+  return /* @__PURE__ */ jsx(PageContent, { style: { width: 312 }, children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(ModalContent, { style: { paddingBottom: 0 }, children: /* @__PURE__ */ jsx(ScrollArea, { height: 340, children: /* @__PURE__ */ jsx(WalletList, { children: walletsIdsToDisplay.sort(
+    // sort by name
+    (a, b) => {
+      const walletA = walletConfigs[a];
+      const walletB = walletConfigs[b];
+      const nameA = walletA.name ?? walletA.shortName ?? a;
+      const nameB = walletB.name ?? walletB.shortName ?? b;
+      return nameA.localeCompare(nameB);
+    }
+  ).filter(
+    (walletId) => !(walletId === "coinbaseWallet" || walletId === "com.coinbase.wallet")
+  ).map((walletId, i) => {
+    const wallet = walletConfigs[walletId];
+    const { name, shortName, iconConnector, icon } = wallet;
+    return /* @__PURE__ */ jsxs(
+      WalletItem,
+      {
+        onClick: () => goToWallet(wallet),
+        style: {
+          animationDelay: `${i * 50}ms`
+        },
+        children: [
+          /* @__PURE__ */ jsx(WalletIcon, { children: iconConnector ?? icon }),
+          /* @__PURE__ */ jsx(WalletLabel, { children: shortName ?? name })
+        ]
+      },
+      i
+    );
+  }) }) }) }) }) });
+};
+
+export { MobileConnectors as default };
+//# sourceMappingURL=index.js.map

package/build/connectkit/src/components/Pages/MobileConnectors/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Pages/MobileConnectors/index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { ROUTES } from \"../../../constants/routes\";\nimport { useConnect } from \"../../../hooks/useConnect\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport {\n  WalletConfigProps,\n  walletConfigs,\n} from \"../../../wallets/walletConfigs\";\nimport { ModalContent, PageContent } from \"../../Common/Modal/styles\";\nimport { ScrollArea } from \"../../Common/ScrollArea\";\nimport {\n  Container,\n  WalletIcon,\n  WalletItem,\n  WalletLabel,\n  WalletList,\n} from \"./styles\";\n\nconst MobileConnectors: React.FC = () => {\n  const context = usePayContext();\n  const { paymentState, setRoute } = context;\n  const { connect, connectors } = useConnect();\n\n  // filter out installed wallets\n  const walletsIdsToDisplay =\n    Object.keys(walletConfigs).filter((walletId) => {\n      const wallet = walletConfigs[walletId];\n      if (!wallet.showInMobileConnectors) return false;\n      // If the mobile wallet supports solana only, don't show it if we are not supporting solana has a payment method\n      if (wallet.isSolanaOnly && !context.paymentState.showSolanaPaymentMethod)\n        return false;\n      return true;\n    }) ?? [];\n\n  const goToWallet = (wallet: WalletConfigProps) => {\n    if (wallet.getDaimoPayDeeplink == null) {\n      console.error(`wallet ${wallet.name} has no deeplink`);\n      return;\n    }\n    if (paymentState.isDepositFlow) {\n      context.paymentState.setSelectedWallet(wallet);\n      setRoute(ROUTES.SELECT_WALLET_AMOUNT);\n    } else {\n      paymentState.openInWalletBrowser(wallet);\n    }\n  };\n\n  return (\n    <PageContent style={{ width: 312 }}>\n      <Container>\n        <ModalContent style={{ paddingBottom: 0 }}>\n          <ScrollArea height={340}>\n            <WalletList>\n              {walletsIdsToDisplay\n                .sort(\n                  // sort by name\n                  (a, b) => {\n                    const walletA = walletConfigs[a];\n                    const walletB = walletConfigs[b];\n                    const nameA = walletA.name ?? walletA.shortName ?? a;\n                    const nameB = walletB.name ?? walletB.shortName ?? b;\n                    return nameA.localeCompare(nameB);\n                  },\n                )\n                .filter(\n                  (walletId) =>\n                    !(\n                      walletId === \"coinbaseWallet\" ||\n                      walletId === \"com.coinbase.wallet\"\n                    ),\n                )\n                .map((walletId, i) => {\n                  const wallet = walletConfigs[walletId];\n                  const { name, shortName, iconConnector, icon } = wallet;\n                  return (\n                    <WalletItem\n                      key={i}\n                      onClick={() => goToWallet(wallet)}\n                      style={{\n                        animationDelay: `${i * 50}ms`,\n                      }}\n                    >\n                      <WalletIcon>{iconConnector ?? icon}</WalletIcon>\n                      <WalletLabel>{shortName ?? name}</WalletLabel>\n                    </WalletItem>\n                  );\n                })}\n            </WalletList>\n          </ScrollArea>\n        </ModalContent>\n      </Container>\n    </PageContent>\n  );\n};\n\nexport default MobileConnectors;\n"],"names":[],"mappings":"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"}

package/build/connectkit/src/components/Pages/MobileConnectors/styles.js

@@ -0,0 +1,64 @@
+import { keyframes, css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+
+const WalletItem = styled.button`
+  text-align: center;
+  transition: opacity 100ms ease;
+  opacity: ${(props) => props.$waiting ? 0.4 : 1};
+  background: transparent;
+`;
+const WalletIcon = styled.div`
+  z-index: 9;
+  position: relative;
+  margin: 0 auto 10px;
+  border-radius: 16px;
+  width: 60px;
+  height: 60px;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.04);
+  ${(props) => props.$outline && `
+  &:before {
+    content: '';
+    z-index: 2;
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);
+  }`}
+  svg {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: auto;
+  }
+`;
+const WalletLabel = styled.div`
+  color: var(--ck-body-color);
+  font-size: 13px;
+  line-height: 15px;
+  font-weight: 500;
+  opacity: 0.75;
+`;
+const PulseKeyframes = keyframes`
+  0%,100% { opacity:1; }
+  50% { opacity:0.5; }
+`;
+const WalletList = styled.div`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 22px 8px;
+  margin: 0 -10px;
+  padding: 4px 0 0;
+  transition: opacity 300ms ease;
+  ${(props) => props.$disabled && css`
+      pointer-events: none;
+      opacity: 0.4;
+      ${WalletItem} {
+        animation: ${PulseKeyframes} 1s infinite ease-in-out;
+      }
+    `}
+`;
+const Container = styled.div``;
+
+export { Container, WalletIcon, WalletItem, WalletLabel, WalletList };
+//# sourceMappingURL=styles.js.map

package/build/connectkit/src/components/Pages/MobileConnectors/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Pages/MobileConnectors/styles.ts"],"sourcesContent":["import { css, keyframes } from \"styled-components\";\nimport styled from \"./../../../styles/styled\";\n\nexport const WalletItem = styled.button<{ $waiting?: boolean }>`\n  text-align: center;\n  transition: opacity 100ms ease;\n  opacity: ${(props) => (props.$waiting ? 0.4 : 1)};\n  background: transparent;\n`;\nexport const WalletIcon = styled.div<{ $outline?: boolean }>`\n  z-index: 9;\n  position: relative;\n  margin: 0 auto 10px;\n  border-radius: 16px;\n  width: 60px;\n  height: 60px;\n  overflow: hidden;\n  background: rgba(0, 0, 0, 0.04);\n  ${(props) =>\n    props.$outline &&\n    `\n  &:before {\n    content: '';\n    z-index: 2;\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);\n  }`}\n  svg {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: auto;\n  }\n`;\nexport const WalletLabel = styled.div`\n  color: var(--ck-body-color);\n  font-size: 13px;\n  line-height: 15px;\n  font-weight: 500;\n  opacity: 0.75;\n`;\n\nconst PulseKeyframes = keyframes`\n  0%,100% { opacity:1; }\n  50% { opacity:0.5; }\n`;\n\nexport const WalletList = styled.div<{ $disabled?: boolean }>`\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 22px 8px;\n  margin: 0 -10px;\n  padding: 4px 0 0;\n  transition: opacity 300ms ease;\n  ${(props) =>\n    props.$disabled &&\n    css`\n      pointer-events: none;\n      opacity: 0.4;\n      ${WalletItem} {\n        animation: ${PulseKeyframes} 1s infinite ease-in-out;\n      }\n    `}\n`;\nexport const Container = styled.div``;\n"],"names":[],"mappings":";;;AAGO,MAAM,aAAa,MAAO,CAAA,MAAA,CAAA;AAAA;AAAA;AAAA,WAAA,EAGpB,CAAC,KAAA,KAAW,KAAM,CAAA,QAAA,GAAW,MAAM,CAAE,CAAA;AAAA;AAAA,EAAA;AAG3C,MAAM,aAAa,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS7B,EAAA,CAAC,KACD,KAAA,KAAA,CAAM,QACN,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQA,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQG,MAAM,cAAc,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQlC,MAAM,cAAiB,GAAA,SAAA,CAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAKhB,MAAM,aAAa,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO7B,EAAA,CAAC,KACD,KAAA,KAAA,CAAM,SACN,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA,MAAA,EAGI,UAAU,CAAA;AAAA,mBAAA,EACG,cAAc,CAAA;AAAA;AAAA,IAE9B,CAAA,CAAA;AAAA,EAAA;AAEE,MAAM,YAAY,MAAO,CAAA,GAAA,CAAA;;;;"}

package/build/connectkit/src/components/Pages/Onboarding/index.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Graphic, LogoGroup, Logo, LogoPosition, LogoInner, FloatWrapper, RotateWrapper, LogoGraphic, GraphicBackground } from './styles.js';
+import Logos from '../../../assets/logos.js';
+import wave from '../../../assets/wave.js';
+import { PageContent, ModalContent, ModalH1, ModalBody } from '../../Common/Modal/styles.js';
+import useLocales from '../../../hooks/useLocales.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import Button from '../../Common/Button/index.js';
+
+const Introduction = () => {
+  const context = usePayContext();
+  const locales = useLocales({});
+  const ctaUrl = context.options?.walletOnboardingUrl ?? locales.onboardingScreen_ctaUrl;
+  return /* @__PURE__ */ jsxs(PageContent, { children: [
+    /* @__PURE__ */ jsxs(Graphic, { children: [
+      /* @__PURE__ */ jsxs(LogoGroup, { children: [
+        /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(LogoPosition, { children: /* @__PURE__ */ jsx(LogoInner, { children: /* @__PURE__ */ jsx(FloatWrapper, { children: /* @__PURE__ */ jsx(RotateWrapper, { children: /* @__PURE__ */ jsx(LogoGraphic, { children: /* @__PURE__ */ jsx(Logos.Base, {}) }) }) }) }) }) }),
+        /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(LogoPosition, { children: /* @__PURE__ */ jsx(LogoInner, { children: /* @__PURE__ */ jsx(FloatWrapper, { children: /* @__PURE__ */ jsx(RotateWrapper, { children: /* @__PURE__ */ jsx(LogoGraphic, { children: /* @__PURE__ */ jsx(Logos.MetaMask, {}) }) }) }) }) }) }),
+        /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(LogoPosition, { children: /* @__PURE__ */ jsx(LogoInner, { children: /* @__PURE__ */ jsx(FloatWrapper, { children: /* @__PURE__ */ jsx(RotateWrapper, { children: /* @__PURE__ */ jsx(LogoGraphic, { children: /* @__PURE__ */ jsx(Logos.Rainbow, {}) }) }) }) }) }) }),
+        /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(LogoPosition, { children: /* @__PURE__ */ jsx(LogoInner, { children: /* @__PURE__ */ jsx(FloatWrapper, { children: /* @__PURE__ */ jsx(RotateWrapper, { children: /* @__PURE__ */ jsx(LogoGraphic, { children: /* @__PURE__ */ jsx(Logos.Phantom, {}) }) }) }) }) }) }),
+        /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(LogoPosition, { children: /* @__PURE__ */ jsx(LogoInner, { children: /* @__PURE__ */ jsx(FloatWrapper, { children: /* @__PURE__ */ jsx(RotateWrapper, { children: /* @__PURE__ */ jsx(LogoGraphic, { children: /* @__PURE__ */ jsx(Logos.Trust, {}) }) }) }) }) }) })
+      ] }),
+      /* @__PURE__ */ jsx(GraphicBackground, { children: wave })
+    ] }),
+    /* @__PURE__ */ jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [
+      /* @__PURE__ */ jsx(ModalH1, { $small: true, children: locales.onboardingScreen_h1 }),
+      /* @__PURE__ */ jsx(ModalBody, { children: locales.onboardingScreen_p })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { href: ctaUrl, arrow: true, children: locales.onboardingScreen_ctaText })
+  ] });
+};
+
+export { Introduction as default };
+//# sourceMappingURL=index.js.map

package/build/connectkit/src/components/Pages/Onboarding/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Pages/Onboarding/index.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  FloatWrapper,\n  Graphic,\n  GraphicBackground,\n  Logo,\n  LogoGraphic,\n  LogoGroup,\n  LogoInner,\n  LogoPosition,\n  RotateWrapper,\n} from \"./styles\";\n\nimport Logos from \"../../../assets/logos\";\nimport wave from \"../../../assets/wave\";\nimport {\n  ModalBody,\n  ModalContent,\n  ModalH1,\n  PageContent,\n} from \"../../Common/Modal/styles\";\n\nimport useLocales from \"../../../hooks/useLocales\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport Button from \"../../Common/Button\";\n\nconst Introduction: React.FC = () => {\n  const context = usePayContext();\n  const locales = useLocales({});\n  const ctaUrl =\n    context.options?.walletOnboardingUrl ?? locales.onboardingScreen_ctaUrl;\n  return (\n    <PageContent>\n      <Graphic>\n        <LogoGroup>\n          <Logo>\n            <LogoPosition>\n              <LogoInner>\n                <FloatWrapper>\n                  <RotateWrapper>\n                    <LogoGraphic>\n                      <Logos.Base />\n                    </LogoGraphic>\n                  </RotateWrapper>\n                </FloatWrapper>\n              </LogoInner>\n            </LogoPosition>\n          </Logo>\n          <Logo>\n            <LogoPosition>\n              <LogoInner>\n                <FloatWrapper>\n                  <RotateWrapper>\n                    <LogoGraphic>\n                      <Logos.MetaMask />\n                    </LogoGraphic>\n                  </RotateWrapper>\n                </FloatWrapper>\n              </LogoInner>\n            </LogoPosition>\n          </Logo>\n          <Logo>\n            <LogoPosition>\n              <LogoInner>\n                <FloatWrapper>\n                  <RotateWrapper>\n                    <LogoGraphic>\n                      <Logos.Rainbow />\n                    </LogoGraphic>\n                  </RotateWrapper>\n                </FloatWrapper>\n              </LogoInner>\n            </LogoPosition>\n          </Logo>\n          <Logo>\n            <LogoPosition>\n              <LogoInner>\n                <FloatWrapper>\n                  <RotateWrapper>\n                    <LogoGraphic>\n                      <Logos.Phantom />\n                    </LogoGraphic>\n                  </RotateWrapper>\n                </FloatWrapper>\n              </LogoInner>\n            </LogoPosition>\n          </Logo>\n          <Logo>\n            <LogoPosition>\n              <LogoInner>\n                <FloatWrapper>\n                  <RotateWrapper>\n                    <LogoGraphic>\n                      <Logos.Trust />\n                    </LogoGraphic>\n                  </RotateWrapper>\n                </FloatWrapper>\n              </LogoInner>\n            </LogoPosition>\n          </Logo>\n        </LogoGroup>\n        <GraphicBackground>{wave}</GraphicBackground>\n      </Graphic>\n      <ModalContent style={{ paddingBottom: 18 }}>\n        <ModalH1 $small>{locales.onboardingScreen_h1}</ModalH1>\n        <ModalBody>{locales.onboardingScreen_p}</ModalBody>\n      </ModalContent>\n      <Button href={ctaUrl} arrow>\n        {locales.onboardingScreen_ctaText}\n      </Button>\n    </PageContent>\n  );\n};\n\nexport default Introduction;\n"],"names":[],"mappings":"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"}