diff --git a/components/chain/chain.js b/components/chain/chain.js index 71fdbe40e..825170bc9 100644 --- a/components/chain/chain.js +++ b/components/chain/chain.js @@ -1,8 +1,9 @@ -import React, { useState, useEffect } from 'react'; -import { Typography, Paper, Grid, Button, Tooltip } from '@material-ui/core' +import React, {useState, useEffect, useMemo, useCallback} from 'react'; +import { Typography, Paper, Grid, Button, Tooltip, IconButton } from '@material-ui/core' import Skeleton from '@material-ui/lab/Skeleton'; import { useRouter } from 'next/router' import Web3 from 'web3'; +import FileCopyIcon from '@material-ui/icons/FileCopy'; import classes from './chain.module.css' @@ -13,7 +14,8 @@ import { ERROR, CONNECT_WALLET, TRY_CONNECT_WALLET, - ACCOUNT_CONFIGURED + ACCOUNT_CONFIGURED, + PARAMS_COPIED } from '../../stores/constants' export default function Chain({ chain }) { @@ -41,24 +43,33 @@ export default function Chain({ chain }) { return '0x'+num.toString(16) } + const params = useMemo(() => { + return ( + { + chainId: toHex(chain.chainId), // A 0x-prefixed hexadecimal string + chainName: chain.name, + nativeCurrency: { + name: chain.nativeCurrency.name, + symbol: chain.nativeCurrency.symbol, // 2-6 characters long + decimals: chain.nativeCurrency.decimals, + }, + rpcUrls: chain.rpc, + blockExplorerUrls: [ ((chain.explorers && chain.explorers.length > 0 && chain.explorers[0].url) ? chain.explorers[0].url : chain.infoURL) ] + } + ) + }, [chain.chainId]) + + const copyParamsObject = useCallback(async () => { + await navigator.clipboard.writeText(JSON.stringify(params)); + stores.emitter.emit(PARAMS_COPIED, 'Copied to clipboard!') + }, [chain.chainId]); + const addToNetwork = () => { if(!(account && account.address)) { stores.dispatcher.dispatch({ type: TRY_CONNECT_WALLET }) return } - const params = { - chainId: toHex(chain.chainId), // A 0x-prefixed hexadecimal string - chainName: chain.name, - nativeCurrency: { - name: chain.nativeCurrency.name, - symbol: chain.nativeCurrency.symbol, // 2-6 characters long - decimals: chain.nativeCurrency.decimals, - }, - rpcUrls: chain.rpc, - blockExplorerUrls: [ ((chain.explorers && chain.explorers.length > 0 && chain.explorers[0].url) ? chain.explorers[0].url : chain.infoURL) ] - } - window.web3.eth.getAccounts((error, accounts) => { window.ethereum.request({ method: 'wallet_addEthereumChain', @@ -132,6 +143,11 @@ export default function Chain({ chain }) { > { renderProviderText() } + + + + + ) diff --git a/components/snackbar/snackbarController.jsx b/components/snackbar/snackbarController.jsx index f4d675a7e..9c9c27d6a 100644 --- a/components/snackbar/snackbarController.jsx +++ b/components/snackbar/snackbarController.jsx @@ -6,6 +6,7 @@ import Snackbar from './snackbar.jsx' import { ERROR, TX_SUBMITTED, + PARAMS_COPIED, } from '../../stores/constants' import stores from "../../stores"; @@ -31,11 +32,13 @@ class SnackbarController extends Component { componentWillMount() { emitter.on(ERROR, this.showError); + emitter.on(PARAMS_COPIED, this.showInfo); emitter.on(TX_SUBMITTED, this.showHash); } componentWillUnmount() { emitter.removeListener(ERROR, this.showError); + emitter.removeListener(PARAMS_COPIED, this.showInfo); emitter.removeListener(TX_SUBMITTED, this.showHash); }; @@ -50,6 +53,17 @@ class SnackbarController extends Component { }) } + showInfo = (message) => { + const snackbarObj = { snackbarMessage: null, snackbarType: null, open: false } + this.setState(snackbarObj) + + const that = this + setTimeout(() => { + const snackbarObj = { snackbarMessage: message, snackbarType: 'Info', open: true } + that.setState(snackbarObj) + }) + } + showHash = (txHash) => { const snackbarObj = { snackbarMessage: null, snackbarType: null, open: false } this.setState(snackbarObj) diff --git a/stores/constants/constants.js b/stores/constants/constants.js index 48366ed3e..592088d56 100644 --- a/stores/constants/constants.js +++ b/stores/constants/constants.js @@ -3,6 +3,7 @@ export const ERROR = 'ERROR' export const CONNECTION_CONNECTED = 'CONNECTION_CONNECTED' export const CONNECTION_DISCONNECTED = 'CONNECTION_DISCONNECTED' export const CONNECT_WALLET = 'CONNECT_WALLET' +export const PARAMS_COPIED = 'PARAMS_COPIED' export const CONFIGURE = 'CONFIGURE' export const ACCOUNT_CONFIGURED = 'ACCOUNT_CONFIGURED'