@swype-org/react-sdk 0.1.116 → 0.1.123

package/dist/index.cjs

@@ -811,10 +811,10 @@ function createPasskeyViaPopup(options) {
               if (result) {
                 resolve(result);
               } else {
-                reject(new Error("Passkey setup window was closed before completing."));
+                reject(new Error("Passkey window was closed before completing."));
               }
             }).catch(() => {
-              reject(new Error("Passkey setup window was closed before completing."));
+              reject(new Error("Passkey window was closed before completing."));
             });
           }
         }, POPUP_CLOSED_GRACE_MS);
@@ -1740,6 +1740,9 @@ function resolvePostAuthStep(state) {
     return { step: "create-passkey", clearPersistedFlow: false };
   }
   if (state.persistedMobileFlow) {
+    if (state.persistedMobileFlow.isReauthorization) {
+      return { step: "open-wallet", clearPersistedFlow: false };
+    }
     if (state.persistedMobileFlow.isSetup && hasActiveWallet(state.accounts)) {
       return { step: "deposit", clearPersistedFlow: true };
     }
@@ -1908,7 +1911,10 @@ function buildSelectSourceChoices(options) {
       chainChoice.tokens.push({ tokenSymbol, balance });
     }
   }
-  return chainChoices;
+  return chainChoices.map((chain) => ({
+    ...chain,
+    tokens: chain.tokens.filter((t) => t.balance > 0)
+  })).filter((chain) => chain.tokens.length > 0);
 }
 
 // src/paymentReducer.ts
@@ -2248,7 +2254,7 @@ var spinnerStyle = {
 };
 var FOOTER_CSS = `
 .swype-screen-footer {
-  padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
+  padding-bottom: max(32px, env(safe-area-inset-bottom, 32px));
 }`;
 function ScreenLayout({ children, footer }) {
   const { tokens } = useSwypeConfig();
@@ -2271,12 +2277,16 @@ var containerStyle2 = (bg) => ({
 });
 var bodyStyle = {
   flex: 1,
+  minHeight: 0,
   padding: "0 24px",
   display: "flex",
-  flexDirection: "column"
+  flexDirection: "column",
+  overflowY: "auto"
 };
 var footerStyle = {
-  padding: "16px 24px 0",
+  paddingTop: 16,
+  paddingLeft: 24,
+  paddingRight: 24,
   marginTop: "auto"
 };
 function ScreenHeader({ title, right, onBack, badge }) {
@@ -3153,7 +3163,7 @@ function LoginScreen({
         ] }),
         /* @__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, logo }) => logo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: key, style: walletLogoImgStyle }, key) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: walletEmojiStyle, children: emoji }, key)) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: walletLogosStyle, children: walletIcons.map(({ key, logo }) => /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo, alt: key, style: walletLogoImgStyle }, key)) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
       ] }),
@@ -3192,11 +3202,9 @@ function LoginScreen({
   );
 }
 var walletIcons = [
-  { key: "metamask", emoji: "\u{1F98A}", logo: KNOWN_LOGOS["metamask"] },
-  { key: "rabby", emoji: "\u{1F430}" },
-  { key: "phantom", emoji: "\u25C6" },
-  { key: "rainbow", emoji: "\u{1F439}" },
-  { key: "coinbase", emoji: "\u{1F535}", logo: KNOWN_LOGOS["base"] }
+  { key: "metamask", logo: KNOWN_LOGOS["metamask"] },
+  { key: "base", logo: KNOWN_LOGOS["base"] },
+  { key: "trust wallet", logo: KNOWN_LOGOS["trust wallet"] }
 ];
 function socialLabel(provider) {
   switch (provider) {
@@ -3316,10 +3324,6 @@ var walletLogosStyle = {
   justifyContent: "center",
   gap: 16
 };
-var walletEmojiStyle = {
-  fontSize: "1.4rem",
-  lineHeight: 1
-};
 var walletLogoImgStyle = {
   width: 24,
   height: 24,
@@ -3471,7 +3475,7 @@ var hintStyle = (color) => ({
   color,
   margin: "12px 0 0"
 });
-function CreatePasskeyScreen({
+function PasskeyScreen({
   onCreatePasskey,
   onBack,
   creating,
@@ -3481,7 +3485,7 @@ function CreatePasskeyScreen({
 }) {
   const { tokens } = useSwypeConfig();
   const handleCreate = popupFallback && onCreatePasskeyViaPopup ? onCreatePasskeyViaPopup : onCreatePasskey;
-  const buttonLabel = popupFallback ? "Open passkey setup" : "Create passkey";
+  const buttonLabel = popupFallback ? "Open passkey window" : "Create or verify passkey";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
@@ -3498,8 +3502,8 @@ function CreatePasskeyScreen({
             /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15", cy: "10", r: "1", fill: tokens.accent }),
             /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 14c0 1.5 1.34 2.5 3 2.5s3-1 3-2.5", stroke: tokens.accent, strokeWidth: "1.2", strokeLinecap: "round" })
           ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle3(tokens.text), children: "Create your passkey" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: popupFallback ? "Your browser requires a separate window for passkey setup. Tap the button below to continue." : "Use Face ID to sign in instantly \u2014 no passwords, no codes." }),
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle3(tokens.text), children: "Create or verify your passkey" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: popupFallback ? "Your browser requires a separate window to continue. Tap the button below to continue." : "Use Face ID to sign in instantly \u2014 no passwords, no codes." }),
           error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle2(tokens), children: error }),
           /* @__PURE__ */ jsxRuntime.jsx(InfoBanner, { children: "Your passkey is stored securely on your device. Swype never sees your biometric data." })
         ] })
@@ -3842,16 +3846,16 @@ function SetupScreen({
   error
 }) {
   const { tokens } = useSwypeConfig();
-  const effectiveMax = DEFAULT_MAX;
+  const effectiveMax = Math.min(DEFAULT_MAX, availableBalance);
   const effectiveMin = Math.min(ABSOLUTE_MIN, effectiveMax);
-  const [limit, setLimit] = react.useState(() => effectiveMax);
+  const [limit, setLimit] = react.useState(() => Math.min(availableBalance, effectiveMax));
   const [editing, setEditing] = react.useState(false);
   const [inputValue, setInputValue] = react.useState("");
   const inputRef = react.useRef(null);
   const startEditing = react.useCallback(() => {
     setInputValue(limit.toFixed(2));
     setEditing(true);
-    requestAnimationFrame(() => inputRef.current?.select());
+    requestAnimationFrame(() => inputRef.current?.focus());
   }, [limit]);
   const commitEdit = react.useCallback(() => {
     const parsed = parseFloat(inputValue);
@@ -5141,6 +5145,7 @@ function OpenWalletScreen({
   loading,
   error,
   onRetryStatus,
+  onBack,
   onLogout
 }) {
   const { tokens } = useSwypeConfig();
@@ -5171,7 +5176,7 @@ function OpenWalletScreen({
         /* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle3(tokens.textMuted), children: loading ? "Preparing authorization..." : error ? "Retry the status check after returning to the browser, or reopen your wallet if needed." : "If your wallet didn't open automatically, tap the button above" })
       ] }),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle8, children: [
           logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
           /* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
@@ -5630,7 +5635,7 @@ function StepRenderer({
   }
   if (step === "create-passkey") {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      CreatePasskeyScreen,
+      PasskeyScreen,
       {
         onCreatePasskey: handlers.onRegisterPasskey,
         onBack: handlers.onLogout,
@@ -5641,6 +5646,19 @@ function StepRenderer({
       }
     );
   }
+  if (step === "verify-passkey") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      PasskeyScreen,
+      {
+        onCreatePasskey: handlers.onRegisterPasskey,
+        onBack: handlers.onLogout,
+        creating: state.verifyingPasskeyPopup,
+        error: state.error,
+        popupFallback: true,
+        onCreatePasskeyViaPopup: handlers.onVerifyPasskeyViaPopup
+      }
+    );
+  }
   if (step === "wallet-picker") {
     return /* @__PURE__ */ jsxRuntime.jsx(
       WalletPickerScreen,
@@ -5664,6 +5682,7 @@ function StepRenderer({
         loading: state.creatingTransfer || !state.deeplinkUri,
         error: state.error || pollingError,
         onRetryStatus: handlers.onRetryMobileStatus,
+        onBack: () => handlers.onNavigate("wallet-picker"),
         onLogout: handlers.onLogout
       }
     );
@@ -5954,6 +5973,8 @@ function SwypePaymentInner({
   const initializedSelectSourceActionRef = react.useRef(null);
   const preSelectSourceStepRef = react.useRef(null);
   const pendingTokenAuthRef = react.useRef(null);
+  const reauthSessionIdRef = react.useRef(null);
+  const reauthTokenRef = react.useRef(null);
   const checkingPasskeyRef = react.useRef(false);
   const onCompleteRef = react.useRef(onComplete);
   onCompleteRef.current = onComplete;
@@ -6247,7 +6268,7 @@ function SwypePaymentInner({
       return;
     }
     if (!state.activeCredentialId) {
-      dispatch({ type: "SET_ERROR", error: "Create a passkey on this device before continuing." });
+      dispatch({ type: "SET_ERROR", error: "Create or verify a passkey on this device before continuing." });
       dispatch({ type: "NAVIGATE", step: "create-passkey" });
       return;
     }
@@ -6328,7 +6349,7 @@ function SwypePaymentInner({
       return;
     }
     if (!state.activeCredentialId) {
-      dispatch({ type: "SET_ERROR", error: "Create a passkey on this device before continuing." });
+      dispatch({ type: "SET_ERROR", error: "Create or verify a passkey on this device before continuing." });
       dispatch({ type: "NAVIGATE", step: "create-passkey" });
       return;
     }
@@ -6356,12 +6377,15 @@ function SwypePaymentInner({
         handlingMobileReturnRef.current = false;
         mobileSetupFlowRef.current = true;
         setupAccountIdRef.current = state.selectedAccountId;
+        reauthSessionIdRef.current = session.id;
+        reauthTokenRef.current = null;
         persistMobileFlowState({
           accountId: state.selectedAccountId,
           sessionId: session.id,
           deeplinkUri: session.uri,
           providerId: matchedProvider?.id ?? null,
-          isSetup: true
+          isSetup: true,
+          isReauthorization: true
         });
         dispatch({ type: "MOBILE_DEEPLINK_READY", deeplinkUri: session.uri });
         triggerDeeplink(session.uri);
@@ -6402,7 +6426,7 @@ function SwypePaymentInner({
       return;
     }
     if (!state.activeCredentialId) {
-      dispatch({ type: "SET_ERROR", error: "Create a passkey on this device before continuing." });
+      dispatch({ type: "SET_ERROR", error: "Create or verify a passkey on this device before continuing." });
       dispatch({ type: "NAVIGATE", step: "create-passkey" });
       return;
     }
@@ -6432,12 +6456,16 @@ function SwypePaymentInner({
         handlingMobileReturnRef.current = false;
         mobileSetupFlowRef.current = true;
         setupAccountIdRef.current = state.selectedAccountId;
+        reauthSessionIdRef.current = session.id;
+        reauthTokenRef.current = { walletId: _walletId, tokenSymbol };
         persistMobileFlowState({
           accountId: state.selectedAccountId,
           sessionId: session.id,
           deeplinkUri: session.uri,
           providerId: matchedProvider?.id ?? null,
-          isSetup: true
+          isSetup: true,
+          isReauthorization: true,
+          reauthorizationToken: { walletId: _walletId, tokenSymbol }
         });
         dispatch({ type: "MOBILE_DEEPLINK_READY", deeplinkUri: session.uri });
         triggerDeeplink(session.uri);
@@ -6499,7 +6527,7 @@ function SwypePaymentInner({
   const handleSelectProvider = react.useCallback(async (providerId) => {
     dispatch({ type: "SELECT_PROVIDER", providerId });
     if (!state.activeCredentialId) {
-      dispatch({ type: "SET_ERROR", error: "Create a passkey on this device before continuing." });
+      dispatch({ type: "SET_ERROR", error: "Create or verify a passkey on this device before continuing." });
       dispatch({ type: "NAVIGATE", step: "create-passkey" });
       return;
     }
@@ -6710,6 +6738,31 @@ function SwypePaymentInner({
         } catch {
         }
       }
+      if (resolved.step === "open-wallet" && persisted && persisted.isReauthorization && persisted.sessionId) {
+        try {
+          const session = await fetchAuthorizationSession(apiBaseUrl, persisted.sessionId);
+          if (cancelled) return;
+          if (session.status === "AUTHORIZED") {
+            clearMobileFlowState();
+            dispatch({ type: "NAVIGATE", step: "deposit" });
+            if (persisted.reauthorizationToken) {
+              dispatch({ type: "SELECT_TOKEN", walletId: persisted.reauthorizationToken.walletId, tokenSymbol: persisted.reauthorizationToken.tokenSymbol });
+            }
+            return;
+          }
+        } catch {
+        }
+        reauthSessionIdRef.current = persisted.sessionId;
+        reauthTokenRef.current = persisted.reauthorizationToken ?? null;
+        mobileSetupFlowRef.current = true;
+        setupAccountIdRef.current = persisted.accountId ?? null;
+        dispatch({
+          type: "ENTER_MOBILE_FLOW",
+          deeplinkUri: persisted.deeplinkUri,
+          providerId: persisted.providerId
+        });
+        return;
+      }
       if (resolved.step === "open-wallet" && persisted && persisted.accountId && !persisted.transferId) {
         clearMobileFlowState();
         dispatch({ type: "NAVIGATE", step: "deposit" });
@@ -6763,6 +6816,7 @@ function SwypePaymentInner({
           });
           pollingTransferIdRef.current = persisted.transferId ?? null;
           mobileSetupFlowRef.current = persisted.isSetup;
+          setupAccountIdRef.current = persisted.accountId ?? null;
           if (persisted.transferId) pollingRef.current.startPolling(persisted.transferId);
           return;
         }
@@ -6773,6 +6827,7 @@ function SwypePaymentInner({
         });
         pollingTransferIdRef.current = persisted.transferId ?? null;
         mobileSetupFlowRef.current = persisted.isSetup;
+        setupAccountIdRef.current = persisted.accountId ?? null;
         if (persisted.transferId) pollingRef.current.startPolling(persisted.transferId);
         return;
       }
@@ -6977,9 +7032,36 @@ function SwypePaymentInner({
     if (!state.activeCredentialId || !setupAccountIdRef.current) return;
     const accountId = setupAccountIdRef.current;
     const credentialId = state.activeCredentialId;
+    const isReauth = !!reauthSessionIdRef.current;
+    const sessionId = reauthSessionIdRef.current;
+    const tokenSelection = reauthTokenRef.current;
     let cancelled = false;
     const POLL_INTERVAL_MS = 3e3;
-    const poll = async () => {
+    const pollReauthorization = async () => {
+      try {
+        if (!sessionId || cancelled) return;
+        const session = await fetchAuthorizationSession(apiBaseUrl, sessionId);
+        if (cancelled) return;
+        if (session.status === "AUTHORIZED") {
+          cancelled = true;
+          mobileSetupFlowRef.current = false;
+          setupAccountIdRef.current = null;
+          reauthSessionIdRef.current = null;
+          reauthTokenRef.current = null;
+          clearMobileFlowState();
+          try {
+            await reloadAccounts();
+          } catch {
+          }
+          dispatch({ type: "MOBILE_SETUP_COMPLETE" });
+          if (tokenSelection) {
+            dispatch({ type: "SELECT_TOKEN", walletId: tokenSelection.walletId, tokenSymbol: tokenSelection.tokenSymbol });
+          }
+        }
+      } catch {
+      }
+    };
+    const pollWalletActive = async () => {
       try {
         const token = await getAccessTokenRef.current();
         if (!token || cancelled) return;
@@ -6991,12 +7073,16 @@ function SwypePaymentInner({
           mobileSetupFlowRef.current = false;
           setupAccountIdRef.current = null;
           clearMobileFlowState();
-          await reloadAccounts();
+          try {
+            await reloadAccounts();
+          } catch {
+          }
           dispatch({ type: "MOBILE_SETUP_COMPLETE" });
         }
       } catch {
       }
     };
+    const poll = isReauth ? pollReauthorization : pollWalletActive;
     poll();
     const intervalId = window.setInterval(poll, POLL_INTERVAL_MS);
     const handleVisibility = () => {
@@ -7166,11 +7252,11 @@ function SwypePaymentInner({
 }
 
 exports.AdvancedSourceScreen = AdvancedSourceScreen;
-exports.CreatePasskeyScreen = CreatePasskeyScreen;
 exports.IconCircle = IconCircle;
 exports.InfoBanner = InfoBanner;
 exports.OutlineButton = OutlineButton;
 exports.PasskeyIframeBlockedError = PasskeyIframeBlockedError;
+exports.PasskeyScreen = PasskeyScreen;
 exports.PoweredByFooter = PoweredByFooter;
 exports.PrimaryButton = PrimaryButton;
 exports.ScreenHeader = ScreenHeader;