add connect button and blockies icon

README.md

@@ -55,10 +55,9 @@ npx hardhat test
 👤 **aaronjanovitch@gmail.com**
 
 - Website: [aaronjanovitch.com](https://aaronjanovitch.com)
-
-* Twitter: [@AJanovitch](https://twitter.com/AJanovitch)
-* Github: [@aaronjan98](https://github.com/aaronjan98)
-* LinkedIn: [@aaron-janovitch](https://linkedin.com/in/aaron-janovitch)
+- Twitter: [@AJanovitch](https://twitter.com/AJanovitch)
+- Github: [@aaronjan98](https://github.com/aaronjan98)
+- LinkedIn: [@aaron-janovitch](https://linkedin.com/in/aaron-janovitch)
 
 ## 🤝 Contributing
 

package.json

@@ -9,6 +9,7 @@
     "bootstrap": "^5.2.0",
     "dotenv": "^16.0.0",
     "react": "^18.2.0",
+    "react-blockies": "^1.4.1",
     "react-bootstrap": "^2.4.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
@@ -20,7 +21,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "ganache": "ganache-cli --chain.chainId 31339 -p 3334 -a 20 -e 10000 -m 'web excess blood script melody grape vast economy believe garbage mango inner'"
+    "ganache": "ganache --chain.chainId 31339 -p 3334 -a 20 -e 10000 -m 'web excess blood script melody grape vast economy believe garbage mango inner'"
   },
   "keywords": [],
   "author": "aaronjanovitch@gmail.com",

src/components/App.js

@@ -19,6 +19,7 @@ function App() {
   const [provider, setProvider] = useState(null)
   const [crowdsale, setCrowdsale] = useState(null)
 
+  const [chainId, setChainId] = useState(null)
   const [account, setAccount] = useState(null)
   const [accountBalance, setAccountBalance] = useState(0)
 
@@ -35,6 +36,28 @@ function App() {
 
     const { chainId } = await provider.getNetwork()
 
+    setChainId(chainId)
+
+    // Reload page when network changes
+    window.ethereum.on('chainChanged', async () => {
+      window.location.reload()
+      const accounts = await window.ethereum.request({
+        method: 'eth_requestAccounts',
+      })
+
+      const account = ethers.utils.getAddress(accounts[0])
+      setAccount(account)
+    })
+
+    // Fetch current account from Metamask when changed
+    window.ethereum.on('accountsChanged', async () => {
+      const accounts = await window.ethereum.request({
+        method: 'eth_requestAccounts',
+      })
+      const account = ethers.utils.getAddress(accounts[0])
+      setAccount(account)
+    })
+
     // Initiate contracts
     const token = new ethers.Contract(
       config[chainId].token.address,
@@ -88,7 +111,7 @@ function App() {
 
   return (
     <Container>
-      <Navigation />
+      <Navigation account={account} setAccount={setAccount} chainId={chainId} />
 
       <h1 className="my-4 text-center">Introducing Jan Token!</h1>
 

src/components/Navigation.js

@@ -1,12 +1,95 @@
-import Navbar from 'react-bootstrap/Navbar'
+import { ethers } from 'ethers'
+import { Navbar, NavDropdown, Form, Button } from 'react-bootstrap'
+import Blockies from 'react-blockies'
 
+import config from '../config.json'
 import { ReactComponent as Logo } from '../logo.svg'
+const { ethereum } = window
+
+const Navigation = ({ account, setAccount, chainId }) => {
+  const connectHandler = async () => {
+    const accounts = await ethereum.request({
+      method: 'eth_requestAccounts',
+    })
+    setAccount(ethers.utils.getAddress(accounts[0]))
+  }
+
+  const networkHandler = async e => {
+    try {
+      // Switch to the selected network
+      await ethereum.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{ chainId: e.target.value }],
+      })
+    } catch (switchError) {
+      // This error code indicates that the chain has not been added to MetaMask.
+      if (switchError.code === 4902) {
+        try {
+          await ethereum.request({
+            method: 'wallet_addEthereumChain',
+            params: [
+              {
+                chainId: e.target.value,
+                rpcUrls: ['http://127.0.0.1:3334'],
+              },
+            ],
+          })
+        } catch (error) {
+          console.error("AJ's Error: failed to add chain to MetaMask", error)
+        }
+      } else {
+        console.log(
+          `AJ - ${switchError.code}: failed to switch networks `,
+          switchError
+        )
+      }
+    }
+  }
 
-const Navigation = () => {
   return (
     <Navbar>
       <Logo alt="logo" className="d-inline-block align-top mx-3" />
       <Navbar.Brand href="#">Jan ICO Crowdsale</Navbar.Brand>
+      <Navbar.Collapse className="justify-content-end">
+        <div
+          className="d-flex justify-content-end"
+          style={{ alignItems: 'center' }}
+        >
+          <Form.Select
+            aria-label="Network Selector"
+            value={config[chainId] ? `0x${chainId.toString(16)}` : `0`}
+            onChange={networkHandler}
+            style={{
+              maxWidth: '200px',
+              marginRight: '20px',
+              height: '100%',
+            }}
+          >
+            <option value="0" disabled>
+              Select Network
+            </option>
+            <option value={`0x${(31339).toString(16)}`}>Localhost 3334</option>
+            <option value="0x5">Goerli</option>
+          </Form.Select>
+
+          {account ? (
+            <Navbar.Text className="d-flex align-items-center">
+              {account.slice(0, 5) + '...' + account.slice(38, 42)}
+              <Blockies
+                seed={account}
+                size={10}
+                scale={3}
+                color="#2187D0"
+                bgColor="#F1F2F9"
+                spotColor="#767F92"
+                className="identicon mx-2"
+              />
+            </Navbar.Text>
+          ) : (
+            <Button onClick={connectHandler}>Connect</Button>
+          )}
+        </div>
+      </Navbar.Collapse>
     </Navbar>
   )
 }