@swype-org/react-sdk 0.1.26 → 0.1.28

package/dist/index.d.cts

@@ -297,8 +297,16 @@ interface SwypePaymentProps {
      * wallet extensions are unavailable.
      */
     useWalletConnector?: boolean;
+    /**
+     * Caller-supplied UUID v4 used as the transfer ID for idempotency.
+     *
+     * When provided, the transfer is created with this ID instead of a
+     * randomly generated one. This allows callers to safely retry the payment
+     * flow without creating duplicate transfers.
+     */
+    idempotencyKey?: string;
 }
-declare function SwypePayment({ destination, onComplete, onError, useWalletConnector, }: SwypePaymentProps): react_jsx_runtime.JSX.Element | null;
+declare function SwypePayment({ destination, onComplete, onError, useWalletConnector, idempotencyKey, }: SwypePaymentProps): react_jsx_runtime.JSX.Element | null;
 
 type AccessTokenGetter = () => Promise<string | null | undefined>;
 /**
@@ -320,17 +328,20 @@ declare function createPasskeyCredential(params: {
     publicKey: string;
 }>;
 /**
- * Checks whether the current device's platform authenticator holds a passkey
- * matching the given credential ID.
- *
- * Uses `navigator.credentials.get()` with a throwaway challenge and a short
- * timeout. If the authenticator responds, the device has the key. If it
- * throws (NotAllowedError, timeout, etc.), the device does not.
- *
- * @param credentialId - Base64-encoded WebAuthn credential ID from the server.
- * @returns `true` if the device can authenticate with this credential.
+ * @deprecated Use {@link findDevicePasskey} instead, which checks all
+ * credentials in a single WebAuthn call.
  */
 declare function deviceHasPasskey(credentialId: string): Promise<boolean>;
+/**
+ * Determines which (if any) of the given server-registered passkeys exists on
+ * the current device. All credential IDs are passed in a single
+ * `navigator.credentials.get()` call so the browser shows at most one prompt
+ * and the platform authenticator automatically selects the matching key.
+ *
+ * @param credentialIds - Base64-encoded WebAuthn credential IDs from the server.
+ * @returns The matching credential ID, or `null` if none are on this device.
+ */
+declare function findDevicePasskey(credentialIds: string[]): Promise<string | null>;
 interface UseTransferPollingResult {
     transfer: Transfer | null;
     error: string | null;
@@ -413,6 +424,8 @@ declare function fetchProviders(apiBaseUrl: string, token: string): Promise<Prov
 declare function fetchChains(apiBaseUrl: string, token: string): Promise<Chain[]>;
 declare function fetchAccounts(apiBaseUrl: string, token: string, credentialId: string): Promise<Account[]>;
 interface CreateTransferParams {
+    /** Caller-supplied UUID v4 for idempotency. If omitted, a random UUID is generated. */
+    id?: string;
     credentialId: string;
     sourceType: SourceType;
     sourceId: string;
@@ -473,4 +486,4 @@ declare namespace api {
   export { type api_CreateTransferParams as CreateTransferParams, api_createTransfer as createTransfer, api_fetchAccounts as fetchAccounts, api_fetchAuthorizationSession as fetchAuthorizationSession, api_fetchChains as fetchChains, api_fetchProviders as fetchProviders, api_fetchTransfer as fetchTransfer, api_fetchUserConfig as fetchUserConfig, api_registerPasskey as registerPasskey, api_reportActionCompletion as reportActionCompletion, api_signTransfer as signTransfer, api_updateUserConfig as updateUserConfig, api_updateUserConfigBySession as updateUserConfigBySession };
 }
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, type ListResponse, type PaymentStep, type Provider, type SourceOption, type SourceSelection, type SourceType, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, deviceHasPasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, type ListResponse, type PaymentStep, type Provider, type SourceOption, type SourceSelection, type SourceType, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

package/dist/index.d.ts

@@ -297,8 +297,16 @@ interface SwypePaymentProps {
      * wallet extensions are unavailable.
      */
     useWalletConnector?: boolean;
+    /**
+     * Caller-supplied UUID v4 used as the transfer ID for idempotency.
+     *
+     * When provided, the transfer is created with this ID instead of a
+     * randomly generated one. This allows callers to safely retry the payment
+     * flow without creating duplicate transfers.
+     */
+    idempotencyKey?: string;
 }
-declare function SwypePayment({ destination, onComplete, onError, useWalletConnector, }: SwypePaymentProps): react_jsx_runtime.JSX.Element | null;
+declare function SwypePayment({ destination, onComplete, onError, useWalletConnector, idempotencyKey, }: SwypePaymentProps): react_jsx_runtime.JSX.Element | null;
 
 type AccessTokenGetter = () => Promise<string | null | undefined>;
 /**
@@ -320,17 +328,20 @@ declare function createPasskeyCredential(params: {
     publicKey: string;
 }>;
 /**
- * Checks whether the current device's platform authenticator holds a passkey
- * matching the given credential ID.
- *
- * Uses `navigator.credentials.get()` with a throwaway challenge and a short
- * timeout. If the authenticator responds, the device has the key. If it
- * throws (NotAllowedError, timeout, etc.), the device does not.
- *
- * @param credentialId - Base64-encoded WebAuthn credential ID from the server.
- * @returns `true` if the device can authenticate with this credential.
+ * @deprecated Use {@link findDevicePasskey} instead, which checks all
+ * credentials in a single WebAuthn call.
  */
 declare function deviceHasPasskey(credentialId: string): Promise<boolean>;
+/**
+ * Determines which (if any) of the given server-registered passkeys exists on
+ * the current device. All credential IDs are passed in a single
+ * `navigator.credentials.get()` call so the browser shows at most one prompt
+ * and the platform authenticator automatically selects the matching key.
+ *
+ * @param credentialIds - Base64-encoded WebAuthn credential IDs from the server.
+ * @returns The matching credential ID, or `null` if none are on this device.
+ */
+declare function findDevicePasskey(credentialIds: string[]): Promise<string | null>;
 interface UseTransferPollingResult {
     transfer: Transfer | null;
     error: string | null;
@@ -413,6 +424,8 @@ declare function fetchProviders(apiBaseUrl: string, token: string): Promise<Prov
 declare function fetchChains(apiBaseUrl: string, token: string): Promise<Chain[]>;
 declare function fetchAccounts(apiBaseUrl: string, token: string, credentialId: string): Promise<Account[]>;
 interface CreateTransferParams {
+    /** Caller-supplied UUID v4 for idempotency. If omitted, a random UUID is generated. */
+    id?: string;
     credentialId: string;
     sourceType: SourceType;
     sourceId: string;
@@ -473,4 +486,4 @@ declare namespace api {
   export { type api_CreateTransferParams as CreateTransferParams, api_createTransfer as createTransfer, api_fetchAccounts as fetchAccounts, api_fetchAuthorizationSession as fetchAuthorizationSession, api_fetchChains as fetchChains, api_fetchProviders as fetchProviders, api_fetchTransfer as fetchTransfer, api_fetchUserConfig as fetchUserConfig, api_registerPasskey as registerPasskey, api_reportActionCompletion as reportActionCompletion, api_signTransfer as signTransfer, api_updateUserConfig as updateUserConfig, api_updateUserConfigBySession as updateUserConfigBySession };
 }
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, type ListResponse, type PaymentStep, type Provider, type SourceOption, type SourceSelection, type SourceType, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, deviceHasPasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, type ListResponse, type PaymentStep, type Provider, type SourceOption, type SourceSelection, type SourceType, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useRef, useState, useCallback, useMemo, useContext, useEffect } from 'react';
+import { createContext, useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
 import { PrivyProvider, usePrivy } from '@privy-io/react-auth';
 import { createConfig, http, WagmiProvider, useConfig, useConnect, useSwitchChain } from 'wagmi';
 import { mainnet, arbitrum, base } from 'wagmi/chains';
@@ -74,6 +74,26 @@ var wagmiConfig = createConfig({
     [base.id]: 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 = createContext(null);
 function SwypeProvider({
   apiBaseUrl,
@@ -84,6 +104,15 @@ function SwypeProvider({
   if (!queryClientRef.current) {
     queryClientRef.current = new QueryClient();
   }
+  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] = useState(null);
   const setDepositAmount = useCallback((amount) => {
     setDepositAmountRaw(amount);
@@ -187,7 +216,7 @@ async function fetchAccounts(apiBaseUrl, token, credentialId) {
 }
 async function createTransfer(apiBaseUrl, token, params) {
   const body = {
-    id: crypto.randomUUID(),
+    id: params.id ?? crypto.randomUUID(),
     credentialId: params.credentialId,
     sources: [{ [params.sourceType]: params.sourceId }],
     destinations: [
@@ -784,6 +813,11 @@ async function createPasskeyCredential(params) {
   };
 }
 async function deviceHasPasskey(credentialId) {
+  const found = await findDevicePasskey([credentialId]);
+  return found != null;
+}
+async function findDevicePasskey(credentialIds) {
+  if (credentialIds.length === 0) return null;
   try {
     const challenge = new Uint8Array(32);
     crypto.getRandomValues(challenge);
@@ -792,17 +826,18 @@ async function deviceHasPasskey(credentialId) {
       publicKey: {
         challenge,
         rpId: resolvePasskeyRpId(),
-        allowCredentials: [{
+        allowCredentials: credentialIds.map((id) => ({
           type: "public-key",
-          id: base64ToBytes(credentialId)
-        }],
+          id: base64ToBytes(id)
+        })),
         userVerification: "discouraged",
         timeout: 3e4
       }
     });
-    return assertion != null;
+    if (!assertion) return null;
+    return toBase64(assertion.rawId);
   } catch {
-    return false;
+    return null;
   }
 }
 function useTransferPolling(intervalMs = 3e3) {
@@ -2167,7 +2202,8 @@ function SwypePayment({
   destination,
   onComplete,
   onError,
-  useWalletConnector
+  useWalletConnector,
+  idempotencyKey
 }) {
   const { apiBaseUrl, tokens, depositAmount } = useSwypeConfig();
   const { ready, authenticated, user, login, logout, getAccessToken } = usePrivy();
@@ -2234,20 +2270,20 @@ function SwypePayment({
           }
           return;
         }
-        for (const pk of allPasskeys) {
-          if (cancelled) return;
-          if (await deviceHasPasskey(pk.credentialId)) {
-            setActiveCredentialId(pk.credentialId);
-            window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, pk.credentialId);
-            if (depositAmount != null && depositAmount > 0) {
-              setStep("ready");
-            } else {
-              setStep("enter-amount");
-            }
-            return;
+        if (cancelled) return;
+        const credentialIds = allPasskeys.map((p) => p.credentialId);
+        const matched = await findDevicePasskey(credentialIds);
+        if (cancelled) return;
+        if (matched) {
+          setActiveCredentialId(matched);
+          window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, matched);
+          if (depositAmount != null && depositAmount > 0) {
+            setStep("ready");
+          } else {
+            setStep("enter-amount");
           }
+          return;
         }
-        if (cancelled) return;
         setStep("register-passkey");
       } catch {
         if (!cancelled) {
@@ -2481,6 +2517,7 @@ function SwypePayment({
         }
       }
       const t = await createTransfer(apiBaseUrl, token, {
+        id: idempotencyKey,
         credentialId: activeCredentialId,
         sourceType: effectiveSourceType,
         sourceId: effectiveSourceId,
@@ -3022,7 +3059,7 @@ function SwypePayment({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(
           "div",
           {
             style: {
@@ -3035,74 +3072,39 @@ function SwypePayment({
               border: `1px solid ${tokens.border}`,
               lineHeight: 1.7
             },
-            children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: { display: "flex", justifyContent: "space-between" },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { children: "To" }),
-                    /* @__PURE__ */ jsxs(
-                      "span",
-                      {
-                        style: {
-                          fontFamily: '"SF Mono", "Fira Code", monospace',
-                          fontSize: "0.8rem"
-                        },
-                        children: [
-                          destination.address.slice(0, 6),
-                          "...",
-                          destination.address.slice(-4)
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: { display: "flex", justifyContent: "space-between" },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { children: "Token" }),
-                    /* @__PURE__ */ jsx("span", { style: { fontWeight: 600 }, children: destination.token.symbol })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { children: "From" }),
-                    noAccounts ? /* @__PURE__ */ jsx("span", { style: { fontWeight: 500, color: tokens.textMuted }, children: "New account" }) : /* @__PURE__ */ jsx(
-                      AccountDropdown,
-                      {
-                        accounts,
-                        selectedAccountId,
-                        selectedWalletId,
-                        onSelect: (id) => {
-                          setSelectedAccountId(id);
-                          setSelectedWalletId(null);
-                          setConnectingNewAccount(false);
-                          setSelectedProviderId(null);
-                        },
-                        onWalletSelect: (accountId, walletId) => {
-                          setSelectedAccountId(accountId);
-                          setSelectedWalletId(walletId);
-                          setConnectingNewAccount(false);
-                          setSelectedProviderId(null);
-                        }
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center"
+                },
+                children: noAccounts ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("span", { children: "From" }),
+                  /* @__PURE__ */ jsx(
+                    AccountDropdown,
+                    {
+                      accounts,
+                      selectedAccountId,
+                      selectedWalletId,
+                      onSelect: (id) => {
+                        setSelectedAccountId(id);
+                        setSelectedWalletId(null);
+                        setConnectingNewAccount(false);
+                        setSelectedProviderId(null);
+                      },
+                      onWalletSelect: (accountId, walletId) => {
+                        setSelectedAccountId(accountId);
+                        setSelectedWalletId(walletId);
+                        setConnectingNewAccount(false);
+                        setSelectedProviderId(null);
                       }
-                    )
-                  ]
-                }
-              )
-            ]
+                    }
+                  )
+                ] })
+              }
+            )
           }
         ),
         noAccounts && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
@@ -3368,10 +3370,9 @@ function SwypePayment({
       }
     };
     const regMsg = getRegistrationMessage();
-    const transferStatus = getDisplayTransferStatus(polling.transfer, transfer);
-    const transferIdSuffix = getTransferIdSuffix(polling.transfer, transfer);
-    const statusLabel = creatingTransfer ? "Creating transfer..." : mobileFlow ? "Waiting for authorization..." : authExecutor.executing && regMsg.label ? regMsg.label : authExecutor.executing ? "Authorizing..." : transferSigning.signing ? "Preparing transfer..." : polling.isPolling ? "Processing payment..." : "Please wait...";
-    const statusDescription = creatingTransfer ? "Setting up your transfer..." : mobileFlow ? "Complete the authorization in your wallet app, then return here." : authExecutor.executing && regMsg.description ? regMsg.description : authExecutor.executing ? "Complete the wallet prompts to authorize this payment." : transferSigning.signing ? "Waiting for backend to prepare your transfer payload..." : polling.isPolling ? "Your payment is being processed. This usually takes a few moments." : "Hang tight...";
+    getDisplayTransferStatus(polling.transfer, transfer);
+    getTransferIdSuffix(polling.transfer, transfer);
+    const statusLabel = creatingTransfer ? "Creating Transfer" : mobileFlow ? "Waiting for Authorization" : authExecutor.executing && regMsg.label ? regMsg.label : authExecutor.executing ? "Authorizing" : transferSigning.signing ? "Sending transfer" : polling.isPolling ? "Transfer Sent" : "Please wait...";
     return /* @__PURE__ */ jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "16px 0" }, children: [
       /* @__PURE__ */ jsx(Spinner, { size: 48 }),
       /* @__PURE__ */ jsx(
@@ -3385,36 +3386,6 @@ function SwypePayment({
           children: statusLabel
         }
       ),
-      /* @__PURE__ */ jsx(
-        "p",
-        {
-          style: {
-            fontSize: "0.85rem",
-            color: tokens.textSecondary,
-            margin: 0,
-            lineHeight: 1.5
-          },
-          children: statusDescription
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "p",
-        {
-          style: {
-            marginTop: "12px",
-            marginBottom: 0,
-            fontSize: "0.8rem",
-            color: tokens.textSecondary
-          },
-          children: [
-            "Current status: ",
-            /* @__PURE__ */ jsx("strong", { style: { color: tokens.text }, children: transferStatus }),
-            " \xB7 ",
-            "Transfer: ",
-            /* @__PURE__ */ jsx("span", { style: { color: tokens.textMuted }, children: transferIdSuffix })
-          ]
-        }
-      ),
       polling.error && /* @__PURE__ */ jsxs(
         "p",
         {
@@ -3580,6 +3551,6 @@ function SwypePayment({
   return null;
 }
 
-export { SwypePayment, SwypeProvider, createPasskeyCredential, darkTheme, deviceHasPasskey, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { SwypePayment, SwypeProvider, createPasskeyCredential, darkTheme, deviceHasPasskey, findDevicePasskey, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map