web3-ui

In Development - Refactoring in Progress 🏗️

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

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

Quick start

Note: This is for the current public release. This library is being refactored and instructions will change.

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

Roadmap

Please see the Roadmap for more details

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):

_{Erik Ritter} 💻 👀	_{Camila Rondinini} 💻 👀	_{Dhaiwat Pandya} 💻 👀	_{Nazeeh Vahora} 💻 📖	_{Jose L. Velez} 📖 💻	_with-heart 👀 💻	_Christian 💻
_Alex 💻	_{Sam Wellander} 📖	_{Todor Tsankov} 💻	_{Jovi De Croock} 💻	_Bonhomme 💻	_hone1er 💻	_{Emanuel López} 💻
_{Greg Syme} 💻	_{Casuneanu Catalin} 💻	_{Jake Warren} 💻	_{Carlo Miguel Dy} 💻 📖	_{Akshata Mohanty} 📖	_{Ibby E} 💻	_{Sweta Shaw} 💻
_{Snehit Paunikar} 📖	_{Nathan Ng} 💻	_manny 💻	_fangjun 📖	_{Julian Krispel-Samsel} 📖	_{Ikko Ashimine} 📖	_{Leonardo Berteotti} 💻
_{Patrick Aljord} 💻	_{Shamoil Arsiwala} 💻	_{Ernesto García} 💻	_David 💻	_{Eric Roupe} 💻	_{Ricardo Seromenho} 💻	_{James Charlesworth} 💻
_{Diego Alzate} 💻	_{Andrii Shupta} 💻	_meowy 💻	_{Rémi Roycourt} 💻	_{Ajinkya Shinde} 💻