@daimo/pay 1.19.10 → 1.19.11

package/build/src/components/Common/CircleTimer.js

@@ -1,92 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-
-const CircleTimer = ({
-  total,
-  size = 24,
-  stroke = 3,
-  currentTime,
-  onTimeChange,
-  children
-}) => {
-  const [target, setTarget] = useState(
-    Date.now() + (currentTime ?? total) * 1e3
-  );
-  const [left, setLeft] = useState(currentTime ?? total);
-  useEffect(() => {
-    if (currentTime !== void 0) {
-      setTarget(Date.now() + currentTime * 1e3);
-      setLeft(currentTime);
-    }
-  }, [currentTime]);
-  useEffect(() => {
-    const id = setInterval(() => {
-      const secs = Math.max(0, Math.ceil((target - Date.now()) / 1e3));
-      setLeft(secs);
-      onTimeChange?.(secs);
-      if (secs === 0) clearInterval(id);
-    }, 1e3);
-    return () => clearInterval(id);
-  }, [target, onTimeChange]);
-  const ratio = Math.round(left * 100 / total);
-  const radius = Math.floor((size - stroke) / 2);
-  const circumference = Math.round(2 * 314 * radius / 100);
-  const dashoffset = Math.round(circumference * (100 - ratio) / 100);
-  const color = ratio <= 10 ? "var(--timer-red, #D92D20)" : ratio <= 40 ? "var(--timer-orange, #F79009)" : "var(--timer-green, #12D18E)";
-  const center = Math.round(size / 2);
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      viewBox: `0 0 ${size} ${size}`,
-      width: size,
-      height: size,
-      role: "img",
-      "aria-label": `Timer: ${left}s left of ${total}s`,
-      children: [
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: center,
-            cy: center,
-            r: radius,
-            fill: "transparent",
-            stroke: "var(--ck-body-background-secondary, #EEE)",
-            strokeWidth: stroke
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: center,
-            cy: center,
-            r: radius,
-            fill: "transparent",
-            stroke: color,
-            strokeWidth: stroke,
-            strokeDasharray: circumference,
-            strokeDashoffset: dashoffset,
-            strokeLinecap: "round",
-            style: { transition: "stroke-dashoffset 1s linear" },
-            transform: `rotate(-90 ${center} ${center})`
-          }
-        ),
-        children && /* @__PURE__ */ jsx("foreignObject", { x: "0", y: "0", width: size, height: size, children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "100%",
-              height: "100%"
-            },
-            children
-          }
-        ) })
-      ]
-    }
-  );
-};
-
-export { CircleTimer as default };
-//# sourceMappingURL=CircleTimer.js.map

package/build/src/components/Common/CircleTimer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CircleTimer.js","sources":["../../../../src/components/Common/CircleTimer.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useState } from \"react\";\n\n// CircleTimer – compact circular countdown indicator.\n// Mirrors SquareTimer logic but uses a circle SVG path.\n// All maths intentionally integer-based to avoid float precision loss.\n\nexport type CircleTimerProps = {\n  /** Total seconds in the countdown */\n  total: number;\n  /** Diameter (outer) in px – should be an even integer */\n  size?: number;\n  /** Stroke width in px – integer */\n  stroke?: number;\n  /** Externally controlled seconds left */\n  currentTime?: number;\n  /** Fired each second with updated seconds left */\n  onTimeChange?: (seconds: number) => void;\n  /** Child can be placed at the centre (e.g. an icon) */\n  children?: ReactNode;\n};\n\nconst CircleTimer: React.FC<CircleTimerProps> = ({\n  total,\n  size = 24,\n  stroke = 3,\n  currentTime,\n  onTimeChange,\n  children,\n}) => {\n  // timestamp (ms) when timer ends\n  const [target, setTarget] = useState<number>(\n    Date.now() + (currentTime ?? total) * 1000,\n  );\n\n  const [left, setLeft] = useState<number>(currentTime ?? total);\n\n  // react to external currentTime updates\n  useEffect(() => {\n    if (currentTime !== undefined) {\n      setTarget(Date.now() + currentTime * 1000);\n      setLeft(currentTime);\n    }\n  }, [currentTime]);\n\n  // interval tick\n  useEffect(() => {\n    const id = setInterval(() => {\n      const secs = Math.max(0, Math.ceil((target - Date.now()) / 1000));\n      setLeft(secs);\n      onTimeChange?.(secs);\n      if (secs === 0) clearInterval(id);\n    }, 1000);\n    return () => clearInterval(id);\n  }, [target, onTimeChange]);\n\n  const ratio = Math.round((left * 100) / total); // 0-100\n\n  // Ensure stroke stays within viewBox: use floor to be conservative\n  const radius = Math.floor((size - stroke) / 2);\n  const circumference = Math.round((2 * 314 * radius) / 100); // 2πr, π≈3.14\n  const dashoffset = Math.round((circumference * (100 - ratio)) / 100);\n\n  // colour transition: green → orange → red\n  const color =\n    ratio <= 10\n      ? \"var(--timer-red, #D92D20)\"\n      : ratio <= 40\n        ? \"var(--timer-orange, #F79009)\"\n        : \"var(--timer-green, #12D18E)\";\n\n  const center = Math.round(size / 2);\n\n  return (\n    <svg\n      viewBox={`0 0 ${size} ${size}`}\n      width={size}\n      height={size}\n      role=\"img\"\n      aria-label={`Timer: ${left}s left of ${total}s`}\n    >\n      {/* background circle */}\n      <circle\n        cx={center}\n        cy={center}\n        r={radius}\n        fill=\"transparent\"\n        stroke=\"var(--ck-body-background-secondary, #EEE)\"\n        strokeWidth={stroke}\n      />\n      {/* progress circle */}\n      <circle\n        cx={center}\n        cy={center}\n        r={radius}\n        fill=\"transparent\"\n        stroke={color}\n        strokeWidth={stroke}\n        strokeDasharray={circumference}\n        strokeDashoffset={dashoffset}\n        strokeLinecap=\"round\"\n        style={{ transition: \"stroke-dashoffset 1s linear\" }}\n        transform={`rotate(-90 ${center} ${center})`}\n      />\n      {/* optional child */}\n      {children && (\n        <foreignObject x=\"0\" y=\"0\" width={size} height={size}>\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              width: \"100%\",\n              height: \"100%\",\n            }}\n          >\n            {children}\n          </div>\n        </foreignObject>\n      )}\n    </svg>\n  );\n};\n\nexport default CircleTimer;\n"],"names":[],"mappings":";;;AAqBA,MAAM,cAA0C,CAAC;AAAA,EAC/C,KAAA;AAAA,EACA,IAAO,GAAA,EAAA;AAAA,EACP,MAAS,GAAA,CAAA;AAAA,EACT,WAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AACF,CAAM,KAAA;AAEJ,EAAM,MAAA,CAAC,MAAQ,EAAA,SAAS,CAAI,GAAA,QAAA;AAAA,IAC1B,IAAK,CAAA,GAAA,EAAS,GAAA,CAAA,WAAA,IAAe,KAAS,IAAA,GAAA;AAAA,GACxC,CAAA;AAEA,EAAA,MAAM,CAAC,IAAM,EAAA,OAAO,CAAI,GAAA,QAAA,CAAiB,eAAe,KAAK,CAAA,CAAA;AAG7D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,gBAAgB,KAAW,CAAA,EAAA;AAC7B,MAAA,SAAA,CAAU,IAAK,CAAA,GAAA,EAAQ,GAAA,WAAA,GAAc,GAAI,CAAA,CAAA;AACzC,MAAA,OAAA,CAAQ,WAAW,CAAA,CAAA;AAAA,KACrB;AAAA,GACF,EAAG,CAAC,WAAW,CAAC,CAAA,CAAA;AAGhB,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,EAAA,GAAK,YAAY,MAAM;AAC3B,MAAM,MAAA,IAAA,GAAO,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,CAAK,IAAM,CAAA,CAAA,MAAA,GAAS,IAAK,CAAA,GAAA,EAAS,IAAA,GAAI,CAAC,CAAA,CAAA;AAChE,MAAA,OAAA,CAAQ,IAAI,CAAA,CAAA;AACZ,MAAA,YAAA,GAAe,IAAI,CAAA,CAAA;AACnB,MAAI,IAAA,IAAA,KAAS,CAAG,EAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,OAC/B,GAAI,CAAA,CAAA;AACP,IAAO,OAAA,MAAM,cAAc,EAAE,CAAA,CAAA;AAAA,GAC5B,EAAA,CAAC,MAAQ,EAAA,YAAY,CAAC,CAAA,CAAA;AAEzB,EAAA,MAAM,KAAQ,GAAA,IAAA,CAAK,KAAO,CAAA,IAAA,GAAO,MAAO,KAAK,CAAA,CAAA;AAG7C,EAAA,MAAM,MAAS,GAAA,IAAA,CAAK,KAAO,CAAA,CAAA,IAAA,GAAO,UAAU,CAAC,CAAA,CAAA;AAC7C,EAAA,MAAM,gBAAgB,IAAK,CAAA,KAAA,CAAO,CAAI,GAAA,GAAA,GAAM,SAAU,GAAG,CAAA,CAAA;AACzD,EAAA,MAAM,aAAa,IAAK,CAAA,KAAA,CAAO,aAAiB,IAAA,GAAA,GAAM,SAAU,GAAG,CAAA,CAAA;AAGnE,EAAA,MAAM,QACJ,KAAS,IAAA,EAAA,GACL,2BACA,GAAA,KAAA,IAAS,KACP,8BACA,GAAA,6BAAA,CAAA;AAER,EAAA,MAAM,MAAS,GAAA,IAAA,CAAK,KAAM,CAAA,IAAA,GAAO,CAAC,CAAA,CAAA;AAElC,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,CAAA,IAAA,EAAO,IAAI,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA;AAAA,MAC5B,KAAO,EAAA,IAAA;AAAA,MACP,MAAQ,EAAA,IAAA;AAAA,MACR,IAAK,EAAA,KAAA;AAAA,MACL,YAAY,EAAA,CAAA,OAAA,EAAU,IAAI,CAAA,UAAA,EAAa,KAAK,CAAA,CAAA,CAAA;AAAA,MAG5C,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA,MAAA;AAAA,YACJ,EAAI,EAAA,MAAA;AAAA,YACJ,CAAG,EAAA,MAAA;AAAA,YACH,IAAK,EAAA,aAAA;AAAA,YACL,MAAO,EAAA,2CAAA;AAAA,YACP,WAAa,EAAA,MAAA;AAAA,WAAA;AAAA,SACf;AAAA,wBAEA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,EAAI,EAAA,MAAA;AAAA,YACJ,EAAI,EAAA,MAAA;AAAA,YACJ,CAAG,EAAA,MAAA;AAAA,YACH,IAAK,EAAA,aAAA;AAAA,YACL,MAAQ,EAAA,KAAA;AAAA,YACR,WAAa,EAAA,MAAA;AAAA,YACb,eAAiB,EAAA,aAAA;AAAA,YACjB,gBAAkB,EAAA,UAAA;AAAA,YAClB,aAAc,EAAA,OAAA;AAAA,YACd,KAAA,EAAO,EAAE,UAAA,EAAY,6BAA8B,EAAA;AAAA,YACnD,SAAW,EAAA,CAAA,WAAA,EAAc,MAAM,CAAA,CAAA,EAAI,MAAM,CAAA,CAAA,CAAA;AAAA,WAAA;AAAA,SAC3C;AAAA,QAEC,QAAA,oBACE,GAAA,CAAA,eAAA,EAAA,EAAc,CAAE,EAAA,GAAA,EAAI,GAAE,GAAI,EAAA,KAAA,EAAO,IAAM,EAAA,MAAA,EAAQ,IAC9C,EAAA,QAAA,kBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAO,EAAA;AAAA,cACL,OAAS,EAAA,MAAA;AAAA,cACT,UAAY,EAAA,QAAA;AAAA,cACZ,cAAgB,EAAA,QAAA;AAAA,cAChB,KAAO,EAAA,MAAA;AAAA,cACP,MAAQ,EAAA,MAAA;AAAA,aACV;AAAA,YAEC,QAAA;AAAA,WAAA;AAAA,SAEL,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAEJ,CAAA;AAEJ;;;;"}

package/build/src/components/Common/ConnectorList/index.js

@@ -1,121 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { ROUTES } from '../../../constants/routes.js';
-import { WALLET_ID_OTHER_WALLET } from '../../../constants/wallets.js';
-import { useConnect } from '../../../hooks/useConnect.js';
-import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
-import useIsMobile from '../../../hooks/useIsMobile.js';
-import { useLastConnector } from '../../../hooks/useLastConnector.js';
-import { usePayContext } from '../../../hooks/usePayContext.js';
-import { detectBrowser, isBaseAccountConnector, isGeminiConnector } from '../../../utils/index.js';
-import { useWallets, isExternalWallet } from '../../../wallets/useWallets.js';
-import { ScrollArea } from '../ScrollArea/index.js';
-import Alert from '../Alert/index.js';
-import { ConnectorsContainer, ConnectorButton, ConnectorIcon, ConnectorLabel, RecentlyUsedTag, SkeletonIcon, SkeletonLabel } from './styles.js';
-
-const ConnectorList = () => {
-  const context = usePayContext();
-  const { isMobile } = useIsMobile();
-  const wallets = useWallets(isMobile);
-  const { lastConnectorId } = useLastConnector();
-  const { paymentState } = useDaimoPay();
-  const prioritizedId = context.paymentState.buttonProps?.prioritizedWalletId;
-  const walletsToDisplay = context.options?.hideRecentBadge ? wallets : [
-    // prioritized wallet at very top
-    ...wallets.filter((wallet) => wallet.id === prioritizedId),
-    // then recent wallet if different from prioritized
-    ...wallets.filter(
-      (wallet) => lastConnectorId === wallet.connector?.id && wallet.id !== prioritizedId
-    ),
-    // remaining wallets
-    ...wallets.filter(
-      (wallet) => wallet.id !== prioritizedId && lastConnectorId !== wallet.connector?.id
-    )
-  ];
-  const shouldWaitForHydration = isMobile && !context.paymentState.isDepositFlow;
-  const ready = !shouldWaitForHydration || paymentState === "payment_unpaid";
-  return /* @__PURE__ */ jsxs(ScrollArea, { mobileDirection: "horizontal", children: [
-    walletsToDisplay.length === 0 && /* @__PURE__ */ jsx(Alert, { error: true, children: "No connectors found in ConnectKit config." }),
-    !ready && walletsToDisplay.length > 0 && /* @__PURE__ */ jsx(ConnectorsContainer, { $totalResults: walletsToDisplay.length, children: walletsToDisplay.map((_, idx) => /* @__PURE__ */ jsx(SkeletonConnectorItem, {}, idx)) }),
-    ready && walletsToDisplay.length > 0 && /* @__PURE__ */ jsx(ConnectorsContainer, { $totalResults: walletsToDisplay.length, children: walletsToDisplay.map((wallet) => /* @__PURE__ */ jsx(
-      ConnectorItem,
-      {
-        wallet,
-        isRecent: wallet.id === lastConnectorId
-      },
-      wallet.id
-    )) })
-  ] });
-};
-const ConnectorItem = ({
-  wallet,
-  isRecent
-}) => {
-  const { isMobile } = useIsMobile();
-  const context = usePayContext();
-  const { connect } = useConnect();
-  const redirectToMoreWallets = isMobile && wallet.id === WALLET_ID_OTHER_WALLET;
-  const isExternalWalletFlow = isExternalWallet(wallet);
-  const shouldConnectImmediately = (detectBrowser() === "safari" || detectBrowser() === "ios") && (isBaseAccountConnector(wallet.connector?.id) || isGeminiConnector(wallet.connector?.id));
-  const onClick = async () => {
-    const meta = { event: "connector-list-click", walletId: wallet.id };
-    if (wallet.solanaConnectorName && !isMobile) {
-      const supportsEvm = wallet.connector?.name != null;
-      if (supportsEvm) {
-        context.paymentState.setSelectedWallet(wallet);
-        context.setRoute(ROUTES.SELECT_WALLET_CHAIN, meta);
-        return;
-      } else {
-        context.setSolanaConnector(wallet.solanaConnectorName);
-        context.setRoute(ROUTES.SOLANA_CONNECTOR, meta);
-        return;
-      }
-    }
-    if (redirectToMoreWallets) {
-      context.setRoute(ROUTES.MOBILECONNECTORS, meta);
-    } else if (isExternalWalletFlow) {
-      if (context.paymentState.isDepositFlow) {
-        context.paymentState.setSelectedWallet(wallet);
-        context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);
-      } else if (isMobile) {
-        await context.paymentState.openInWalletBrowser(wallet);
-      } else {
-        context.setPendingConnectorId(wallet.id);
-        context.setRoute(ROUTES.CONNECT, meta);
-      }
-    } else if (context.paymentState.isDepositFlow && isMobile && !wallet.connector) {
-      context.paymentState.setSelectedWallet(wallet);
-      context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);
-    } else if (isMobile && wallet.getDaimoPayDeeplink != null) {
-      await context.paymentState.openInWalletBrowser(wallet);
-    } else {
-      if (shouldConnectImmediately) {
-        connect({ connector: wallet.connector });
-      }
-      context.setPendingConnectorId(wallet.id);
-      context.setRoute(ROUTES.CONNECT, meta);
-    }
-  };
-  return /* @__PURE__ */ jsxs(ConnectorButton, { type: "button", onClick, children: [
-    /* @__PURE__ */ jsx(
-      ConnectorIcon,
-      {
-        "data-small": wallet.iconShouldShrink,
-        "data-shape": wallet.iconShape,
-        children: wallet.iconConnector ?? wallet.icon
-      }
-    ),
-    /* @__PURE__ */ jsxs(ConnectorLabel, { children: [
-      isMobile ? wallet.shortName ?? wallet.name : wallet.name,
-      !context.options?.hideRecentBadge && isRecent && /* @__PURE__ */ jsx(RecentlyUsedTag, { children: /* @__PURE__ */ jsx("span", { children: "Recent" }) })
-    ] })
-  ] });
-};
-const SkeletonConnectorItem = () => {
-  return /* @__PURE__ */ jsxs(ConnectorButton, { type: "button", disabled: true, children: [
-    /* @__PURE__ */ jsx(SkeletonIcon, {}),
-    /* @__PURE__ */ jsx(SkeletonLabel, {})
-  ] });
-};
-
-export { ConnectorList as default };
-//# sourceMappingURL=index.js.map

package/build/src/components/Common/ConnectorList/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/ConnectorList/index.tsx"],"sourcesContent":["import { ROUTES } from \"../../../constants/routes\";\nimport { WALLET_ID_OTHER_WALLET } from \"../../../constants/wallets\";\nimport { useConnect } from \"../../../hooks/useConnect\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport useIsMobile from \"../../../hooks/useIsMobile\";\nimport { useLastConnector } from \"../../../hooks/useLastConnector\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport {\n  detectBrowser,\n  isBaseAccountConnector,\n  isGeminiConnector,\n} from \"../../../utils\";\nimport {\n  isExternalWallet,\n  useWallets,\n  WalletProps,\n} from \"../../../wallets/useWallets\";\nimport { ScrollArea } from \"../../Common/ScrollArea\";\nimport Alert from \"../Alert\";\nimport {\n  ConnectorButton,\n  ConnectorIcon,\n  ConnectorLabel,\n  ConnectorsContainer,\n  RecentlyUsedTag,\n  SkeletonIcon,\n  SkeletonLabel,\n} from \"./styles\";\n\nconst ConnectorList = () => {\n  const context = usePayContext();\n  const { isMobile } = useIsMobile();\n\n  const wallets = useWallets(isMobile);\n  const { lastConnectorId } = useLastConnector();\n  const { paymentState } = useDaimoPay();\n  const prioritizedId = context.paymentState.buttonProps?.prioritizedWalletId;\n\n  const walletsToDisplay = context.options?.hideRecentBadge\n    ? wallets\n    : [\n        // prioritized wallet at very top\n        ...wallets.filter((wallet) => wallet.id === prioritizedId),\n        // then recent wallet if different from prioritized\n        ...wallets.filter(\n          (wallet) =>\n            lastConnectorId === wallet.connector?.id &&\n            wallet.id !== prioritizedId,\n        ),\n        // remaining wallets\n        ...wallets.filter(\n          (wallet) =>\n            wallet.id !== prioritizedId &&\n            lastConnectorId !== wallet.connector?.id,\n        ),\n      ];\n\n  // For mobile flow, we need to wait for the order to be hydrated before\n  // we can deeplink to the in-wallet browser.\n  const shouldWaitForHydration =\n    isMobile && !context.paymentState.isDepositFlow;\n  const ready = !shouldWaitForHydration || paymentState === \"payment_unpaid\";\n\n  return (\n    <ScrollArea mobileDirection={\"horizontal\"}>\n      {walletsToDisplay.length === 0 && (\n        <Alert error>No connectors found in ConnectKit config.</Alert>\n      )}\n      {!ready && walletsToDisplay.length > 0 && (\n        <ConnectorsContainer $totalResults={walletsToDisplay.length}>\n          {walletsToDisplay.map((_, idx) => (\n            <SkeletonConnectorItem key={idx} />\n          ))}\n        </ConnectorsContainer>\n      )}\n      {ready && walletsToDisplay.length > 0 && (\n        <ConnectorsContainer $totalResults={walletsToDisplay.length}>\n          {walletsToDisplay.map((wallet) => (\n            <ConnectorItem\n              key={wallet.id}\n              wallet={wallet}\n              isRecent={wallet.id === lastConnectorId}\n            />\n          ))}\n        </ConnectorsContainer>\n      )}\n    </ScrollArea>\n  );\n};\n\nexport default ConnectorList;\n\nconst ConnectorItem = ({\n  wallet,\n  isRecent,\n}: {\n  wallet: WalletProps;\n  isRecent?: boolean;\n}) => {\n  const { isMobile } = useIsMobile();\n  const context = usePayContext();\n  const { connect } = useConnect();\n\n  // The \"Other\" 2x2 connector, goes to the MobileConnectors page.\n  const redirectToMoreWallets =\n    isMobile && wallet.id === WALLET_ID_OTHER_WALLET;\n  // An external wallet is one that we deeplink to, either directly\n  // (on mobile) or via QR code (on desktop).\n  const isExternalWalletFlow = isExternalWallet(wallet);\n\n  // Safari requires opening popup on user gesture, so we connect immediately here\n  const shouldConnectImmediately =\n    (detectBrowser() === \"safari\" || detectBrowser() === \"ios\") &&\n    (isBaseAccountConnector(wallet.connector?.id) ||\n      isGeminiConnector(wallet.connector?.id));\n\n  const onClick = async () => {\n    const meta = { event: \"connector-list-click\", walletId: wallet.id };\n\n    // Desktop multi-chain wallet flow: prompt for chain selection.\n    if (wallet.solanaConnectorName && !isMobile) {\n      const supportsEvm = wallet.connector?.name != null;\n      if (supportsEvm) {\n        context.paymentState.setSelectedWallet(wallet);\n        context.setRoute(ROUTES.SELECT_WALLET_CHAIN, meta);\n        return;\n      } else {\n        context.setSolanaConnector(wallet.solanaConnectorName);\n        context.setRoute(ROUTES.SOLANA_CONNECTOR, meta);\n        return;\n      }\n    }\n    if (redirectToMoreWallets) {\n      context.setRoute(ROUTES.MOBILECONNECTORS, meta);\n    } else if (isExternalWalletFlow) {\n      if (context.paymentState.isDepositFlow) {\n        context.paymentState.setSelectedWallet(wallet);\n        context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);\n      } else if (isMobile) {\n        await context.paymentState.openInWalletBrowser(wallet);\n      } else {\n        // On desktop, show QR code for external wallets\n        context.setPendingConnectorId(wallet.id);\n        context.setRoute(ROUTES.CONNECT, meta);\n      }\n    } else if (\n      context.paymentState.isDepositFlow &&\n      isMobile &&\n      !wallet.connector\n    ) {\n      context.paymentState.setSelectedWallet(wallet);\n      context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);\n    } else if (isMobile && wallet.getDaimoPayDeeplink != null) {\n      await context.paymentState.openInWalletBrowser(wallet);\n    } else {\n      if (shouldConnectImmediately) {\n        connect({ connector: wallet.connector! });\n      }\n      context.setPendingConnectorId(wallet.id);\n      context.setRoute(ROUTES.CONNECT, meta);\n    }\n  };\n\n  return (\n    <ConnectorButton type=\"button\" onClick={onClick}>\n      <ConnectorIcon\n        data-small={wallet.iconShouldShrink}\n        data-shape={wallet.iconShape}\n      >\n        {wallet.iconConnector ?? wallet.icon}\n      </ConnectorIcon>\n      <ConnectorLabel>\n        {isMobile ? (wallet.shortName ?? wallet.name) : wallet.name}\n        {!context.options?.hideRecentBadge && isRecent && (\n          <RecentlyUsedTag>\n            <span>Recent</span>\n          </RecentlyUsedTag>\n        )}\n      </ConnectorLabel>\n    </ConnectorButton>\n  );\n};\n\nconst SkeletonConnectorItem = () => {\n  return (\n    <ConnectorButton type=\"button\" disabled>\n      <SkeletonIcon />\n      <SkeletonLabel />\n    </ConnectorButton>\n  );\n};\n"],"names":[],"mappings":"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"}

package/build/src/components/Common/ConnectorList/styles.js

@@ -1,344 +0,0 @@
-import { keyframes, css } from 'styled-components';
-import styled from '../../../styles/styled/index.js';
-import { motion } from 'framer-motion';
-
-const Shimmer = keyframes`
-  0%{ transform: translate(-100%) rotate(-45deg); }
-  100%{ transform: translate(100%) rotate(-80deg); }
-`;
-const Pulse = keyframes`
-  0%   { opacity: 0.6; }
-  50%  { opacity: 1;   }
-  100% { opacity: 0.6; }
-`;
-const ConnectorButton = styled(motion.button)`
-  display: block;
-  text-decoration: none;
-`;
-const ConnectorLabel = styled(motion.span)``;
-const ConnectorIcon = styled(motion.div)``;
-const SkeletonIcon = styled.div`
-  ${(p) => p.$mobile ? css`
-          position: relative;
-          margin: 0 auto;
-          width: 60px;
-          height: 60px;
-        ` : css`
-          position: absolute;
-          right: 20px;
-          width: 32px;
-          height: 32px;
-        `}
-  border-radius: 22.5%;
-  background-color: rgba(0, 0, 0, 0.1);
-  animation: ${Pulse} 1.5s ease-in-out infinite;
-`;
-const SkeletonLabel = styled.div`
-  ${(p) => p.$mobile ? css`
-          width: 60px;
-          height: 12px;
-          margin: 10px auto 0;
-        ` : css`
-          width: 100px;
-          height: 16px;
-        `}
-  border-radius: 8px;
-  background-color: rgba(0, 0, 0, 0.1);
-  animation: ${Pulse} 1.5s ease-in-out infinite;
-`;
-const styles = {
-  desktop: {
-    ConnectorButton: css`
-      cursor: pointer;
-      user-select: none;
-      position: relative;
-      display: flex;
-      align-items: center;
-      padding: 0 20px;
-      width: 100%;
-      height: 64px;
-      font-size: 17px;
-      font-weight: var(--ck-primary-button-font-weight, 500);
-      line-height: 20px;
-      text-align: var(--ck-body-button-text-align, left);
-      transition: 180ms ease;
-      transition-property: background, color, box-shadow, transform, opacity;
-      will-change: transform, box-shadow, background-color, color, opacity;
-
-      --fallback-color: var(--ck-primary-button-color);
-      --fallback-background: var(--ck-primary-button-background);
-      --fallback-box-shadow: var(--ck-primary-button-box-shadow);
-      --fallback-border-radius: var(--ck-primary-button-border-radius);
-
-      --color: var(--ck-primary-button-color, var(--fallback-color));
-      --background: var(
-        --ck-primary-button-background,
-        var(--fallback-background)
-      );
-      --box-shadow: var(
-        --ck-primary-button-box-shadow,
-        var(--fallback-box-shadow)
-      );
-      --border-radius: var(
-        --ck-primary-button-border-radius,
-        var(--fallback-border-radius)
-      );
-
-      --hover-color: var(--ck-primary-button-hover-color, var(--color));
-      --hover-background: var(
-        --ck-primary-button-hover-background,
-        var(--background)
-      );
-      --hover-box-shadow: var(
-        --ck-primary-button-hover-box-shadow,
-        var(--box-shadow)
-      );
-      --hover-border-radius: var(
-        --ck-primary-button-hover-border-radius,
-        var(--border-radius)
-      );
-
-      --active-color: var(--ck-primary-button-active-color, var(--hover-color));
-      --active-background: var(
-        --ck-primary-button-active-background,
-        var(--hover-background)
-      );
-      --active-box-shadow: var(
-        --ck-primary-button-active-box-shadow,
-        var(--hover-box-shadow)
-      );
-      --active-border-radius: var(
-        --ck-primary-button-active-border-radius,
-        var(--hover-border-radius)
-      );
-
-      color: var(--color);
-      background: var(--background);
-      box-shadow: var(--box-shadow);
-      border-radius: var(--border-radius);
-
-      &:disabled {
-        transition: 180ms ease;
-        opacity: 0.4;
-      }
-
-      --bg: var(--background);
-      &:not(:disabled) {
-        &:hover {
-          color: var(--hover-color);
-          background: var(--hover-background);
-          box-shadow: var(--hover-box-shadow);
-          border-radius: var(--hover-border-radius);
-          --bg: var(--hover-background, var(--background));
-        }
-        &:focus-visible {
-          transition-duration: 100ms;
-          color: var(--hover-color);
-          background: var(--hover-background);
-          box-shadow: var(--hover-box-shadow);
-          border-radius: var(--hover-border-radius);
-          --bg: var(--hover-background, var(--background));
-        }
-        &:active {
-          color: var(--active-color);
-          background: var(--active-background);
-          box-shadow: var(--active-box-shadow);
-          border-radius: var(--active-border-radius);
-          --bg: var(--active-background, var(--background));
-        }
-      }
-    `,
-    ConnectorLabel: css`
-      display: flex;
-      align-items: center;
-      gap: 9px;
-      width: 100%;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      padding: 2px 0;
-      padding-right: 38px;
-    `,
-    ConnectorIcon: css`
-      position: absolute;
-      right: 20px;
-      width: 32px;
-      height: 32px;
-      overflow: hidden;
-      svg,
-      img {
-        display: block;
-        position: relative;
-        pointer-events: none;
-        overflow: hidden;
-        width: 100%;
-        height: 100%;
-      }
-
-      &[data-shape="squircle"] {
-        border-radius: 22.5%;
-      }
-      &[data-shape="circle"] {
-        border-radius: 100%;
-      }
-      &[data-shape="square"] {
-        border-radius: 0;
-      }
-    `
-  },
-  mobile: {
-    ConnectorButton: css`
-      text-align: center;
-      background: none;
-      max-width: 100%;
-      overflow: hidden;
-    `,
-    ConnectorLabel: css`
-      display: block;
-      text-overflow: ellipsis;
-      max-width: 100%;
-      overflow: hidden;
-      padding: 10px 0 0;
-      color: var(--ck-body-color);
-      font-size: 13px;
-      line-height: 15px;
-      font-weight: 500;
-      opacity: 0.75;
-    `,
-    ConnectorIcon: css`
-      position: relative;
-      margin: 0 auto;
-      width: 60px;
-      height: 60px;
-      overflow: hidden;
-      svg,
-      img {
-        display: block;
-        position: relative;
-        width: 100%;
-        height: auto;
-      }
-      &[data-small="true"] {
-        svg,
-        img {
-          transform: scale(0.8);
-        }
-      }
-
-      &[data-shape="squircle"] {
-        border-radius: 22.5%;
-        &:before {
-          content: "";
-          z-index: -1;
-          position: absolute;
-          inset: 0;
-          border-radius: inherit;
-          box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);
-        }
-      }
-      &[data-shape="circle"] {
-        border-radius: 100%;
-      }
-      &[data-shape="square"] {
-        border-radius: 0;
-      }
-    `
-  }
-};
-const RecentlyUsedTag = styled(motion.span)`
-  position: relative;
-  top: var(--ck-recent-badge-top-offset, 0.5px);
-  display: inline-block;
-  padding: 10px 7px;
-  line-height: 0;
-  font-size: 13px;
-  font-weight: 400;
-  border-radius: var(--ck-recent-badge-border-radius, var(--border-radius));
-  color: var(
-    --ck-recent-badge-color,
-    var(--ck-accent-color, var(--ck-body-color-muted, currentColor))
-  );
-  background: var(--ck-recent-badge-background, transparent);
-  overflow: hidden;
-  span {
-    display: inline-block;
-    position: relative;
-  }
-  &:before {
-    z-index: 1;
-    content: "";
-    position: absolute;
-    inset: 0;
-    opacity: 0.4;
-    box-shadow: var(--ck-recent-badge-box-shadow, inset 0 0 0 1px currentColor);
-    border-radius: inherit;
-  }
-  &:after {
-    z-index: 2;
-    content: "";
-    position: absolute;
-    inset: -10%;
-    top: -110%;
-    aspect-ratio: 1/1;
-    opacity: 0.7;
-    background: linear-gradient(
-      170deg,
-      transparent 10%,
-      var(--ck-recent-badge-background, var(--bg)) 50%,
-      transparent 90%
-    );
-    animation: ${Shimmer} 2s linear infinite;
-  }
-`;
-const ConnectorsContainer = styled.div`
-  transition: opacity 300ms ease;
-  min-width: fit-content;
-
-  ${(props) => props.$disabled && css`
-      pointer-events: none;
-      opacity: 0.4;
-    `}
-
-  ${(props) => !props.$mobile ? css`
-          display: flex;
-          flex-direction: column;
-          gap: 12px;
-
-          ${ConnectorButton} {
-            ${styles.desktop.ConnectorButton}
-            ${ConnectorLabel} {
-              ${styles.desktop.ConnectorLabel}
-            }
-            ${ConnectorIcon} {
-              ${styles.desktop.ConnectorIcon}
-            }
-          }
-        ` : css`
-          display: flex;
-          align-items: flex-start;
-          justify-content: space-around;
-          gap: 22px 6px;
-          //margin: 0px -10px -20px;
-          padding: 14px 0px 28px;
-
-          ${ConnectorButton} {
-            flex-shrink: 0;
-            width: 80px;
-            ${styles.mobile.ConnectorButton}
-            ${ConnectorLabel} {
-              ${styles.mobile.ConnectorLabel}
-              ${RecentlyUsedTag} {
-                display: none;
-                width: fit-content;
-                margin: 0 auto;
-              }
-            }
-            ${ConnectorIcon} {
-              ${styles.mobile.ConnectorIcon}
-            }
-          }
-        `}
-`;
-
-export { ConnectorButton, ConnectorIcon, ConnectorLabel, ConnectorsContainer, Pulse, RecentlyUsedTag, SkeletonIcon, SkeletonLabel };
-//# sourceMappingURL=styles.js.map

package/build/src/components/Common/ConnectorList/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/ConnectorList/styles.ts"],"sourcesContent":["import { css, keyframes } from \"styled-components\";\nimport styled from \"../../../styles/styled\";\n\nimport { motion } from \"framer-motion\";\n\nconst Shimmer = keyframes`\n  0%{ transform: translate(-100%) rotate(-45deg); }\n  100%{ transform: translate(100%) rotate(-80deg); }\n`;\n\nexport const Pulse = keyframes`\n  0%   { opacity: 0.6; }\n  50%  { opacity: 1;   }\n  100% { opacity: 0.6; }\n`;\n\nexport const ConnectorButton = styled(motion.button)`\n  display: block;\n  text-decoration: none;\n`;\nexport const ConnectorLabel = styled(motion.span)``;\nexport const ConnectorIcon = styled(motion.div)``;\n\nexport const SkeletonIcon = styled.div<{ $mobile?: boolean }>`\n  ${(p: { $mobile?: boolean }) =>\n    p.$mobile\n      ? css`\n          position: relative;\n          margin: 0 auto;\n          width: 60px;\n          height: 60px;\n        `\n      : css`\n          position: absolute;\n          right: 20px;\n          width: 32px;\n          height: 32px;\n        `}\n  border-radius: 22.5%;\n  background-color: rgba(0, 0, 0, 0.1);\n  animation: ${Pulse} 1.5s ease-in-out infinite;\n`;\n\nexport const SkeletonLabel = styled.div<{ $mobile?: boolean }>`\n  ${(p: { $mobile?: boolean }) =>\n    p.$mobile\n      ? css`\n          width: 60px;\n          height: 12px;\n          margin: 10px auto 0;\n        `\n      : css`\n          width: 100px;\n          height: 16px;\n        `}\n  border-radius: 8px;\n  background-color: rgba(0, 0, 0, 0.1);\n  animation: ${Pulse} 1.5s ease-in-out infinite;\n`;\n\n// This is a bit of a hack to not share styles between mobile and desktop\nconst styles = {\n  desktop: {\n    ConnectorButton: css`\n      cursor: pointer;\n      user-select: none;\n      position: relative;\n      display: flex;\n      align-items: center;\n      padding: 0 20px;\n      width: 100%;\n      height: 64px;\n      font-size: 17px;\n      font-weight: var(--ck-primary-button-font-weight, 500);\n      line-height: 20px;\n      text-align: var(--ck-body-button-text-align, left);\n      transition: 180ms ease;\n      transition-property: background, color, box-shadow, transform, opacity;\n      will-change: transform, box-shadow, background-color, color, opacity;\n\n      --fallback-color: var(--ck-primary-button-color);\n      --fallback-background: var(--ck-primary-button-background);\n      --fallback-box-shadow: var(--ck-primary-button-box-shadow);\n      --fallback-border-radius: var(--ck-primary-button-border-radius);\n\n      --color: var(--ck-primary-button-color, var(--fallback-color));\n      --background: var(\n        --ck-primary-button-background,\n        var(--fallback-background)\n      );\n      --box-shadow: var(\n        --ck-primary-button-box-shadow,\n        var(--fallback-box-shadow)\n      );\n      --border-radius: var(\n        --ck-primary-button-border-radius,\n        var(--fallback-border-radius)\n      );\n\n      --hover-color: var(--ck-primary-button-hover-color, var(--color));\n      --hover-background: var(\n        --ck-primary-button-hover-background,\n        var(--background)\n      );\n      --hover-box-shadow: var(\n        --ck-primary-button-hover-box-shadow,\n        var(--box-shadow)\n      );\n      --hover-border-radius: var(\n        --ck-primary-button-hover-border-radius,\n        var(--border-radius)\n      );\n\n      --active-color: var(--ck-primary-button-active-color, var(--hover-color));\n      --active-background: var(\n        --ck-primary-button-active-background,\n        var(--hover-background)\n      );\n      --active-box-shadow: var(\n        --ck-primary-button-active-box-shadow,\n        var(--hover-box-shadow)\n      );\n      --active-border-radius: var(\n        --ck-primary-button-active-border-radius,\n        var(--hover-border-radius)\n      );\n\n      color: var(--color);\n      background: var(--background);\n      box-shadow: var(--box-shadow);\n      border-radius: var(--border-radius);\n\n      &:disabled {\n        transition: 180ms ease;\n        opacity: 0.4;\n      }\n\n      --bg: var(--background);\n      &:not(:disabled) {\n        &:hover {\n          color: var(--hover-color);\n          background: var(--hover-background);\n          box-shadow: var(--hover-box-shadow);\n          border-radius: var(--hover-border-radius);\n          --bg: var(--hover-background, var(--background));\n        }\n        &:focus-visible {\n          transition-duration: 100ms;\n          color: var(--hover-color);\n          background: var(--hover-background);\n          box-shadow: var(--hover-box-shadow);\n          border-radius: var(--hover-border-radius);\n          --bg: var(--hover-background, var(--background));\n        }\n        &:active {\n          color: var(--active-color);\n          background: var(--active-background);\n          box-shadow: var(--active-box-shadow);\n          border-radius: var(--active-border-radius);\n          --bg: var(--active-background, var(--background));\n        }\n      }\n    `,\n    ConnectorLabel: css`\n      display: flex;\n      align-items: center;\n      gap: 9px;\n      width: 100%;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      padding: 2px 0;\n      padding-right: 38px;\n    `,\n    ConnectorIcon: css`\n      position: absolute;\n      right: 20px;\n      width: 32px;\n      height: 32px;\n      overflow: hidden;\n      svg,\n      img {\n        display: block;\n        position: relative;\n        pointer-events: none;\n        overflow: hidden;\n        width: 100%;\n        height: 100%;\n      }\n\n      &[data-shape=\"squircle\"] {\n        border-radius: 22.5%;\n      }\n      &[data-shape=\"circle\"] {\n        border-radius: 100%;\n      }\n      &[data-shape=\"square\"] {\n        border-radius: 0;\n      }\n    `,\n  },\n  mobile: {\n    ConnectorButton: css`\n      text-align: center;\n      background: none;\n      max-width: 100%;\n      overflow: hidden;\n    `,\n    ConnectorLabel: css`\n      display: block;\n      text-overflow: ellipsis;\n      max-width: 100%;\n      overflow: hidden;\n      padding: 10px 0 0;\n      color: var(--ck-body-color);\n      font-size: 13px;\n      line-height: 15px;\n      font-weight: 500;\n      opacity: 0.75;\n    `,\n    ConnectorIcon: css`\n      position: relative;\n      margin: 0 auto;\n      width: 60px;\n      height: 60px;\n      overflow: hidden;\n      svg,\n      img {\n        display: block;\n        position: relative;\n        width: 100%;\n        height: auto;\n      }\n      &[data-small=\"true\"] {\n        svg,\n        img {\n          transform: scale(0.8);\n        }\n      }\n\n      &[data-shape=\"squircle\"] {\n        border-radius: 22.5%;\n        &:before {\n          content: \"\";\n          z-index: -1;\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      }\n      &[data-shape=\"circle\"] {\n        border-radius: 100%;\n      }\n      &[data-shape=\"square\"] {\n        border-radius: 0;\n      }\n    `,\n  },\n};\n\nexport const RecentlyUsedTag = styled(motion.span)`\n  position: relative;\n  top: var(--ck-recent-badge-top-offset, 0.5px);\n  display: inline-block;\n  padding: 10px 7px;\n  line-height: 0;\n  font-size: 13px;\n  font-weight: 400;\n  border-radius: var(--ck-recent-badge-border-radius, var(--border-radius));\n  color: var(\n    --ck-recent-badge-color,\n    var(--ck-accent-color, var(--ck-body-color-muted, currentColor))\n  );\n  background: var(--ck-recent-badge-background, transparent);\n  overflow: hidden;\n  span {\n    display: inline-block;\n    position: relative;\n  }\n  &:before {\n    z-index: 1;\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    opacity: 0.4;\n    box-shadow: var(--ck-recent-badge-box-shadow, inset 0 0 0 1px currentColor);\n    border-radius: inherit;\n  }\n  &:after {\n    z-index: 2;\n    content: \"\";\n    position: absolute;\n    inset: -10%;\n    top: -110%;\n    aspect-ratio: 1/1;\n    opacity: 0.7;\n    background: linear-gradient(\n      170deg,\n      transparent 10%,\n      var(--ck-recent-badge-background, var(--bg)) 50%,\n      transparent 90%\n    );\n    animation: ${Shimmer} 2s linear infinite;\n  }\n`;\n\nexport const ConnectorsContainer = styled.div<{\n  $mobile?: boolean;\n  $disabled?: boolean;\n  $totalResults?: number;\n}>`\n  transition: opacity 300ms ease;\n  min-width: fit-content;\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      pointer-events: none;\n      opacity: 0.4;\n    `}\n\n  ${(props) =>\n    !props.$mobile\n      ? css`\n          display: flex;\n          flex-direction: column;\n          gap: 12px;\n\n          ${ConnectorButton} {\n            ${styles.desktop.ConnectorButton}\n            ${ConnectorLabel} {\n              ${styles.desktop.ConnectorLabel}\n            }\n            ${ConnectorIcon} {\n              ${styles.desktop.ConnectorIcon}\n            }\n          }\n        `\n      : css`\n          display: flex;\n          align-items: flex-start;\n          justify-content: space-around;\n          gap: 22px 6px;\n          //margin: 0px -10px -20px;\n          padding: 14px 0px 28px;\n\n          ${ConnectorButton} {\n            flex-shrink: 0;\n            width: 80px;\n            ${styles.mobile.ConnectorButton}\n            ${ConnectorLabel} {\n              ${styles.mobile.ConnectorLabel}\n              ${RecentlyUsedTag} {\n                display: none;\n                width: fit-content;\n                margin: 0 auto;\n              }\n            }\n            ${ConnectorIcon} {\n              ${styles.mobile.ConnectorIcon}\n            }\n          }\n        `}\n`;\n"],"names":[],"mappings":"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"}