Wen React

Wen Tools are under heavy development

React component to connect your users quickly

Getting Started

Wen React is a component that allows you to connect to wallets in 1 line of code in any React 18 app.

npm i @wen-tools/actions @wen-tools/react
# or
yarn add @wen-tools/actions @wen-tools/react
# or
pnpm i @wen-tools/actions @wen-tools/react

Connect users

Just render the kit component. It includes everything to connect to a wallet and right network.

import { ConnectButton } from "@wen-tools/react";


export default function Home() {
  return (
    <div>
      <ConnectButton />
    </div>
  );
}

Specify the network

pass the network to the component. Both number and hexstring are supported.

import { ConnectButton } from "@wen-tools/react";


export default function Home() {
  return (
    <div>
      <ConnectButton chainId="4" />
    </div>
  );
}

Custom network

If your chain is not automatically detected, you can decided to pass your own network and the chainDisplayName

import { ConnectButton } from "@wen-tools/react";


export default function Home() {
  return (
    <div>
      <ConnectButton chainId={87765} chainDisplayName="My awesome network" />
    </div>
  );
}

Theming

pass the theme prop with any of these options

  • base,
  • dark
  • midnight,
  • elegant
  • w3fs
Choose one
import { ConnectButton } from "@wen-tools/react";


export default function Home() {
  return (
    <div>
      <ConnectButton theme="dark" />
    </div>
  );
}

Reading wallet data

@wen-tools/actions