@swype-org/react-sdk 0.1.329 → 0.1.333

package/dist/index.d.cts

@@ -958,8 +958,16 @@ interface PasskeyScreenProps {
     popupFallback?: boolean;
     /** Opens a pop-up window on the Blink domain for passkey registration. */
     onCreatePasskeyViaPopup?: () => void;
-}
-declare function PasskeyScreen({ onCreatePasskey, onBack, onLogout, creating, error, popupFallback, onCreatePasskeyViaPopup, }: PasskeyScreenProps): react_jsx_runtime.JSX.Element;
+    /** Creates a brand-new passkey on this device (for users who already have one on another device). */
+    onCreateNewPasskey?: () => void;
+    /** Popup fallback variant of onCreateNewPasskey. */
+    onCreateNewPasskeyViaPopup?: () => void;
+    /** When set, overrides `popupFallback` for the create-new link only. */
+    createNewPopupFallback?: boolean;
+    /** Loading state while a new passkey is being created. */
+    creatingNewPasskey?: boolean;
+}
+declare function PasskeyScreen({ onCreatePasskey, onBack, onLogout, creating, error, popupFallback, onCreatePasskeyViaPopup, onCreateNewPasskey, onCreateNewPasskeyViaPopup, createNewPopupFallback, creatingNewPasskey, }: PasskeyScreenProps): react_jsx_runtime.JSX.Element;
 
 interface VerifyPasskeyScreenProps {
     onVerify: () => void;

package/dist/index.d.ts

@@ -958,8 +958,16 @@ interface PasskeyScreenProps {
     popupFallback?: boolean;
     /** Opens a pop-up window on the Blink domain for passkey registration. */
     onCreatePasskeyViaPopup?: () => void;
-}
-declare function PasskeyScreen({ onCreatePasskey, onBack, onLogout, creating, error, popupFallback, onCreatePasskeyViaPopup, }: PasskeyScreenProps): react_jsx_runtime.JSX.Element;
+    /** Creates a brand-new passkey on this device (for users who already have one on another device). */
+    onCreateNewPasskey?: () => void;
+    /** Popup fallback variant of onCreateNewPasskey. */
+    onCreateNewPasskeyViaPopup?: () => void;
+    /** When set, overrides `popupFallback` for the create-new link only. */
+    createNewPopupFallback?: boolean;
+    /** Loading state while a new passkey is being created. */
+    creatingNewPasskey?: boolean;
+}
+declare function PasskeyScreen({ onCreatePasskey, onBack, onLogout, creating, error, popupFallback, onCreatePasskeyViaPopup, onCreateNewPasskey, onCreateNewPasskeyViaPopup, createNewPopupFallback, creatingNewPasskey, }: PasskeyScreenProps): react_jsx_runtime.JSX.Element;
 
 interface VerifyPasskeyScreenProps {
     onVerify: () => void;

package/dist/index.js

@@ -1948,7 +1948,7 @@ function resolvePhase(state) {
   const isFundingSourceSubflow = !state.loginRequested && (currentPhase.step === "token-picker" || currentPhase.step === "one-tap-setup" || currentPhase.step === "select-source" || currentPhase.step === "confirm-sign" || currentPhase.step === "guest-token-picker" && guestTokenPickerEligible);
   const walletPickerSwitchEligible = currentPhase.step === "wallet-picker" && currentPhase.reason === "switch" && !state.creatingTransfer && !(state.mobileFlow && state.deeplinkUri);
   const missingActivePasskeyCredential = state.passkeyConfigLoaded && !state.activeCredentialId;
-  const shouldPromptPasskeyVerification = missingActivePasskeyCredential && state.knownCredentialIds.length > 0 && state.passkeyPopupNeeded;
+  const shouldPromptPasskeyVerification = missingActivePasskeyCredential && state.knownCredentialIds.length > 0;
   const guestPreauthClaimPending = state.guestPreauthAccountId != null && state.guestSessionToken != null && state.privyAuthenticated && state.activeCredentialId != null && !state.guestPreauthSetupCompletePending && !state.error;
   const branchGuestSetupComplete = state.guestPreauthSetupCompletePending && state.privyReady && state.privyAuthenticated;
   const branchKeepGuestPreauthPin = !branchGuestSetupComplete && guestPreauthPinsCurrentPhase;
@@ -3757,16 +3757,33 @@ function PasskeyScreen({
   creating,
   error,
   popupFallback = false,
-  onCreatePasskeyViaPopup
+  onCreatePasskeyViaPopup,
+  onCreateNewPasskey,
+  onCreateNewPasskeyViaPopup,
+  createNewPopupFallback,
+  creatingNewPasskey
 }) {
   const { tokens } = useBlinkConfig();
   const handleCreate = popupFallback && onCreatePasskeyViaPopup ? onCreatePasskeyViaPopup : onCreatePasskey;
   const buttonLabel = popupFallback ? "Open Passkey Window" : "Verify Passkey";
+  const showCreateNewLink = onCreateNewPasskey != null;
+  const usePopupForNew = createNewPopupFallback ?? popupFallback;
+  const handleCreateNew = usePopupForNew && onCreateNewPasskeyViaPopup ? onCreateNewPasskeyViaPopup : onCreateNewPasskey;
   return /* @__PURE__ */ jsxs(
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(PrimaryButton, { onClick: handleCreate, disabled: creating, loading: creating, children: buttonLabel }),
+        /* @__PURE__ */ jsx(PrimaryButton, { onClick: handleCreate, disabled: creating || creatingNewPasskey, loading: creating, children: buttonLabel }),
+        showCreateNewLink && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleCreateNew,
+            disabled: creatingNewPasskey || creating,
+            style: createNewLinkStyle(tokens.textMuted),
+            children: creatingNewPasskey ? "Creating passkey\u2026" : "Create a new passkey for this device"
+          }
+        ),
         /* @__PURE__ */ jsx(PoweredByFooter, {})
       ] }),
       children: [
@@ -3801,6 +3818,17 @@ var subtitleStyle3 = (color) => ({
   margin: "0 0 20px",
   lineHeight: 1.5
 });
+var createNewLinkStyle = (color) => ({
+  background: "none",
+  border: "none",
+  color,
+  fontSize: "0.85rem",
+  cursor: "pointer",
+  padding: "8px 16px",
+  textDecoration: "underline",
+  fontFamily: "inherit",
+  width: "100%"
+});
 var errorBannerStyle2 = (tokens) => ({
   background: tokens.errorBg,
   border: `1px solid ${tokens.error}66`,
@@ -4984,13 +5012,14 @@ function DepositScreen({
   const selectedProviderLogo = KNOWN_LOGOS[selectedProviderName.toLowerCase()];
   const totalAccountBalance = selectedAccount ? selectedAccount.wallets.reduce((sum, w) => sum + w.balance.available.amount, 0) : availableBalance;
   const isLowBalance = availableBalance < minDepositFloor;
+  const insufficientFunds = availableBalance < amount;
   const exceedsLimit = remainingLimit != null && amount > remainingLimit && !isLowBalance;
-  const canDeposit = amount >= minDepositFloor && !exceedsLimit && !isLowBalance && !processing;
+  const canDeposit = amount >= minDepositFloor && !exceedsLimit && !isLowBalance && !insufficientFunds && !processing;
   return /* @__PURE__ */ jsxs(
     ScreenLayout,
     {
       footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-        !accountPickerOpen && !tokenPickerOpen && (exceedsLimit && onIncreaseLimit ? /* @__PURE__ */ jsx(PrimaryButton, { onClick: onIncreaseLimit, loading: increasingLimit, children: "Increase limit" }) : /* @__PURE__ */ jsx(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: "Confirm" })),
+        !accountPickerOpen && !tokenPickerOpen && (exceedsLimit && onIncreaseLimit ? /* @__PURE__ */ jsx(PrimaryButton, { onClick: onIncreaseLimit, loading: increasingLimit, children: "Increase limit" }) : /* @__PURE__ */ jsx(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: insufficientFunds ? "Insufficient Funds" : "Confirm" })),
         /* @__PURE__ */ jsx(PoweredByFooter, {})
       ] }),
       children: [
@@ -7308,13 +7337,15 @@ function StepRendererContent({
       return /* @__PURE__ */ jsx(
         PasskeyScreen,
         {
-          onCreatePasskey: handlers.onRegisterPasskey,
+          onCreatePasskey: handlers.onVerifyPasskey,
           onBack: handlers.onLogout,
           onLogout: handlers.onLogout,
-          creating: state.verifyingPasskeyPopup,
+          creating: state.registeringPasskey,
           error: state.error,
-          popupFallback: true,
-          onCreatePasskeyViaPopup: handlers.onVerifyPasskeyViaPopup
+          onCreateNewPasskey: handlers.onCreateNewPasskey,
+          onCreateNewPasskeyViaPopup: handlers.onCreateNewPasskeyViaPopup,
+          createNewPopupFallback: state.passkeyPopupNeeded,
+          creatingNewPasskey: state.registeringPasskey
         }
       );
     case "wallet-picker": {
@@ -7864,6 +7895,53 @@ function usePasskeyHandlers(dispatch, apiBaseUrl, accounts, knownCredentialIds)
       dispatch({ type: "SET_REGISTERING_PASSKEY", value: false });
     }
   }, [user, knownCredentialIds, activateExistingCredential, completePasskeyRegistration, dispatch]);
+  const handleVerifyPasskey = useCallback(async () => {
+    dispatch({ type: "SET_REGISTERING_PASSKEY", value: true });
+    dispatch({ type: "SET_ERROR", error: null });
+    try {
+      const matched = await findDevicePasskey(knownCredentialIds);
+      if (matched) {
+        await activateExistingCredential(matched);
+      } else {
+        dispatch({
+          type: "SET_ERROR",
+          error: "No matching passkey found on this device. Please try again."
+        });
+      }
+    } catch (err) {
+      captureException(err);
+      dispatch({
+        type: "SET_ERROR",
+        error: err instanceof Error ? err.message : "Passkey verification failed."
+      });
+    } finally {
+      dispatch({ type: "SET_REGISTERING_PASSKEY", value: false });
+    }
+  }, [knownCredentialIds, activateExistingCredential, dispatch]);
+  const handleCreateNewPasskey = useCallback(async () => {
+    dispatch({ type: "SET_REGISTERING_PASSKEY", value: true });
+    dispatch({ type: "SET_ERROR", error: null });
+    try {
+      const passkeyDisplayName = user?.email?.address ?? user?.google?.name ?? user?.id ?? "Blink User";
+      const { credentialId, publicKey } = await createPasskeyCredential({
+        userId: user?.id ?? "unknown",
+        displayName: passkeyDisplayName
+      });
+      await completePasskeyRegistration(credentialId, publicKey);
+    } catch (err) {
+      if (err instanceof PasskeyIframeBlockedError) {
+        dispatch({ type: "SET_PASSKEY_POPUP_NEEDED", needed: true });
+      } else {
+        captureException(err);
+        dispatch({
+          type: "SET_ERROR",
+          error: err instanceof Error ? err.message : "Failed to register passkey"
+        });
+      }
+    } finally {
+      dispatch({ type: "SET_REGISTERING_PASSKEY", value: false });
+    }
+  }, [user, completePasskeyRegistration, dispatch]);
   const handleCreatePasskeyViaPopup = useCallback(async () => {
     dispatch({ type: "SET_REGISTERING_PASSKEY", value: true });
     dispatch({ type: "SET_ERROR", error: null });
@@ -7910,6 +7988,35 @@ function usePasskeyHandlers(dispatch, apiBaseUrl, accounts, knownCredentialIds)
       dispatch({ type: "SET_REGISTERING_PASSKEY", value: false });
     }
   }, [user, knownCredentialIds, getAccessToken, apiBaseUrl, activateExistingCredential, dispatch]);
+  const handleCreateNewPasskeyViaPopup = useCallback(async () => {
+    dispatch({ type: "SET_REGISTERING_PASSKEY", value: true });
+    dispatch({ type: "SET_ERROR", error: null });
+    try {
+      const token = await getAccessToken();
+      const passkeyDisplayName = user?.email?.address ?? user?.google?.name ?? user?.id ?? "Blink User";
+      const popupOptions = buildPasskeyPopupOptions({
+        userId: user?.id ?? "unknown",
+        displayName: passkeyDisplayName,
+        authToken: token ?? void 0,
+        apiBaseUrl
+      });
+      const { credentialId, publicKey } = await createPasskeyViaPopup(popupOptions);
+      dispatch({ type: "PASSKEY_ACTIVATED", credentialId, publicKey });
+      localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
+      if (token) {
+        reportPasskeyActivity(apiBaseUrl, token, credentialId).catch(() => {
+        });
+      }
+    } catch (err) {
+      captureException(err);
+      dispatch({
+        type: "SET_ERROR",
+        error: err instanceof Error ? err.message : "Failed to register passkey"
+      });
+    } finally {
+      dispatch({ type: "SET_REGISTERING_PASSKEY", value: false });
+    }
+  }, [user, getAccessToken, apiBaseUrl, dispatch]);
   const handleVerifyPasskeyViaPopup = useCallback(async () => {
     dispatch({ type: "SET_VERIFYING_PASSKEY", value: true });
     dispatch({ type: "SET_ERROR", error: null });
@@ -7952,7 +8059,10 @@ function usePasskeyHandlers(dispatch, apiBaseUrl, accounts, knownCredentialIds)
   }, [knownCredentialIds, getAccessToken, apiBaseUrl, dispatch]);
   return {
     handleRegisterPasskey,
+    handleVerifyPasskey,
+    handleCreateNewPasskey,
     handleCreatePasskeyViaPopup,
+    handleCreateNewPasskeyViaPopup,
     handleVerifyPasskeyViaPopup,
     checkingPasskeyRef
   };
@@ -9570,28 +9680,6 @@ function usePasskeyCheckEffect(deps) {
           await restoreState(activeCredentialId, token);
           return;
         }
-        if (cancelled) return;
-        const credentialIds = allPasskeys.map((p) => p.credentialId);
-        let matched = null;
-        if (isSafari() && isInCrossOriginIframe()) {
-          matched = await findDevicePasskeyViaPopup({
-            credentialIds,
-            rpId: resolvePasskeyRpId(),
-            authToken: token ?? void 0,
-            apiBaseUrl
-          });
-        } else {
-          matched = await findDevicePasskey(credentialIds);
-        }
-        if (cancelled) return;
-        if (matched) {
-          const publicKey = allPasskeys.find((p) => p.credentialId === matched)?.publicKey;
-          dispatch({ type: "PASSKEY_ACTIVATED", credentialId: matched, publicKey });
-          window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, matched);
-          reportPasskeyActivity(apiBaseUrl, token, matched).catch(() => {
-          });
-          await restoreState(matched, token);
-        }
       } catch (err) {
         dispatch({
           type: "PASSKEY_CONFIG_LOADED",
@@ -10654,7 +10742,7 @@ function BlinkPaymentInner({
     paymentReducer,
     {
       depositAmount,
-      passkeyPopupNeeded: isSafari() && isInCrossOriginIframe(),
+      passkeyPopupNeeded: isSafari() && isInCrossOriginIframe() && !isDesktop,
       activeCredentialId: typeof window === "undefined" ? null : window.localStorage.getItem(ACTIVE_CREDENTIAL_STORAGE_KEY)
     },
     createInitialState
@@ -11010,7 +11098,10 @@ function BlinkPaymentInner({
       dispatch({ type: "BACK_TO_LOGIN" });
     },
     onRegisterPasskey: passkey.handleRegisterPasskey,
+    onVerifyPasskey: passkey.handleVerifyPasskey,
+    onCreateNewPasskey: passkey.handleCreateNewPasskey,
     onCreatePasskeyViaPopup: passkey.handleCreatePasskeyViaPopup,
+    onCreateNewPasskeyViaPopup: passkey.handleCreateNewPasskeyViaPopup,
     onVerifyPasskeyViaPopup: passkey.handleVerifyPasskeyViaPopup,
     onPrepareProvider: provider.handlePrepareProvider,
     onSelectProvider: provider.handleSelectProvider,