small web3 refactor

src/components/molecules/Web3Donation/Account.test.tsx

@@ -1,14 +1,11 @@
 import React from 'react'
-import { render, waitForElement } from '@testing-library/react'
+import { render } from '@testing-library/react'
 
 import Account from './Account'
 
 describe('Account', () => {
-  it('renders without crashing', async () => {
+  it('renders without crashing', () => {
     const { container } = render(<Account />)
-    const lazyElement = await waitForElement(() =>
-      container.querySelector('.balance')
-    )
-    expect(lazyElement).toBeInTheDocument()
+    expect(container.firstChild).toBeInTheDocument()
   })
 })

src/components/molecules/Web3Donation/Account.tsx

@@ -1,14 +1,24 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useState, useEffect } from 'react'
 import { toDataUrl } from 'ethereum-blockies'
 import { formatEther } from '@ethersproject/units'
+import useWeb3 from '../../../hooks/use-web3'
 import styles from './Account.module.scss'
-import useWeb3, { getBalance } from '../../../hooks/use-web3'
 
-export default async function Account(): Promise<ReactElement> {
+export default function Account(): ReactElement {
   const { library, account } = useWeb3()
-  const ethBalance = account && (await getBalance(account, library))
+  const [ethBalance, setEthBalance] = useState(0)
   const blockies = account && toDataUrl(account)
 
+  useEffect(() => {
+    if (!library || !account) return
+
+    async function init() {
+      const balance = await library.getBalance(account)
+      setEthBalance(balance)
+    }
+    init()
+  }, [library, account])
+
   const accountDisplay =
     account &&
     `${account.substring(0, 8)}...${account.substring(account.length - 4)}`

src/hooks/use-web3/index.tsx

@@ -2,14 +2,9 @@ import { useState, useEffect } from 'react'
 import { useWeb3React } from '@web3-react/core'
 import { Web3ReactContextInterface } from '@web3-react/core/dist/types'
 import * as connectors from './connectors'
-import {
-  getLibrary,
-  getNetworkName,
-  getErrorMessage,
-  getBalance
-} from './utils'
+import { getLibrary, getNetworkName, getErrorMessage } from './utils'
 
-export { connectors, getLibrary, getNetworkName, getErrorMessage, getBalance }
+export { connectors, getLibrary, getNetworkName, getErrorMessage }
 
 export function useEagerConnect(): boolean {
   const { MetaMask } = connectors

src/hooks/use-web3/utils.tsx

@@ -1,4 +1,3 @@
-import { useState, useEffect } from 'react'
 import { UnsupportedChainIdError } from '@web3-react/core'
 import {
   NoEthereumProviderError,
@@ -51,36 +50,3 @@ export function getErrorMessage(error: Error, chainId: number): string {
     return 'An unknown error occurred. Check the console for more details.'
   }
 }
-
-export function getBalance(
-  account: string,
-  library: Web3Provider
-): Promise<number> {
-  const [ethBalance, setEthBalance] = useState()
-
-  useEffect((): any => {
-    if (library && account) {
-      let stale = false
-
-      library
-        .getBalance(account)
-        .then((balance: any) => {
-          if (!stale) {
-            setEthBalance(balance)
-          }
-        })
-        .catch(() => {
-          if (!stale) {
-            setEthBalance(null)
-          }
-        })
-
-      return () => {
-        stale = true
-        setEthBalance(undefined)
-      }
-    }
-  }, [library, account])
-
-  return ethBalance
-}