web3 tweaks

package.json

@@ -94,7 +94,7 @@
     "@types/node": "^14.14.35",
     "@types/node-fetch": "^2.5.8",
     "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.2",
+    "@types/react-dom": "^17.0.3",
     "@types/react-helmet": "^6.1.0",
     "@types/react-transition-group": "^4.4.0",
     "@types/shortid": "^0.0.29",

src/components/atoms/Qr.module.css

@@ -15,3 +15,7 @@
   font-size: 0.65rem;
   text-align: center;
 }
+
+.title {
+  margin-bottom: calc(var(--spacer) / 4);
+}

src/components/atoms/Qr.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react'
-import { QRCode } from 'react-qr-svg'
-import { qr, code } from './Qr.module.css'
+// import { QRCode } from 'react-qr-svg'
+import { title as styleTitle, code } from './Qr.module.css'
 import Copy from './Copy'
 
 export default function Qr({
@@ -12,15 +12,15 @@ export default function Qr({
 }): ReactElement {
   return (
     <>
-      {title && <h4>{title}</h4>}
-      <QRCode
+      {title && <h4 className={styleTitle}>{title}</h4>}
+      {/* <QRCode
         bgColor="transparent"
         fgColor="#6b7f88"
         level="Q"
         style={{ width: 120 }}
         value={address}
         className={qr}
-      />
+      /> */}
 
       <pre className={code}>
         <code>{address}</code>

src/components/molecules/Web3Donation/Account.module.css

@@ -1,12 +1,12 @@
 .link {
-  margin-bottom: var(--spacer);
+  margin-bottom: calc(var(--spacer) / 2);
   display: inline-block;
 }
 
 .accountWrap {
   font-size: var(--font-size-small);
   color: var(--text-color-light);
-  margin-bottom: var(--spacer);
+  margin-bottom: calc(var(--spacer) / 2);
   display: flex;
   justify-content: space-between;
 }

src/components/molecules/Web3Donation/Account.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useState, useEffect } from 'react'
 import { toDataUrl } from 'ethereum-blockies'
 import { formatEther } from '@ethersproject/units'
-import useWeb3, { connectors } from '../../../hooks/use-web3'
+import useWeb3, { connectors } from '../../../hooks/useWeb3'
 import {
   accountWrap,
   blockies as styleBlockies,
@@ -11,15 +11,15 @@ import {
 
 export default function Account(): ReactElement {
   const { library, account, activate } = useWeb3()
-  const [ethBalance, setEthBalance] = useState(0)
+  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)
+      setEthBalance(balance.toString())
     }
     init()
   }, [library, account])
@@ -30,20 +30,20 @@ export default function Account(): ReactElement {
   const balanceDisplay =
     ethBalance && `Ξ${parseFloat(formatEther(ethBalance)).toPrecision(4)}`
 
-  return !account ? (
-    <button
-      className={`link ${link}`}
-      onClick={() => activate(connectors.MetaMask)}
-    >
-      MetaMask
-    </button>
-  ) : (
+  return account ? (
     <div className={accountWrap} title={account}>
       <span>
         <img className={styleBlockies} src={blockies} alt="Blockies" />
         {accountDisplay}
       </span>
       <span className={balance}>{balanceDisplay}</span>
     </div>
+  ) : (
+    <button
+      className={`link ${link}`}
+      onClick={() => activate(connectors.MetaMask)}
+    >
+      Connect MetaMask
+    </button>
   )
 }

src/components/molecules/Web3Donation/Alert.tsx

@@ -29,8 +29,8 @@ export default function Alert({
   transactionHash,
   message
 }: {
-  transactionHash: string
-  message?: { text?: string; status?: string }
+  transactionHash?: string
+  message: { text?: string; status?: string }
 }): ReactElement {
   return (
     <div

src/components/molecules/Web3Donation/Conversion.tsx

@@ -21,7 +21,7 @@ export async function getFiat(
 export default function Conversion({
   amount
 }: {
-  amount: number
+  amount: string
 }): ReactElement {
   const [conversion, setConversion] = useState({
     euro: '0.00',
@@ -31,7 +31,7 @@ export default function Conversion({
 
   async function getFiatResponse() {
     try {
-      const { dollar, euro } = await getFiat(amount)
+      const { dollar, euro } = await getFiat(Number(amount))
       setConversion({ euro, dollar })
     } catch (error) {
       console.error(error.message)

src/components/molecules/Web3Donation/InputGroup.tsx

@@ -1,16 +1,16 @@
 import React, { ReactElement, useState } from 'react'
-import useWeb3 from '../../../hooks/use-web3'
+import useWeb3 from '../../../hooks/useWeb3'
 import Input from '../../atoms/Input'
 import Conversion from './Conversion'
 import { inputGroup, input, currency } from './InputGroup.module.css'
 
 export default function InputGroup({
   sendTransaction
 }: {
-  sendTransaction(amount: number): void
+  sendTransaction(amount: string): void
 }): ReactElement {
   const { account } = useWeb3()
-  const [amount, setAmount] = useState(0.01)
+  const [amount, setAmount] = useState('0.01')
 
   const onAmountChange = ({ target }: { target: any }) => {
     setAmount(target.value)

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, waitFor, fireEvent } from '@testing-library/react'
 import { Web3ReactProvider } from '@web3-react/core'
-import { getLibrary } from '../../../hooks/use-web3'
+import { getLibrary } from '../../../hooks/useWeb3'
 
 import Web3Donation from '.'
 

src/components/molecules/Web3Donation/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useState, useEffect } from 'react'
 import { parseEther } from '@ethersproject/units'
-import useWeb3, { getErrorMessage } from '../../../hooks/use-web3'
+import useWeb3, { getErrorMessage } from '../../../hooks/useWeb3'
 import InputGroup from './InputGroup'
 import Alert, { getTransactionMessage } from './Alert'
 import { web3 as styleWeb3 } from './index.module.css'
@@ -12,7 +12,8 @@ export default function Web3Donation({
   address: string
 }): ReactElement {
   const { connector, library, chainId, account, active, error } = useWeb3()
-  const [message, setMessage] = useState({})
+  const [message, setMessage] = useState<{ status: string; text: string }>()
+  const [transactionHash, setTransactionHash] = useState<string>()
 
   useEffect(() => {
     setMessage(undefined)
@@ -24,9 +25,7 @@ export default function Web3Donation({
       })
   }, [connector, account, library, chainId, active, error])
 
-  const [transactionHash, setTransactionHash] = useState(undefined)
-
-  async function sendTransaction(amount: number) {
+  async function sendTransaction(amount: string) {
     const signer = library.getSigner()
 
     setMessage({
@@ -37,7 +36,7 @@ export default function Web3Donation({
     try {
       const tx = await signer.sendTransaction({
         to: address,
-        value: parseEther(amount.toString()) // ETH -> Wei
+        value: parseEther(amount) // ETH -> Wei
       })
       setTransactionHash(tx.hash)
       setMessage({
@@ -52,10 +51,7 @@ export default function Web3Donation({
         text: getTransactionMessage().success
       })
     } catch (error) {
-      setMessage({
-        status: 'error',
-        text: error.message
-      })
+      setMessage(null)
     }
   }
 

src/hooks/useWeb3/index.tsx

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react'
+import { useWeb3React } from '@web3-react/core'
+import { Web3ReactContextInterface } from '@web3-react/core/dist/types'
+import { Web3Provider } from '@ethersproject/providers'
+import * as connectors from './connectors'
+import { getLibrary, getNetworkName, getErrorMessage } from './utils'
+
+function useEagerConnect(): boolean {
+  const { MetaMask } = connectors
+  const { activate, active } = useWeb3React<Web3Provider>()
+  const [tried, setTried] = useState(false)
+
+  useEffect(() => {
+    MetaMask.isAuthorized().then((isAuthorized) => {
+      if (isAuthorized) {
+        activate(MetaMask, undefined, true).catch(() => {
+          setTried(true)
+        })
+      } else {
+        setTried(true)
+      }
+    })
+  }, [])
+
+  // if the connection worked, wait until we get confirmation of that to flip the flag
+  useEffect(() => {
+    if (!tried && active) {
+      setTried(true)
+    }
+  }, [tried, active])
+
+  return tried
+}
+
+// Helper hook around useWeb3React to push typings, and connect by default
+export default function useWeb3(): Web3ReactContextInterface<Web3Provider> {
+  const context = useWeb3React<Web3Provider>()
+
+  useEagerConnect()
+
+  return context
+}
+
+export { connectors, getLibrary, getNetworkName, getErrorMessage }

src/hooks/use-web3/utils.tsx → src/hooks/useWeb3/utils.tsx

@@ -12,7 +12,7 @@ export function getLibrary(provider: ExternalProvider): Web3Provider {
 }
 
 export function getNetworkName(netId: number): string {
-  let networkName
+  let networkName: string
 
   switch (netId) {
     case 1:

src/pages/thanks.module.css

@@ -19,11 +19,17 @@
   min-height: 100vh;
 }
 
-.thanks h4 {
+.thanks h2 {
   text-align: center;
   margin: 0;
-  margin-bottom: cal(var(--spacer) / 2);
+  margin-bottom: calc(var(--spacer) / 8);
+  color: var(--text-color);
+  font-size: var(--font-size-h4);
+}
+
+.thanks h4 {
   color: var(--text-color);
+  text-align: center;
   text-transform: capitalize;
 }