@swype-org/react-sdk 0.1.32 → 0.1.34

package/dist/index.cjs

@@ -1451,8 +1451,20 @@ function hasProcessingTimedOut(processingStartedAtMs, nowMs) {
   if (!processingStartedAtMs) return false;
   return nowMs - processingStartedAtMs >= PROCESSING_TIMEOUT_MS;
 }
+var STATUS_DISPLAY_LABELS = {
+  CREATED: "created",
+  AUTHORIZED: "authorized",
+  SENDING: "sending",
+  SENT: "confirming delivery",
+  COMPLETED: "completed",
+  FAILED: "failed"
+};
+function getStatusDisplayLabel(status) {
+  return STATUS_DISPLAY_LABELS[status] ?? status;
+}
 function buildProcessingTimeoutMessage(status) {
-  return `Payment is taking longer than expected (status: ${status}). Please try again.`;
+  const label = getStatusDisplayLabel(status);
+  return `Payment is taking longer than expected (status: ${label}). Please try again.`;
 }
 
 // src/walletFlow.ts
@@ -1715,7 +1727,7 @@ var circleStyle = (bg, size) => ({
 function OtpInput({ value, onChange, length = 6, disabled }) {
   const { tokens } = useSwypeConfig();
   const inputsRef = react.useRef([]);
-  const digits = value.padEnd(length, "").split("").slice(0, length);
+  const digits = value.padEnd(length).split("").slice(0, length);
   const focusInput = react.useCallback((index) => {
     const clamped = Math.max(0, Math.min(index, length - 1));
     inputsRef.current[clamped]?.focus();
@@ -2118,34 +2130,50 @@ function LoginScreen({
   onSubmit,
   sending,
   error,
-  onBack
+  onBack,
+  merchantInitials,
+  onSocialLogin
 }) {
   const { tokens } = useSwypeConfig();
   const disabled = authInput.trim().length === 0 || sending;
-  const walletLogos = ["MM", "R", "O", "P", "+"];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onSubmit, disabled, loading: sending, children: "Continue" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dividerStyle(tokens), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: dividerLineStyle(tokens.border) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "works with" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: dividerLineStyle(tokens.border) })
+        onSocialLogin && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dividerStyle(tokens), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: dividerLineStyle(tokens.border) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "or continue with" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: dividerLineStyle(tokens.border) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: socialRowStyle, children: ["google", "apple", "twitter"].map((provider) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSocialLogin(provider),
+              style: socialButtonStyle(tokens),
+              children: socialLabel(provider)
+            },
+            provider
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: walletSectionStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: walletLabelStyle(tokens.textMuted), children: "Works with" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: walletLogosStyle, children: walletIcons.map(({ key, emoji }) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: walletEmojiStyle, children: emoji }, key)) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: logosRowStyle, children: walletLogos.map((label) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: logoCircleStyle(tokens), children: label }, label)) }),
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScreenHeader,
+          {
+            onBack,
+            right: merchantInitials ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: avatarStyle(tokens), children: merchantInitials }) : void 0
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "accent", size: 56, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z",
-              fill: tokens.accent
-            }
-          ) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: iconBoxStyle(tokens.accent), children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: iconLetterStyle, children: "S" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle(tokens.text), children: "One-time setup.\nOne-tap deposits after." }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle(tokens.textSecondary), children: "Protected by Face ID." }),
           error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorStyle(tokens), children: error }),
@@ -2170,6 +2198,23 @@ function LoginScreen({
     }
   );
 }
+var walletIcons = [
+  { key: "metamask", emoji: "\u{1F98A}" },
+  { key: "rabby", emoji: "\u{1F430}" },
+  { key: "phantom", emoji: "\u25C6" },
+  { key: "rainbow", emoji: "\u{1F439}" },
+  { key: "coinbase", emoji: "\u{1F535}" }
+];
+function socialLabel(provider) {
+  switch (provider) {
+    case "google":
+      return "Google";
+    case "apple":
+      return "Apple";
+    case "twitter":
+      return "X";
+  }
+}
 var contentStyle = {
   textAlign: "center",
   flex: 1,
@@ -2178,10 +2223,25 @@ var contentStyle = {
   alignItems: "center",
   paddingTop: 24
 };
+var iconBoxStyle = (accent) => ({
+  width: 56,
+  height: 56,
+  borderRadius: 16,
+  background: accent,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+});
+var iconLetterStyle = {
+  color: "#fff",
+  fontSize: "1.5rem",
+  fontWeight: 700,
+  lineHeight: 1
+};
 var headingStyle = (color) => ({
-  fontSize: "1.65rem",
+  fontSize: "1.45rem",
   fontWeight: 700,
-  lineHeight: 1.2,
+  lineHeight: 1.25,
   letterSpacing: "-0.02em",
   color,
   margin: "20px 0 8px",
@@ -2230,24 +2290,55 @@ var dividerLineStyle = (color) => ({
   height: 1,
   background: color
 });
-var logosRowStyle = {
+var socialRowStyle = {
+  display: "flex",
+  gap: 10,
+  marginBottom: 20
+};
+var socialButtonStyle = (tokens) => ({
+  flex: 1,
+  padding: "12px 0",
+  borderRadius: 12,
+  border: `1px solid ${tokens.border}`,
+  background: "transparent",
+  color: tokens.text,
+  fontSize: "0.88rem",
+  fontWeight: 600,
+  fontFamily: "inherit",
+  cursor: "pointer"
+});
+var walletSectionStyle = {
+  textAlign: "center",
+  marginBottom: 8,
+  marginTop: 4
+};
+var walletLabelStyle = (color) => ({
+  fontSize: "0.78rem",
+  color,
+  display: "block",
+  marginBottom: 10
+});
+var walletLogosStyle = {
   display: "flex",
   justifyContent: "center",
-  gap: 12,
-  marginBottom: 8
+  gap: 16
 };
-var logoCircleStyle = (tokens) => ({
-  width: 34,
-  height: 34,
-  borderRadius: 999,
+var walletEmojiStyle = {
+  fontSize: "1.4rem",
+  lineHeight: 1
+};
+var avatarStyle = (tokens) => ({
+  width: 28,
+  height: 28,
+  borderRadius: "50%",
   border: `1px solid ${tokens.border}`,
-  background: tokens.bgInput,
-  color: tokens.textMuted,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  fontSize: "0.72rem",
-  fontWeight: 600
+  fontSize: "0.6rem",
+  fontWeight: 700,
+  color: tokens.textMuted,
+  background: "transparent"
 });
 var RESEND_COOLDOWN_SECONDS = 30;
 function OtpVerifyScreen({
@@ -2899,7 +2990,7 @@ var swipeHintStyle = (color) => ({
   color,
   margin: "12px 0 0"
 });
-var MIN_DEPOSIT = 1;
+var MIN_DEPOSIT = 0.25;
 function DepositScreen({
   merchantName,
   sourceName,
@@ -2920,8 +3011,7 @@ function DepositScreen({
   onLogout
 }) {
   const { tokens } = useSwypeConfig();
-  const [amount, setAmount] = react.useState(initialAmount);
-  const sliderMax = Math.min(remainingLimit, availableBalance, 500);
+  const amount = initialAmount;
   const isLowBalance = availableBalance < MIN_DEPOSIT;
   const canDeposit = amount >= MIN_DEPOSIT && amount <= remainingLimit && !isLowBalance && !processing;
   const headerTitle = merchantName ? `Deposit to ${merchantName}` : "Deposit";
@@ -3033,17 +3123,6 @@ function DepositScreen({
             /* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronStyle2, children: ">" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          LimitSlider,
-          {
-            value: amount,
-            min: MIN_DEPOSIT,
-            max: sliderMax > MIN_DEPOSIT ? sliderMax : 20,
-            step: 0.5,
-            ticks: [MIN_DEPOSIT, 5, 10, 20].filter((t) => t <= sliderMax || t <= 20),
-            onChange: setAmount
-          }
-        ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: detailsStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: detailRowStyle(tokens.textMuted), children: [
             "Remaining limit: ",
@@ -3052,13 +3131,13 @@ function DepositScreen({
               remainingLimit.toFixed(2)
             ] })
           ] }),
-          estimatedFeeUsd != null && estimatedFeePct != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: detailRowStyle(tokens.textMuted), children: [
+          estimatedFeeUsd != null && estimatedFeePct != null ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: detailRowStyle(tokens.textMuted), children: [
             "Fee: ~$",
             estimatedFeeUsd.toFixed(2),
             " (",
             estimatedFeePct.toFixed(1),
             "%)"
-          ] })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: detailRowStyle(tokens.textMuted), children: "Fees calculated at time of transfer" })
         ] }),
         error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error })
       ]
@@ -3168,14 +3247,45 @@ function SuccessScreen({
   onDone,
   onLogout,
   onIncreaseLimits,
-  onManageAccount
+  onManageAccount,
+  autoCloseSeconds
 }) {
   const { tokens } = useSwypeConfig();
+  const [countdown, setCountdown] = react.useState(autoCloseSeconds ?? 0);
+  const doneCalledRef = react.useRef(false);
+  const handleDone = react.useCallback(() => {
+    if (doneCalledRef.current) return;
+    doneCalledRef.current = true;
+    onDone();
+  }, [onDone]);
+  react.useEffect(() => {
+    if (!autoCloseSeconds || autoCloseSeconds <= 0) return;
+    const intervalId = window.setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          window.clearInterval(intervalId);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+    return () => window.clearInterval(intervalId);
+  }, [autoCloseSeconds]);
+  react.useEffect(() => {
+    if (autoCloseSeconds && countdown === 0) {
+      handleDone();
+    }
+  }, [autoCloseSeconds, countdown, handleDone]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onDone, children: "Done" }),
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: handleDone, children: "Done" }),
+        autoCloseSeconds != null && autoCloseSeconds > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: countdownStyle(tokens.textMuted), children: [
+          "Returning to app in ",
+          countdown,
+          "s\u2026"
+        ] }),
         onManageAccount && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onManageAccount, style: manageStyle(tokens.textMuted), children: "Manage Swype account \u2192" }),
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
@@ -3299,6 +3409,12 @@ var upsellLinkStyle = (color) => ({
   fontFamily: "inherit",
   padding: 0
 });
+var countdownStyle = (color) => ({
+  fontSize: "0.82rem",
+  color,
+  margin: "10px 0 0",
+  textAlign: "center"
+});
 var manageStyle = (color) => ({
   background: "transparent",
   border: "none",
@@ -3312,6 +3428,233 @@ var manageStyle = (color) => ({
   textAlign: "center",
   padding: "12px 0 0"
 });
+function SelectSourceScreen({
+  choices,
+  selectedChainName,
+  selectedTokenSymbol,
+  recommended,
+  onChainChange,
+  onTokenChange,
+  onConfirm,
+  onLogout
+}) {
+  const { tokens } = useSwypeConfig();
+  const selectedChain = choices.find((c) => c.chainName === selectedChainName) ?? choices[0];
+  const tokenChoices = selectedChain?.tokens ?? [];
+  const canConfirm = !!selectedChainName && !!selectedTokenSymbol;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ScreenLayout,
+    {
+      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: onConfirm, disabled: !canConfirm, children: "Confirm source" }),
+        /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
+      ] }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScreenHeader,
+          {
+            title: "Select Source",
+            right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.textMuted), children: "Choose which chain and token to pay from." }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle2(tokens.textSecondary), children: "Chain" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: optionListStyle, children: choices.map((chain) => {
+          const isSelected = chain.chainName === selectedChainName;
+          const isRecommended = chain.chainName === recommended?.chainName;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => onChainChange(chain.chainName),
+              style: optionButtonStyle(tokens, isSelected),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { style: optionContentStyle, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: optionNameStyle(tokens.text), children: [
+                    chain.chainName,
+                    isRecommended && /* @__PURE__ */ jsxRuntime.jsx("span", { style: recommendedBadgeStyle(tokens.accent), children: " recommended" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { style: optionBalanceStyle(tokens.textMuted), children: [
+                    "$",
+                    chain.balance.toFixed(2)
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioStyle(tokens, isSelected), children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioDotStyle(tokens.accent) }) })
+              ]
+            },
+            chain.chainName
+          );
+        }) }),
+        tokenChoices.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle2(tokens.textSecondary), children: "Token" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: optionListStyle, children: tokenChoices.map((token) => {
+            const isSelected = token.tokenSymbol === selectedTokenSymbol;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onTokenChange(token.tokenSymbol),
+                style: optionButtonStyle(tokens, isSelected),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { style: optionContentStyle, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: optionNameStyle(tokens.text), children: token.tokenSymbol }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { style: optionBalanceStyle(tokens.textMuted), children: [
+                      "$",
+                      token.balance.toFixed(2)
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioStyle(tokens, isSelected), children: isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { style: radioDotStyle(tokens.accent) }) })
+                ]
+              },
+              token.tokenSymbol
+            );
+          }) })
+        ] })
+      ]
+    }
+  );
+}
+var subtitleStyle7 = (color) => ({
+  fontSize: "0.85rem",
+  color,
+  margin: "0 0 20px",
+  lineHeight: 1.5
+});
+var labelStyle2 = (color) => ({
+  display: "block",
+  fontSize: "0.75rem",
+  fontWeight: 600,
+  color,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  marginBottom: 8
+});
+var optionListStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  marginBottom: 20
+};
+var optionButtonStyle = (tokens, selected) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "14px 16px",
+  background: tokens.bgInput,
+  border: `1.5px solid ${selected ? tokens.accent : tokens.border}`,
+  borderRadius: 14,
+  cursor: "pointer",
+  fontFamily: "inherit",
+  textAlign: "left",
+  transition: "border-color 0.15s ease"
+});
+var optionContentStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 2
+};
+var optionNameStyle = (color) => ({
+  fontSize: "0.9rem",
+  fontWeight: 600,
+  color
+});
+var recommendedBadgeStyle = (color) => ({
+  fontSize: "0.7rem",
+  fontWeight: 500,
+  color,
+  marginLeft: 6
+});
+var optionBalanceStyle = (color) => ({
+  fontSize: "0.78rem",
+  color
+});
+var radioStyle = (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 radioDotStyle = (color) => ({
+  width: 10,
+  height: 10,
+  borderRadius: "50%",
+  background: color
+});
+var STEP_LABELS = ["Creating transfer", "Verifying", "Sent", "Done"];
+var PHASE_ACTIVE_INDEX = {
+  creating: 0,
+  verifying: 1,
+  sent: 2,
+  done: 4
+};
+function buildSteps(phase) {
+  const activeIdx = PHASE_ACTIVE_INDEX[phase];
+  return STEP_LABELS.map((label, i) => ({
+    label,
+    status: i < activeIdx ? "complete" : i === activeIdx ? "active" : "pending"
+  }));
+}
+function TransferStatusScreen({
+  phase,
+  error,
+  onLogout
+}) {
+  const { tokens } = useSwypeConfig();
+  const steps = buildSteps(phase);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle6, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Processing Transfer..." }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle6(tokens), children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle2, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle2(tokens.textMuted), children: "Usually takes a few seconds" })
+    ] })
+  ] });
+}
+var contentStyle6 = {
+  flex: 1,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  textAlign: "center",
+  padding: "0 24px"
+};
+var headingStyle8 = (color) => ({
+  fontSize: "1.45rem",
+  fontWeight: 700,
+  letterSpacing: "-0.02em",
+  color,
+  margin: "20px 0 16px"
+});
+var errorBannerStyle6 = (tokens) => ({
+  background: tokens.errorBg,
+  border: `1px solid ${tokens.error}66`,
+  borderRadius: 16,
+  padding: "11px 14px",
+  color: tokens.error,
+  fontSize: "0.84rem",
+  marginBottom: 14,
+  lineHeight: 1.5,
+  width: "100%",
+  textAlign: "left"
+});
+var stepsWrapStyle2 = {
+  width: "100%",
+  maxWidth: 280,
+  textAlign: "left",
+  marginBottom: 16
+};
+var waitHintStyle2 = (color) => ({
+  fontSize: "0.82rem",
+  color,
+  margin: 0
+});
 var ACTIVE_CREDENTIAL_STORAGE_KEY = "swype_active_credential_id";
 var MIN_SEND_AMOUNT_USD = 0.25;
 function computeSmartDefaults(accts, transferAmount) {
@@ -3390,7 +3733,9 @@ function SwypePayment({
   idempotencyKey,
   merchantAuthorization,
   merchantName,
-  onBack
+  onBack,
+  onDismiss,
+  autoCloseSeconds
 }) {
   const { apiBaseUrl, tokens, depositAmount } = useSwypeConfig();
   const { ready, authenticated, user, logout, getAccessToken } = reactAuth.usePrivy();
@@ -3404,6 +3749,7 @@ function SwypePayment({
     loginWithCode: loginWithSmsCode,
     state: smsLoginState
   } = reactAuth.useLoginWithSms();
+  const { initOAuth } = reactAuth.useLoginWithOAuth();
   const [step, setStep] = react.useState("login");
   const [error, setError] = react.useState(null);
   const [providers, setProviders] = react.useState([]);
@@ -3452,6 +3798,14 @@ function SwypePayment({
     setVerificationTarget(null);
     setOtpCode("");
   }, []);
+  const handleSocialLogin = react.useCallback(async (provider) => {
+    setError(null);
+    try {
+      await initOAuth({ provider });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Social login failed");
+    }
+  }, [initOAuth]);
   const activeOtpStatus = verificationTarget?.kind === "email" ? emailLoginState.status : verificationTarget?.kind === "phone" ? smsLoginState.status : "initial";
   const activeOtpErrorMessage = verificationTarget?.kind === "email" && emailLoginState.status === "error" ? emailLoginState.error?.message ?? "Failed to continue with email." : verificationTarget?.kind === "phone" && smsLoginState.status === "error" ? smsLoginState.error?.message ?? "Failed to continue with phone number." : null;
   react.useEffect(() => {
@@ -3520,6 +3874,9 @@ function SwypePayment({
         if (!token || cancelled) return;
         const { config } = await fetchUserConfig(apiBaseUrl, token);
         if (cancelled) return;
+        if (config.defaultAllowance != null) {
+          setOneTapLimit(config.defaultAllowance);
+        }
         const allPasskeys = config.passkeys ?? (config.passkey ? [config.passkey] : []);
         if (allPasskeys.length === 0) {
           setStep("create-passkey");
@@ -3704,6 +4061,26 @@ function SwypePayment({
     }
     initializedSelectSourceActionRef.current = pendingSelectSourceAction.id;
   }, [pendingSelectSourceAction, selectSourceChoices, selectSourceRecommended]);
+  react.useEffect(() => {
+    if (pendingSelectSourceAction && step === "processing") {
+      setStep("select-source");
+    } else if (!pendingSelectSourceAction && step === "select-source") {
+      setStep("processing");
+    }
+  }, [pendingSelectSourceAction, step]);
+  const handleSelectSourceChainChange = react.useCallback(
+    (chainName) => {
+      setSelectSourceChainName(chainName);
+      const chain = selectSourceChoices.find((c) => c.chainName === chainName);
+      if (!chain || chain.tokens.length === 0) return;
+      const recommendedToken = selectSourceRecommended?.chainName === chainName ? selectSourceRecommended.tokenSymbol : null;
+      const hasRecommended = !!recommendedToken && chain.tokens.some((t) => t.tokenSymbol === recommendedToken);
+      setSelectSourceTokenSymbol(
+        hasRecommended ? recommendedToken : chain.tokens[0].tokenSymbol
+      );
+    },
+    [selectSourceChoices, selectSourceRecommended]
+  );
   const selectedAccount = accounts.find((a) => a.id === selectedAccountId);
   const selectedWallet = selectedAccount?.wallets.find((w) => w.id === selectedWalletId);
   const sourceName = selectedAccount?.name ?? selectedWallet?.chain.name ?? "Wallet";
@@ -3879,6 +4256,7 @@ function SwypePayment({
       }
       const setupAmount = depositAmount ?? MIN_SEND_AMOUNT_USD;
       const t = await createTransfer(apiBaseUrl, token, {
+        id: idempotencyKey,
         credentialId: activeCredentialId ?? "",
         merchantAuthorization,
         sourceType,
@@ -3907,6 +4285,7 @@ function SwypePayment({
     }
   }, [
     getAccessToken,
+    idempotencyKey,
     sourceId,
     sourceType,
     activeCredentialId,
@@ -3977,7 +4356,9 @@ function SwypePayment({
         onSubmit: handleSendLoginCode,
         sending: activeOtpStatus === "sending-code",
         error,
-        onBack
+        onBack,
+        merchantInitials: merchantName ? merchantName.slice(0, 2).toUpperCase() : void 0,
+        onSocialLogin: handleSocialLogin
       }
     );
   }
@@ -4004,6 +4385,9 @@ function SwypePayment({
       }
     );
   }
+  if ((step === "login" || step === "otp-verify") && authenticated) {
+    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: "Verifying your passkey..." }) }) });
+  }
   if (step === "create-passkey") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       CreatePasskeyScreen,
@@ -4069,11 +4453,9 @@ function SwypePayment({
         sourceAddress,
         sourceVerified,
         availableBalance: maxSourceBalance,
-        remainingLimit: oneTapLimit,
+        remainingLimit: selectedAccount?.remainingAllowance ?? oneTapLimit,
         tokenCount,
         initialAmount: parsedAmt,
-        estimatedFeePct: 0.6,
-        estimatedFeeUsd: parsedAmt * 6e-3,
         processing: creatingTransfer,
         error,
         onDeposit: handlePay,
@@ -4085,24 +4467,36 @@ function SwypePayment({
     );
   }
   if (step === "processing") {
-    const currentActionType = authExecutor.currentAction?.type;
-    const statusLabel = creatingTransfer ? "Creating Transfer" : mobileFlow ? "Waiting for Authorization" : authExecutor.executing ? currentActionType?.replace(/_/g, " ") ?? "Authorizing" : transferSigning.signing ? "Sending transfer" : polling.isPolling ? "Transfer Sent" : "Please wait...";
-    return /* @__PURE__ */ jsxRuntime.jsx(ScreenLayout, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: "1.4rem", fontWeight: 700, color: tokens.text, marginTop: 20, marginBottom: 8 }, children: statusLabel }),
-      (error || authExecutor.error || transferSigning.error || polling.error) && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-        background: tokens.errorBg,
-        border: `1px solid ${tokens.error}66`,
-        borderRadius: 16,
-        padding: "11px 14px",
-        color: tokens.error,
-        fontSize: "0.84rem",
-        marginTop: 16,
-        lineHeight: 1.5,
-        textAlign: "left",
-        maxWidth: 340
-      }, children: error || authExecutor.error || transferSigning.error || polling.error })
-    ] }) });
+    const polledStatus = polling.transfer?.status;
+    const transferPhase = creatingTransfer ? "creating" : mobileFlow || authExecutor.executing || transferSigning.signing ? "verifying" : polledStatus === "SENDING" || polledStatus === "SENT" || polling.isPolling ? "sent" : "creating";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      TransferStatusScreen,
+      {
+        phase: transferPhase,
+        error: error || authExecutor.error || transferSigning.error || polling.error,
+        onLogout: handleLogout
+      }
+    );
+  }
+  if (step === "select-source") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      SelectSourceScreen,
+      {
+        choices: selectSourceChoices,
+        selectedChainName: selectSourceChainName,
+        selectedTokenSymbol: selectSourceTokenSymbol,
+        recommended: selectSourceRecommended,
+        onChainChange: handleSelectSourceChainChange,
+        onTokenChange: setSelectSourceTokenSymbol,
+        onConfirm: () => {
+          authExecutor.resolveSelectSource({
+            chainName: selectSourceChainName,
+            tokenSymbol: selectSourceTokenSymbol
+          });
+        },
+        onLogout: handleLogout
+      }
+    );
   }
   if (step === "success") {
     transfer?.status === "COMPLETED";
@@ -4115,9 +4509,13 @@ function SwypePayment({
         currency: displayCurrency,
         merchantName,
         sourceName,
-        remainingLimit: oneTapLimit > displayAmount ? oneTapLimit - displayAmount : 0,
-        onDone: handleNewPayment,
-        onLogout: handleLogout
+        remainingLimit: (() => {
+          const limit = selectedAccount?.remainingAllowance ?? oneTapLimit;
+          return limit > displayAmount ? limit - displayAmount : 0;
+        })(),
+        onDone: onDismiss ?? handleNewPayment,
+        onLogout: handleLogout,
+        autoCloseSeconds
       }
     );
   }
@@ -4130,7 +4528,7 @@ function SwypePayment({
         sourceAddress,
         sourceVerified,
         availableBalance: 0,
-        remainingLimit: oneTapLimit,
+        remainingLimit: selectedAccount?.remainingAllowance ?? oneTapLimit,
         tokenCount,
         initialAmount: depositAmount ?? 5,
         processing: false,