# React Hooks All hooks are exported from `mbga`. They must be used inside a ``. Every hook accepts an optional `config` parameter to use a specific config instead of the one from context. ## Connection Hooks ### `useConfig` Returns the current MBGA config from context. ```ts import { useConfig } from 'mbga' function MyComponent() { const config = useConfig() console.log(config.network) // SparkNetwork } ``` **Returns:** `Config` **Throws:** `MbgaProviderNotFoundError` if used outside ``. ### `useDisconnect` Disconnects the current wallet (or a specific connector). ```tsx import { useDisconnect } from 'mbga' function DisconnectButton() { const { disconnect, isPending } = useDisconnect() return ( ) } ``` **Returns:** `UseDisconnectReturnType` ```ts type UseDisconnectReturnType = { disconnect: (variables?: { connector?: Connector }) => void disconnectAsync: (variables?: { connector?: Connector }) => Promise error: DisconnectErrorType | null isError: boolean isIdle: boolean isPending: boolean isSuccess: boolean reset: () => void status: 'error' | 'idle' | 'pending' | 'success' } ``` Pass `{ connector }` to disconnect a specific connector. Without it, the current active connector is disconnected. ### `useConnectors` Returns the list of all configured connectors. Re-renders when connectors change. ```tsx import { useConnectors } from 'mbga' function ConnectorList() { const connectors = useConnectors() return (
    {connectors.map((c) => (
  • {c.name} ({c.type})
    • ))}
) } ``` **Returns:** `readonly Connector[]` ### `useWatchConnection` Watches for connection state changes and fires callbacks. Does not cause re-renders itself. ```tsx import { useWatchConnection } from 'mbga' function ConnectionWatcher() { useWatchConnection({ onChange(connection, prevConnection) { console.log('Connection changed:', connection.status) }, onConnect(connection) { console.log('Connected:', connection.accounts) }, onDisconnect(prevConnection) { console.log('Disconnected from:', prevConnection.connector?.name) }, }) return null } ``` **Parameters:** `UseWatchConnectionParameters` ```ts type UseWatchConnectionParameters = { config?: Config | undefined onChange?( connection: GetConnectionReturnType, prevConnection: GetConnectionReturnType, ): void onConnect?(connection: GetConnectionReturnType): void onDisconnect?(prevConnection: GetConnectionReturnType): void } ``` **Returns:** `void` ### `useGetTransaction` Looks up a transaction by its ID. ```tsx import { useGetTransaction } from 'mbga' function TransactionStatus({ txId }: { txId: string }) { const { data, isLoading } = useGetTransaction({ id: txId }) if (isLoading) return

Loading...

return (

Status: {data?.status}

Amount: {data?.amount.toString()} sats

Direction: {data?.direction}

Type: {data?.type}

) } ``` **Parameters:** | Parameter | Type | Description | |-----------|------|-------------| | `id` | `string` | Transaction ID to look up | | `enabled` | `boolean` | Whether the query should execute | **Return data:** ```ts type GetTransactionReturnType = { id: string status: string amount: bigint direction: 'incoming' | 'outgoing' createdAt: Date | undefined updatedAt: Date | undefined type: string } ``` ### `useCreateInvoice` Generates a Lightning invoice to receive payments. ```tsx import { useCreateInvoice } from 'mbga' function ReceivePayment() { const { createInvoice, data, isPending } = useCreateInvoice() return (
{data && {data.invoice}}
) } ``` **Mutation variables:** ```ts type CreateInvoiceParameters = { amount: bigint // Amount in satoshis memo?: string // Optional description } ``` **Return data:** ```ts type CreateInvoiceReturnType = { invoice: string // BOLT11 invoice string id?: string // Internal request ID (for use with waitForPayment) } ``` ### `useSignMessage` Signs a message with the connected wallet. ```tsx import { useSignMessage } from 'mbga' function SignButton() { const { signMessage, data } = useSignMessage() return (
{data &&

Signature: {data.signature}

}
) } ``` **Mutation variables:** ```ts type SignMessageParameters = { message: string // Message to sign address?: string // Address to sign with (defaults to current account) } ``` **Return data:** `{ signature: string }`