ConnectToWalletButton component

npm install web3

src/components/ConnectToWalletButton.js

adding ConnectToWalletButton to Header

Updating ConnectToWalletButton - no web3 yet

using window.ethereum.isMetaMask

reverting web3 add

Updating ConnectToWalletButton based on React best practices

more guards against missing window.ethereum

tidying up even more with conditional chaining

reverting changes to Header

finishing touches on ConnectWalletButton

Author: aphelionz

package-lock.json

@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react'
+import { Button } from 'evergreen-ui'
+
+function truncateAddress (address) {
+  return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`
+}
+
+function isMetaMask () { return window.ethereum?.isMetaMask }
+
+function ConnectToWalletButton (props) {
+  const [address, setAddress] = useState(window.ethereum?.selectedAddress)
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    const firstAddress = (addr) => setAddress(addr[0])
+    window.ethereum?.on('accountsChanged', firstAddress)
+
+    return function cleanup () {
+      window.ethereum?.removeListener('accountsChanged', firstAddress)
+    }
+  }, [])
+
+  async function connectWallet (event) {
+    setLoading(true)
+
+    window.ethereum?.request({ method: 'eth_requestAccounts' })
+      .catch(console.error)
+      .finally(() => setLoading(false))
+  }
+
+  if (!isMetaMask()) return null
+  return (
+    <Button
+      intent={address ? 'success' : 'none'}
+      style={props.style}
+      isLoading={loading}
+      onClick={connectWallet}
+    >
+      {address ? truncateAddress(address) : 'Connect wallet'}
+    </Button>
+  )
+}
+
+export default ConnectToWalletButton