Usage

Each w3-kit component has its own import path, keeping your bundle size small and your imports explicit.

Basic Example

App.tsx

import { ConnectWalletButton } from "w3-kit/connect-wallet"
import { TokenSwapWidget } from "w3-kit/token-swap"

function App() {
  return (
    <ConnectWalletButton
      onConnect={(address) => console.log(address)}
      variant="light"
    />
  )
}

Import Paths

Every component is available from its own subpath. This lets your bundler tree-shake unused components automatically.

// Individual imports
import { ConnectWalletButton } from "w3-kit/connect-wallet"
import { NetworkSwitcher } from "w3-kit/network-switcher"
import { WalletBalance } from "w3-kit/wallet-balance"
import { TokenSwapWidget } from "w3-kit/token-swap"
import { NFTCard } from "w3-kit/nft-card"
import { SmartContractScanner } from "w3-kit/smart-contract-scanner"

TypeScript

All components are fully typed. Props interfaces are exported alongside each component so you can use them in your own types.

types.ts

import type { ConnectWalletButtonProps } from "w3-kit/connect-wallet"
import type { NFTCardProps } from "w3-kit/nft-card"

// Extend component props in your own app
interface MyWalletButton extends ConnectWalletButtonProps {
  showBalance?: boolean
}

Composing Components

Components are designed to work together. Here is a common pattern that combines wallet connection, balance display, and a swap widget.

Dashboard.tsx

import { ConnectWalletButton } from "w3-kit/connect-wallet"
import { WalletBalance } from "w3-kit/wallet-balance"
import { TokenSwapWidget } from "w3-kit/token-swap"

function Dashboard() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center justify-between">
        <WalletBalance variant="compact" />
        <ConnectWalletButton variant="light" />
      </div>
      <TokenSwapWidget onSwap={async (tx) => console.log(tx)} />
    </div>
  )
}