React Web 3 Components

A single library for commonly used web3 react components

Preview

You can test the component library here: https://react-web3-components.com/

Usage

1. Install the package

npm install --save react-web3-components

# OR

yarn add react-web3-components

2. Configure your REACT_APP_RPC_URL in the your .env file. If you don't have one yet, you can get one for free here. Note: both the modal and wallet will work without a RPC URL but you won't be able to interact with the blockchain. The ens profile will fail without configuration

REACT_APP_RPC_URL=https://mainnet.infura.io/v3/yourinfuraid

3. Import the component you want to use, no additional configuration is needed beyond setting the environment variable.

import { Modal } from "react-web3-components";


return <Modal isOpen={isOpen} close={() => setOpen(false)} />

All Components

Wallet

import {
    Wallet, //All 3 wrapped together
    MetaMaskWallet,  // Only MetaMask option
    CoinbaseWallet, // Only coinbase option
    WalletConnectWallet, // Only Wallet Connect option
} from "react-web3-components";


return <Wallet />

Modal

import { Modal } from "react-web3-components";

const [isOpen, setOpen] = useState(false);

return <Modal isOpen={isOpen} close={() => setOpen(false)}   />

Ens Profile Image

import { EnsProfileImage } from "react-web3-components";


return <EnsProfileImage ens="vitalik.eth" size={24}  />