web3 Plugin
web3
simplifies notoriously complex web3.js APIs and connects with Ethereum blockchain.
Installation
nextdapp add web3
web3
plugin requires util plugins as well.
nextdapp add util
web3
node package is also required to be installed to the main app.
yarn add web3
conf.js / conf.local.js
The ethereum network should be specified in conf.js
or conf.local.js
. You can also predefine ERC20 token addresses to use in the app.
...
web3: {
network: "1"
erc20: {
ALIS : "0xea610b1153477720748dc13ed378003941d84fab",
DAI : "0x6b175474e89094c44da98b954eedeac495271d0f"
}
},
...
ethereum networks
1
: mainnet3
: ropsten4
: rinkby42
: kovan
Global States
web3_init
This will be set true
once web3
has tried to connect with web3.js
. It will be true
even if web3.js
or an available wallet address is missing.
web3_updated
This will be set to Date.now()
every time something changes with the wallet state. You can watch web3_updated
and execute a function with <Tracker />
.
web3_network
The curently connected ethereum network.
web3_address
The curently connected wallet address.
eth_balance
The ETH balance of the currently selected web3_address
.
/* eth_balance */
{
network, // current_network
str, // ETH balance
wei, // ETH balance in Wei
address // web3_address
}
Global Functions
initWeb3()
This function needs to be executed once to detect web3.js
and connect with an ethereum wallet such as the Metamask browser extension. You can just do this in a component.
useEffect(() => { initWeb3() }, [])
eth()
eth
has two methods to deal with Ethereum native token ether
.
ETH constant methods
getBalance(address)
: get the balance of address
. If address
is omitted, it will be web3_address
.
balanceOf(address)
: an alias for getBalance
ETH transaction methods
transfer( to, value)
: transfer value
ETH to to
address
sendTransaction({ to, value })
: transfer value
ETH to to
address. It's the same as transfer
but in the web3.js grammar.
const ether = eth()
const to = "0xxxxxx..."
// balance
console.log(fromWei(await ether.balanceOf()))
// transfer
const [err, receipt] = await ether.transfer(to, toWei("1"))
erc20({ address, token })
This is a handy way to make transactions to ERC20 contracts. You can either pass address
of the token or predefined token name such as ALIS
. Once you get the contract instance, you can execute any methods defined in the erc20 abi in consice grammar.
const token = erc20({token : "ALIS"})
const my_address = "0xxxxxx..."
// constant method
console.log(await token.balanceOf(my_address))
// transaction method
const [err, receipt] = await token.approve(my_address, 100)
ERC20 constant methods
balanceOf(address)
: get the balance of address
totalSupply()
: get the totalSupply of the token
allowance(owner, spender)
: get the allowance of the owner
address for spender
contract
ERC20 transaction methods
approve(spender, amount)
: allow spender
to move amount
transfer(recipient, amount)
: transfer amount
to recipient
transferFrom(spender, recipient, amount)
: transfer amount
from spender
to recipient
Transaction Methods
You can pass an object as the last argument to the function to modify the send options described in the web3 docs.
Options: from
, to
, value
, gas
, gasPrice
, data
, nonce
You can also pass transaction event listener described here in the same object.
Event Listeners: transactionHash
, confirmation
, error
The transactionHash
is a frequently used listener to immediately get the hash
right after the transaction is sent (before the transaction is confirmed), so there is a shortcut. You can simply pass a function to get the hash
as the last argument (after the object above).
const [err, receipt] = await token.approve(
my_address,
100,
{ gas: 20000 }, // send options
hash => console.log(hash) // immediately get the transaction hash
)
console.log(receipt) // get the receipt after transaction is confirmed
contract({abi, address})
Just like erc20()
, you can pass an ABI
of any contract and get the contract instance.
For example, if you pass the uniswap_exchange ABI, you can swap ETH and tokens.
const exchange_address = "0xxxx...."
const exchange_abi = [
/* ... */
]
const uniswap = contract({ abi: exchange_abi, address: exchange_address })
const min_tokens = 1
const deadline = Date.now() + 1000 * 60 * 15
const [err, receipt] = await uniswap.ethToTokenSwapInput(min_tokens, deadline, {
value: toWei("0.1")
})
Regular Functions
toWei()
convert eth to wei
const [err, receipt] = await token.approve(my_address, toWei("100"))
fromWei()
convert wei to eth
console.log(fromWei(await token.getBalance(my_address)))
Examples
import { bind, Tracker } from "nd"
import { useEffect } from "react"
import { fromWei, toWei } from "nd/web3"
const your_address = "0x1234......"
export default bind(
({ init, web3_init, web3_address }) => {
const { initWeb3, erc20 } = init()
useEffect(() => { initWeb3() }, [])
return (
<div
onClick={async () => {
if (web3_init) {
const token = erc20({
token: "ALIS"
})
console.log(fromWei(await token.getBalance(web3_address)))
const [err, res] = await token.transfer(
your_address,
toWei("100"),
hash => {
console.log(hash)
}
)
}
}}
>
transfer 100 ALIS to you
</div>
)
},
["initWeb3", "web3_init", "erc20", "web3_address"]
)