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

# Quick Start

> Get up and running with the tx-kit react hooks

## Installation

<CodeGroup>
  ```bash yarn  theme={null}
  yarn add @tx-kit/hooks viem wagmi
  ```

  ```bash npm  theme={null}
  npm install @tx-kit/hooks viem wagmi
  ```

  ```bash bun  theme={null}
  bun add @tx-kit/hooks viem wagmi
  ```

  ```bash pnpm  theme={null}
  pnpm add @tx-kit/hooks viem wagmi
  ```
</CodeGroup>

## Import

```javascript theme={null}
import { ... } from '@tx-kit/hooks'
```

## Transmissions Client Context

The hooks packages provides a `React.Context` that can be used to access the transmissions client in a react component tree. The context provider should wrap your component tree beneath your wallet providers.
Below is an example using the NextJS app router, rainbowkit, and coinbase smart wallet. The context provider pairs very nicely with wagmi hooks.

<CodeGroup>
  ```typescript Component.tsx theme={null}
  "use client";
  import { useWalletClient } from "wagmi";
  import { useMintTokenBatchWithETH } from "@tx-kit/hooks";

  const MyComponent = () => {
      const { walletClient } = useWalletClient()
      const { 
          mintTokenBatchWithETH, 
          status, 
          txHash,
          error 
      } = useMintTokenBatchWithETH()

      const handleMint = () => {
          mintTokenBatchWithETH({
              channelAddress: '0xTargetChannel',
              to: walletClient.account.address,
              tokenIds: [1n],
              amounts: [1n]
          })
      }

      return <button onClick={handleMint}>Mint</button>
  }
  ```

  ```typescript WalletProvider.tsx theme={null}
  "use client";
  import { createConfig, http, WagmiProvider } from "wagmi";
  import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
  import { base, baseSepolia, Chain } from "wagmi/chains";
  import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
  import { coinbaseWallet, walletConnectWallet, rainbowWallet, metaMaskWallet } from '@rainbow-me/rainbowkit/wallets'
  import TxProvider from "./TxProvider";

  coinbaseWallet.preference = 'all';

  const queryClient = new QueryClient()

  const config = getDefaultConfig({
    appName: "Uplink.wtf",
    appUrl: process.env.NEXT_PUBLIC_CLIENT_URL,
    projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID,
    chains: [base as Chain, baseSepolia as Chain],
    transports: {
      [base.id]: http(),
      [baseSepolia.id]: http(),
    },
    ssr: true,
    wallets: [{
      groupName: "Popular",
      wallets: [coinbaseWallet, metaMaskWallet]
    },
    {
      groupName: "More",
      wallets: [walletConnectWallet, rainbowWallet]
    }
    ],
  })

  export default function WalletProvider({ children }: { children: React.ReactNode }) {
    return (
      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          <RainbowKitProvider>
              <TxProvider>
                  {children}
              </TxProvider>
          </RainbowKitProvider>
        </QueryClientProvider>
      </WagmiProvider>
    );
  }

  ```

  ```typescript TxProvider.tsx theme={null}
  "use client";
  import { TransmissionsProvider, useTransmissionsClient } from '@tx-kit/hooks';
  import { SUPPORTED_CHAIN_IDS } from '@tx-kit/sdk';
  import { useMemo } from 'react';
  import { useChainId, usePublicClient, useWalletClient } from 'wagmi';

  const TxProvider = ({ children }: { children: React.ReactNode }) => {
      return (
          <TransmissionsProvider>
              <TransmissionsClientProvider>
                  {children}
              </TransmissionsClientProvider>
          </TransmissionsProvider>
      )
  }

  const TransmissionsClientProvider = ({ children }: { children: React.ReactNode }) => {
      const chainId = useChainId();
      const { data: walletClient, status } = useWalletClient();
      const publicClient = usePublicClient();

      const transmissionsClientConfig = useMemo(() => ({
          chainId: SUPPORTED_CHAIN_IDS.includes(chainId) ? chainId : 8453,
          walletClient: walletClient,
          publicClient: publicClient,
          paymasterConfig: {
              paymasterUrl: process.env.NODE_ENV === "production" ? `${process.env.NEXT_PUBLIC_HUB_URL}/v2/paymaster_proxy` : 'https://paymaster.base.org',
          }
      }), [chainId, walletClient, publicClient]);

      useTransmissionsClient(transmissionsClientConfig);

      return <>{children}</>;
  };


  export default TxProvider;
  ```
</CodeGroup>

### Usage

```typescript theme={null}
import { useTransmissionsClient } from '@tx-kit/hooks';
import { SUPPORTED_CHAIN_IDS } from '@tx-kit/sdk';
import { useMemo } from 'react';
import { useChainId, usePublicClient, useWalletClient } from 'wagmi';

const chainId = useChainId();
const { data: walletClient, status } = useWalletClient();
const publicClient = usePublicClient();

const transmissionsClientConfig = useMemo(() => ({
    chainId: SUPPORTED_CHAIN_IDS.includes(chainId) ? chainId : 8453,
    walletClient: walletClient,
    publicClient: publicClient,
    paymasterConfig: {
        paymasterUrl: '/paymaster_proxy',
    }
}), [chainId, walletClient, publicClient]);

useTransmissionsClient(transmissionsClientConfig);
```

### Returns

`TranmissionsClient`

### Parameters

#### chainId

* **type**: `8453 | 84532`

The chain id of the target chain

```typescript theme={null}
import { useTransmissionsClient } from '@tx-kit/hooks'

useTransmissionsClient({
    chainId: 8453,
    ...
});
```

#### publicClient (optional)

* **type**: `PublicClient<Transport, Chain>`

The public client to use for public data requests. Some methods require a public client to be provided.

```typescript theme={null}
import { createPublicClient, http } from 'viem'
import { useTransmissionsClient } from '@tx-kit/hooks'

const publicClient: createPublicClient({
    chain: base,
    transport: http()
})

useTransmissionsClient({
    publicClient,
    ...
});
```

#### walletClient (optional)

* **type**: `WalletClient<Transport, Chain, Account>`

The wallet client to use for modifying blockchain state. Most uplink methods require a wallet client to be provided.

```typescript theme={null}
import { createWalletClient, http } from 'viem'
import { useTransmissionsClient } from '@tx-kit/hooks'

const walletClient: createWalletClient({
    chain: base,
    transport: http(),
    account: Account // from local private key or browser wallet
})

useTransmissionsClient({
    walletClient,
    ...
});
```

#### paymasterConfig (optional)

* **type**: `PaymasterConfig`

```typescript theme={null}
type PaymasterConfig = {
    paymasterUrl?: string
}
```

The paymaster configuration object for the wallet client. This object contains the paymaster url for a paymaster proxy. The default value is undefined.
See the [paymasters](https://www.smartwallet.dev/guides/paymasters) section of the coinbase smart wallet docs.

```typescript theme={null}
import { useTransmissionsClient } from '@tx-kit/hooks'

useTransmissionsClient({
    paymasterConfig: {
        paymasterUrl: 'https://example_server/paymaster_proxy'
    }
    ...
})
```