@swype-org/react-sdk 0.1.13 → 0.1.14

package/dist/index.js

@@ -2062,7 +2062,7 @@ function SwypePayment({
   useWalletConnector
 }) {
   const { apiBaseUrl, tokens, depositAmount } = useSwypeConfig();
-  const { ready, authenticated, login, getAccessToken } = usePrivy();
+  const { ready, authenticated, login, logout, getAccessToken } = usePrivy();
   const [step, setStep] = useState("login");
   const [error, setError] = useState(null);
   const [providers, setProviders] = useState([]);
@@ -2413,6 +2413,38 @@ function SwypePayment({
     setAdvancedSettings({ asset: null, chain: null });
     if (accounts.length > 0) setSelectedAccountId(accounts[0].id);
   };
+  const handleLogout = useCallback(async () => {
+    try {
+      await logout();
+    } catch {
+    }
+    if (typeof window !== "undefined") {
+      window.localStorage.removeItem(ACTIVE_CREDENTIAL_STORAGE_KEY);
+    }
+    polling.stopPolling();
+    setActiveCredentialId(null);
+    setStep("login");
+    setError(null);
+    setTransfer(null);
+    setCreatingTransfer(false);
+    setRegisteringPasskey(false);
+    setProviders([]);
+    setAccounts([]);
+    setChains([]);
+    setSelectedAccountId(null);
+    setSelectedWalletId(null);
+    setSelectedProviderId(null);
+    setConnectingNewAccount(false);
+    setAmount(depositAmount != null ? depositAmount.toString() : "");
+    setAdvancedSettings({ asset: null, chain: null });
+    setMobileFlow(false);
+    setSelectSourceChainName("");
+    setSelectSourceTokenSymbol("");
+    initializedSelectSourceActionRef.current = null;
+    processingStartedAtRef.current = null;
+    pollingTransferIdRef.current = null;
+    mobileSigningTransferIdRef.current = null;
+  }, [logout, polling, depositAmount]);
   const handleConnectNewAccount = (providerId) => {
     setSelectedProviderId(providerId);
     setSelectedAccountId(null);
@@ -2770,7 +2802,32 @@ function SwypePayment({
     const canPay = !isNaN(parsedAmount) && parsedAmount > 0 && !!sourceId && !loadingData;
     const noAccounts = !loadingData && accounts.length === 0;
     return /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
-      stepBadge("Review & pay"),
+      /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+        stepBadge("Review & pay"),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleLogout,
+            style: {
+              position: "absolute",
+              top: 0,
+              right: 0,
+              background: "transparent",
+              border: "none",
+              color: tokens.textMuted,
+              cursor: "pointer",
+              fontSize: "0.75rem",
+              fontWeight: 600,
+              letterSpacing: "0.04em",
+              textTransform: "uppercase",
+              fontFamily: "inherit",
+              padding: 0
+            },
+            children: "Logout"
+          }
+        )
+      ] }),
       error && /* @__PURE__ */ jsx("div", { style: errorStyle, children: error }),
       loadingData ? /* @__PURE__ */ jsx("div", { style: { padding: "24px 0", textAlign: "center" }, children: /* @__PURE__ */ jsx(Spinner, { label: "Loading..." }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs(