@swype-org/react-sdk 0.1.63 → 0.1.67

package/dist/index.cjs

@@ -657,6 +657,24 @@ function normalizeSignature(sig) {
   );
 }
 
+// src/transferPolling.ts
+async function pollTransferTick(params) {
+  const fetchTransfer2 = params.fetchTransfer ?? fetchTransfer;
+  const token = await params.getAccessToken();
+  if (!token) {
+    return { kind: "retry" };
+  }
+  try {
+    const transfer = await fetchTransfer2(params.apiBaseUrl, token, params.transferId);
+    return { kind: "success", transfer };
+  } catch (err) {
+    return {
+      kind: "error",
+      message: err instanceof Error ? err.message : "Polling error"
+    };
+  }
+}
+
 // src/passkey-delegation.ts
 var PasskeyIframeBlockedError = class extends Error {
   constructor(message = "Passkey creation is not supported in this browser context.") {
@@ -959,20 +977,22 @@ function useTransferPolling(intervalMs = 3e3) {
   }, []);
   const poll = react.useCallback(async () => {
     if (!transferIdRef.current) return;
-    try {
-      const token = await getAccessToken();
-      if (!token) {
-        setError("Could not get access token");
-        stopPolling();
-        return;
-      }
-      const t = await fetchTransfer(apiBaseUrl, token, transferIdRef.current);
-      setTransfer(t);
-      if (t.status === "COMPLETED" || t.status === "FAILED") {
-        stopPolling();
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Polling error");
+    const result = await pollTransferTick({
+      apiBaseUrl,
+      transferId: transferIdRef.current,
+      getAccessToken
+    });
+    if (result.kind === "retry") {
+      return;
+    }
+    if (result.kind === "error") {
+      setError(result.message);
+      stopPolling();
+      return;
+    }
+    setError(null);
+    setTransfer(result.transfer);
+    if (result.transfer.status === "COMPLETED" || result.transfer.status === "FAILED") {
       stopPolling();
     }
   }, [apiBaseUrl, getAccessToken, stopPolling]);
@@ -1583,6 +1603,35 @@ function isMobileUserAgent(userAgent) {
 function shouldUseWalletConnector(options) {
   return options.useWalletConnector ?? !isMobileUserAgent(options.userAgent);
 }
+
+// src/mobileFlow.ts
+function hasActiveWallet(accounts) {
+  return accounts.some((account) => account.wallets.some((wallet) => wallet.status === "ACTIVE"));
+}
+function resolvePostAuthStep(state) {
+  if (!state.hasPasskey) {
+    return { step: "create-passkey", clearPersistedFlow: false };
+  }
+  if (state.persistedMobileFlow) {
+    return { step: "open-wallet", clearPersistedFlow: false };
+  }
+  if ((state.accounts.length === 0 || !hasActiveWallet(state.accounts)) && !state.connectingNewAccount) {
+    return { step: "wallet-picker", clearPersistedFlow: false };
+  }
+  return { step: "deposit", clearPersistedFlow: false };
+}
+function resolveRestoredMobileFlow(transferStatus, isSetup) {
+  if (transferStatus === "AUTHORIZED") {
+    return isSetup ? { kind: "resume-setup-deposit", step: "deposit", clearPersistedFlow: true } : { kind: "resume-confirm-sign", step: "confirm-sign", clearPersistedFlow: true };
+  }
+  if (transferStatus === "COMPLETED") {
+    return { kind: "resume-success", step: "success", clearPersistedFlow: true };
+  }
+  if (transferStatus === "FAILED") {
+    return { kind: "resume-failed", step: "success", clearPersistedFlow: true };
+  }
+  return { kind: "resume-open-wallet", step: "open-wallet", clearPersistedFlow: false };
+}
 var FOOTER_CSS = `
 .swype-screen-footer {
   padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
@@ -1911,137 +1960,6 @@ var inputStyle = (tokens, filled) => ({
   caretColor: tokens.borderFocus,
   transition: "border-color 0.15s ease"
 });
-function LimitSlider({
-  value,
-  min,
-  max,
-  step = 1,
-  onChange,
-  ticks,
-  disabled
-}) {
-  const { tokens } = useSwypeConfig();
-  const pct = (value - min) / (max - min) * 100;
-  const handleChange = react.useCallback(
-    (e) => onChange(Number(e.target.value)),
-    [onChange]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "swype-slider-wrap", style: wrapperStyle, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: trackContainerStyle, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: trackBgStyle(tokens.border) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: trackFillStyle(tokens.accent, pct) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "range",
-          min,
-          max,
-          step,
-          value,
-          onChange: handleChange,
-          disabled,
-          style: rangeInputStyle
-        }
-      )
-    ] }),
-    ticks && ticks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: ticksStyle, children: ticks.map((tick, i) => {
-      const pctPos = (tick - min) / (max - min) * 100;
-      const isFirst = i === 0;
-      const isLast = i === ticks.length - 1;
-      const label = tick % 1 === 0 ? `$${tick}` : `$${tick.toFixed(2)}`;
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          style: tickLabelStyle(tokens.textMuted, pctPos, isFirst, isLast),
-          children: label
-        },
-        tick
-      );
-    }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("style", { children: sliderThumbCss(tokens.accent) })
-  ] });
-}
-var wrapperStyle = { width: "100%" };
-var trackContainerStyle = {
-  position: "relative",
-  height: 28,
-  display: "flex",
-  alignItems: "center"
-};
-var trackBgStyle = (color) => ({
-  position: "absolute",
-  left: 0,
-  right: 0,
-  height: 4,
-  borderRadius: 2,
-  background: color
-});
-var trackFillStyle = (color, pct) => ({
-  position: "absolute",
-  left: 0,
-  width: `${pct}%`,
-  height: 4,
-  borderRadius: 2,
-  background: color
-});
-var rangeInputStyle = {
-  position: "absolute",
-  left: 0,
-  right: 0,
-  width: "100%",
-  height: 28,
-  margin: 0,
-  cursor: "pointer",
-  zIndex: 2,
-  WebkitAppearance: "none",
-  appearance: "none",
-  background: "transparent"
-};
-var ticksStyle = {
-  position: "relative",
-  height: 18,
-  marginTop: 6
-};
-var tickLabelStyle = (color, pct, isFirst, isLast) => ({
-  position: "absolute",
-  left: `${pct}%`,
-  transform: isFirst ? "none" : isLast ? "translateX(-100%)" : "translateX(-50%)",
-  fontSize: "0.72rem",
-  fontWeight: 500,
-  color,
-  whiteSpace: "nowrap"
-});
-var sliderThumbCss = (accent) => `
-  .swype-slider-wrap input[type="range"]::-webkit-slider-runnable-track {
-    height: 4px;
-    background: transparent;
-  }
-  .swype-slider-wrap input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background: ${accent};
-    border: 3px solid #fff;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
-    cursor: pointer;
-    margin-top: -8px;
-  }
-  .swype-slider-wrap input[type="range"]::-moz-range-track {
-    height: 4px;
-    background: transparent;
-    border: none;
-  }
-  .swype-slider-wrap input[type="range"]::-moz-range-thumb {
-    width: 14px;
-    height: 14px;
-    border-radius: 50%;
-    background: ${accent};
-    border: 3px solid #fff;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
-    cursor: pointer;
-  }
-`;
 
 // src/assets/logos.ts
 function svgToDataUri(svg) {
@@ -3003,18 +2921,6 @@ var dividerTextStyle = (color) => ({
 });
 var DEFAULT_MAX = 500;
 var ABSOLUTE_MIN = 1;
-function buildTicks(min, max) {
-  if (max <= min) return [min];
-  const range = max - min;
-  const candidates = [1, 2, 5, 10, 25, 50, 100, 250];
-  const step = candidates.find((s) => range / s <= 5) ?? Math.ceil(range / 4);
-  const ticks = [];
-  for (let v = min; v <= max; v += step) {
-    ticks.push(Math.round(v * 100) / 100);
-  }
-  if (ticks[ticks.length - 1] !== max) ticks.push(max);
-  return ticks;
-}
 function SetupScreen({
   availableBalance,
   tokenCount,
@@ -3030,9 +2936,22 @@ function SetupScreen({
   const { tokens } = useSwypeConfig();
   const effectiveMax = Math.floor(Math.min(DEFAULT_MAX, availableBalance > 0 ? availableBalance : DEFAULT_MAX) * 100) / 100;
   const effectiveMin = Math.min(ABSOLUTE_MIN, effectiveMax);
-  const sliderStep = effectiveMax <= 10 ? 0.5 : effectiveMax <= 50 ? 1 : 5;
-  const ticks = buildTicks(effectiveMin, effectiveMax);
-  const [limit, setLimit] = react.useState(() => Math.min(100, effectiveMax));
+  const [limit, setLimit] = react.useState(() => effectiveMax);
+  const [editing, setEditing] = react.useState(false);
+  const [inputValue, setInputValue] = react.useState("");
+  const inputRef = react.useRef(null);
+  const startEditing = react.useCallback(() => {
+    setInputValue(limit.toFixed(2));
+    setEditing(true);
+    requestAnimationFrame(() => inputRef.current?.select());
+  }, [limit]);
+  const commitEdit = react.useCallback(() => {
+    const parsed = parseFloat(inputValue);
+    if (!isNaN(parsed)) {
+      setLimit(Math.min(effectiveMax, Math.max(effectiveMin, Math.round(parsed * 100) / 100)));
+    }
+    setEditing(false);
+  }, [inputValue, effectiveMax, effectiveMin]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
@@ -3088,19 +3007,33 @@ function SetupScreen({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { style: limitSectionStyle, children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: limitLabelStyle(tokens.textMuted), children: "Your One-Tap limit" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: limitValueStyle(tokens.text), children: [
+          editing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: limitValueStyle(tokens.text), children: [
             "$",
-            limit.toFixed(2)
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            LimitSlider,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                inputMode: "decimal",
+                pattern: "[0-9]*",
+                value: inputValue,
+                onChange: (e) => setInputValue(e.target.value),
+                onBlur: commitEdit,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") commitEdit();
+                },
+                style: limitInputStyle(tokens.text)
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              value: limit,
-              min: effectiveMin,
-              max: effectiveMax,
-              step: sliderStep,
-              ticks,
-              onChange: setLimit
+              style: { ...limitValueStyle(tokens.text), cursor: "pointer" },
+              onClick: startEditing,
+              children: [
+                "$",
+                limit.toFixed(2)
+              ]
             }
           )
         ] }),
@@ -3207,6 +3140,19 @@ var limitValueStyle = (color) => ({
   color,
   marginBottom: 12
 });
+var limitInputStyle = (color) => ({
+  fontSize: "2.2rem",
+  fontWeight: 700,
+  color,
+  background: "transparent",
+  border: "none",
+  borderBottom: "2px solid currentColor",
+  outline: "none",
+  textAlign: "center",
+  width: "5ch",
+  fontFamily: "inherit",
+  padding: 0
+});
 var bannerWrapStyle = { marginBottom: 16 };
 var linkStyle = (color) => ({
   background: "transparent",
@@ -4112,6 +4058,8 @@ function OpenWalletScreen({
   walletName,
   deeplinkUri,
   loading,
+  error,
+  onRetryStatus,
   onLogout
 }) {
   const { tokens } = useSwypeConfig();
@@ -4132,12 +4080,14 @@ function OpenWalletScreen({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ScreenLayout,
     {
-      footer: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      footer: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: footerContentStyle, children: [
+        error && /* @__PURE__ */ jsxRuntime.jsx(InfoBanner, { children: error }),
         !loading && /* @__PURE__ */ jsxRuntime.jsxs(PrimaryButton, { onClick: handleOpen, children: [
           "Open ",
           displayName
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle3(tokens.textMuted), children: loading ? "Preparing authorization..." : "If your wallet didn't open automatically, tap the button above" })
+        error && onRetryStatus && /* @__PURE__ */ jsxRuntime.jsx(OutlineButton, { onClick: onRetryStatus, children: "Retry status check" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle3(tokens.textMuted), children: loading ? "Preparing authorization..." : error ? "Retry the status check after returning to the browser, or reopen your wallet if needed." : "If your wallet didn't open automatically, tap the button above" })
       ] }),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
@@ -4163,6 +4113,11 @@ var contentStyle6 = {
   textAlign: "center",
   padding: "0 24px"
 };
+var footerContentStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 12
+};
 var logoStyle = {
   width: 56,
   height: 56,
@@ -4541,6 +4496,55 @@ function SwypePaymentInner({
       setConnectingNewAccount(false);
     }
   }, [getAccessToken, activeCredentialId, apiBaseUrl, depositAmount]);
+  const enterPersistedMobileFlow = react.useCallback((persisted, errorMessage) => {
+    setMobileFlow(true);
+    setDeeplinkUri(persisted.deeplinkUri);
+    setSelectedProviderId(persisted.providerId);
+    pollingTransferIdRef.current = persisted.transferId;
+    mobileSetupFlowRef.current = persisted.isSetup;
+    setError(errorMessage ?? null);
+    setStep("open-wallet");
+    polling.startPolling(persisted.transferId);
+  }, [polling]);
+  const handleAuthorizedMobileReturn = react.useCallback(async (authorizedTransfer, isSetup) => {
+    setTransfer(authorizedTransfer);
+    polling.stopPolling();
+    if (isSetup) {
+      mobileSetupFlowRef.current = false;
+      clearMobileFlowState();
+      try {
+        await reloadAccounts();
+        setError(null);
+        setDeeplinkUri(null);
+        setMobileFlow(false);
+        setStep("deposit");
+      } catch (err) {
+        setError(
+          err instanceof Error ? err.message : "Wallet authorized, but we could not refresh your account yet."
+        );
+        setStep("open-wallet");
+      }
+      return;
+    }
+    mobileSetupFlowRef.current = false;
+    clearMobileFlowState();
+    setError(null);
+    setDeeplinkUri(null);
+    setMobileFlow(false);
+    setStep("confirm-sign");
+  }, [polling.stopPolling, reloadAccounts]);
+  const handleRetryMobileStatus = react.useCallback(() => {
+    setError(null);
+    const currentTransfer = polling.transfer ?? transfer;
+    if (currentTransfer?.status === "AUTHORIZED") {
+      void handleAuthorizedMobileReturn(currentTransfer, mobileSetupFlowRef.current);
+      return;
+    }
+    const transferIdToResume = pollingTransferIdRef.current ?? currentTransfer?.id;
+    if (transferIdToResume) {
+      polling.startPolling(transferIdToResume);
+    }
+  }, [handleAuthorizedMobileReturn, polling, transfer]);
   react.useEffect(() => {
     if (depositAmount != null) {
       setAmount(depositAmount.toString());
@@ -4626,19 +4630,70 @@ function SwypePaymentInner({
     let cancelled = false;
     setError(null);
     resetHeadlessLogin();
-    const restoreOrDeposit = () => {
+    const restoreOrDeposit = async (credId, token) => {
       const persisted = loadMobileFlowState();
-      if (persisted) {
-        setMobileFlow(true);
-        setDeeplinkUri(persisted.deeplinkUri);
-        setSelectedProviderId(persisted.providerId);
-        pollingTransferIdRef.current = persisted.transferId;
-        mobileSetupFlowRef.current = persisted.isSetup;
-        setStep("open-wallet");
-        polling.startPolling(persisted.transferId);
-      } else {
-        setStep("deposit");
+      let accts = [];
+      try {
+        accts = await fetchAccounts(apiBaseUrl, token, credId);
+        if (cancelled) return;
+      } catch {
+      }
+      const resolved = resolvePostAuthStep({
+        hasPasskey: true,
+        accounts: accts,
+        persistedMobileFlow: persisted,
+        connectingNewAccount: false
+      });
+      if (resolved.clearPersistedFlow) {
+        clearMobileFlowState();
+      }
+      if (resolved.step === "open-wallet" && persisted) {
+        try {
+          const existingTransfer = await fetchTransfer(apiBaseUrl, token, persisted.transferId);
+          if (cancelled) return;
+          const mobileResolution = resolveRestoredMobileFlow(
+            existingTransfer.status,
+            persisted.isSetup
+          );
+          if (mobileResolution.kind === "resume-setup-deposit") {
+            await handleAuthorizedMobileReturn(existingTransfer, true);
+            return;
+          }
+          if (mobileResolution.kind === "resume-confirm-sign") {
+            await handleAuthorizedMobileReturn(existingTransfer, false);
+            return;
+          }
+          if (mobileResolution.kind === "resume-success") {
+            clearMobileFlowState();
+            setMobileFlow(false);
+            setDeeplinkUri(null);
+            setTransfer(existingTransfer);
+            setError(null);
+            setStep("success");
+            onComplete?.(existingTransfer);
+            return;
+          }
+          if (mobileResolution.kind === "resume-failed") {
+            clearMobileFlowState();
+            setMobileFlow(false);
+            setDeeplinkUri(null);
+            setTransfer(existingTransfer);
+            setError("Transfer failed.");
+            setStep("success");
+            return;
+          }
+        } catch (err) {
+          if (cancelled) return;
+          enterPersistedMobileFlow(
+            persisted,
+            err instanceof Error ? err.message : "Unable to refresh wallet authorization status."
+          );
+          return;
+        }
+        enterPersistedMobileFlow(persisted);
+        return;
       }
+      setStep(resolved.step);
     };
     const checkPasskey = async () => {
       try {
@@ -4655,7 +4710,7 @@ function SwypePaymentInner({
           return;
         }
         if (activeCredentialId && allPasskeys.some((p) => p.credentialId === activeCredentialId)) {
-          restoreOrDeposit();
+          await restoreOrDeposit(activeCredentialId, token);
           return;
         }
         if (cancelled) return;
@@ -4665,7 +4720,7 @@ function SwypePaymentInner({
         if (matched) {
           setActiveCredentialId(matched);
           window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, matched);
-          restoreOrDeposit();
+          await restoreOrDeposit(matched, token);
           return;
         }
         setStep("create-passkey");
@@ -4677,7 +4732,18 @@ function SwypePaymentInner({
     return () => {
       cancelled = true;
     };
-  }, [ready, authenticated, step, apiBaseUrl, getAccessToken, activeCredentialId, resetHeadlessLogin]);
+  }, [
+    ready,
+    authenticated,
+    step,
+    apiBaseUrl,
+    getAccessToken,
+    activeCredentialId,
+    resetHeadlessLogin,
+    enterPersistedMobileFlow,
+    handleAuthorizedMobileReturn,
+    onComplete
+  ]);
   const loadingDataRef = react.useRef(false);
   react.useEffect(() => {
     if (!authenticated) return;
@@ -4709,11 +4775,22 @@ function SwypePaymentInner({
         } else if (prov.length > 0 && !connectingNewAccount) {
           setSelectedProviderId(prov[0].id);
         }
-        const hasActiveWallet = accts.some(
-          (a) => a.wallets.some((w) => w.status === "ACTIVE")
-        );
-        if ((accts.length === 0 || !hasActiveWallet) && step === "deposit" && !connectingNewAccount) {
-          setStep("wallet-picker");
+        const persisted = loadMobileFlowState();
+        const resolved = resolvePostAuthStep({
+          hasPasskey: !!activeCredentialId,
+          accounts: accts,
+          persistedMobileFlow: persisted,
+          mobileSetupInProgress: mobileSetupFlowRef.current,
+          connectingNewAccount
+        });
+        if (resolved.clearPersistedFlow) {
+          clearMobileFlowState();
+          setMobileFlow(false);
+          setDeeplinkUri(null);
+        }
+        const correctableSteps = ["deposit", "wallet-picker", "open-wallet"];
+        if (correctableSteps.includes(step)) {
+          setStep(resolved.step);
         }
       } catch (err) {
         if (!cancelled) {
@@ -4776,22 +4853,8 @@ function SwypePaymentInner({
     if (!mobileFlow) return;
     const polledTransfer = polling.transfer;
     if (!polledTransfer || polledTransfer.status !== "AUTHORIZED") return;
-    if (mobileSetupFlowRef.current) {
-      mobileSetupFlowRef.current = false;
-      clearMobileFlowState();
-      setDeeplinkUri(null);
-      polling.stopPolling();
-      setTransfer(polledTransfer);
-      reloadAccounts().catch(() => {
-      }).then(() => {
-        setMobileFlow(false);
-        setStep("deposit");
-      });
-      return;
-    }
-    setTransfer(polledTransfer);
-    setStep("confirm-sign");
-  }, [mobileFlow, polling.transfer, polling.stopPolling, transferSigning, onError, reloadAccounts]);
+    void handleAuthorizedMobileReturn(polledTransfer, mobileSetupFlowRef.current);
+  }, [mobileFlow, polling.transfer, handleAuthorizedMobileReturn]);
   react.useEffect(() => {
     if (!mobileFlow) return;
     const transferIdToResume = pollingTransferIdRef.current ?? transfer?.id;
@@ -5024,15 +5087,18 @@ function SwypePaymentInner({
     setActiveCredentialId(credentialId);
     window.localStorage.setItem(ACTIVE_CREDENTIAL_STORAGE_KEY, credentialId);
     setPasskeyPopupNeeded(false);
-    const hasActiveWallet = accounts.some(
-      (a) => a.wallets.some((w) => w.status === "ACTIVE")
-    );
-    if (accounts.length === 0 || !hasActiveWallet) {
-      setStep("wallet-picker");
-    } else {
-      setStep("deposit");
+    const resolved = resolvePostAuthStep({
+      hasPasskey: true,
+      accounts,
+      persistedMobileFlow: loadMobileFlowState(),
+      mobileSetupInProgress: mobileSetupFlowRef.current,
+      connectingNewAccount
+    });
+    if (resolved.clearPersistedFlow) {
+      clearMobileFlowState();
     }
-  }, [getAccessToken, apiBaseUrl, accounts]);
+    setStep(resolved.step);
+  }, [getAccessToken, apiBaseUrl, accounts, connectingNewAccount]);
   const handleRegisterPasskey = react.useCallback(async () => {
     setRegisteringPasskey(true);
     setError(null);
@@ -5230,6 +5296,8 @@ function SwypePaymentInner({
         walletName: providerName,
         deeplinkUri: deeplinkUri ?? "",
         loading: creatingTransfer || !deeplinkUri,
+        error: error || polling.error,
+        onRetryStatus: handleRetryMobileStatus,
         onLogout: handleLogout
       }
     );