Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

eth-components

Package Overview
Dependencies
Maintainers
3
Versions
231
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

eth-components

A set of react components to turbocharge buidling

  • 1.0.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
234
increased by875%
Maintainers
3
Weekly downloads
 
Created
Source

🖇 Eth-Components Overview

React library of commonly used Ethereum components.

Used by 🏗 scaffold-eth

Created by 🏰 BuidlGuidl.eth

Install

yarn add eth-components

Authors

@austinGriffith @shravansunder

Peer Dependencies

  • react & general
    • react
    • react-dom
    • react-css-theme-switcher
    • web3modal
  • ant design
    • antd
    • @ant-design/icons

API

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

ParamDescription
callbackcallback 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

Keywords

FAQs

Package last updated on 03 Oct 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc