> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# React Hooks Catalog

> Complete reference for all hooks exported by @dynamic-labs-sdk/react-hooks, organized by category.

Every hook exported by `@dynamic-labs-sdk/react-hooks` is listed here, grouped by category. All hooks require a [`DynamicProvider`](/javascript/reference/react-hooks) ancestor.

<Warning>
  The JavaScript SDK is headless — there is no built-in modal, wallet picker, or
  login form. You build all UI yourself. See the [JavaScript SDK
  Overview](/javascript/overview) for details.
</Warning>

<Note>
  New to the hooks? Read [How React Hooks Work](/javascript/reference/react-hooks-guide) first — it covers the naming rule, which functions get a hook, and the three shapes (query, mutation, state).
</Note>

For each hook the table shows:

* **Hook** — the import name from `@dynamic-labs-sdk/react-hooks`
* **Wraps** — the client function from `@dynamic-labs-sdk/client`
* **Shape** — `query` (async read, returns `{ data, isLoading, error, refetch }`), `mutation` (async action, returns `{ mutate, isPending, error, data }`), or `state` (reactive value, returns `{ data, isLoading, error, refetch }`)

***

## State hooks

State hooks subscribe to reactive client state and re-render when it changes. They take no arguments and return the TanStack Query result — destructure `data` to get the value.

| Hook                                                                                                      | Value on `data`                                              | Re-renders when                   |
| --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | --------------------------------- |
| [`useUser`](/javascript/reference/react-hooks#useuser)                                                    | Current authenticated user, or `null`                        | Sign-in, sign-out, profile update |
| [`useGetWalletAccounts`](/javascript/reference/react-hooks#usewalletaccounts)                             | All wallet accounts (verified + unverified)                  | Connect, disconnect, verify       |
| [`useGetUserSocialAccounts`](/javascript/reference/react-hooks#useusersocialaccounts)                     | Linked social accounts (`SocialAccount[]`)                   | User changes                      |
| [`useGetAvailableWalletProvidersData`](/javascript/reference/react-hooks#useavailablewalletprovidersdata) | Connectable wallet providers (`WalletProviderData[]`)        | Network switch, provider changes  |
| [`useInitStatus`](/javascript/reference/react-hooks#useinitstatus)                                        | `'uninitialized' \| 'in-progress' \| 'finished' \| 'failed'` | Initialization progress           |
| [`useSessionExpiresAt`](/javascript/reference/react-hooks#usesessionexpiresat)                            | Session expiration `Date`, or `null`                         | Session updates                   |

```tsx theme={"system"}
import { useUser, useGetWalletAccounts } from '@dynamic-labs-sdk/react-hooks';

const { data: user } = useUser();
const { data: walletAccounts = [] } = useGetWalletAccounts();
```

***

## Event hooks

Event hooks subscribe to client events for a component's lifetime. They auto-unsubscribe on unmount — no manual `offEvent` cleanup needed.

| Hook                                                       | Description                                                                                                                     |
| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| [`useOnEvent`](/javascript/reference/react-hooks#useevent) | Subscribe to any client event. Re-subscribes when `event` changes; listener identity changes do not re-subscribe (ref-wrapped). |
| `useOnceEvent`                                             | Like `useOnEvent`, but fires at most once per mount.                                                                            |
| `useOnWalletProviderEvent`                                 | Subscribe to events on a specific wallet provider (e.g. `accountsChanged`, `chainChanged`).                                     |

```tsx theme={"system"}
import { useOnEvent } from '@dynamic-labs-sdk/react-hooks';

useOnEvent({
  event: 'walletAccountsChanged',
  listener: ({ walletAccounts }) => console.log(walletAccounts),
});
```

```tsx theme={"system"}
import { useOnceEvent } from '@dynamic-labs-sdk/react-hooks';

useOnceEvent({
  event: 'authFlowCancelled',
  listener: () => console.log('auth flow cancelled'),
});
```

```tsx theme={"system"}
import { useOnWalletProviderEvent } from '@dynamic-labs-sdk/react-hooks';

useOnWalletProviderEvent({
  event: 'chainChanged',
  walletProviderKey: 'metamask',
  listener: (chainId) => console.log('chain:', chainId),
});
```

***

## Context

| Hook / Component   | Description                                                                                     |
| ------------------ | ----------------------------------------------------------------------------------------------- |
| `DynamicProvider`  | React context provider. Wraps your app and supplies the client instance to all hooks.           |
| `useDynamicClient` | Returns the `DynamicClient` from context. Use for one-shot direct client calls inside handlers. |

***

## Query hooks

Query hooks wrap async read functions. They fetch on mount and return `{ data, isLoading, isFetching, error, refetch }`. Arguments that accept `undefined` are **pseudo-required** — the hook stays disabled until a real value is passed.

Pass `queryParams` to override TanStack Query options (`staleTime`, `refetchInterval`, `enabled`, etc.).

### Wallets & balances

| Hook                                                  | Wraps                                              | Description                                         |
| ----------------------------------------------------- | -------------------------------------------------- | --------------------------------------------------- |
| `useGetNativeBalance`                                 | `getNativeBalance`                                 | Native token balance for a wallet account.          |
| `useGetBalanceForAddress`                             | `getBalanceForAddress`                             | Balance for a specific address string.              |
| `useGetTokenBalances`                                 | `getTokenBalances`                                 | ERC-20 / SPL token balances for a wallet.           |
| `useGetMultichainTokenBalances`                       | `getMultichainTokenBalances`                       | Token balances across all connected chains.         |
| `useGetActiveNetworkData`                             | `getActiveNetworkData`                             | Active network metadata (chain ID, name, RPC URL).  |
| `useGetActiveNetworkId`                               | `getActiveNetworkId`                               | Active network chain ID.                            |
| `useGetConnectedAddresses`                            | `getConnectedAddresses`                            | All addresses the user has connected.               |
| `useGetWalletOptionsCatalogue`                        | `getWalletOptionsCatalogue`                        | Full wallet picker catalog (grouped by category).   |
| `useGetWalletConnectCatalog`                          | `getWalletConnectCatalog`                          | WalletConnect-compatible wallets from the registry. |
| `useGetWalletConnectCatalogWalletByWalletProviderKey` | `getWalletConnectCatalogWalletByWalletProviderKey` | Single WalletConnect wallet entry by provider key.  |

```tsx theme={"system"}
import { useGetNativeBalance } from '@dynamic-labs-sdk/react-hooks';

function Balance({ walletAccount }) {
  const { data, isLoading } = useGetNativeBalance({ walletAccount });

  if (isLoading) return <p>Loading...</p>;
  return <p>{data?.balance ?? '0'}</p>;
}
```

### Authentication & security

| Hook                               | Wraps                           | Description                                                    |
| ---------------------------------- | ------------------------------- | -------------------------------------------------------------- |
| `useCheckStepUpAuth`               | `checkStepUpAuth`               | Whether a step-up auth token is valid for a given scope.       |
| `useIsMfaRequiredForAction`        | `isMfaRequiredForAction`        | Whether MFA is required before performing a specific action.   |
| `useGetMfaDevices`                 | `getMfaDevices`                 | User's registered MFA devices.                                 |
| `useGetMfaMethods`                 | `getMfaMethods`                 | Available MFA method types for the current user.               |
| `useGetMfaRecoveryCodes`           | `getMfaRecoveryCodes`           | User's active recovery codes.                                  |
| `useGetPasskeys`                   | `getPasskeys`                   | User's registered passkeys.                                    |
| `useGetRegisteredDevices`          | `getRegisteredDevices`          | User's registered (trusted) devices.                           |
| `useGetGoogleDriveBackupReadiness` | `getGoogleDriveBackupReadiness` | Whether the user's Google OAuth scopes allow Drive key backup. |

### Fireblocks Flow & swaps

| Hook                       | Wraps                   | Description                                                         |
| -------------------------- | ----------------------- | ------------------------------------------------------------------- |
| `useGetFlow`               | `getFlow`               | Fetch a Flow by ID. Pass `queryParams.refetchInterval` for polling. |
| `useGetFlowQuote`          | `getFlowQuote`          | Get a price quote for a Flow.                                       |
| `useGetSwapQuote`          | `getSwapQuote`          | Get a quote for a token swap.                                       |
| `useGetSwapStatus`         | `getSwapStatus`         | Poll the status of an in-flight swap.                               |
| `useGetTransactionHistory` | `getTransactionHistory` | Transaction history for a wallet account.                           |

```tsx theme={"system"}
import { useGetFlow } from '@dynamic-labs-sdk/react-hooks';

function FlowStatus({ flowId }) {
  const { data: flow, isLoading } = useGetFlow({
    flowId,
    queryParams: { refetchInterval: 3000 },
  });

  if (isLoading) return <p>Loading flow...</p>;
  return <p>Status: {flow?.status}</p>;
}
```

### Funding

| Hook                               | Wraps                           | Description                              |
| ---------------------------------- | ------------------------------- | ---------------------------------------- |
| `useGetCoinbaseBuyUrl`             | `getCoinbaseBuyUrl`             | Generate a Coinbase onramp buy URL.      |
| `useGetKrakenAccounts`             | `getKrakenAccounts`             | User's linked Kraken exchange accounts.  |
| `useGetKrakenWhitelistedAddresses` | `getKrakenWhitelistedAddresses` | Kraken whitelisted withdrawal addresses. |
| `useGetMoonPayCurrencies`          | `getMoonPayCurrencies`          | Currencies supported by MoonPay.         |
| `useGetMoonPayUrl`                 | `getMoonPayUrl`                 | Generate a MoonPay purchase URL.         |

***

## Mutation hooks

Mutation hooks wrap async write functions. They do not run on mount — call `mutate(args)` to trigger. Returns `{ mutate, isPending, data, error, reset }`.

Pass `mutateParams` to set TanStack Query mutation options (`onSuccess`, `onError`, `retry`, etc.).

### Authentication

| Hook                                  | Wraps                              | Description                                               |
| ------------------------------------- | ---------------------------------- | --------------------------------------------------------- |
| `useSendEmailOTP`                     | `sendEmailOTP`                     | Send a one-time password to an email address.             |
| `useSendSmsOTP`                       | `sendSmsOTP`                       | Send a one-time password via SMS.                         |
| `useVerifyOTP`                        | `verifyOTP`                        | Verify a one-time password (email or SMS).                |
| `useSignInWithPasskey`                | `signInWithPasskey`                | Sign in using a passkey.                                  |
| `useSignInWithExternalJwt`            | `signInWithExternalJwt`            | Sign in with an external JWT from a custom auth provider. |
| `useSignInWithSocialPopUp`            | `signInWithSocialPopUp`            | Sign in via a social provider in a popup window.          |
| `useSignInWithSocialRedirect`         | `signInWithSocialRedirect`         | Sign in via a social provider using a full-page redirect. |
| `useCompleteSocialRedirect`           | `completeSocialRedirect`           | Complete a social redirect after the provider callback.   |
| `useCompleteDeviceRegistration`       | `completeDeviceRegistration`       | Complete a device registration flow.                      |
| `useLogout`                           | `logout`                           | Log the current user out.                                 |
| `useRefreshAuth`                      | `refreshAuth`                      | Refresh the authentication token.                         |
| `useRequestExternalAuthElevatedToken` | `requestExternalAuthElevatedToken` | Request a step-up auth token for sensitive operations.    |

```tsx theme={"system"}
import { useSendEmailOTP, useVerifyOTP } from '@dynamic-labs-sdk/react-hooks';

function EmailLogin() {
  const { mutate: sendOtp, data: otpVerification } = useSendEmailOTP();
  const { mutate: verifyOtp } = useVerifyOTP();

  return (
    <>
      <button onClick={() => sendOtp({ email: 'user@example.com' })}>
        Send code
      </button>
      {otpVerification && (
        <button onClick={() => verifyOtp({ otp: '123456', otpVerification })}>
          Verify
        </button>
      )}
    </>
  );
}
```

### MFA

| Hook                             | Wraps                         | Description                                                        |
| -------------------------------- | ----------------------------- | ------------------------------------------------------------------ |
| `useRegisterTotpMfaDevice`       | `registerTotpMfaDevice`       | Register a new TOTP MFA device. Returns the QR code URI in `data`. |
| `useAuthenticateTotpMfaDevice`   | `authenticateTotpMfaDevice`   | Authenticate with a TOTP code.                                     |
| `useDeleteMfaDevice`             | `deleteMfaDevice`             | Delete an MFA device.                                              |
| `useSetDefaultMfaDevice`         | `setDefaultMfaDevice`         | Set a device as the default MFA method.                            |
| `useAuthenticateMfaRecoveryCode` | `authenticateMfaRecoveryCode` | Authenticate using a recovery code.                                |
| `useCreateNewMfaRecoveryCodes`   | `createNewMfaRecoveryCodes`   | Generate a new set of recovery codes.                              |
| `useAcknowledgeRecoveryCodes`    | `acknowledgeRecoveryCodes`    | Acknowledge that recovery codes have been saved.                   |
| `useAuthenticatePasskeyMFA`      | `authenticatePasskeyMFA`      | Authenticate with a passkey as MFA.                                |
| `useRegisterPasskey`             | `registerPasskey`             | Register a new passkey.                                            |
| `useDeletePasskey`               | `deletePasskey`               | Delete a passkey.                                                  |

### Wallets

| Hook                                        | Wraps                                    | Description                                                     |
| ------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------- |
| `useConnectWithWalletProvider`              | `connectWithWalletProvider`              | Connect a wallet using a specific provider.                     |
| `useConnectAndVerifyWithWalletProvider`     | `connectAndVerifyWithWalletProvider`     | Connect and verify (SIWE) a wallet in one step.                 |
| `useVerifyWalletAccount`                    | `verifyWalletAccount`                    | Verify ownership of a connected wallet account.                 |
| `useRemoveWalletAccount`                    | `removeWalletAccount`                    | Remove a wallet account from the session.                       |
| `useTransferWalletAccount`                  | `transferWalletAccount`                  | Transfer a wallet account to another user.                      |
| `useProveWalletAccountOwnership`            | `proveWalletAccountOwnership`            | Prove wallet ownership via signature without full verification. |
| `useAssertWalletAccountSigningAvailability` | `assertWalletAccountSigningAvailability` | Assert that a wallet account can sign (throws if not).          |
| `useSignMessage`                            | `signMessage`                            | Sign an arbitrary message with a wallet.                        |
| `useAddNetwork`                             | `addNetwork`                             | Add a network to the wallet provider.                           |
| `useSwitchActiveNetwork`                    | `switchActiveNetwork`                    | Switch the wallet's active network.                             |
| `useRevokeRegisteredDevice`                 | `revokeRegisteredDevice`                 | Revoke a single registered device.                              |
| `useRevokeAllRegisteredDevices`             | `revokeAllRegisteredDevices`             | Revoke all registered devices.                                  |

```tsx theme={"system"}
import { useSignMessage } from '@dynamic-labs-sdk/react-hooks';

function SignButton({ walletAccount }) {
  const { mutate: sign, data, isPending } = useSignMessage();

  return (
    <button
      onClick={() => sign({ walletAccount, message: 'gm' })}
      disabled={isPending}
    >
      {isPending ? 'Signing...' : 'Sign'}
    </button>
  );
}
```

### User management

| Hook                     | Wraps                 | Description                            |
| ------------------------ | --------------------- | -------------------------------------- |
| `useUpdateUser`          | `updateUser`          | Update the current user's profile.     |
| `useDeleteUser`          | `deleteUser`          | Delete the current user's account.     |
| `useUnlinkSocialAccount` | `unlinkSocialAccount` | Unlink a social account from the user. |

### Fireblocks Flow

| Hook                        | Wraps                    | Description                                                   |
| --------------------------- | ------------------------ | ------------------------------------------------------------- |
| `useAttachFlowSource`       | `attachFlowSource`       | Attach a funding source to a Flow.                            |
| `useBroadcastFlow`          | `broadcastFlow`          | Broadcast a signed Flow transaction on-chain.                 |
| `useCancelFlow`             | `cancelFlow`             | Cancel an in-progress Flow.                                   |
| `usePrepareFlowSigning`     | `prepareFlowSigning`     | Prepare a Flow for signing (returns the transaction to sign). |
| `useSubmitFlowTransaction`  | `submitFlowTransaction`  | Submit a signed transaction back to the Flow.                 |
| `useConfirmTransaction`     | `confirmTransaction`     | Confirm a pending transaction.                                |
| `useTransferAmount`         | `transferAmount`         | Transfer an amount of a token to an address.                  |
| `useExecuteSwapTransaction` | `executeSwapTransaction` | Execute a swap transaction.                                   |

```tsx theme={"system"}
import { useAttachFlowSource, useGetFlowQuote } from '@dynamic-labs-sdk/react-hooks';

function FlowSetup({ flowId, walletAccount }) {
  const { mutate: attachSource } = useAttachFlowSource();
  const { data: quote } = useGetFlowQuote({ flowId });

  return (
    <button onClick={() => attachSource({ flowId, walletAccount })}>
      Pay with wallet
    </button>
  );
}
```

### Funding

| Hook                                     | Wraps                                 | Description                                      |
| ---------------------------------------- | ------------------------------------- | ------------------------------------------------ |
| `useCreateCoinbaseOnrampOrder`           | `createCoinbaseOnrampOrder`           | Create a Coinbase onramp purchase order.         |
| `useAddCoinbaseOnrampOrderEventListener` | `addCoinbaseOnrampOrderEventListener` | Listen for Coinbase onramp order status updates. |
| `useCreateCryptoDotComPayment`           | `createCryptoDotComPayment`           | Create a Crypto.com payment session.             |
| `useCreateKrakenExchangeTransfer`        | `createKrakenExchangeTransfer`        | Initiate a transfer from a Kraken account.       |

***

## TypeScript

Every hook with parameters exports a `UseXParams` type alongside the hook:

```tsx theme={"system"}
import {
  useSignMessage,
  type UseSignMessageParams,
} from '@dynamic-labs-sdk/react-hooks';

const config: UseSignMessageParams = {
  mutateParams: {
    onSuccess: ({ signature }) => console.log(signature),
  },
};

const { mutate } = useSignMessage(config);
```

## Related

* [How React Hooks Work](/javascript/reference/react-hooks-guide) — naming rule, shapes, when to use a hook vs. a direct call
* [React Hooks reference](/javascript/reference/react-hooks) — setup, `DynamicProvider`, state hooks, `useOnEvent`
* [React Quickstart (JS SDK)](/javascript/reference/react-quickstart)
* [Events Catalog](/javascript/reference/client/events-catalog)