feat: export types and simplify hook checks and add docs

packages/alchemy/src/react/hooks/useLogout.ts

@@ -0,0 +1,46 @@
+"use client";
+
+import { useMutation, type UseMutateFunction } from "@tanstack/react-query";
+import { useAlchemyAccountContext } from "../context.js";
+import type { BaseHookMutationArgs } from "../types.js";
+import { useSigner } from "./useSigner.js";
+
+export type UseLogoutData = void;
+
+export type UseLogoutParams = void;
+
+export type UseLogoutMutationArgs = BaseHookMutationArgs<
+  UseLogoutData,
+  UseLogoutParams
+>;
+
+export type UseLogoutResult = {
+  logout: UseMutateFunction<UseLogoutData, Error, UseLogoutParams, unknown>;
+  isLoggingOut: boolean;
+  error: Error | null;
+};
+
+export function useLogout(
+  mutationArgs?: UseLogoutMutationArgs
+): UseLogoutResult {
+  const { queryClient } = useAlchemyAccountContext();
+  const signer = useSigner();
+
+  const {
+    mutate: logout,
+    isPending: isLoggingOut,
+    error,
+  } = useMutation(
+    {
+      mutationFn: signer!.disconnect,
+      ...mutationArgs,
+    },
+    queryClient
+  );
+
+  return {
+    logout,
+    isLoggingOut,
+    error,
+  };
+}

packages/alchemy/src/react/index.ts

@@ -13,7 +13,8 @@ export type * from "./hooks/useAuthenticate.js";
 export { useAuthenticate } from "./hooks/useAuthenticate.js";
 export type * from "./hooks/useBundlerClient.js";
 export { useBundlerClient } from "./hooks/useBundlerClient.js";
-export { useDisconnectSigner } from "./hooks/useDisconnectSigner.js";
+export type * from "./hooks/useLogout.js";
+export { useLogout } from "./hooks/useLogout.js";
 export type * from "./hooks/useSigner.js";
 export { useSigner } from "./hooks/useSigner.js";
 export type * from "./hooks/useSignerStatus.js";

site/react/useLogout.md

@@ -0,0 +1,39 @@
+---
+outline: deep
+head:
+  - - meta
+    - property: og:title
+      content: useLogout
+  - - meta
+    - name: description
+      content: An overview of the useLogout hook
+  - - meta
+    - property: og:description
+      content: An overview of the useLogout hook
+  - - meta
+    - name: twitter:title
+      content: useLogout
+  - - meta
+    - name: twitter:description
+      content: An overview of the useLogout hook
+---
+
+# useLogout
+
+The `useLogout` hook logs a user out of their Embedded Account on your application.
+
+## Import
+
+```ts
+import { useLogout } from "@alchemy/aa-alchemy/react";
+```
+
+## Usage
+
+<<< @/snippets/react/useLogout.tsx
+
+## Return Type
+
+```ts
+import { type useLogoutResult } from "@alchemy/aa-alchemy/react";
+```

site/snippets/react/useLogout.tsx

@@ -0,0 +1,12 @@
+import { useLogout } from "@alchemy/aa-alchemy/react";
+
+export function ComponentWithUser() {
+  // Assumes the app has context of a signer with an authenticated user
+  const { logout } = useLogout();
+
+  return (
+    <div>
+      <button onClick={() => logout}>Add Passkey</button>
+    </div>
+  );
+}