Added ethMethodKey and ethContractKey util functions

Author: Lorenzo Sicilia

src/components/ERC20View.tsx

@@ -1,51 +1,51 @@
 import React, { useEffect, useMemo } from "react"
-import { buildContract, IERC20, memoizedBuildContract } from "../utils"
-import ERC20ABI from "../abi/ERC20.abi.json"
+import { buildContract, ethContractKey, IERC20, memoizedBuildContract } from "../utils"
 import useSWR, { keyInterface } from "swr"
 import { useWeb3React } from "@web3-react/core"
 import { Web3Provider } from "@ethersproject/providers"
 import { formatUnits } from "@ethersproject/units"
 import { BigNumber } from "@ethersproject/bignumber"
 import { ABI, ABIs } from "../abi"
 import { useWeb3Filter } from "../hooks/useWeb3Filter"
-import { Contract } from "@ethersproject/contracts"
 
-const balanceOfKey = (address:string, account:string): keyInterface => {
-  return [ABI.ERC20, address, "balanceOf", account]
-}
+
 export const ERC20View = ({ name, address, decimals, symbol }: IERC20) => {
   const { account, library } = useWeb3React<Web3Provider>()
-  const { data: balance, isValidating, error, mutate } = useSWR<BigNumber>(
-    // [ABI.ERC20, address, "balanceOf", account]
-    balanceOfKey(address, account)
-  )
-  console.log({balance})
-  // useWeb3Filter(
-  //   balanceOfKey(address, account),
-  //   "Transfer",
-  //   (from, to, amount, event) => {
-  //     console.log("Transfer|sent", { from, to, amount, event })
-  //     mutate(balance.sub(amount), false)
-  //     // mutate(undefined, true)
-  //   }
-  // )
+  const key = ethContractKey([
+    address,
+    "balanceOf",
+    account])
+  const { data: balance, error, mutate } = useSWR<BigNumber>(key)
+
+  useWeb3Filter(key, [
+    (contract) => [
+      contract.filters.Transfer(account, null), // fromMe
+      async () => {
+        mutate(undefined, true)
+      },
+    ],
+    (contract) => [
+      contract.filters.Transfer(null, account), //toMe
+      async () => await mutate(undefined, true),
+    ],
+  ])
 
   // TODO LS export as useFilter.e.g useFilter(contract, [contract.filters.Transfer(account, null), mutate]) The web3fetcher could return the data and the contract built
-  useEffect(() => {
+  /*useEffect(() => {
     const contract = buildContract(address, ABIs.get(ABI.ERC20), library)
     const fromMe = contract.filters.Transfer(account, null)
-    console.log()
     contract.once(fromMe, (from, to, amount, event) => {
       console.log("Transfer|sent", { from, to, amount, event })
-      mutate(balance.sub(amount), false)
-      // mutate(undefined, true)
+      // mutate(balance.sub(amount), false) BUG because this is a closure the balance isn't update
+      // we could useRef https://stackoverflow.com/a/53641229 but it isn't very elegant
+      mutate(undefined, true)
     })
 
     const toMe = contract.filters.Transfer(null, account)
     contract.once(toMe, (from, to, amount, event) => {
       console.log("Transfer|received", { from, to, amount, event })
-      mutate(balance.add(amount), false)
-      // mutate(undefined, true)
+      // mutate(balance.add(amount), false) // BUG because this is a closure the balance isn't update
+      mutate(undefined, true)
     })
     console.log("rendering", {
       fromMe: contract.listenerCount(fromMe),
@@ -56,7 +56,7 @@ export const ERC20View = ({ name, address, decimals, symbol }: IERC20) => {
       contract.removeAllListeners(toMe)
       contract.removeAllListeners(fromMe)
     }
-  }, [])
+  }, [])*/
 
   if (error) {
     return <pre>{error}</pre>

src/components/EtherView.tsx

@@ -6,8 +6,7 @@ import { formatEther } from "@ethersproject/units"
 import { BigNumber } from "@ethersproject/bignumber"
 
 export const EtherView = () => {
-  const context = useWeb3React<Web3Provider>()
-  const { account, library } = context
+  const { account, library } = useWeb3React<Web3Provider>()
 
   const {
     data: ethBalance,
@@ -37,13 +36,6 @@ export const EtherView = () => {
       updateBalance(balance, false)
     })
 
-  console.log({
-    isValidating,
-    blockNumberIsValidating,
-    ethBalance,
-    blockNumber,
-  })
-
   /*if (!ethBalance || !blockNumber) {
     return <pre>...</pre>
   }*/

src/hooks/useWeb3Filter.ts

@@ -1,12 +1,30 @@
 import { useEffect } from "react"
+import { buildContract } from "../utils"
+import { ABI, ABIs } from "../abi"
+import { useWeb3React } from "@web3-react/core"
+import { Web3Provider } from "@ethersproject/providers"
+import { keyInterface } from "swr"
+import { Contract, EventFilter } from "@ethersproject/contracts"
 
-export function useWeb3Filter(contract, filter, callback) {
+type keyValue = (contract: Contract) => [EventFilter, () => Promise<any>]
+export type IFilter = keyValue[]
+
+export function useWeb3Filter(key: keyInterface, filters: IFilter) {
+  const { library } = useWeb3React<Web3Provider>()
+  const [abi, address, method, ...params] = key
+  const contract = buildContract(address, ABIs.get(abi), library)
   useEffect(() => {
-    contract.once(filter, callback)
+    filters.forEach((filterFactory) => {
+      const [filter, callback] = filterFactory(contract)
+      contract.once(filter, callback)
+    })
   }, [])
 
   return () => {
     console.log("cleanup!")
-    contract.removeAllListeners(filter)
+    filters.forEach((factory) => {
+      const [filter] = factory(contract)
+      contract.removeAllListeners(filter)
+    })
   }
 }

src/utils/index.ts

@@ -2,38 +2,37 @@ import { Contract } from "@ethersproject/contracts"
 import { ABI } from "../abi/index"
 import { Web3Provider } from "@ethersproject/providers"
 import memoize from "fast-memoize"
+import { keyInterface } from "swr"
 
 export function buildContract(address:string, abi:any, library:Web3Provider) {
   return new Contract(address, abi, library.getSigner())
 }
 
 export const memoizedBuildContract = memoize(buildContract)
 
+export const ethMethodKey = (args): keyInterface => {
+  return args
+}
+
+export const ethContractKey = (args): keyInterface => {
+  return [ABI.ERC20, ...args]
+}
+
 export const web3Fetcher = (
   library: Web3Provider,
   ABIs: Map<ABI, any>
 ) => async (...args) => {
   // debugger
-  const [provider] = args
-  const isContract = Object.values(ABI).includes(provider)
+  const [abi] = args
+  const isContract = ABIs.get(abi) !== undefined
   if (isContract) {
     const [_, address, method, ...params] = args
     // extract as buildContract memoized
     const contract = buildContract(
       address,
-      ABIs.get(provider),
+      ABIs.get(abi),
       library
     )
-    /*const [paramWithFilter] = params.filter((p) => p.hasOwnProperty("filters"))
-    if (paramWithFilter) {
-      paramWithFilter.filters.forEach((filter) => {
-        contract.once(filter, () => {
-          console.log("mutate", { args })
-          mutate(args)
-        })
-      })
-    }*/
-
     console.log({ contract: address, method, params })
     return contract[method](...params)
   }