@swype-org/react-sdk 0.1.32 → 0.1.33

package/dist/index.js

@@ -1,5 +1,5 @@
 import { createContext, useRef, useState, useCallback, useMemo, useContext, useEffect } from 'react';
-import { PrivyProvider, usePrivy, useLoginWithEmail, useLoginWithSms } from '@privy-io/react-auth';
+import { PrivyProvider, usePrivy, useLoginWithEmail, useLoginWithSms, useLoginWithOAuth } from '@privy-io/react-auth';
 import { createConfig, http, WagmiProvider, useConfig, useConnect, useSwitchChain } from 'wagmi';
 import { mainnet, arbitrum, base } from 'wagmi/chains';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -1448,8 +1448,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
@@ -2115,34 +2127,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__ */ jsxs(
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(PrimaryButton, { onClick: onSubmit, disabled, loading: sending, children: "Continue" }),
-        /* @__PURE__ */ jsxs("div", { style: dividerStyle(tokens), children: [
-          /* @__PURE__ */ jsx("div", { style: dividerLineStyle(tokens.border) }),
-          /* @__PURE__ */ jsx("span", { children: "works with" }),
-          /* @__PURE__ */ jsx("div", { style: dividerLineStyle(tokens.border) })
+        onSocialLogin && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { style: dividerStyle(tokens), children: [
+            /* @__PURE__ */ jsx("div", { style: dividerLineStyle(tokens.border) }),
+            /* @__PURE__ */ jsx("span", { children: "or continue with" }),
+            /* @__PURE__ */ jsx("div", { style: dividerLineStyle(tokens.border) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: socialRowStyle, children: ["google", "apple", "twitter"].map((provider) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSocialLogin(provider),
+              style: socialButtonStyle(tokens),
+              children: socialLabel(provider)
+            },
+            provider
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: walletSectionStyle, children: [
+          /* @__PURE__ */ jsx("span", { style: walletLabelStyle(tokens.textMuted), children: "Works with" }),
+          /* @__PURE__ */ jsx("div", { style: walletLogosStyle, children: walletIcons.map(({ key, emoji }) => /* @__PURE__ */ jsx("span", { style: walletEmojiStyle, children: emoji }, key)) })
         ] }),
-        /* @__PURE__ */ jsx("div", { style: logosRowStyle, children: walletLogos.map((label) => /* @__PURE__ */ jsx("div", { style: logoCircleStyle(tokens), children: label }, label)) }),
         /* @__PURE__ */ jsx(PoweredByFooter, {})
       ] }),
       children: [
-        /* @__PURE__ */ jsx(ScreenHeader, { onBack }),
+        /* @__PURE__ */ jsx(
+          ScreenHeader,
+          {
+            onBack,
+            right: merchantInitials ? /* @__PURE__ */ jsx("div", { style: avatarStyle(tokens), children: merchantInitials }) : void 0
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { style: contentStyle, children: [
-          /* @__PURE__ */ jsx(IconCircle, { variant: "accent", size: 56, children: /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ 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__ */ jsx("div", { style: iconBoxStyle(tokens.accent), children: /* @__PURE__ */ jsx("span", { style: iconLetterStyle, children: "S" }) }),
           /* @__PURE__ */ jsx("h2", { style: headingStyle(tokens.text), children: "One-time setup.\nOne-tap deposits after." }),
           /* @__PURE__ */ jsx("p", { style: subtitleStyle(tokens.textSecondary), children: "Protected by Face ID." }),
           error && /* @__PURE__ */ jsx("div", { style: errorStyle(tokens), children: error }),
@@ -2167,6 +2195,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,
@@ -2175,10 +2220,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",
@@ -2227,24 +2287,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({
@@ -2896,7 +2987,7 @@ var swipeHintStyle = (color) => ({
   color,
   margin: "12px 0 0"
 });
-var MIN_DEPOSIT = 1;
+var MIN_DEPOSIT = 0.25;
 function DepositScreen({
   merchantName,
   sourceName,
@@ -3037,7 +3128,7 @@ function DepositScreen({
             min: MIN_DEPOSIT,
             max: sliderMax > MIN_DEPOSIT ? sliderMax : 20,
             step: 0.5,
-            ticks: [MIN_DEPOSIT, 5, 10, 20].filter((t) => t <= sliderMax || t <= 20),
+            ticks: [MIN_DEPOSIT, 1, 5, 10, 20].filter((t) => t <= sliderMax || t <= 20),
             onChange: setAmount
           }
         ),
@@ -3049,13 +3140,13 @@ function DepositScreen({
               remainingLimit.toFixed(2)
             ] })
           ] }),
-          estimatedFeeUsd != null && estimatedFeePct != null && /* @__PURE__ */ jsxs("div", { style: detailRowStyle(tokens.textMuted), children: [
+          estimatedFeeUsd != null && estimatedFeePct != null ? /* @__PURE__ */ jsxs("div", { style: detailRowStyle(tokens.textMuted), children: [
             "Fee: ~$",
             estimatedFeeUsd.toFixed(2),
             " (",
             estimatedFeePct.toFixed(1),
             "%)"
-          ] })
+          ] }) : /* @__PURE__ */ jsx("div", { style: detailRowStyle(tokens.textMuted), children: "Fees calculated at time of transfer" })
         ] }),
         error && /* @__PURE__ */ jsx("div", { style: errorBannerStyle5(tokens), children: error })
       ]
@@ -3401,6 +3492,7 @@ function SwypePayment({
     loginWithCode: loginWithSmsCode,
     state: smsLoginState
   } = useLoginWithSms();
+  const { initOAuth } = useLoginWithOAuth();
   const [step, setStep] = useState("login");
   const [error, setError] = useState(null);
   const [providers, setProviders] = useState([]);
@@ -3449,6 +3541,14 @@ function SwypePayment({
     setVerificationTarget(null);
     setOtpCode("");
   }, []);
+  const handleSocialLogin = 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;
   useEffect(() => {
@@ -3517,6 +3617,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");
@@ -3876,6 +3979,7 @@ function SwypePayment({
       }
       const setupAmount = depositAmount ?? MIN_SEND_AMOUNT_USD;
       const t = await createTransfer(apiBaseUrl, token, {
+        id: idempotencyKey,
         credentialId: activeCredentialId ?? "",
         merchantAuthorization,
         sourceType,
@@ -3904,6 +4008,7 @@ function SwypePayment({
     }
   }, [
     getAccessToken,
+    idempotencyKey,
     sourceId,
     sourceType,
     activeCredentialId,
@@ -3974,7 +4079,9 @@ function SwypePayment({
         onSubmit: handleSendLoginCode,
         sending: activeOtpStatus === "sending-code",
         error,
-        onBack
+        onBack,
+        merchantInitials: merchantName ? merchantName.slice(0, 2).toUpperCase() : void 0,
+        onSocialLogin: handleSocialLogin
       }
     );
   }
@@ -4069,8 +4176,6 @@ function SwypePayment({
         remainingLimit: oneTapLimit,
         tokenCount,
         initialAmount: parsedAmt,
-        estimatedFeePct: 0.6,
-        estimatedFeeUsd: parsedAmt * 6e-3,
         processing: creatingTransfer,
         error,
         onDeposit: handlePay,
@@ -4083,7 +4188,8 @@ 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...";
+    const polledStatus = polling.transfer?.status;
+    const statusLabel = creatingTransfer ? "Creating Transfer" : mobileFlow ? "Waiting for Authorization" : authExecutor.executing ? currentActionType?.replace(/_/g, " ") ?? "Authorizing" : transferSigning.signing ? "Sending transfer" : polledStatus === "SENDING" ? "Sending transfer..." : polledStatus === "SENT" ? "Confirming delivery..." : polling.isPolling ? "Transfer Sent" : "Please wait...";
     return /* @__PURE__ */ jsx(ScreenLayout, { children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }, children: [
       /* @__PURE__ */ jsx(Spinner, { size: 48 }),
       /* @__PURE__ */ jsx("h2", { style: { fontSize: "1.4rem", fontWeight: 700, color: tokens.text, marginTop: 20, marginBottom: 8 }, children: statusLabel }),