web3-ts-hooks

A fork of AbsoluteVirtueXI/web3-ts-hooks with fully typed react hooks for web3

This package still need heavy testing.

It comes actually in an experimental version.

Only works with Metamask actually

Install

yarn add web3-ts-hooks

Usage

First, wrap your app with the top level context provider

import { Web3Provider } from 'web3-ts-hooks'

<Web3Provider>
  //rest of your app
</Web3Provider> 

Then you can use it everywhere in your app

import React, { useContext } from 'react'

import { useContract, useWeb3 } from "web3-ts-hooks";
// myContract.json is the compiled contract in json format
import MyContract from "./myContract.json";

const App = () => {
  const web3 = useWeb3();

  /**
   * this object will contain your contract instance with all of your methods, it uses ethers under the hood.
   * you can use https://www.npmjs.com/package/ethereum-abi-types-generator to generate all the typings 
   * from your contract and use the generated type instead of any
   */
  const contract = useContract<any>(MyContract);
  
  return (
    <>
      <p>Web3: {web3.isWeb3 ? 'injected' : 'no-injected'}</p>
      <p>Network id: {web3.chainId}</p>
      <p>Network name: {web3.networkName}</p>
      <p>MetaMask installed: {web3.isMetaMask ? 'yes' : 'no'}</p>
      <p>logged: {web3.isLogged ? 'yes' : 'no'}</p>
      <p>account: {web3.account}</p>
      <p>Balance: {web3.balance}</p>
      {!web3.isLogged && (
        <>
          <button onClick={web3.login}>login</button>
        </>
      )}
    </>
  )
}

Features

Fully typed

Real time accounts and networks change tracking

Real time ether balance tracking

Simplified use of contract with useContract hook

License

MIT © Apperside

This hook is created using create-react-hook.