React library of commonly used Ethereum components.
Used by 🏗 scaffold-eth Used by 🏭 scaffold-eth-typescript
Created by 🏰 BuidlGuidl.eth
yarn add eth-components
@austinGriffith @shravansunder
- react & general
- react
- react-dom
- react-css-theme-switcher
- web3modal
- ant design
- antd
- @ant-design/icons
- 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
A wrapper around useWeb3React that we can extend as required
Kind: global constant
Returns: TEthersManager
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 |
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 |
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 |
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 |
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 |
Show a blockie (bar code profile icon) component for an public address
Kind: global constant
Returns: (FC)
Param |
---|
props |
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 |
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 |
Displays gas gauge
~ Features ~
- Provide gasPrice={gasPrice} and get current gas gauge
Kind: global constant
Returns: (FC)
Param |
---|
props |
Show a punk blockie (crypto punk profile icon) component for an public address
Kind: global constant
Returns: (FC)
Param |
---|
props |
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 |
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 |