• Stars
    star
    123
  • Rank 290,145 (Top 6 %)
  • Language
    TypeScript
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

πŸ“¦ React library of commonly used Ethereum components

🎨 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

More Repositories

1

scaffold-eth

πŸ— forkable Ethereum dev stack focused on fast product iterations
CSS
9,055
star
2

scaffold-eth-2

Open source forkable Ethereum dev stack
TypeScript
1,365
star
3

scaffold-eth-challenges

Scaffold-Eth πŸ— Challenges repository
644
star
4

eth-ui

πŸ–‡ React library of commonly used Ethereum hooks
TypeScript
437
star
5

scaffold-eth-examples

Scaffold-Eth πŸ— examples repo
CSS
213
star
6

scaffold-eth-typescript

Typescript version of Scaffold-Eth πŸ—
TypeScript
186
star
7

se-2-challenges

SpeedRunEthereum challenges (Powered by Scaffold-ETH 2)
82
star
8

punk-wallet

πŸ§‘β€πŸŽ€-punk-wallet
JavaScript
32
star
9

scaffold-eth-typescript-challenges

All of our typescript challenges ported over from the javascript world
27
star
10

Scaffold-ETH-DeFi-Challenges

Solidity
27
star
11

buidlguidl-v3

JavaScript
19
star
12

OP-RetroPGF3-Discovery-Voting

Create the voting and discovery process for OP retroactive public goods funding for badgeholders
TypeScript
14
star
13

se-2-docs

Documentation site for Scaffold-ETH 2
JavaScript
13
star
14

scaffold-eth-docs

πŸ“‘. Document repository for Scaffold-Eth πŸ—
10
star
15

eth-services

🚚 services eventually hoisted from scaffold-eth
7
star
16

buidlguidl.com

(OLD) The home of the Buidl Guidl 🏰
JavaScript
6
star
17

scaffold-eth-expo

Scaffold-ETH + Expo starter kit
JavaScript
5
star
18

SablierV2_starterKit

Let’s build a starter kit in se2 where someone who is building a protocol that needs streaming can fork our starter kit and have Sablier v2 with some cool vesting curve and other cool v2 features
TypeScript
5
star
19

scaffold-eth-typescript-examples

TypeScript
2
star
20

Punk-Wallet-Mobile

iOS/Android version on Punk Wallet πŸ§‘β€πŸŽ€
JavaScript
2
star
21

hardhat-tasks

Hardhat tasks library
2
star
22

eth-headless

TypeScript
1
star
23

scaffold-eth-next-js

1
star
24

scaffold-eth-moonstarter

A scaffold-eth starter build with typescript, nextjs, chakra ui, eth-hooks
TypeScript
1
star
25

eth-contract-warehouse

TypeScript
1
star
26

scaffoldeth.io

Scaffold-ETH 2 landing page
TypeScript
1
star