@swype-org/react-sdk 0.1.26 → 0.1.28

package/dist/index.cjs

@@ -77,6 +77,26 @@ 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,
@@ -87,6 +107,15 @@ 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);
@@ -190,7 +219,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: [
@@ -787,6 +816,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);
@@ -795,17 +829,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) {
@@ -2170,7 +2205,8 @@ function SwypePayment({
   destination,
   onComplete,
   onError,
-  useWalletConnector
+  useWalletConnector,
+  idempotencyKey
 }) {
   const { apiBaseUrl, tokens, depositAmount } = useSwypeConfig();
   const { ready, authenticated, user, login, logout, getAccessToken } = reactAuth.usePrivy();
@@ -2237,20 +2273,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) {
@@ -2484,6 +2520,7 @@ function SwypePayment({
         }
       }
       const t = await createTransfer(apiBaseUrl, token, {
+        id: idempotencyKey,
         credentialId: activeCredentialId,
         sourceType: effectiveSourceType,
         sourceId: effectiveSourceId,
@@ -3025,7 +3062,7 @@ function SwypePayment({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             style: {
@@ -3038,74 +3075,39 @@ function SwypePayment({
               border: `1px solid ${tokens.border}`,
               lineHeight: 1.7
             },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  style: { display: "flex", justifyContent: "space-between" },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "To" }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "span",
-                      {
-                        style: {
-                          fontFamily: '"SF Mono", "Fira Code", monospace',
-                          fontSize: "0.8rem"
-                        },
-                        children: [
-                          destination.address.slice(0, 6),
-                          "...",
-                          destination.address.slice(-4)
-                        ]
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  style: { display: "flex", justifyContent: "space-between" },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Token" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600 }, children: destination.token.symbol })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    justifyContent: "space-between",
-                    alignItems: "center"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "From" }),
-                    noAccounts ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 500, color: tokens.textMuted }, children: "New account" }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center"
+                },
+                children: noAccounts ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "From" }),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [
@@ -3371,10 +3373,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__ */ jsxRuntime.jsx("div", { style: cardStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "center", padding: "16px 0" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -3388,36 +3389,6 @@ function SwypePayment({
           children: statusLabel
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "p",
-        {
-          style: {
-            fontSize: "0.85rem",
-            color: tokens.textSecondary,
-            margin: 0,
-            lineHeight: 1.5
-          },
-          children: statusDescription
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "p",
-        {
-          style: {
-            marginTop: "12px",
-            marginBottom: 0,
-            fontSize: "0.8rem",
-            color: tokens.textSecondary
-          },
-          children: [
-            "Current status: ",
-            /* @__PURE__ */ jsxRuntime.jsx("strong", { style: { color: tokens.text }, children: transferStatus }),
-            " \xB7 ",
-            "Transfer: ",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: tokens.textMuted }, children: transferIdSuffix })
-          ]
-        }
-      ),
       polling.error && /* @__PURE__ */ jsxRuntime.jsxs(
         "p",
         {
@@ -3588,6 +3559,7 @@ exports.SwypeProvider = SwypeProvider;
 exports.createPasskeyCredential = createPasskeyCredential;
 exports.darkTheme = darkTheme;
 exports.deviceHasPasskey = deviceHasPasskey;
+exports.findDevicePasskey = findDevicePasskey;
 exports.getTheme = getTheme;
 exports.lightTheme = lightTheme;
 exports.swypeApi = api_exports;