@swype-org/react-sdk 0.1.9 → 0.1.10

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: [
       {
@@ -1934,6 +1936,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,6 +2040,10 @@ 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 [selectSourceChainName, setSelectSourceChainName] = react.useState("");
@@ -2061,7 +2068,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 +2089,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 +2100,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 +2140,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") {
@@ -2203,6 +2214,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 +2254,7 @@ function SwypePayment({
         }
       }
       const t = await createTransfer(apiBaseUrl, token, {
+        credentialId: activeCredentialId,
         sourceType: effectiveSourceType,
         sourceId: effectiveSourceId,
         destination,
@@ -2271,6 +2288,7 @@ function SwypePayment({
     amount,
     sourceId,
     sourceType,
+    activeCredentialId,
     destination,
     apiBaseUrl,
     getAccessToken,
@@ -2468,6 +2486,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 {