@swype-org/react-sdk 0.1.9 → 0.1.11

package/dist/index.cjs

@@ -178,8 +178,9 @@ async function fetchChains(apiBaseUrl, token) {
   const data = await res.json();
   return data.items;
 }
-async function fetchAccounts(apiBaseUrl, token) {
-  const res = await fetch(`${apiBaseUrl}/v1/accounts`, {
+async function fetchAccounts(apiBaseUrl, token, credentialId) {
+  const params = new URLSearchParams({ credentialId });
+  const res = await fetch(`${apiBaseUrl}/v1/accounts?${params.toString()}`, {
     headers: { Authorization: `Bearer ${token}` }
   });
   if (!res.ok) await throwApiError(res);
@@ -189,6 +190,7 @@ async function fetchAccounts(apiBaseUrl, token) {
 async function createTransfer(apiBaseUrl, token, params) {
   const body = {
     id: crypto.randomUUID(),
+    credentialId: params.credentialId,
     sources: [{ [params.sourceType]: params.sourceId }],
     destinations: [
       {
@@ -561,6 +563,27 @@ async function getWalletClient(config, parameters = {}) {
   const client = await getConnectorClient(config, parameters);
   return client.extend(viem.walletActions);
 }
+
+// src/passkeyRpId.ts
+function normalizeConfiguredDomain(value) {
+  return value.replace(/^https?:\/\//, "").replace(/\/.*$/, "").replace(/^\./, "").trim();
+}
+function resolveRootDomainFromHostname(hostname) {
+  const trimmedHostname = hostname.trim().toLowerCase();
+  if (!trimmedHostname) {
+    return "localhost";
+  }
+  if (trimmedHostname === "localhost" || /^\d{1,3}(?:\.\d{1,3}){3}$/.test(trimmedHostname)) {
+    return trimmedHostname;
+  }
+  const parts = trimmedHostname.split(".").filter(Boolean);
+  if (parts.length < 2) {
+    return trimmedHostname;
+  }
+  return parts.slice(-2).join(".");
+}
+
+// src/hooks.ts
 var WALLET_CLIENT_MAX_ATTEMPTS = 15;
 var WALLET_CLIENT_POLL_MS = 200;
 var ACTION_POLL_INTERVAL_MS = 500;
@@ -611,10 +634,10 @@ function readEnvValue(name) {
 function resolvePasskeyRpId() {
   const configuredDomain = readEnvValue("VITE_DOMAIN") ?? readEnvValue("SWYPE_DOMAIN");
   if (configuredDomain) {
-    return configuredDomain.replace(/^https?:\/\//, "").replace(/\/.*$/, "").replace(/^\./, "").trim();
+    return normalizeConfiguredDomain(configuredDomain);
   }
   if (typeof window !== "undefined") {
-    return window.location.hostname;
+    return resolveRootDomainFromHostname(window.location.hostname);
   }
   return "localhost";
 }
@@ -1934,6 +1957,7 @@ function AdvancedSettings({
     )
   ] });
 }
+var ACTIVE_CREDENTIAL_STORAGE_KEY = "swype_active_credential_id";
 function isMobile() {
   if (typeof navigator === "undefined") return false;
   return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
@@ -2037,8 +2061,13 @@ function SwypePayment({
   const [transfer, setTransfer] = react.useState(null);
   const [creatingTransfer, setCreatingTransfer] = react.useState(false);
   const [registeringPasskey, setRegisteringPasskey] = react.useState(false);
+  const [activeCredentialId, setActiveCredentialId] = react.useState(() => {
+    if (typeof window === "undefined") return null;
+    return window.localStorage.getItem(ACTIVE_CREDENTIAL_STORAGE_KEY);
+  });
   const [mobileFlow, setMobileFlow] = react.useState(false);
   const pollingTransferIdRef = react.useRef(null);
+  const mobileSigningTransferIdRef = react.useRef(null);
   const [selectSourceChainName, setSelectSourceChainName] = react.useState("");
   const [selectSourceTokenSymbol, setSelectSourceTokenSymbol] = react.useState("");
   const initializedSelectSourceActionRef = react.useRef(null);
@@ -2061,7 +2090,7 @@ function SwypePayment({
         if (!token || cancelled) return;
         const { config } = await fetchUserConfig(apiBaseUrl, token);
         if (cancelled) return;
-        if (!config.passkey) {
+        if (!config.passkey || !activeCredentialId) {
           setStep("register-passkey");
         } else if (depositAmount != null && depositAmount > 0) {
           setStep("ready");
@@ -2082,7 +2111,7 @@ function SwypePayment({
     return () => {
       cancelled = true;
     };
-  }, [ready, authenticated, step, depositAmount, apiBaseUrl, getAccessToken]);
+  }, [ready, authenticated, step, depositAmount, apiBaseUrl, getAccessToken, activeCredentialId]);
   const loadingDataRef = react.useRef(false);
   react.useEffect(() => {
     if (!authenticated) return;
@@ -2093,11 +2122,15 @@ function SwypePayment({
       setLoadingData(true);
       setError(null);
       try {
+        if (!activeCredentialId) {
+          setStep("register-passkey");
+          return;
+        }
         const token = await getAccessToken();
         if (!token) throw new Error("Not authenticated");
         const [prov, accts, chn] = await Promise.all([
           fetchProviders(apiBaseUrl, token),
-          fetchAccounts(apiBaseUrl, token),
+          fetchAccounts(apiBaseUrl, token, activeCredentialId),
           fetchChains(apiBaseUrl, token)
         ]);
         if (cancelled) return;
@@ -2129,7 +2162,7 @@ function SwypePayment({
       cancelled = true;
       loadingDataRef.current = false;
     };
-  }, [authenticated, accounts.length, apiBaseUrl, getAccessToken]);
+  }, [authenticated, accounts.length, apiBaseUrl, getAccessToken, activeCredentialId]);
   react.useEffect(() => {
     if (!polling.transfer) return;
     if (polling.transfer.status === "COMPLETED") {
@@ -2142,6 +2175,27 @@ function SwypePayment({
       setError("Transfer failed.");
     }
   }, [polling.transfer, onComplete]);
+  react.useEffect(() => {
+    if (!mobileFlow) return;
+    const polledTransfer = polling.transfer;
+    if (!polledTransfer) return;
+    if (polledTransfer.status !== "AUTHORIZED") return;
+    if (transferSigning.signing) return;
+    if (mobileSigningTransferIdRef.current === polledTransfer.id) return;
+    mobileSigningTransferIdRef.current = polledTransfer.id;
+    const sign = async () => {
+      try {
+        const signedTransfer = await transferSigning.signTransfer(polledTransfer.id);
+        setTransfer(signedTransfer);
+      } catch (err) {
+        mobileSigningTransferIdRef.current = null;
+        const msg = err instanceof Error ? err.message : "Failed to sign transfer";
+        setError(msg);
+        onError?.(msg);
+      }
+    };
+    void sign();
+  }, [mobileFlow, polling.transfer, transferSigning, onError]);
   react.useEffect(() => {
     if (!mobileFlow || !polling.isPolling) return;
     const handleVisibility = () => {
@@ -2203,6 +2257,11 @@ function SwypePayment({
       setError("No account or provider selected.");
       return;
     }
+    if (!activeCredentialId) {
+      setError("Create a passkey on this device before continuing.");
+      setStep("register-passkey");
+      return;
+    }
     setStep("processing");
     setError(null);
     setCreatingTransfer(true);
@@ -2238,6 +2297,7 @@ function SwypePayment({
         }
       }
       const t = await createTransfer(apiBaseUrl, token, {
+        credentialId: activeCredentialId,
         sourceType: effectiveSourceType,
         sourceId: effectiveSourceId,
         destination,
@@ -2271,6 +2331,7 @@ function SwypePayment({
     amount,
     sourceId,
     sourceType,
+    activeCredentialId,
     destination,
     apiBaseUrl,
     getAccessToken,
@@ -2288,6 +2349,7 @@ function SwypePayment({
     setAmount(depositAmount != null ? depositAmount.toString() : "");
     setMobileFlow(false);
     pollingTransferIdRef.current = null;
+    mobileSigningTransferIdRef.current = null;
     setConnectingNewAccount(false);
     setSelectedWalletId(null);
     setAdvancedSettings({ asset: null, chain: null });
@@ -2468,6 +2530,8 @@ function SwypePayment({
         if (!token) throw new Error("Not authenticated");
         const { credentialId, publicKey } = await createPasskeyCredential("Swype User");
         await registerPasskey(apiBaseUrl, token, credentialId, publicKey);
+        setActiveCredentialId(credentialId);
+        window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
         if (depositAmount != null && depositAmount > 0) {
           setStep("ready");
         } else {