🎨 Eth-Components Overview

React library of commonly used Ethereum components.

Used by 🏗 scaffold-eth Used by 🏭 scaffold-eth-typescript

Install

yarn add eth-components

Authors

@austinGriffith @shravansunder

Dependencies

react & general
- react
- react-dom
- react-css-theme-switcher
- web3modal
ant design
- antd
- @ant-design/icons

API Docs

Documentation site

Docs @gitbook

Components & Helpers

useEthersProvider ⇒

A wrapper around useWeb3React that we can extend as required

renderTestHook ⇒

Created a test hook with a Web3Wrapper

Account ⇒

Displays an Address, Balance, and Wallet as one Account component, also allows users to log in to existing accounts and log out

~ Features ~

Provide address={address} and get balance corresponding to the given address
Provide localProvider={localProvider} to access balance on local network
Provide userProvider={userProvider} to display a wallet
Provide mainnetProvider={mainnetProvider} and your address will be replaced by ENS name
```
      (ex. "0xa870" => "user.eth")
```
Provide price={price} of ether and get your balance converted to dollars
Provide web3Modal={web3Modal}, loadWeb3Modal={loadWeb3Modal}, logoutOfWeb3Modal={logoutOfWeb3Modal}
```
      to be able to log in/log out to/from existing accounts
```

Provide blockExplorer={blockExplorer}, click on address and get the link

      (ex. by default "https://etherscan.io/" or for xdai "https://blockscout.com/poa/xdai/")

Address ⇒

Displays an address with a blockie image and option to copy address

~ Features ~

Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
```
      (ex. "0xa870" => "user.eth")
```

Provide blockExplorer={blockExplorer}, click on address and get the link

      (ex. by default "https://etherscan.io/" or for xdai "https://blockscout.com/poa/xdai/")

Provide fontSize={fontSize} to change the size of address text

AddressInput ⇒

Displays an address input with QR scan option ~ Features ~

Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name

      (ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address

Provide placeholder="Enter address" value for the input
Value of the address input is stored in value={toAddress}

Control input change by onChange={setToAddress}

                  or onChange={address => { setToAddress(address);}}

Balance ⇒

Displays a balance of given address in ether & dollar

~ Features ~

Provide address={address} and get balance corresponding to given address
Provide provider={mainnetProvider} to access balance on mainnet or any other network (ex. localProvider)
Provide price={price} of ether and get your balance converted to dollars

Blockie ⇒

Show a blockie (bar code profile icon) component for an public address

EtherInput ⇒

Displays input field for ETH/USD amount, with an option to convert between ETH and USD ~ Features ~

Provide price={price} of ether and easily convert between USD and ETH
Provide value={value} to specify initial amount of ether
Provide placeholder="Enter amount" value for the input
Control input change by onChange={value => { setAmount(value);}}

Faucet ⇒

Displays a local faucet to send ETH to given address, also wallet is provided

~ Features ~

Provide price={price} of ether and convert between USD and ETH in a wallet
Provide localProvider={localProvider} to be able to send ETH to given address

Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name

      (ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
      works both in input field & wallet

Provide placeholder="Send local faucet" value for the input

GasGauge ⇒

Displays gas gauge

~ Features ~

Provide gasPrice={gasPrice} and get current gas gauge

PunkBlockie ⇒

Show a punk blockie (crypto punk profile icon) component for an public address

Wallet ⇒

Displays a wallet where you can specify address and send USD/ETH, with options to scan address, to convert between USD and ETH, to see and generate private keys, to send, receive and extract the burner wallet ~ Features ~

Provide provider={userProvider} to display a wallet

Provide address={address} if you want to specify address, otherwise

                                            your default address will be used

Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name

      (ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address

Provide price={price} of ether and easily convert between USD and ETH
Provide color to specify the color of wallet icon

transactor ⇒

this should probably just be renamed to "notifier" it is basically just a wrapper around BlockNative's wonderful Notify.js https://docs.blocknative.com/notify

useEthersProvider ⇒

A wrapper around useWeb3React that we can extend as required

Kind: global constant
Returns: TEthersManager

renderTestHook ⇒

Created a test hook with a Web3Wrapper

Kind: global constant
Returns: (TTestHookResult)
See: renderHook from @link testing-library/react-hooks

Param	Description
callback	callback to init hook

Account ⇒

Displays an Address, Balance, and Wallet as one Account component, also allows users to log in to existing accounts and log out

~ Features ~

Provide address={address} and get balance corresponding to the given address
Provide localProvider={localProvider} to access balance on local network
Provide userProvider={userProvider} to display a wallet
Provide mainnetProvider={mainnetProvider} and your address will be replaced by ENS name (ex. "0xa870" => "user.eth")
Provide price={price} of ether and get your balance converted to dollars
Provide web3Modal={web3Modal}, loadWeb3Modal={loadWeb3Modal}, logoutOfWeb3Modal={logoutOfWeb3Modal} to be able to log in/log out to/from existing accounts
Provide blockExplorer={blockExplorer}, click on address and get the link (ex. by default "https://etherscan.io/" or for xdai "https://blockscout.com/poa/xdai/")