Skip to content

πŸ“¦ React library of commonly used Ethereum components

Notifications You must be signed in to change notification settings

Peryc/eth-components

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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

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

About

πŸ“¦ React library of commonly used Ethereum components

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.7%
  • Other 1.3%