Awesome

🎨 Eth-Components Overview

React library of commonly used Ethereum components.

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

Created by 🏰 BuidlGuidl.eth

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

<a name="useEthersProvider"></a>

useEthersProvider ⇒

A wrapper around useWeb3React that we can extend as required

Kind: global constant
Returns: TEthersManager
<a name="renderTestHook"></a>

renderTestHook ⇒

Created a test hook with a Web3Wrapper

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

<a name="Account"></a>

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/")

Kind: global constant
Returns: (FC)

<a name="Address"></a>

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

Kind: global constant
Returns: (FC)

<a name="AddressInput"></a>

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

Kind: global constant
Returns: (FC)

<a name="Balance"></a>

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

Kind: global constant
Returns: (FC)

<a name="Blockie"></a>

Blockie ⇒

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

Kind: global constant
Returns: (FC)

<a name="EtherInput"></a>

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

Kind: global constant
Returns: (FC)

<a name="Faucet"></a>

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

Kind: global constant
Returns: (FC)

<a name="GasGauge"></a>

GasGauge ⇒

Displays gas gauge

~ Features ~

• Provide gasPrice={gasPrice} and get current gas gauge

Kind: global constant
Returns: (FC)

<a name="PunkBlockie"></a>

PunkBlockie ⇒

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

Kind: global constant
Returns: (FC)

<a name="Wallet"></a>

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

Kind: global constant
Returns: (FC)

<a name="transactor"></a>

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

Kind: global constant
Returns: (transactor) a function to transact which calls a callback method parameter on completion