π¨ 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
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
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
- 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);}}
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
- 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/")
Kind: global constant
Returns: (FC)
Param |
---|
props |
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)
Param |
---|
props |
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)
Param |
---|
props |
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)
Param |
---|
props |
Blockie β
Show a blockie (bar code profile icon) component for an public address
Kind: global constant
Returns: (FC)
Param |
---|
props |
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)
Param |
---|
props |
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)
Param |
---|
props |
GasGauge β
Displays gas gauge
~ Features ~
- Provide gasPrice={gasPrice} and get current gas gauge
Kind: global constant
Returns: (FC)
Param |
---|
props |
PunkBlockie β
Show a punk blockie (crypto punk profile icon) component for an public address
Kind: global constant
Returns: (FC)
Param |
---|
props |
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)
Param |
---|
props |
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
Param |
---|
provider |
gasPrice |
etherscan |