@swype-org/react-sdk 0.1.56 → 0.1.63

package/dist/index.cjs

@@ -680,7 +680,7 @@ function createPasskeyViaPopup(options) {
   return new Promise((resolve, reject) => {
     const encoded = btoa(JSON.stringify(options));
     const popupUrl = `${window.location.origin}/passkey-register#${encoded}`;
-    const popup = window.open(popupUrl, "swype-passkey", "width=460,height=600");
+    const popup = window.open(popupUrl, "swype-passkey");
     if (!popup) {
       reject(new Error("Pop-up blocked. Please allow pop-ups for this site and try again."));
       return;
@@ -1944,10 +1944,20 @@ function LimitSlider({
         }
       )
     ] }),
-    ticks && ticks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: ticksStyle, children: ticks.map((tick) => /* @__PURE__ */ jsxRuntime.jsxs("span", { style: tickLabelStyle(tokens.textMuted), children: [
-      "$",
-      tick
-    ] }, tick)) }),
+    ticks && ticks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: ticksStyle, children: ticks.map((tick, i) => {
+      const pctPos = (tick - min) / (max - min) * 100;
+      const isFirst = i === 0;
+      const isLast = i === ticks.length - 1;
+      const label = tick % 1 === 0 ? `$${tick}` : `$${tick.toFixed(2)}`;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          style: tickLabelStyle(tokens.textMuted, pctPos, isFirst, isLast),
+          children: label
+        },
+        tick
+      );
+    }) }),
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: sliderThumbCss(tokens.accent) })
   ] });
 }
@@ -1988,14 +1998,18 @@ var rangeInputStyle = {
   background: "transparent"
 };
 var ticksStyle = {
-  display: "flex",
-  justifyContent: "space-between",
+  position: "relative",
+  height: 18,
   marginTop: 6
 };
-var tickLabelStyle = (color) => ({
+var tickLabelStyle = (color, pct, isFirst, isLast) => ({
+  position: "absolute",
+  left: `${pct}%`,
+  transform: isFirst ? "none" : isLast ? "translateX(-100%)" : "translateX(-50%)",
   fontSize: "0.72rem",
   fontWeight: 500,
-  color
+  color,
+  whiteSpace: "nowrap"
 });
 var sliderThumbCss = (accent) => `
   .swype-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
@@ -3008,11 +3022,13 @@ function SetupScreen({
   onSetupOneTap,
   onBack,
   onLogout,
+  onAdvanced,
+  selectedSourceLabel,
   loading,
   error
 }) {
   const { tokens } = useSwypeConfig();
-  const effectiveMax = Math.min(DEFAULT_MAX, availableBalance > 0 ? availableBalance : DEFAULT_MAX);
+  const effectiveMax = Math.floor(Math.min(DEFAULT_MAX, availableBalance > 0 ? availableBalance : DEFAULT_MAX) * 100) / 100;
   const effectiveMin = Math.min(ABSOLUTE_MIN, effectiveMax);
   const sliderStep = effectiveMax <= 10 ? 0.5 : effectiveMax <= 50 ? 1 : 5;
   const ticks = buildTicks(effectiveMin, effectiveMax);
@@ -3051,18 +3067,30 @@ function SetupScreen({
               ] })
             ] })
           ] }),
-          tokenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenBadgeStyle(tokens), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenDotStyle(tokens.accent) }),
-            tokenCount,
-            " ",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronStyle, children: ">" })
-          ] })
+          tokenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: onAdvanced,
+              style: tokenBadgeButtonStyle(tokens, !!onAdvanced),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenDotStyle(tokens.accent) }),
+                tokenCount,
+                " ",
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronStyle, children: ">" })
+              ]
+            }
+          )
+        ] }),
+        selectedSourceLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: selectedSourceStyle(tokens.textSecondary), children: [
+          "Source: ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: selectedSourceLabel })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: limitSectionStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: limitLabelStyle(tokens.textMuted), children: "Your One-Tap limit" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: limitValueStyle(tokens.text), children: [
             "$",
-            limit
+            limit.toFixed(2)
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             LimitSlider,
@@ -3137,7 +3165,7 @@ var balanceValueStyle = (color) => ({
   fontWeight: 700,
   color
 });
-var tokenBadgeStyle = (tokens) => ({
+var tokenBadgeButtonStyle = (tokens, clickable) => ({
   display: "flex",
   alignItems: "center",
   gap: 4,
@@ -3145,7 +3173,16 @@ var tokenBadgeStyle = (tokens) => ({
   color: tokens.textMuted,
   border: `1px solid ${tokens.border}`,
   borderRadius: 999,
-  padding: "4px 10px"
+  padding: "4px 10px",
+  background: "transparent",
+  fontFamily: "inherit",
+  cursor: clickable ? "pointer" : "default"
+});
+var selectedSourceStyle = (color) => ({
+  fontSize: "0.8rem",
+  color,
+  marginBottom: 16,
+  textAlign: "center"
 });
 var tokenDotStyle = (color) => ({
   width: 8,
@@ -3310,7 +3347,7 @@ function DepositScreen({
               ] })
             ] })
           ] }),
-          tokenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenBadgeStyle2(tokens), children: [
+          tokenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenBadgeStyle(tokens), children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenDotStyle2(tokens.accent) }),
             tokenCount,
             " ",
@@ -3373,7 +3410,7 @@ var balanceAmountStyle = {
   fontSize: "1rem",
   fontWeight: 700
 };
-var tokenBadgeStyle2 = (tokens) => ({
+var tokenBadgeStyle = (tokens) => ({
   display: "flex",
   alignItems: "center",
   gap: 4,
@@ -3778,6 +3815,228 @@ var radioDotStyle = (color) => ({
   borderRadius: "50%",
   background: color
 });
+function AdvancedSourceScreen({
+  choices,
+  selectedChainName,
+  selectedTokenSymbol,
+  onSelectSource,
+  onBack
+}) {
+  const { tokens } = useSwypeConfig();
+  const [expandedChain, setExpandedChain] = react.useState(
+    selectedChainName || (choices[0]?.chainName ?? null)
+  );
+  const [localChain, setLocalChain] = react.useState(selectedChainName);
+  const [localToken, setLocalToken] = react.useState(selectedTokenSymbol);
+  const canConfirm = !!localChain && !!localToken;
+  const handleChainToggle = (chainName) => {
+    setExpandedChain((prev) => prev === chainName ? null : chainName);
+  };
+  const handleTokenSelect = (chainName, tokenSymbol) => {
+    setLocalChain(chainName);
+    setLocalToken(tokenSymbol);
+    setExpandedChain(chainName);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PrimaryButton,
+          {
+            onClick: () => onSelectSource(localChain, localToken),
+            disabled: !canConfirm,
+            children: "Select Source"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScreenHeader,
+          {
+            title: "Swype Setup",
+            onBack,
+            right: /* @__PURE__ */ jsxRuntime.jsx("span", { style: advancedBadgeStyle(tokens.accent), children: "Advanced" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle7(tokens.text), children: "Set up One-Tap deposits" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Select tokens to approve" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: chainListStyle, children: choices.map((chain) => {
+          const isExpanded = expandedChain === chain.chainName;
+          const chainHasSelection = localChain === chain.chainName;
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: chainCardStyle(tokens), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => handleChainToggle(chain.chainName),
+                style: chainHeaderStyle(tokens),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: chainHeaderLeftStyle, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: chainNameStyle(tokens.text), children: chain.chainName }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { style: chainBalanceStyle(tokens.textMuted), children: [
+                      "$",
+                      chain.balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronIconStyle(isExpanded, tokens.textMuted), children: isExpanded ? "\u25BE" : "\u25B8" })
+                ]
+              }
+            ),
+            isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { style: tokenListStyle, children: chain.tokens.map((token) => {
+              const isSelected = chainHasSelection && localToken === token.tokenSymbol;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleTokenSelect(chain.chainName, token.tokenSymbol),
+                  style: tokenRowStyle(tokens, isSelected),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenInfoStyle, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenSymbolStyle(tokens.text), children: token.tokenSymbol }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: tokenBalStyle(tokens.textMuted), children: [
+                        "Balance: ",
+                        token.balance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 }),
+                        " ",
+                        token.tokenSymbol
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioStyle2(tokens, isSelected), children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioDotStyle2(tokens.accent) }) })
+                  ]
+                },
+                token.tokenSymbol
+              );
+            }) })
+          ] }, chain.chainName);
+        }) })
+      ]
+    }
+  );
+}
+var advancedBadgeStyle = (color) => ({
+  fontSize: "0.72rem",
+  fontWeight: 600,
+  color,
+  border: `1px solid ${color}`,
+  borderRadius: 999,
+  padding: "3px 10px",
+  letterSpacing: "0.02em"
+});
+var headingStyle7 = (color) => ({
+  fontSize: "1.3rem",
+  fontWeight: 700,
+  letterSpacing: "-0.02em",
+  color,
+  margin: "8px 0 4px"
+});
+var subtitleStyle8 = (color) => ({
+  fontSize: "0.86rem",
+  color,
+  margin: "0 0 20px",
+  lineHeight: 1.5
+});
+var labelStyle3 = (color) => ({
+  display: "block",
+  fontSize: "0.75rem",
+  fontWeight: 600,
+  color,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  marginBottom: 10
+});
+var chainListStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 10
+};
+var chainCardStyle = (tokens) => ({
+  border: `1px solid ${tokens.border}`,
+  borderRadius: 14,
+  overflow: "hidden",
+  background: tokens.bgInput
+});
+var chainHeaderStyle = (tokens, _expanded) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  width: "100%",
+  padding: "14px 16px",
+  background: tokens.bgInput,
+  border: "none",
+  cursor: "pointer",
+  fontFamily: "inherit",
+  textAlign: "left"
+});
+var chainHeaderLeftStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 2
+};
+var chainNameStyle = (color) => ({
+  fontSize: "0.92rem",
+  fontWeight: 600,
+  color
+});
+var chainBalanceStyle = (color) => ({
+  fontSize: "0.76rem",
+  color
+});
+var chevronIconStyle = (_expanded, color) => ({
+  fontSize: "0.9rem",
+  color,
+  transition: "transform 0.15s ease"
+});
+var tokenListStyle = {
+  padding: "0 12px 12px",
+  display: "flex",
+  flexDirection: "column",
+  gap: 6
+};
+var tokenRowStyle = (tokens, selected) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "12px 14px",
+  background: tokens.bgCard,
+  border: `1.5px solid ${selected ? tokens.accent : tokens.border}`,
+  borderRadius: 10,
+  cursor: "pointer",
+  fontFamily: "inherit",
+  textAlign: "left",
+  transition: "border-color 0.15s ease"
+});
+var tokenInfoStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 2
+};
+var tokenSymbolStyle = (color) => ({
+  fontSize: "0.88rem",
+  fontWeight: 600,
+  color
+});
+var tokenBalStyle = (color) => ({
+  fontSize: "0.74rem",
+  color
+});
+var radioStyle2 = (tokens, selected) => ({
+  width: 20,
+  height: 20,
+  borderRadius: "50%",
+  border: `2px solid ${selected ? tokens.accent : tokens.border}`,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0
+});
+var radioDotStyle2 = (color) => ({
+  width: 10,
+  height: 10,
+  borderRadius: "50%",
+  background: color
+});
 var STEP_LABELS = ["Creating transfer", "Verifying", "Sent", "Done"];
 var PHASE_ACTIVE_INDEX = {
   creating: 0,
@@ -3803,7 +4062,7 @@ function TransferStatusScreen({
     /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle7(tokens.text), children: "Processing Transfer..." }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Processing Transfer..." }),
       error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" })
@@ -3819,7 +4078,7 @@ var contentStyle5 = {
   textAlign: "center",
   padding: "0 24px"
 };
-var headingStyle7 = (color) => ({
+var headingStyle8 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
@@ -3858,6 +4117,12 @@ function OpenWalletScreen({
   const { tokens } = useSwypeConfig();
   const displayName = walletName ?? "your wallet";
   const logoSrc = walletName ? KNOWN_LOGOS[walletName.toLowerCase()] : void 0;
+  const autoOpenedRef = react.useRef(null);
+  react.useEffect(() => {
+    if (loading || !deeplinkUri || autoOpenedRef.current === deeplinkUri) return;
+    autoOpenedRef.current = deeplinkUri;
+    window.location.href = deeplinkUri;
+  }, [loading, deeplinkUri]);
   const handleOpen = react.useCallback(() => {
     const opened = window.open(deeplinkUri, "_blank");
     if (!opened && window === window.parent) {
@@ -3872,14 +4137,14 @@ function OpenWalletScreen({
           "Open ",
           displayName
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle3(tokens.textMuted), children: loading ? "Preparing authorization..." : "Tap the button to authorize in your wallet app" })
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle3(tokens.textMuted), children: loading ? "Preparing authorization..." : "If your wallet didn't open automatically, tap the button above" })
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle6, children: [
           logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle8(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
           !loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: waitingBadgeStyle(tokens), children: [
             /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 14 }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Waiting for authorization..." })
@@ -3904,14 +4169,14 @@ var logoStyle = {
   borderRadius: 14,
   objectFit: "contain"
 };
-var headingStyle8 = (color) => ({
+var headingStyle9 = (color) => ({
   fontSize: "1.45rem",
   fontWeight: 700,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 8px"
 });
-var subtitleStyle8 = (color) => ({
+var subtitleStyle9 = (color) => ({
   fontSize: "0.9rem",
   color,
   margin: "0 0 24px",
@@ -3935,6 +4200,98 @@ var hintStyle3 = (color) => ({
   color,
   margin: "8px 0 0"
 });
+function ConfirmSignScreen({
+  walletName,
+  signing,
+  error,
+  onSign,
+  onLogout
+}) {
+  const { tokens } = useSwypeConfig();
+  const displayName = walletName ?? "your wallet";
+  const logoSrc = walletName ? KNOWN_LOGOS[walletName.toLowerCase()] : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onSign, disabled: signing, children: signing ? "Confirming..." : "Confirm payment" }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: errorStyle2(tokens.textMuted), children: error }),
+        !error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle4(tokens.textMuted), children: "You may be prompted for biometric verification" })
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
+          logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle10(tokens.text), children: "Wallet authorized" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle10(tokens.textSecondary), children: [
+            displayName,
+            " approved the connection. Tap below to confirm your payment."
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: successBadgeStyle(tokens), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: checkmarkStyle, children: "\u2713" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Authorization complete" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var contentStyle7 = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  padding: "0 24px"
+};
+var logoStyle2 = {
+  width: 56,
+  height: 56,
+  borderRadius: 14,
+  objectFit: "contain"
+};
+var headingStyle10 = (color) => ({
+  fontSize: "1.45rem",
+  fontWeight: 700,
+  letterSpacing: "-0.02em",
+  color,
+  margin: "20px 0 8px"
+});
+var subtitleStyle10 = (color) => ({
+  fontSize: "0.9rem",
+  color,
+  margin: "0 0 24px",
+  lineHeight: 1.5,
+  maxWidth: 280
+});
+var successBadgeStyle = (tokens) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 8,
+  padding: "8px 16px",
+  borderRadius: 20,
+  background: tokens.bgInput,
+  border: `1px solid ${tokens.border}`,
+  color: "#22c55e",
+  fontSize: "0.82rem"
+});
+var checkmarkStyle = {
+  fontWeight: 700,
+  fontSize: "0.9rem"
+};
+var hintStyle4 = (color) => ({
+  textAlign: "center",
+  fontSize: "0.82rem",
+  color,
+  margin: "8px 0 0"
+});
+var errorStyle2 = (color) => ({
+  textAlign: "center",
+  fontSize: "0.82rem",
+  color: "#ef4444",
+  margin: "8px 0 0"
+});
 var PaymentErrorBoundary = class extends react.Component {
   constructor(props) {
     super(props);
@@ -3960,7 +4317,7 @@ var PaymentErrorBoundary = class extends react.Component {
         /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
         /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "16", r: "0.75", fill: "#ef4444" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9, children: "Something went wrong" }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle11, children: "Something went wrong" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { style: messageStyle, children: "An unexpected error occurred. Please try again." }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: this.handleReset, style: buttonStyle3, children: "Try again" })
     ] });
@@ -3980,7 +4337,7 @@ var containerStyle8 = {
 var iconStyle4 = {
   marginBottom: 20
 };
-var headingStyle9 = {
+var headingStyle11 = {
   fontSize: "1.25rem",
   fontWeight: 700,
   color: "#1a1a1a",
@@ -4003,13 +4360,6 @@ var buttonStyle3 = {
   fontFamily: "inherit",
   cursor: "pointer"
 };
-function isInIframe() {
-  try {
-    return typeof window !== "undefined" && window !== window.top;
-  } catch {
-    return true;
-  }
-}
 var ACTIVE_CREDENTIAL_STORAGE_KEY = "swype_active_credential_id";
 var MOBILE_FLOW_STORAGE_KEY = "swype_mobile_flow";
 var MIN_SEND_AMOUNT_USD = 0.25;
@@ -4356,7 +4706,7 @@ function SwypePaymentInner({
         if (defaults) {
           setSelectedAccountId(defaults.accountId);
           setSelectedWalletId(defaults.walletId);
-        } else if (prov.length > 0) {
+        } else if (prov.length > 0 && !connectingNewAccount) {
           setSelectedProviderId(prov[0].id);
         }
         const hasActiveWallet = accts.some(
@@ -4439,23 +4789,8 @@ function SwypePaymentInner({
       });
       return;
     }
-    if (transferSigning.signing) return;
-    if (mobileSigningTransferIdRef.current === polledTransfer.id) return;
-    mobileSigningTransferIdRef.current = polledTransfer.id;
-    const sign = async () => {
-      try {
-        const signedTransfer = await transferSigning.signTransfer(polledTransfer.id);
-        setTransfer(signedTransfer);
-        clearMobileFlowState();
-        setStep("processing");
-      } catch (err) {
-        mobileSigningTransferIdRef.current = null;
-        const msg = err instanceof Error ? err.message : "Failed to sign transfer";
-        setError(msg);
-        onError?.(msg);
-      }
-    };
-    void sign();
+    setTransfer(polledTransfer);
+    setStep("confirm-sign");
   }, [mobileFlow, polling.transfer, polling.stopPolling, transferSigning, onError, reloadAccounts]);
   react.useEffect(() => {
     if (!mobileFlow) return;
@@ -4645,12 +4980,10 @@ function SwypePaymentInner({
           persistMobileFlowState({
             transferId: t.id,
             deeplinkUri: uri,
-            providerId: selectedProviderId,
+            providerId: sourceOverrides?.sourceType === "providerId" ? sourceOverrides.sourceId : selectedProviderId,
             isSetup: mobileSetupFlowRef.current
           });
-          if (!isInIframe()) {
-            window.location.href = uri;
-          }
+          window.location.href = uri;
           return;
         } else {
           await authExecutor.executeSession(t);
@@ -4806,6 +5139,20 @@ function SwypePaymentInner({
     setDeeplinkUri(null);
     resetHeadlessLogin();
   }, [logout, polling, depositAmount, resetHeadlessLogin]);
+  const handleConfirmSign = react.useCallback(async () => {
+    const t = transfer ?? polling.transfer;
+    if (!t) return;
+    try {
+      const signedTransfer = await transferSigning.signTransfer(t.id);
+      setTransfer(signedTransfer);
+      clearMobileFlowState();
+      setStep("processing");
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to sign transfer";
+      setError(msg);
+      onError?.(msg);
+    }
+  }, [transfer, polling.transfer, transferSigning, onError]);
   if (!ready) {
     return /* @__PURE__ */ jsxRuntime.jsx(ScreenLayout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { label: "Initializing..." }) }) });
   }
@@ -4887,6 +5234,19 @@ function SwypePaymentInner({
       }
     );
   }
+  if (step === "confirm-sign") {
+    const providerName = providers.find((p) => p.id === selectedProviderId)?.name ?? null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ConfirmSignScreen,
+      {
+        walletName: providerName,
+        signing: transferSigning.signing,
+        error: error || transferSigning.error,
+        onSign: handleConfirmSign,
+        onLogout: handleLogout
+      }
+    );
+  }
   if (step === "deposit") {
     if (loadingData) {
       return /* @__PURE__ */ jsxRuntime.jsx(ScreenLayout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { label: "Loading..." }) }) });
@@ -4991,6 +5351,8 @@ function SwypePaymentInner({
   return null;
 }
 
+exports.AdvancedSourceScreen = AdvancedSourceScreen;
+exports.CreatePasskeyScreen = CreatePasskeyScreen;
 exports.IconCircle = IconCircle;
 exports.OutlineButton = OutlineButton;
 exports.PasskeyIframeBlockedError = PasskeyIframeBlockedError;