React-chain-ui NPM

web3-ui

In Development 🏗️

A library of UI components specifically crafted for web3 use cases.

Package name	Current version
`@web3-ui/core`
`@web3-ui/components`
(Deprecated) `@web3-ui/hooks`

Quick start

Install the package

$ yarn add @web3-ui/core ethers

Setup the Provider

import { Provider, NETWORKS } from '@web3-ui/core';

function MyApp({ Component, pageProps }) {
  return (
    <Provider network={NETWORKS.mainnet}>
      <Component {...pageProps} />
    </Provider>
  );
}

Use the components and hooks

import { ConnectWallet, useWallet } from '@web3-ui/core';

function Home() {
  const { connection } = useWallet();

  return (
    <div>
      <ConnectWallet />
      <div>{connection.ens || connection.userAddress}</div>
    </div>
  );
}

Do note that you can also install & use the components and hooks packages separately. They are completely independent. The core package is an opinionated combination of the components and hooks packages.

How to Contribute

Read the CONTRIBUTING GUIDELINES.

The motive behind this package

RFC: web3-ui (a web3-specific UI library)

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

Special thanks

This project would not have been possible without these wonderful projects: