add network sensing
This commit is contained in:
parent
b729834de4
commit
aefdad4370
|
@ -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"
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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
|
|
@ -0,0 +1 @@
|
|||
export type EnableEthereum = () => Promise<string | undefined>
|
|
@ -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
|
|
@ -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]);
|
||||
}
|
Loading…
Reference in New Issue