@swype-org/react-sdk 0.1.28 → 0.1.29

package/dist/index.cjs

@@ -28,9 +28,9 @@ var darkTheme = {
   textMuted: "#7fa4b0",
   textInverse: "#052027",
   border: "#2b4551",
-  borderFocus: "#2ec4cf",
-  accent: "#2eb6c2",
-  accentHover: "#239ba6",
+  borderFocus: "#28b67a",
+  accent: "#28b67a",
+  accentHover: "#219866",
   accentText: "#ffffff",
   success: "#0f9d73",
   successBg: "#0f2f2a",
@@ -52,9 +52,9 @@ var lightTheme = {
   textMuted: "#7d97a1",
   textInverse: "#ffffff",
   border: "#d2e4ea",
-  borderFocus: "#2eb6c2",
-  accent: "#2eb6c2",
-  accentHover: "#259da7",
+  borderFocus: "#28b67a",
+  accent: "#28b67a",
+  accentHover: "#219866",
   accentText: "#ffffff",
   success: "#0f9d73",
   successBg: "#e6f7f1",
@@ -77,26 +77,6 @@ var wagmiConfig = wagmi.createConfig({
     [chains.base.id]: wagmi.http()
   }
 });
-var PRIVY_MODAL_CENTER_CSS = `
-@media (max-width: 440px) {
-  #privy-dialog [data-headlessui-state] {
-    position: static !important;
-    bottom: auto !important;
-    margin: auto !important;
-    width: 360px !important;
-    max-width: calc(100vw - 32px) !important;
-    box-shadow: 0px 8px 36px rgba(55, 65, 81, 0.15) !important;
-    border-radius: var(--privy-border-radius-lg) !important;
-    transform: none !important;
-    transition: opacity 100ms ease-in !important;
-  }
-  #privy-dialog [data-headlessui-state].entering,
-  #privy-dialog [data-headlessui-state].leaving {
-    opacity: 0 !important;
-    transform: none !important;
-  }
-}
-`;
 var SwypeContext = react.createContext(null);
 function SwypeProvider({
   apiBaseUrl,
@@ -107,15 +87,6 @@ function SwypeProvider({
   if (!queryClientRef.current) {
     queryClientRef.current = new reactQuery.QueryClient();
   }
-  react.useEffect(() => {
-    const style = document.createElement("style");
-    style.setAttribute("data-swype", "privy-modal-center");
-    style.textContent = PRIVY_MODAL_CENTER_CSS;
-    document.head.appendChild(style);
-    return () => {
-      style.remove();
-    };
-  }, []);
   const [depositAmount, setDepositAmountRaw] = react.useState(null);
   const setDepositAmount = react.useCallback((amount) => {
     setDepositAmountRaw(amount);
@@ -138,6 +109,12 @@ function SwypeProvider({
         appearance: {
           theme,
           accentColor: getTheme(theme).accent
+        },
+        intl: {
+          defaultCountry: "US"
+        },
+        embeddedWallets: {
+          showWalletUIs: false
         }
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(SwypeContext.Provider, { value, children })
@@ -176,6 +153,7 @@ __export(api_exports, {
   fetchAccounts: () => fetchAccounts,
   fetchAuthorizationSession: () => fetchAuthorizationSession,
   fetchChains: () => fetchChains,
+  fetchMerchantPublicKey: () => fetchMerchantPublicKey,
   fetchProviders: () => fetchProviders,
   fetchTransfer: () => fetchTransfer,
   fetchUserConfig: () => fetchUserConfig,
@@ -218,9 +196,13 @@ async function fetchAccounts(apiBaseUrl, token, credentialId) {
   return data.items;
 }
 async function createTransfer(apiBaseUrl, token, params) {
+  if (!params.merchantAuthorization) {
+    throw new Error("merchantAuthorization is required for transfer creation.");
+  }
   const body = {
     id: params.id ?? crypto.randomUUID(),
     credentialId: params.credentialId,
+    merchantAuthorization: params.merchantAuthorization,
     sources: [{ [params.sourceType]: params.sourceId }],
     destinations: [
       {
@@ -245,6 +227,13 @@ async function createTransfer(apiBaseUrl, token, params) {
   if (!res.ok) await throwApiError(res);
   return await res.json();
 }
+async function fetchMerchantPublicKey(apiBaseUrl, merchantId) {
+  const res = await fetch(
+    `${apiBaseUrl}/v1/merchants/${encodeURIComponent(merchantId)}/public-key`
+  );
+  if (!res.ok) await throwApiError(res);
+  return await res.json();
+}
 async function fetchTransfer(apiBaseUrl, token, transferId, authorizationSessionToken) {
   if (!token && !authorizationSessionToken) {
     throw new Error("Missing auth credentials for transfer fetch.");
@@ -2100,6 +2089,46 @@ function AdvancedSettings({
   ] });
 }
 
+// src/auth.ts
+var EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var PHONE_DIGIT_PATTERN = /^\d{7,15}$/;
+function normalizePhoneNumber(rawValue) {
+  const trimmed = rawValue.trim();
+  if (!trimmed) return null;
+  const hasExplicitCountryCode = trimmed.startsWith("+");
+  const digits = trimmed.replace(/\D/g, "");
+  if (!PHONE_DIGIT_PATTERN.test(digits)) return null;
+  return hasExplicitCountryCode ? `+${digits}` : digits;
+}
+function normalizeAuthIdentifier(rawValue) {
+  const trimmed = rawValue.trim();
+  if (!trimmed) return null;
+  if (EMAIL_PATTERN.test(trimmed)) {
+    return {
+      kind: "email",
+      value: trimmed.toLowerCase()
+    };
+  }
+  const normalizedPhoneNumber = normalizePhoneNumber(trimmed);
+  if (normalizedPhoneNumber) {
+    return {
+      kind: "phone",
+      value: normalizedPhoneNumber
+    };
+  }
+  return null;
+}
+function maskAuthIdentifier(identifier) {
+  if (identifier.kind === "email") {
+    const [localPart, domain = ""] = identifier.value.split("@");
+    const localPrefix = localPart.slice(0, 2);
+    return `${localPrefix}${"*".repeat(Math.max(localPart.length - 2, 0))}@${domain}`;
+  }
+  const digits = identifier.value.replace(/\D/g, "");
+  const visibleSuffix = digits.slice(-4);
+  return `***-***-${visibleSuffix}`;
+}
+
 // src/processingStatus.ts
 var PROCESSING_TIMEOUT_MS = 18e4;
 function resolvePreferredTransfer(polledTransfer, localTransfer) {
@@ -2206,10 +2235,21 @@ function SwypePayment({
   onComplete,
   onError,
   useWalletConnector,
-  idempotencyKey
+  idempotencyKey,
+  merchantAuthorization
 }) {
   const { apiBaseUrl, tokens, depositAmount } = useSwypeConfig();
-  const { ready, authenticated, user, login, logout, getAccessToken } = reactAuth.usePrivy();
+  const { ready, authenticated, user, logout, getAccessToken } = reactAuth.usePrivy();
+  const {
+    sendCode: sendEmailCode,
+    loginWithCode: loginWithEmailCode,
+    state: emailLoginState
+  } = reactAuth.useLoginWithEmail();
+  const {
+    sendCode: sendSmsCode,
+    loginWithCode: loginWithSmsCode,
+    state: smsLoginState
+  } = reactAuth.useLoginWithSms();
   const [step, setStep] = react.useState("login");
   const [error, setError] = react.useState(null);
   const [providers, setProviders] = react.useState([]);
@@ -2234,6 +2274,11 @@ function SwypePayment({
     if (typeof window === "undefined") return null;
     return window.localStorage.getItem(ACTIVE_CREDENTIAL_STORAGE_KEY);
   });
+  const [authInput, setAuthInput] = react.useState("");
+  const [verificationTarget, setVerificationTarget] = react.useState(
+    null
+  );
+  const [otpCode, setOtpCode] = react.useState("");
   const [mobileFlow, setMobileFlow] = react.useState(false);
   const pollingTransferIdRef = react.useRef(null);
   const mobileSigningTransferIdRef = react.useRef(null);
@@ -2251,9 +2296,81 @@ function SwypePayment({
       setAmount(depositAmount.toString());
     }
   }, [depositAmount]);
+  const resetHeadlessLogin = react.useCallback(() => {
+    setAuthInput("");
+    setVerificationTarget(null);
+    setOtpCode("");
+  }, []);
+  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(() => {
+    if (activeOtpErrorMessage) {
+      setError(activeOtpErrorMessage);
+    }
+  }, [activeOtpErrorMessage]);
+  const handleSendLoginCode = react.useCallback(async () => {
+    const normalizedIdentifier = normalizeAuthIdentifier(authInput);
+    if (!normalizedIdentifier) {
+      setError("Enter a valid email address or phone number.");
+      return;
+    }
+    setError(null);
+    setOtpCode("");
+    try {
+      if (normalizedIdentifier.kind === "email") {
+        await sendEmailCode({ email: normalizedIdentifier.value });
+      } else {
+        await sendSmsCode({ phoneNumber: normalizedIdentifier.value });
+      }
+      setVerificationTarget(normalizedIdentifier);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to send verification code";
+      setError(msg);
+    }
+  }, [authInput, sendEmailCode, sendSmsCode]);
+  const handleVerifyLoginCode = react.useCallback(async () => {
+    if (!verificationTarget) return;
+    const trimmedCode = otpCode.trim();
+    if (!/^\d{6}$/.test(trimmedCode)) {
+      setError("Enter the 6-digit verification code.");
+      return;
+    }
+    setError(null);
+    try {
+      if (verificationTarget.kind === "email") {
+        await loginWithEmailCode({ code: trimmedCode });
+      } else {
+        await loginWithSmsCode({ code: trimmedCode });
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to verify code";
+      setError(msg);
+    }
+  }, [verificationTarget, otpCode, loginWithEmailCode, loginWithSmsCode]);
+  const handleResendLoginCode = react.useCallback(async () => {
+    if (!verificationTarget) return;
+    setError(null);
+    try {
+      if (verificationTarget.kind === "email") {
+        await sendEmailCode({ email: verificationTarget.value });
+      } else {
+        await sendSmsCode({ phoneNumber: verificationTarget.value });
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Failed to resend code";
+      setError(msg);
+    }
+  }, [verificationTarget, sendEmailCode, sendSmsCode]);
+  const handleEditIdentifier = react.useCallback(() => {
+    setError(null);
+    setVerificationTarget(null);
+    setOtpCode("");
+  }, []);
   react.useEffect(() => {
     if (!ready || !authenticated || step !== "login") return;
     let cancelled = false;
+    setError(null);
+    resetHeadlessLogin();
     const checkPasskey = async () => {
       try {
         const token = await getAccessToken();
@@ -2302,7 +2419,16 @@ function SwypePayment({
     return () => {
       cancelled = true;
     };
-  }, [ready, authenticated, step, depositAmount, apiBaseUrl, getAccessToken, activeCredentialId]);
+  }, [
+    ready,
+    authenticated,
+    step,
+    depositAmount,
+    apiBaseUrl,
+    getAccessToken,
+    activeCredentialId,
+    resetHeadlessLogin
+  ]);
   const loadingDataRef = react.useRef(false);
   react.useEffect(() => {
     if (!authenticated) return;
@@ -2522,6 +2648,7 @@ function SwypePayment({
       const t = await createTransfer(apiBaseUrl, token, {
         id: idempotencyKey,
         credentialId: activeCredentialId,
+        merchantAuthorization,
         sourceType: effectiveSourceType,
         sourceId: effectiveSourceId,
         destination,
@@ -2611,7 +2738,8 @@ function SwypePayment({
     processingStartedAtRef.current = null;
     pollingTransferIdRef.current = null;
     mobileSigningTransferIdRef.current = null;
-  }, [logout, polling, depositAmount]);
+    resetHeadlessLogin();
+  }, [logout, polling, depositAmount, resetHeadlessLogin]);
   const handleConnectNewAccount = (providerId) => {
     setSelectedProviderId(providerId);
     setSelectedAccountId(null);
@@ -2648,7 +2776,7 @@ function SwypePayment({
     cursor: "pointer",
     transition: "filter 0.15s ease, transform 0.15s ease",
     fontFamily: "inherit",
-    boxShadow: "0 8px 18px rgba(46, 182, 194, 0.28)"
+    boxShadow: "0 8px 18px rgba(40, 182, 122, 0.28)"
   };
   const btnDisabled = {
     ...btnPrimary,
@@ -2660,6 +2788,33 @@ function SwypePayment({
     background: tokens.bgCard,
     color: tokens.textSecondary,
     border: `1px solid ${tokens.border}`});
+  const textFieldStyle = {
+    width: "100%",
+    padding: "15px 16px",
+    borderRadius: "16px",
+    border: `1px solid ${tokens.border}`,
+    background: tokens.bgInput,
+    color: tokens.text,
+    fontSize: "0.98rem",
+    fontFamily: "inherit",
+    outline: "none",
+    boxSizing: "border-box"
+  };
+  const authCaptionStyle = {
+    fontSize: "0.84rem",
+    color: tokens.textSecondary,
+    margin: 0,
+    lineHeight: 1.5
+  };
+  const authTertiaryButtonStyle = {
+    background: "transparent",
+    border: "none",
+    color: tokens.textMuted,
+    cursor: "pointer",
+    fontFamily: "inherit",
+    fontSize: "0.84rem",
+    padding: 0
+  };
   const errorStyle = {
     background: tokens.errorBg,
     border: `1px solid ${tokens.error}66`,
@@ -2720,6 +2875,7 @@ function SwypePayment({
       ]
     }
   );
+  const placeholderProviders = ["A", "B", "C", "D", "E"];
   const displayedSelectSourceChoices = selectSourceChoices.length > 0 ? selectSourceChoices : [
     {
       chainName: "Base",
@@ -2755,43 +2911,186 @@ function SwypePayment({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "24px 0" }, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { label: "Initializing..." }) }) });
   }
   if (step === "login" && !authenticated) {
+    const isAwaitingOtp = verificationTarget !== null;
+    const isSendingCode = activeOtpStatus === "sending-code";
+    const isSubmittingCode = activeOtpStatus === "submitting-code";
+    const continueDisabled = authInput.trim().length === 0 || isSendingCode || isSubmittingCode;
+    const verifyDisabled = otpCode.trim().length !== 6 || isSubmittingCode;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "svg",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
         {
-          width: "48",
-          height: "48",
-          viewBox: "0 0 48 48",
-          fill: "none",
-          style: { margin: "0 auto 16px" },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "48", height: "48", rx: "12", fill: tokens.accent + "20" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "path",
-              {
-                d: "M24 14v20M14 24h20",
-                stroke: tokens.accent,
-                strokeWidth: "2.5",
-                strokeLinecap: "round"
-              }
-            )
-          ]
+          style: {
+            width: 56,
+            height: 56,
+            borderRadius: 14,
+            background: tokens.accent,
+            color: tokens.accentText,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontWeight: 700,
+            fontSize: "1.35rem",
+            margin: "0 auto 24px",
+            boxShadow: "0 10px 20px rgba(40, 182, 122, 0.22)"
+          },
+          children: "S"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "h2",
+        {
+          style: {
+            ...headingStyle,
+            fontSize: "2.05rem",
+            lineHeight: 1.15,
+            marginBottom: "10px",
+            whiteSpace: "pre-line"
+          },
+          children: isAwaitingOtp ? "Enter your code." : "One-time setup.\nOne-tap deposits after."
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { ...headingStyle, marginBottom: "8px" }, children: "Pay with Swype" }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "p",
         {
           style: {
-            fontSize: "0.875rem",
-            color: tokens.textSecondary,
-            margin: "0 0 24px 0",
-            lineHeight: 1.5
+            ...authCaptionStyle,
+            margin: "0 0 26px 0",
+            whiteSpace: "pre-line"
           },
-          children: "Connect your account to continue"
+          children: isAwaitingOtp ? `We sent a 6-digit code to ${maskAuthIdentifier(verificationTarget)}.` : "Protected by Face ID."
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { style: btnPrimary, onClick: login, children: "Connect to Swype" })
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorStyle, children: error }),
+      isAwaitingOtp ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: "swype-login-code",
+            type: "text",
+            inputMode: "numeric",
+            autoComplete: "one-time-code",
+            placeholder: "Verification code",
+            value: otpCode,
+            onChange: (event) => {
+              setOtpCode(event.target.value.replace(/\D/g, "").slice(0, 6));
+            },
+            style: {
+              ...textFieldStyle,
+              textAlign: "center",
+              letterSpacing: "0.24em",
+              marginBottom: "14px"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            style: verifyDisabled ? btnDisabled : btnPrimary,
+            disabled: verifyDisabled,
+            onClick: handleVerifyLoginCode,
+            children: isSubmittingCode ? "Verifying..." : "Continue"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              gap: "12px",
+              marginTop: "14px"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: authTertiaryButtonStyle, onClick: handleEditIdentifier, children: "Use a different email or phone" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  style: authTertiaryButtonStyle,
+                  onClick: handleResendLoginCode,
+                  disabled: isSendingCode || isSubmittingCode,
+                  children: isSendingCode ? "Sending..." : "Resend code"
+                }
+              )
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: "swype-login-identifier",
+            type: "text",
+            inputMode: "text",
+            autoComplete: "username",
+            placeholder: "Email or phone number",
+            value: authInput,
+            onChange: (event) => setAuthInput(event.target.value),
+            style: { ...textFieldStyle, marginBottom: "14px" }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            style: continueDisabled ? btnDisabled : btnPrimary,
+            disabled: continueDisabled,
+            onClick: handleSendLoginCode,
+            children: isSendingCode ? "Sending code..." : "Continue"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "10px",
+              margin: "22px 0 14px",
+              color: tokens.textMuted,
+              fontSize: "0.82rem"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, height: 1, background: tokens.border } }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "works with" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, height: 1, background: tokens.border } })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-label": "Works with placeholder providers",
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              gap: "12px",
+              marginBottom: "18px"
+            },
+            children: placeholderProviders.map((providerLabel) => /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  width: 34,
+                  height: 34,
+                  borderRadius: 999,
+                  border: `1px solid ${tokens.border}`,
+                  background: tokens.bgInput,
+                  color: tokens.textMuted,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: "0.78rem",
+                  fontWeight: 600
+                },
+                children: providerLabel
+              },
+              providerLabel
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: { ...authCaptionStyle, color: tokens.textMuted }, children: "Powered by Swype. Non-custodial." })
+      ] })
     ] }) });
   }
   if (step === "register-passkey") {