Quick Start - Starter Kit

Installation

yarn add @tx-kit/hooks viem wagmi

npm install @tx-kit/hooks viem wagmi

bun add @tx-kit/hooks viem wagmi

pnpm add @tx-kit/hooks viem wagmi

Import

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.

"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>
}

"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>
  );
}

"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;

Usage

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

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.

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.

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

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 section of the coinbase smart wallet docs.

import { useTransmissionsClient } from '@tx-kit/hooks'

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

​Installation

​Import

​Transmissions Client Context

​Usage

​Returns

​Parameters

​chainId

​publicClient (optional)

​walletClient (optional)

​paymasterConfig (optional)