@daimo/pay 1.19.5 → 1.19.6

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

@@ -0,0 +1,126 @@
+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, writeDaimoPayOrderID } 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]);
+  let supportUrl, receiptUrl;
+  if (order?.id != null) {
+    const screen = done ? "Confirmed" : "Confirming";
+    supportUrl = getSupportUrl(order.id.toString(), screen);
+    receiptUrl = `https://pay.daimo.com/receipt?id=${writeDaimoPayOrderID(BigInt(order.id))}`;
+  }
+  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, receiptUrl })
+          ]
+        }
+      )
+    }
+  );
+};
+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/pay/packages/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  writeDaimoPayOrderID,\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  // Footer\n  let supportUrl: string | undefined, receiptUrl: string | undefined;\n  if (order?.id != null) {\n    const screen = done ? \"Confirmed\" : \"Confirming\";\n    supportUrl = getSupportUrl(order.id.toString(), screen);\n    receiptUrl = `https://pay.daimo.com/receipt?id=${writeDaimoPayOrderID(BigInt(order.id))}`;\n  }\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        <PoweredByFooter supportUrl={supportUrl} receiptUrl={receiptUrl} />\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/pay/packages/connectkit/src/components/Pages/Connectors/index.js

@@ -0,0 +1,26 @@
+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 ConnectorList from '../../Common/ConnectorList/index.js';
+import { OrderHeader } from '../../Common/OrderHeader/index.js';
+
+const Wallets = () => {
+  const context = usePayContext();
+  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/pay/packages/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 ConnectorList from \"../../Common/ConnectorList\";\nimport { OrderHeader } from \"../../Common/OrderHeader\";\n\nconst Wallets: React.FC = () => {\n  const context = usePayContext();\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":";;;;;;;;;AAUA,MAAM,UAAoB,MAAM;AAC9B,EAAA,MAAM,UAAU,aAAc,EAAA,CAAA;AAE9B,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/pay/packages/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/pay/packages/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/pay/packages/connectkit/src/components/Pages/MobileConnectors/index.js

@@ -0,0 +1,108 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ROUTES } from '../../../constants/routes.js';
+import { useConnectors } from '../../../hooks/useConnectors.js';
+import useIsMobile from '../../../hooks/useIsMobile.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { isInjectedConnector } from '../../../utils/index.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, disableMobileInjector } = context;
+  const { isAndroid, isIOS } = useIsMobile();
+  const connectors = useConnectors();
+  const { parsedConfig } = paymentState.externalPaymentOptions;
+  const { walletOrder } = parsedConfig;
+  const availableWalletIds = Object.keys(walletConfigs).filter((walletId) => {
+    const wallet = walletConfigs[walletId];
+    if (walletOrder.length === 0 && !wallet.showInMobileConnectors)
+      return false;
+    if (isAndroid && wallet.showOnAndroid === false) return false;
+    if (isIOS && wallet.showOnIOS === false) return false;
+    return true;
+  }) ?? [];
+  let walletsIdsToDisplay = availableWalletIds;
+  if (walletOrder.length > 0) {
+    const hasInjected = !disableMobileInjector && connectors.some((c) => {
+      if (!isInjectedConnector(c.type)) return false;
+      if (c.name?.toLowerCase().includes("walletconnect")) return false;
+      return walletOrder.some(
+        (filterName) => c.name?.toLowerCase().includes(filterName.toLowerCase()) || c.id.toLowerCase().includes(filterName.toLowerCase())
+      );
+    });
+    const totalWallets = walletOrder.length;
+    const injectedCount = hasInjected ? 1 : 0;
+    const maxNonInjectedInMain = totalWallets > 3 ? 2 : Math.min(3 - injectedCount, totalWallets);
+    const shownInMain = walletOrder.slice(0, maxNonInjectedInMain);
+    const filtered = availableWalletIds.filter((walletId) => {
+      const wallet = walletConfigs[walletId];
+      return walletOrder.some((optionId) => {
+        const optionLower = optionId.toLowerCase();
+        const name = wallet.name?.toLowerCase() || wallet.shortName?.toLowerCase() || "";
+        return name === optionLower || name.includes(optionLower) || walletId.toLowerCase() === optionLower || walletId.toLowerCase().includes(optionLower);
+      });
+    });
+    const excludedWallets = shownInMain.map((name) => name.toLowerCase());
+    const remaining = filtered.filter((walletId) => {
+      const wallet = walletConfigs[walletId];
+      const walletName = wallet.name?.toLowerCase() || wallet.shortName?.toLowerCase() || "";
+      return !excludedWallets.some(
+        (excluded) => walletName.includes(excluded) || excluded.includes(walletName)
+      );
+    });
+    const ordered = [];
+    for (const optionId of walletOrder) {
+      const walletId = remaining.find((id) => {
+        const wallet = walletConfigs[id];
+        const optionLower = optionId.toLowerCase();
+        const name = wallet.name?.toLowerCase() || wallet.shortName?.toLowerCase() || "";
+        return name === optionLower || name.includes(optionLower) || id.toLowerCase() === optionLower || id.toLowerCase().includes(optionLower);
+      });
+      if (walletId && !ordered.includes(walletId)) {
+        ordered.push(walletId);
+      }
+    }
+    walletsIdsToDisplay = ordered;
+  }
+  const goToWallet = async (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 if (!isIOS && !isAndroid && wallet.id) {
+      context.setPendingConnectorId(wallet.id);
+      setRoute(ROUTES.CONNECT);
+    } else {
+      await 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.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/pay/packages/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 { useConnectors } from \"../../../hooks/useConnectors\";\nimport useIsMobile from \"../../../hooks/useIsMobile\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport { isInjectedConnector } from \"../../../utils\";\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, disableMobileInjector } = context;\n  const { isAndroid, isIOS } = useIsMobile();\n  const connectors = useConnectors();\n\n  // Apply ordering from parsedConfig if available\n  const { parsedConfig } = paymentState.externalPaymentOptions;\n  const { walletOrder } = parsedConfig;\n\n  // Filter available wallets\n  const availableWalletIds =\n    Object.keys(walletConfigs).filter((walletId) => {\n      const wallet = walletConfigs[walletId];\n      // If walletOrder is provided, ignore showInMobileConnectors flag\n      if (walletOrder.length === 0 && !wallet.showInMobileConnectors)\n        return false;\n      // Filter by platform\n      if (isAndroid && wallet.showOnAndroid === false) return false;\n      if (isIOS && wallet.showOnIOS === false) return false;\n      return true;\n    }) ?? [];\n\n  let walletsIdsToDisplay = availableWalletIds;\n  if (walletOrder.length > 0) {\n    // Check for injected wallets that match the filter\n    const hasInjected =\n      !disableMobileInjector &&\n      connectors.some((c) => {\n        if (!isInjectedConnector(c.type)) return false;\n        if (c.name?.toLowerCase().includes(\"walletconnect\")) return false;\n        // Check if this injected wallet matches the filter\n        return walletOrder.some(\n          (filterName) =>\n            c.name?.toLowerCase().includes(filterName.toLowerCase()) ||\n            c.id.toLowerCase().includes(filterName.toLowerCase()),\n        );\n      });\n\n    // Calculate which wallets to exclude (shown in main selector)\n    const totalWallets = walletOrder.length;\n    const injectedCount = hasInjected ? 1 : 0;\n    const maxNonInjectedInMain =\n      totalWallets > 3 ? 2 : Math.min(3 - injectedCount, totalWallets);\n    const shownInMain = walletOrder.slice(0, maxNonInjectedInMain);\n\n    // Filter to only show wallets from the order\n    const filtered = availableWalletIds.filter((walletId) => {\n      const wallet = walletConfigs[walletId];\n      return walletOrder.some((optionId) => {\n        const optionLower = optionId.toLowerCase();\n        const name =\n          wallet.name?.toLowerCase() || wallet.shortName?.toLowerCase() || \"\";\n        return (\n          name === optionLower ||\n          name.includes(optionLower) ||\n          walletId.toLowerCase() === optionLower ||\n          walletId.toLowerCase().includes(optionLower)\n        );\n      });\n    });\n\n    // Exclude wallets shown in main selector\n    const excludedWallets = shownInMain.map((name) => name.toLowerCase());\n    const remaining = filtered.filter((walletId) => {\n      const wallet = walletConfigs[walletId];\n      const walletName =\n        wallet.name?.toLowerCase() || wallet.shortName?.toLowerCase() || \"\";\n      return !excludedWallets.some(\n        (excluded) =>\n          walletName.includes(excluded) || excluded.includes(walletName),\n      );\n    });\n\n    // Order remaining wallets by walletOrder\n    const ordered: string[] = [];\n    for (const optionId of walletOrder) {\n      const walletId = remaining.find((id) => {\n        const wallet = walletConfigs[id];\n        const optionLower = optionId.toLowerCase();\n        const name =\n          wallet.name?.toLowerCase() || wallet.shortName?.toLowerCase() || \"\";\n        return (\n          name === optionLower ||\n          name.includes(optionLower) ||\n          id.toLowerCase() === optionLower ||\n          id.toLowerCase().includes(optionLower)\n        );\n      });\n      if (walletId && !ordered.includes(walletId)) {\n        ordered.push(walletId);\n      }\n    }\n\n    walletsIdsToDisplay = ordered;\n  }\n\n  const goToWallet = async (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 if (!isIOS && !isAndroid && wallet.id) {\n      // On desktop, show QR code\n      context.setPendingConnectorId(wallet.id);\n      setRoute(ROUTES.CONNECT);\n    } else {\n      await 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                .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":";;;;;;;;;;;AAqBA,MAAM,mBAA6B,MAAM;AACvC,EAAA,MAAM,UAAU,aAAc,EAAA,CAAA;AAC9B,EAAA,MAAM,EAAE,YAAA,EAAc,QAAU,EAAA,qBAAA,EAA0B,GAAA,OAAA,CAAA;AAC1D,EAAA,MAAM,EAAE,SAAA,EAAW,KAAM,EAAA,GAAI,WAAY,EAAA,CAAA;AACzC,EAAA,MAAM,aAAa,aAAc,EAAA,CAAA;AAGjC,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,YAAa,CAAA,sBAAA,CAAA;AACtC,EAAM,MAAA,EAAE,aAAgB,GAAA,YAAA,CAAA;AAGxB,EAAA,MAAM,qBACJ,MAAO,CAAA,IAAA,CAAK,aAAa,CAAE,CAAA,MAAA,CAAO,CAAC,QAAa,KAAA;AAC9C,IAAM,MAAA,MAAA,GAAS,cAAc,QAAQ,CAAA,CAAA;AAErC,IAAA,IAAI,WAAY,CAAA,MAAA,KAAW,CAAK,IAAA,CAAC,MAAO,CAAA,sBAAA;AACtC,MAAO,OAAA,KAAA,CAAA;AAET,IAAA,IAAI,SAAa,IAAA,MAAA,CAAO,aAAkB,KAAA,KAAA,EAAc,OAAA,KAAA,CAAA;AACxD,IAAA,IAAI,KAAS,IAAA,MAAA,CAAO,SAAc,KAAA,KAAA,EAAc,OAAA,KAAA,CAAA;AAChD,IAAO,OAAA,IAAA,CAAA;AAAA,GACR,KAAK,EAAC,CAAA;AAET,EAAA,IAAI,mBAAsB,GAAA,kBAAA,CAAA;AAC1B,EAAI,IAAA,WAAA,CAAY,SAAS,CAAG,EAAA;AAE1B,IAAA,MAAM,cACJ,CAAC,qBAAA,IACD,UAAW,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA;AACrB,MAAA,IAAI,CAAC,mBAAA,CAAoB,CAAE,CAAA,IAAI,GAAU,OAAA,KAAA,CAAA;AACzC,MAAA,IAAI,EAAE,IAAM,EAAA,WAAA,GAAc,QAAS,CAAA,eAAe,GAAU,OAAA,KAAA,CAAA;AAE5D,MAAA,OAAO,WAAY,CAAA,IAAA;AAAA,QACjB,CAAC,UACC,KAAA,CAAA,CAAE,MAAM,WAAY,EAAA,CAAE,SAAS,UAAW,CAAA,WAAA,EAAa,CAAA,IACvD,EAAE,EAAG,CAAA,WAAA,GAAc,QAAS,CAAA,UAAA,CAAW,aAAa,CAAA;AAAA,OACxD,CAAA;AAAA,KACD,CAAA,CAAA;AAGH,IAAA,MAAM,eAAe,WAAY,CAAA,MAAA,CAAA;AACjC,IAAM,MAAA,aAAA,GAAgB,cAAc,CAAI,GAAA,CAAA,CAAA;AACxC,IAAM,MAAA,oBAAA,GACJ,eAAe,CAAI,GAAA,CAAA,GAAI,KAAK,GAAI,CAAA,CAAA,GAAI,eAAe,YAAY,CAAA,CAAA;AACjE,IAAA,MAAM,WAAc,GAAA,WAAA,CAAY,KAAM,CAAA,CAAA,EAAG,oBAAoB,CAAA,CAAA;AAG7D,IAAA,MAAM,QAAW,GAAA,kBAAA,CAAmB,MAAO,CAAA,CAAC,QAAa,KAAA;AACvD,MAAM,MAAA,MAAA,GAAS,cAAc,QAAQ,CAAA,CAAA;AACrC,MAAO,OAAA,WAAA,CAAY,IAAK,CAAA,CAAC,QAAa,KAAA;AACpC,QAAM,MAAA,WAAA,GAAc,SAAS,WAAY,EAAA,CAAA;AACzC,QAAM,MAAA,IAAA,GACJ,OAAO,IAAM,EAAA,WAAA,MAAiB,MAAO,CAAA,SAAA,EAAW,aAAiB,IAAA,EAAA,CAAA;AACnE,QAAA,OACE,IAAS,KAAA,WAAA,IACT,IAAK,CAAA,QAAA,CAAS,WAAW,CACzB,IAAA,QAAA,CAAS,WAAY,EAAA,KAAM,WAC3B,IAAA,QAAA,CAAS,WAAY,EAAA,CAAE,SAAS,WAAW,CAAA,CAAA;AAAA,OAE9C,CAAA,CAAA;AAAA,KACF,CAAA,CAAA;AAGD,IAAA,MAAM,kBAAkB,WAAY,CAAA,GAAA,CAAI,CAAC,IAAS,KAAA,IAAA,CAAK,aAAa,CAAA,CAAA;AACpE,IAAA,MAAM,SAAY,GAAA,QAAA,CAAS,MAAO,CAAA,CAAC,QAAa,KAAA;AAC9C,MAAM,MAAA,MAAA,GAAS,cAAc,QAAQ,CAAA,CAAA;AACrC,MAAM,MAAA,UAAA,GACJ,OAAO,IAAM,EAAA,WAAA,MAAiB,MAAO,CAAA,SAAA,EAAW,aAAiB,IAAA,EAAA,CAAA;AACnE,MAAA,OAAO,CAAC,eAAgB,CAAA,IAAA;AAAA,QACtB,CAAC,aACC,UAAW,CAAA,QAAA,CAAS,QAAQ,CAAK,IAAA,QAAA,CAAS,SAAS,UAAU,CAAA;AAAA,OACjE,CAAA;AAAA,KACD,CAAA,CAAA;AAGD,IAAA,MAAM,UAAoB,EAAC,CAAA;AAC3B,IAAA,KAAA,MAAW,YAAY,WAAa,EAAA;AAClC,MAAA,MAAM,QAAW,GAAA,SAAA,CAAU,IAAK,CAAA,CAAC,EAAO,KAAA;AACtC,QAAM,MAAA,MAAA,GAAS,cAAc,EAAE,CAAA,CAAA;AAC/B,QAAM,MAAA,WAAA,GAAc,SAAS,WAAY,EAAA,CAAA;AACzC,QAAM,MAAA,IAAA,GACJ,OAAO,IAAM,EAAA,WAAA,MAAiB,MAAO,CAAA,SAAA,EAAW,aAAiB,IAAA,EAAA,CAAA;AACnE,QAAA,OACE,IAAS,KAAA,WAAA,IACT,IAAK,CAAA,QAAA,CAAS,WAAW,CACzB,IAAA,EAAA,CAAG,WAAY,EAAA,KAAM,WACrB,IAAA,EAAA,CAAG,WAAY,EAAA,CAAE,SAAS,WAAW,CAAA,CAAA;AAAA,OAExC,CAAA,CAAA;AACD,MAAA,IAAI,QAAY,IAAA,CAAC,OAAQ,CAAA,QAAA,CAAS,QAAQ,CAAG,EAAA;AAC3C,QAAA,OAAA,CAAQ,KAAK,QAAQ,CAAA,CAAA;AAAA,OACvB;AAAA,KACF;AAEA,IAAsB,mBAAA,GAAA,OAAA,CAAA;AAAA,GACxB;AAEA,EAAM,MAAA,UAAA,GAAa,OAAO,MAA8B,KAAA;AACtD,IAAI,IAAA,MAAA,CAAO,uBAAuB,IAAM,EAAA;AACtC,MAAA,OAAA,CAAQ,KAAM,CAAA,CAAA,OAAA,EAAU,MAAO,CAAA,IAAI,CAAkB,gBAAA,CAAA,CAAA,CAAA;AACrD,MAAA,OAAA;AAAA,KACF;AACA,IAAA,IAAI,aAAa,aAAe,EAAA;AAC9B,MAAQ,OAAA,CAAA,YAAA,CAAa,kBAAkB,MAAM,CAAA,CAAA;AAC7C,MAAA,QAAA,CAAS,OAAO,oBAAoB,CAAA,CAAA;AAAA,eAC3B,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,OAAO,EAAI,EAAA;AAE5C,MAAQ,OAAA,CAAA,qBAAA,CAAsB,OAAO,EAAE,CAAA,CAAA;AACvC,MAAA,QAAA,CAAS,OAAO,OAAO,CAAA,CAAA;AAAA,KAClB,MAAA;AACL,MAAM,MAAA,YAAA,CAAa,oBAAoB,MAAM,CAAA,CAAA;AAAA,KAC/C;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,GAAA,CAAC,eAAY,KAAO,EAAA,EAAE,OAAO,GAAI,EAAA,EAC/B,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA,EAAa,OAAO,EAAE,aAAA,EAAe,GACpC,EAAA,QAAA,kBAAA,GAAA,CAAC,cAAW,MAAQ,EAAA,GAAA,EAClB,QAAC,kBAAA,GAAA,CAAA,UAAA,EAAA,EACE,QACE,EAAA,mBAAA,CAAA,MAAA;AAAA,IACC,CAAC,QAAA,KACC,EACE,QAAA,KAAa,oBACb,QAAa,KAAA,qBAAA,CAAA;AAAA,GAGlB,CAAA,GAAA,CAAI,CAAC,QAAA,EAAU,CAAM,KAAA;AACpB,IAAM,MAAA,MAAA,GAAS,cAAc,QAAQ,CAAA,CAAA;AACrC,IAAA,MAAM,EAAE,IAAA,EAAM,SAAW,EAAA,aAAA,EAAe,MAAS,GAAA,MAAA,CAAA;AACjD,IACE,uBAAA,IAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QAEC,OAAA,EAAS,MAAM,UAAA,CAAW,MAAM,CAAA;AAAA,QAChC,KAAO,EAAA;AAAA,UACL,cAAA,EAAgB,CAAG,EAAA,CAAA,GAAI,EAAE,CAAA,EAAA,CAAA;AAAA,SAC3B;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,UAAA,EAAA,EAAY,2BAAiB,IAAK,EAAA,CAAA;AAAA,0BACnC,GAAA,CAAC,WAAa,EAAA,EAAA,QAAA,EAAA,SAAA,IAAa,IAAK,EAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,MAP3B,CAAA;AAAA,KAQP,CAAA;AAAA,GAEH,CAAA,EACL,CACF,EAAA,CAAA,EACF,GACF,CACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/build/pay/packages/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/pay/packages/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/pay/packages/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/pay/packages/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":";;;;;;;;;AA0BA,MAAM,eAAyB,MAAM;AACnC,EAAA,MAAM,UAAU,aAAc,EAAA,CAAA;AAC9B,EAAM,MAAA,OAAA,GAAU,UAAW,CAAA,EAAE,CAAA,CAAA;AAC7B,EAAA,MAAM,MACJ,GAAA,OAAA,CAAQ,OAAS,EAAA,mBAAA,IAAuB,OAAQ,CAAA,uBAAA,CAAA;AAClD,EAAA,4BACG,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,OACC,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,SACC,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,IAAA,EAAA,EACC,8BAAC,YACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,aACC,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA,EACC,8BAAC,aACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,eACC,QAAC,kBAAA,GAAA,CAAA,KAAA,CAAM,MAAN,EAAW,CAAA,EACd,GACF,CACF,EAAA,CAAA,EACF,GACF,CACF,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,QACC,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA,EACC,8BAAC,SACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,gBACC,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EACC,8BAAC,WACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,MAAM,QAAN,EAAA,EAAe,GAClB,CACF,EAAA,CAAA,EACF,CACF,EAAA,CAAA,EACF,CACF,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,QACC,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA,EACC,8BAAC,SACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,gBACC,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EACC,8BAAC,WACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,MAAM,OAAN,EAAA,EAAc,GACjB,CACF,EAAA,CAAA,EACF,CACF,EAAA,CAAA,EACF,CACF,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,QACC,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA,EACC,8BAAC,SACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,gBACC,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EACC,8BAAC,WACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,MAAM,OAAN,EAAA,EAAc,GACjB,CACF,EAAA,CAAA,EACF,CACF,EAAA,CAAA,EACF,CACF,EAAA,CAAA;AAAA,wBACA,GAAA,CAAC,QACC,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA,EACC,8BAAC,SACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,gBACC,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EACC,8BAAC,WACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,MAAM,KAAN,EAAA,EAAY,GACf,CACF,EAAA,CAAA,EACF,CACF,EAAA,CAAA,EACF,CACF,EAAA,CAAA;AAAA,OACF,EAAA,CAAA;AAAA,sBACA,GAAA,CAAC,qBAAmB,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,KAC3B,EAAA,CAAA;AAAA,yBACC,YAAa,EAAA,EAAA,KAAA,EAAO,EAAE,aAAA,EAAe,IACpC,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAQ,EAAA,EAAA,MAAA,EAAM,IAAE,EAAA,QAAA,EAAA,OAAA,CAAQ,mBAAoB,EAAA,CAAA;AAAA,sBAC7C,GAAA,CAAC,SAAW,EAAA,EAAA,QAAA,EAAA,OAAA,CAAQ,kBAAmB,EAAA,CAAA;AAAA,KACzC,EAAA,CAAA;AAAA,wBACC,MAAO,EAAA,EAAA,IAAA,EAAM,QAAQ,KAAK,EAAA,IAAA,EACxB,kBAAQ,wBACX,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}