@web3marketlabs/react

React components for wallet connection and transaction management.

Peer Dependencies

Package	Version
`react`	`^18.0.0 \|\| ^19.0.0`
`react-dom`	`^18.0.0 \|\| ^19.0.0`
`wagmi`	`^2.14.0`
`viem`	`^2.21.0`
`@tanstack/react-query`	`^5.0.0`

npm install @web3marketlabs/react react react-dom wagmi viem @tanstack/react-query

Components

KitProvider ConnectButton TransactionButton

Generated Hooks

Overview

The @web3marketlabs/react package exports three components:

Export	Type	Description
`KitProvider`	Component	Root provider wrapping WagmiProvider and QueryClientProvider
`ConnectButton`	Component	Wallet connection button with connector dropdown
`TransactionButton`	Component	Full transaction lifecycle button

In addition to these built-in exports, the codegen pipeline (w3m generate) produces typed React hooks for every contract in your project. These generated hooks follow the naming convention useRead<ContractName><FunctionName> and useWrite<ContractName><FunctionName>, and are built on top of Wagmi’s useReadContract and useWriteContract.

All components require KitProvider to be mounted as an ancestor. See the KitProvider page for setup instructions.

Quick Setup

import { createConfig, http } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { KitProvider, ConnectButton } from '@web3marketlabs/react'
 
const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})
 
export default function App() {
  return (
    <KitProvider config={config}>
      <ConnectButton />
    </KitProvider>
  )
}

Generated Hooks Chains