@web3-ui/core

@web3-ui/core

A set of React components and hooks made for web3-specific use cases. Fully compatible with and built on top of ChakraUI.

This package is an opinionated combination of @web3-ui/components and @web3-ui/hooks.

yarn add @web3-ui/core

Getting started

At the root of your React app, wrap your app in the <Provider> component:

// _app.tsx (or the root of your app)
import { Provider, NETWORKS } from '@web3-ui/core';

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

---

Components

This is the list of components the package currently provides:

• Provider
• ConnectWallet
• TokenGate
• TokenBalance

---

Provider

The Provider component is a parent provider, wrapping the ComponentsProvider and the HooksProvider. You need to wrap this component around your entire App.

Usage

See Getting Started for an example.

---

ConnectWallet

ConnectWallet is a Button based component with the following behaviour:

When wallet is connected,

• shows user's address or ENS
• on click, disconnects wallet

When wallet is not connected,

• allows the user to connect to their wallet via Metamask or WalletConnect

Usage

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

<ConnectWallet />;

---

TokenGate

TokenGate lets you conditionally render some content depending on whether the current connected user has enough amount of a specific token. The component only supports ERC20 and ERC721 (NFTs) tokens at the moment but support for other standards is coming soon.

Usage

import { TokenGate } from '@web3-ui/core';

<TokenGate
  tokenContractAddress="0x08149745590e9025b52b6801e9dd3E752e60F3A2"
  requiredQuantity={+ethers.utils.parseEther('1')} // the component expects the amount in wei.
  deniedContent={
    <p>This message will show up if the user doesn't have enough tokens.</p>
  }
  tokenType="ERC721" // optional, defaults to ERC20
>
  <h1>This message will be visible if the user has enough tokens.</h1>
</TokenGate>;

---

TokenBalance

TokeBalance is a component that fetches and renders the balance of an ERC20 token for a given address.

import { TokenBalance } from '@web3-ui/core';

<TokenBalance
  accountAddress="0x503828976D22510aad0201ac7EC88293211D23Da"
  tokenAddress="0x6B175474E89094C44Da98b954EedeAC495271d0F"
  usdRate={0.9955}
/>;

---

Hooks

This package exports all the hooks provided by the @web3-ui/hooks package.

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

const { connectWallet } = useWallet();