Add generic type argument for useContract (#198)

* Add generic type argument for useContract

* Remove `undefined` from type definition

* Add guide to README for `useContract` generic type argument

* Add example usage on example project

* Update type definition

* Update README

* Update README.md

* Update README.md

* Reset README changes

Co-authored-by: Dhaiwat Pandya <[email protected]>

Author: carlomigueldy

example/.gitignore

@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+types
+
 # dependencies
 /node_modules
 /.pnp

example/abis/Greeter.json

@@ -0,0 +1,52 @@
+[
+  {
+    "inputs": [
+      {
+        "internalType": "string",
+        "name": "_greeting",
+        "type": "string"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "inputs": [],
+    "name": "greet",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "string",
+        "name": "_greeting",
+        "type": "string"
+      }
+    ],
+    "name": "setGreeting",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address payable",
+        "name": "_to",
+        "type": "address"
+      }
+    ],
+    "name": "transferTo",
+    "outputs": [],
+    "stateMutability": "payable",
+    "type": "function"
+  }
+]

example/package.json

@@ -6,15 +6,20 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "postinstall": "yarn typechain",
+    "typechain": "typechain --target=ethers-v5 abis/*.json --out-dir=types/contracts"
   },
   "dependencies": {
     "@chakra-ui/react": "^1.7.3",
+    "@typechain/ethers-v5": "^8.0.5",
     "@web3-ui/components": "^0.4.1",
     "@web3-ui/core": "^0.4.0",
+    "@web3-ui/hooks": "^0.8.1",
     "next": "12.0.7",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "typechain": "^6.1.0"
   },
   "devDependencies": {
     "eslint": "8.4.1",

example/pages/index.tsx

@@ -1,9 +1,18 @@
 import React, { useEffect, useState } from 'react';
-
-import { NFTGallery } from '@web3-ui/components';
-import { Stack, Input, Button, Heading, Text } from '@chakra-ui/react';
+import {
+  Container,
+  Stack,
+  Input,
+  Button,
+  Heading,
+  Text
+} from '@chakra-ui/react';
 import { useWallet, ConnectWallet } from '@web3-ui/core';
-import { Container } from '@chakra-ui/react';
+import { NFTGallery } from '@web3-ui/components';
+import { useContract } from '@web3-ui/hooks';
+import { Greeter } from '../types/contracts';
+import GreeterABI from '../abis/Greeter.json';
+
 export default function Home() {
   const [address, setAddress] = useState('');
   const [nftGallery, setNftGallery] = useState(null);
@@ -13,17 +22,44 @@ export default function Home() {
     connected,
     provider
   } = useWallet();
+  const [greeterContract, isReady] = useContract<Greeter>(
+    // Rinkeby
+    '0x7e1D33FcF1C6b6fd301e0B7305dD40E543CF7135',
+    GreeterABI
+  );
 
   useEffect(() => {
     console.log('correctNetwork', correctNetwork);
   }, [correctNetwork]);
 
+  async function setGreeting() {
+    console.log(greeterContract);
+
+    const response = await greeterContract.setGreeting('Hello World');
+
+    console.log('setGreeting', response);
+  }
+
+  async function greet() {
+    const response = await greeterContract.greet();
+
+    console.log('greet', response);
+  }
+
   return (
     <Container>
       <ConnectWallet />
       {!correctNetwork && (
         <Button onClick={switchToCorrectNetwork}>Switch to Mainnet.</Button>
       )}
+      {isReady ? (
+        <Stack my={5}>
+          <Button onClick={setGreeting}>Set Greeting</Button>
+          <Button onClick={greet}>Greet</Button>
+        </Stack>
+      ) : (
+        <> </>
+      )}
       <Stack p={3}>
         <Heading>Demo</Heading>
         <Text>Type in an address to view their NFTs</Text>

packages/hooks/README.md

@@ -79,12 +79,81 @@ import { useContract } from '@web3-ui/hooks';
 
 const [contract, isReady] = useContract('CONTRACT_ADDRESS', 'CONTRACT_ABI');
 
-//check that the contract has been loaded
+// check that the contract has been loaded
 if (isReady) {
   await contract.greeting();
 }
 ```
 
+A generic type argument can be passed down to the hook to create the type definitions based on the ABIs stored in a directory. To auto-generate the types it is highly recommended to use [typechain](https://www.npmjs.com/package/typechain) package.
+
+Install [typechain](https://www.npmjs.com/package/typechain)
+
+```bash
+yarn add typechain @typechain/ethers-v5 --dev # or `npm i -D typechain @typechain/ethers-v5`
+```
+
+Add a "typechain" script to your `package.json` file as well as a "postinstall" script that executes the script after installing dependencies.
+
+```json
+"scripts": {
+    "postinstall": "yarn typechain",
+    "typechain": "typechain --target=ethers-v5 <ABI_DIRECTORY_PATH> --out-dir=<OUTPUT_DIRECTORY_PATH>",
+}
+```
+
+- The `<ABI_DIRECTORY_PATH>` should be the path to where all of the ABIs are stored. e.g. `src/abis/*.json` (This depends on your preferred file structure)
+- The `<OUTPUT_DIRECTORY_PATH>` will be your preferred path to where the generated type definitions should be placed. e.g. `src/types/contracts`
+- For the `<OUTPUT_DIRECTORY_PATH>` it is also recommended to add the directory path on `.gitignore` since these can be generated via `typechain` script
+
+For an actual example check below,
+
+```json
+"scripts": {
+    "postinstall": "yarn typechain",
+    "typechain": "typechain --target=ethers-v5 src/abis/**/*.json --out-dir=src/types/contracts",
+}
+```
+
+Next is to put all of your ABI JSON files stored to the defined `ABI_DIRECTORY_PATH` directory.
+
+- `src/abis/ERC20Token/ERC20Token.json`
+- `src/abis/CoolProtocol/CoolProtocolLendingPool.json`
+
+Then finally run the script to generate the type definitions.
+
+```bash
+yarn typechain # or `npm run typechain`
+```
+
+Example usage in utilizing the generic type argument for `useContract` hook
+
+```tsx
+import React from 'react';
+import { useContract } from '@web3-ui/hooks';
+import { ERC20Token } from 'types/contracts/ERC20Token';
+import ERC20TokenABI from 'abis/ERC20Token/ERC20Token.json';
+
+function App() {
+  const [contract, isReady] = useContract<ERC20Token>(
+    'CONTRACT_ADDRESS',
+    ERC20TokenABI
+  );
+
+  async function checkBalance() {
+    const response = await contract.balanceOf('0x...');
+
+    console.log('checkBalance', response);
+  }
+
+  return (
+    <>{isReady ? <button onClick={checkBalance}></button> : 'Connect Wallet'}</>
+  );
+}
+
+export default App;
+```
+
 ---
 
 ### useTransaction

packages/hooks/src/hooks/useContract.ts

@@ -1,27 +1,38 @@
 import React from 'react';
 import { Web3Context } from '../Provider';
-import { Contract } from 'ethers';
+import { Contract, ContractInterface } from 'ethers';
 
-export function useContract(address: string, abi) {
+/**
+ * @description
+ * Defines the contract instance on `useState` hook
+ */
+export type ContractInstance<T extends Contract> = T | null;
+
+/**
+ * @description
+ * The return type of the `useContract` hook
+ */
+export type UseContractHook<T extends Contract> = [
+  ContractInstance<T> | null,
+  boolean
+];
+
+export function useContract<T extends Contract>(
+  address: string,
+  abi: ContractInterface
+): UseContractHook<T> {
   const context = React.useContext(Web3Context);
-  const [contract, setContract] = React.useState({});
+  const [contract, setContract] = React.useState<ContractInstance<T>>(null);
   const [isReady, setIsReady] = React.useState(false);
   React.useEffect(() => {
     if (context?.connected) {
       const newContract = new Contract(
         address,
         abi,
         context.signer || undefined
-      );
-      const contractInterface = Object.values(
-        newContract.interface.functions
-      ).reduce((accumulator, funcFragment) => {
-        return {
-          ...accumulator,
-          [funcFragment.name]: newContract[funcFragment.name]
-        };
-      }, {});
-      setContract(contractInterface);
+      ) as T;
+
+      setContract(newContract);
       setIsReady(true);
     }
   }, [context]);