@daimo/pay 1.16.0 → 1.16.1

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

@@ -1,47 +1,91 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 
-const CircleTimer = ({ total, size = 24, stroke = 3, currentTime, onTimeChange, children, }) => {
-    // timestamp (ms) when timer ends
-    const [target, setTarget] = useState(Date.now() + (currentTime ?? total) * 1000);
-    const [left, setLeft] = useState(currentTime ?? total);
-    // react to external currentTime updates
-    useEffect(() => {
-        if (currentTime !== undefined) {
-            setTarget(Date.now() + currentTime * 1000);
-            setLeft(currentTime);
-        }
-    }, [currentTime]);
-    // interval tick
-    useEffect(() => {
-        const id = setInterval(() => {
-            const secs = Math.max(0, Math.ceil((target - Date.now()) / 1000));
-            setLeft(secs);
-            onTimeChange?.(secs);
-            if (secs === 0)
-                clearInterval(id);
-        }, 1000);
-        return () => clearInterval(id);
-    }, [target, onTimeChange]);
-    const ratio = Math.round((left * 100) / total); // 0-100
-    // Ensure stroke stays within viewBox: use floor to be conservative
-    const radius = Math.floor((size - stroke) / 2);
-    const circumference = Math.round((2 * 314 * radius) / 100); // 2πr, π≈3.14
-    const dashoffset = Math.round((circumference * (100 - ratio)) / 100);
-    // colour transition: green → orange → red
-    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 (jsxs("svg", { viewBox: `0 0 ${size} ${size}`, width: size, height: size, role: "img", "aria-label": `Timer: ${left}s left of ${total}s`, children: [jsx("circle", { cx: center, cy: center, r: radius, fill: "transparent", stroke: "var(--ck-body-background-secondary, #EEE)", strokeWidth: stroke }), 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 && (jsx("foreignObject", { x: "0", y: "0", width: size, height: size, children: jsx("div", { style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        width: "100%",
-                        height: "100%",
-                    }, children: children }) }))] }));
+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 };

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

@@ -1 +1 @@
-{"version":3,"file":"CircleTimer.js","sources":["../../../../src/components/Common/CircleTimer.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"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":"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"}

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

@@ -5,95 +5,121 @@ 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, isCoinbaseWalletConnector } from '../../../utils/index.js';
+import { detectBrowser, isBaseAccountConnector, isGeminiConnector } from '../../../utils/index.js';
 import { useWallets, WALLET_ID_OTHER_WALLET, WALLET_ID_MOBILE_WALLETS } 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 walletsToDisplay = context.options?.hideRecentBadge
-        ? wallets
-        : [
-            // move last used wallet to top of list
-            // using .filter and spread to avoid mutating original array order with .sort
-            ...wallets.filter((wallet) => lastConnectorId === wallet.connector?.id),
-            ...wallets.filter((wallet) => lastConnectorId !== wallet.connector?.id),
-        ];
-    // For mobile flow, we need to wait for the order to be hydrated before
-    // we can deeplink to the in-wallet browser.
-    const shouldWaitForHydration = isMobile && !context.paymentState.isDepositFlow;
-    const ready = !shouldWaitForHydration || paymentState === "payment_unpaid";
-    return (jsxs(ScrollArea, { mobileDirection: "horizontal", children: [walletsToDisplay.length === 0 && (jsx(Alert, { error: true, children: "No connectors found in ConnectKit config." })), !ready && walletsToDisplay.length > 0 && (jsx(ConnectorsContainer, { "$mobile": isMobile, "$totalResults": walletsToDisplay.length, children: walletsToDisplay.map((_, idx) => (jsx(SkeletonConnectorItem, {}, idx))) })), ready && walletsToDisplay.length > 0 && (jsx(ConnectorsContainer, { "$mobile": isMobile, "$totalResults": walletsToDisplay.length, children: walletsToDisplay.map((wallet) => (jsx(ConnectorItem, { wallet: wallet, isRecent: wallet.id === lastConnectorId }, wallet.id))) }))] }));
+  const context = usePayContext();
+  const { isMobile } = useIsMobile();
+  const wallets = useWallets(isMobile);
+  const { lastConnectorId } = useLastConnector();
+  const { paymentState } = useDaimoPay();
+  const walletsToDisplay = context.options?.hideRecentBadge ? wallets : [
+    // move last used wallet to top of list
+    // using .filter and spread to avoid mutating original array order with .sort
+    ...wallets.filter((wallet) => lastConnectorId === wallet.connector?.id),
+    ...wallets.filter((wallet) => 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,
+      {
+        $mobile: isMobile,
+        $totalResults: walletsToDisplay.length,
+        children: walletsToDisplay.map((_, idx) => /* @__PURE__ */ jsx(SkeletonConnectorItem, {}, idx))
+      }
+    ),
+    ready && walletsToDisplay.length > 0 && /* @__PURE__ */ jsx(
+      ConnectorsContainer,
+      {
+        $mobile: isMobile,
+        $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();
-    // The "Other" 2x2 connector, goes to the MobileConnectors page.
-    const redirectToMoreWallets = isMobile && wallet.id === WALLET_ID_OTHER_WALLET;
-    const redirectToMobileWallets = wallet.id === WALLET_ID_MOBILE_WALLETS;
-    // Safari requires opening popup on user gesture, so we connect immediately here
-    const shouldConnectImmediately = (detectBrowser() === "safari" || detectBrowser() === "ios") &&
-        isCoinbaseWalletConnector(wallet.connector?.id);
-    const onClick = () => {
-        const meta = { event: "connector-list-click", walletId: wallet.id };
-        // Desktop multi-chain wallet flow: prompt for chain selection.
-        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 (redirectToMobileWallets) {
-            if (context.paymentState.isDepositFlow) {
-                context.paymentState.setSelectedWallet(wallet);
-                context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);
-            }
-            else {
-                context.setPendingConnectorId(WALLET_ID_MOBILE_WALLETS);
-                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 &&
-            !wallet.connector) {
-            context.paymentState.openInWalletBrowser(wallet);
-        }
-        else {
-            if (shouldConnectImmediately) {
-                connect({ connector: wallet.connector });
-            }
-            context.setPendingConnectorId(wallet.id);
-            context.setRoute(ROUTES.CONNECT, meta);
-        }
-    };
-    return (jsxs(ConnectorButton, { type: "button", onClick: onClick, children: [jsx(ConnectorIcon, { "data-small": wallet.iconShouldShrink, "data-shape": wallet.iconShape, children: wallet.iconConnector ?? wallet.icon }), jsxs(ConnectorLabel, { children: [isMobile ? (wallet.shortName ?? wallet.name) : wallet.name, !context.options?.hideRecentBadge && isRecent && (jsx(RecentlyUsedTag, { children: jsx("span", { children: "Recent" }) }))] })] }));
+const ConnectorItem = ({
+  wallet,
+  isRecent
+}) => {
+  const { isMobile } = useIsMobile();
+  const context = usePayContext();
+  const { connect } = useConnect();
+  const redirectToMoreWallets = isMobile && wallet.id === WALLET_ID_OTHER_WALLET;
+  const redirectToMobileWallets = wallet.id === WALLET_ID_MOBILE_WALLETS;
+  const shouldConnectImmediately = (detectBrowser() === "safari" || detectBrowser() === "ios") && (isBaseAccountConnector(wallet.connector?.id) || isGeminiConnector(wallet.connector?.id));
+  const onClick = () => {
+    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 (redirectToMobileWallets) {
+      if (context.paymentState.isDepositFlow) {
+        context.paymentState.setSelectedWallet(wallet);
+        context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);
+      } else {
+        context.setPendingConnectorId(WALLET_ID_MOBILE_WALLETS);
+        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 && !wallet.connector) {
+      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 = () => {
-    const { isMobile } = useIsMobile();
-    return (jsxs(ConnectorButton, { type: "button", disabled: true, children: [jsx(SkeletonIcon, { "$mobile": isMobile }), jsx(SkeletonLabel, { "$mobile": isMobile })] }));
+  const { isMobile } = useIsMobile();
+  return /* @__PURE__ */ jsxs(ConnectorButton, { type: "button", disabled: true, children: [
+    /* @__PURE__ */ jsx(SkeletonIcon, { $mobile: isMobile }),
+    /* @__PURE__ */ jsx(SkeletonLabel, { $mobile: isMobile })
+  ] });
 };
 
 export { ConnectorList as default };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/ConnectorList/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/Common/ConnectorList/index.tsx"],"sourcesContent":["import { ROUTES } from \"../../../constants/routes\";\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  WALLET_ID_MOBILE_WALLETS,\n  WALLET_ID_OTHER_WALLET,\n  WalletProps,\n  useWallets,\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\n  const walletsToDisplay = context.options?.hideRecentBadge\n    ? wallets\n    : [\n        // move last used wallet to top of list\n        // using .filter and spread to avoid mutating original array order with .sort\n        ...wallets.filter((wallet) => lastConnectorId === wallet.connector?.id),\n        ...wallets.filter((wallet) => lastConnectorId !== wallet.connector?.id),\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\n          $mobile={isMobile}\n          $totalResults={walletsToDisplay.length}\n        >\n          {walletsToDisplay.map((_, idx) => (\n            <SkeletonConnectorItem key={idx} />\n          ))}\n        </ConnectorsContainer>\n      )}\n      {ready && walletsToDisplay.length > 0 && (\n        <ConnectorsContainer\n          $mobile={isMobile}\n          $totalResults={walletsToDisplay.length}\n        >\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  const redirectToMobileWallets = wallet.id === WALLET_ID_MOBILE_WALLETS;\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 = () => {\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 (redirectToMobileWallets) {\n      if (context.paymentState.isDepositFlow) {\n        context.paymentState.setSelectedWallet(wallet);\n        context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);\n      } else {\n        context.setPendingConnectorId(WALLET_ID_MOBILE_WALLETS);\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 (\n      isMobile &&\n      wallet.getDaimoPayDeeplink != null &&\n      !wallet.connector\n    ) {\n      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  const { isMobile } = useIsMobile();\n\n  return (\n    <ConnectorButton type=\"button\" disabled>\n      <SkeletonIcon $mobile={isMobile} />\n      <SkeletonLabel $mobile={isMobile} />\n    </ConnectorButton>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -2,30 +2,28 @@ import { keyframes, css } from 'styled-components';
 import styled from '../../../styles/styled/index.js';
 import { motion } from 'framer-motion';
 
-const Shimmer = keyframes `
+const Shimmer = keyframes`
   0%{ transform: translate(-100%) rotate(-45deg); }
   100%{ transform: translate(100%) rotate(-80deg); }
 `;
-const Pulse = keyframes `
+const Pulse = keyframes`
   0%   { opacity: 0.6; }
   50%  { opacity: 1;   }
   100% { opacity: 0.6; }
 `;
-const ConnectorButton = styled(motion.button) `
+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 `
+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 `
+        ` : css`
           position: absolute;
           right: 20px;
           width: 32px;
@@ -35,14 +33,12 @@ const SkeletonIcon = styled.div `
   background-color: rgba(0, 0, 0, 0.1);
   animation: ${Pulse} 1.5s ease-in-out infinite;
 `;
-const SkeletonLabel = styled.div `
-  ${(p) => p.$mobile
-    ? css `
+const SkeletonLabel = styled.div`
+  ${(p) => p.$mobile ? css`
           width: 60px;
           height: 12px;
           margin: 10px auto 0;
-        `
-    : css `
+        ` : css`
           width: 100px;
           height: 16px;
         `}
@@ -50,10 +46,9 @@ const SkeletonLabel = styled.div `
   background-color: rgba(0, 0, 0, 0.1);
   animation: ${Pulse} 1.5s ease-in-out infinite;
 `;
-// This is a bit of a hack to not share styles between mobile and desktop
 const styles = {
-    desktop: {
-        ConnectorButton: css `
+  desktop: {
+    ConnectorButton: css`
       cursor: pointer;
       user-select: none;
       position: relative;
@@ -153,7 +148,7 @@ const styles = {
         }
       }
     `,
-        ConnectorLabel: css `
+    ConnectorLabel: css`
       display: flex;
       align-items: center;
       gap: 9px;
@@ -164,7 +159,7 @@ const styles = {
       padding: 2px 0;
       padding-right: 38px;
     `,
-        ConnectorIcon: css `
+    ConnectorIcon: css`
       position: absolute;
       right: 20px;
       width: 32px;
@@ -189,16 +184,16 @@ const styles = {
       &[data-shape="square"] {
         border-radius: 0;
       }
-    `,
-    },
-    mobile: {
-        ConnectorButton: css `
+    `
+  },
+  mobile: {
+    ConnectorButton: css`
       text-align: center;
       background: none;
       max-width: 100%;
       overflow: hidden;
     `,
-        ConnectorLabel: css `
+    ConnectorLabel: css`
       display: block;
       text-overflow: ellipsis;
       max-width: 100%;
@@ -210,7 +205,7 @@ const styles = {
       font-weight: 500;
       opacity: 0.75;
     `,
-        ConnectorIcon: css `
+    ConnectorIcon: css`
       position: relative;
       margin: 0 auto;
       width: 60px;
@@ -247,10 +242,10 @@ const styles = {
       &[data-shape="square"] {
         border-radius: 0;
       }
-    `,
-    },
+    `
+  }
 };
-const RecentlyUsedTag = styled(motion.span) `
+const RecentlyUsedTag = styled(motion.span)`
   position: relative;
   top: var(--ck-recent-badge-top-offset, 0.5px);
   display: inline-block;
@@ -295,18 +290,16 @@ const RecentlyUsedTag = styled(motion.span) `
     animation: ${Shimmer} 2s linear infinite;
   }
 `;
-const ConnectorsContainer = styled.div `
+const ConnectorsContainer = styled.div`
   transition: opacity 300ms ease;
   min-width: fit-content;
 
-  ${(props) => props.$disabled &&
-    css `
+  ${(props) => props.$disabled && css`
       pointer-events: none;
       opacity: 0.4;
     `}
 
-  ${(props) => !props.$mobile
-    ? css `
+  ${(props) => !props.$mobile ? css`
           display: flex;
           flex-direction: column;
           gap: 12px;
@@ -320,8 +313,7 @@ const ConnectorsContainer = styled.div `
               ${styles.desktop.ConnectorIcon}
             }
           }
-        `
-    : css `
+        ` : css`
           display: flex;
           align-items: flex-start;
           justify-content: space-around;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sources":["../../../../../src/components/Common/ConnectorList/styles.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAKA,MAAM,OAAO,GAAG,SAAS,CAAA,CAAA;;;CAGxB,CAAC;AAEK,MAAM,KAAK,GAAG,SAAS,CAAA,CAAA;;;;EAI5B;AAEW,MAAA,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA,CAAA;;;EAGlD;AACK,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,CAAA,EAAG;AAC7C,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA,CAAA,EAAG;AAErC,MAAA,YAAY,GAAG,MAAM,CAAC,GAAG,CAAuB,CAAA;AACzD,EAAA,EAAA,CAAC,CAAwB,KACzB,CAAC,CAAC,OAAO;MACL,GAAG,CAAA,CAAA;;;;;AAKF,QAAA,CAAA;MACD,GAAG,CAAA,CAAA;;;;;AAKF,QAAA,CAAA,CAAA;;;eAGM,KAAK,CAAA;EAClB;AAEW,MAAA,aAAa,GAAG,MAAM,CAAC,GAAG,CAAuB,CAAA;AAC1D,EAAA,EAAA,CAAC,CAAwB,KACzB,CAAC,CAAC,OAAO;MACL,GAAG,CAAA,CAAA;;;;AAIF,QAAA,CAAA;MACD,GAAG,CAAA,CAAA;;;AAGF,QAAA,CAAA,CAAA;;;eAGM,KAAK,CAAA;EAClB;AAEF;AACA,MAAM,MAAM,GAAG;AACb,IAAA,OAAO,EAAE;QACP,eAAe,EAAE,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGnB,IAAA,CAAA;QACD,cAAc,EAAE,GAAG,CAAA,CAAA;;;;;;;;;;AAUlB,IAAA,CAAA;QACD,aAAa,EAAE,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;AAyBjB,IAAA,CAAA;AACF,KAAA;AACD,IAAA,MAAM,EAAE;QACN,eAAe,EAAE,GAAG,CAAA,CAAA;;;;;AAKnB,IAAA,CAAA;QACD,cAAc,EAAE,GAAG,CAAA,CAAA;;;;;;;;;;;AAWlB,IAAA,CAAA;QACD,aAAa,EAAE,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCjB,IAAA,CAAA;AACF,KAAA;CACF,CAAC;AAEW,MAAA,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA0CjC,OAAO,CAAA;;EAEtB;AAEW,MAAA,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAI3C,CAAA;;;;AAIE,EAAA,EAAA,CAAC,KAAK,KACN,KAAK,CAAC,SAAS;AACf,IAAA,GAAG,CAAA,CAAA;;;AAGF,IAAA,CAAA,CAAA;;AAED,EAAA,EAAA,CAAC,KAAK,KACN,CAAC,KAAK,CAAC,OAAO;MACV,GAAG,CAAA,CAAA;;;;;YAKC,eAAe,CAAA;cACb,MAAM,CAAC,OAAO,CAAC,eAAe,CAAA;cAC9B,cAAc,CAAA;gBACZ,MAAM,CAAC,OAAO,CAAC,cAAc,CAAA;;cAE/B,aAAa,CAAA;gBACX,MAAM,CAAC,OAAO,CAAC,aAAa,CAAA;;;AAGnC,QAAA,CAAA;MACD,GAAG,CAAA,CAAA;;;;;;;;YAQC,eAAe,CAAA;;;cAGb,MAAM,CAAC,MAAM,CAAC,eAAe,CAAA;cAC7B,cAAc,CAAA;gBACZ,MAAM,CAAC,MAAM,CAAC,cAAc,CAAA;gBAC5B,eAAe,CAAA;;;;;;cAMjB,aAAa,CAAA;gBACX,MAAM,CAAC,MAAM,CAAC,aAAa,CAAA;;;AAGlC,QAAA,CAAA,CAAA;;;;;"}
+{"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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"}