add network sensing

frontend/package.json

@@ -3,13 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/classnames": "^2.2.11",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "classnames": "^2.2.6",
     "ethers": "^5.0.17",
     "react": "^16.14.0",
     "react-app-rewired": "^2.1.8",
@@ -19,7 +22,7 @@
     "web3modal": "^1.9.1"
   },
   "scripts": {
-      "start": "react-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

frontend/src/App.tsx

@@ -1,12 +1,21 @@
 import React from 'react';
-import logo from './logo.svg';
+import { providers } from 'ethers';
 import './App.css';
 import { Symfoni } from "./hardhat/SymfoniContext";
 import { Greeter } from './components/Greeter';
 import { Bridge } from './components/Bridge'
+import { getAndSetProvider } from './utils/network'
+
+const { useState, useEffect } = React;
+const { Provider } = providers
 
 function App() {
+  const [provider, setProvider] = useState<typeof Provider>();
 
+  useEffect(() => {
+    if (!provider) getAndSetProvider(setProvider);
+  })
+  console.log({provider})
   return (
     <div className="App">
       <header className="App-header">

frontend/src/components/Bridge.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import { BridgeContext, SymfoniBridge } from "./../hardhat/SymfoniContext";
 import { Wallet, providers, Contract, VoidSigner } from "ethers";
 import { Bridge as IBridge } from "../types/Bridge"
-import { SNT_ETHEREUM } from "../constants/goerliAddress";
+import { SNT_ADDRESS } from "../../constants/goerliAddress";
 
 const wallet = Wallet.createRandom();
 
@@ -18,8 +18,6 @@ const goerliVoidsigner = new VoidSigner(wallet.address, goerliProvider);
 
 export const Bridge: React.FC<Props> = () => {
   const bridge: SymfoniBridge = useContext(BridgeContext);
-  /* fujiBridge.factory?.connect(fujiSigner);
-   * fujiBridge.factory?.attach(FUJI_BRIDGE); */
   const [message, setMessage] = useState("");
   const [inputGreeting, setInputGreeting] = useState("");
   const [goerliBridge, setGoerliBridge] = useState<IBridge>();
@@ -59,7 +57,7 @@ export const Bridge: React.FC<Props> = () => {
     <div>
       <p>{message}</p>
       <input onChange={(e) => setInputGreeting(e.target.value)}></input>
-      <button onClick={(e) => handleSetGreeting(e)}>Set greeting</button>
+      <button onClick={(e) => handleSetGreeting(e)}>Set</button>
     </div>
   )
 }

frontend/src/components/Header.tsx

@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from 'react'
+import Typography from '@material-ui/core/Typography';
+import classNames from 'classnames'
+import { EnableEthereum } from '../localTypes'
+import useStyles from '../styles/header'
+import { getNetwork } from '../utils/network'
+import { Provider } from "@ethersproject/providers"
+
+
+const formatAccount = (account: string): string => {
+  const start = account.slice(0,6)
+  const end = account.slice(-4)
+  return `${start}...${end}`
+}
+
+type HeaderProps = {
+  account: string,
+  isStatus: boolean,
+  enableEthereum: EnableEthereum,
+  provider: Provider
+}
+
+function Header({account, enableEthereum, provider}: HeaderProps) {
+  const classes: any = useStyles()
+  const [network, sNetwork] = useState<string>()
+
+  useEffect(() => {
+    if (account) getNetwork(provider, sNetwork)
+  }, [account])
+
+  return (
+    <div className={classes.root}>
+      {network && <div className={classes.networkIndicator} />}
+      {network && <Typography className={classes.network}>
+        {network}
+      </Typography>}
+      <Typography component={'span'} className={classNames(classes.connect, {[classes.connected]: !!account})} onClick={!account ? enableEthereum : console.log}>
+        {!!account && <div className={classes.connectedText}>
+          <div className={classes.accountText}>{formatAccount(account)}</div>
+          <div>Connected</div>
+        </div>}
+        {!account && <span>Connect</span>}
+      </Typography>
+    </div>
+  )
+}
+
+export default Header

frontend/src/localTypes.ts

@@ -0,0 +1 @@
+export type EnableEthereum = () => Promise<string | undefined>

frontend/src/styles/header.js

@@ -0,0 +1,47 @@
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(48, [col] 1fr)',
+    gridTemplateRows: '12rem 5rem auto auto',
+    gridColumn: '1 / 49',
+    [theme.breakpoints.up('md')]: {
+      gridTemplateRows: '4rem 4rem auto auto 6rem'
+    }
+  },
+  accountText: {
+    color: '#939BA1'
+  },
+  network:{
+    color: '#939BA1',
+    gridColumn: '8 / 25'
+  },
+  networkIndicator: {
+    gridColumn: '5 / 5',
+    marginTop: '0.5rem',
+    height: '0.75rem',
+    width: '0.75rem',
+    backgroundColor: 'rgb(48, 189, 159)',
+    borderRadius: '50%'
+  },
+  connect: {
+    color: theme.palette.primary[500],
+    fontSize: '15px',
+    marginLeft: 'auto',
+    marginRight: '3rem',
+    cursor: 'pointer',
+    gridColumnEnd: '50'
+  },
+  connected: {
+    color: '#44D058',
+    cursor: 'default'
+  },
+  connectedText: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-end'
+  }
+}))
+
+export default useStyles

frontend/src/utils/network.ts

@@ -0,0 +1,19 @@
+import { providers } from "ethers";
+import { Network } from "@ethersproject/networks";
+import { Provider } from "@ethersproject/providers"
+
+const networksMap: Record<number, string> = {
+  5: 'goerli',
+  43113: 'fuji'
+}
+
+export async function getAndSetProvider(setProvider: Function) {
+  await window.ethereum.enable();
+  const provider = new providers.Web3Provider(window.ethereum);
+  setProvider(provider);
+}
+
+export async function getNetwork(p: Provider, setNetwork: Function) {
+  const res: Network = await p.getNetwork();
+  setNetwork(networksMap[res.chainId]);
+}