๐Ÿบ
Eth-components

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
NetworkDisplay =>
โ€‹
โ€‹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
โ€‹
Copy link
On this page
Components & Helpers
useEthersProvider โ‡’
renderTestHook โ‡’
Account โ‡’
Address โ‡’
AddressInput โ‡’
Balance โ‡’
Blockie โ‡’
EtherInput โ‡’
Faucet โ‡’
GasGauge โ‡’
PunkBlockie โ‡’
Wallet โ‡’
transactor โ‡’