Added a "copy params object" button, allowing developers to get details about the network a lot easier

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() }
         </Button>
+        <Tooltip title={'Copy params object'}>
+          <IconButton aria-label="Copy params object" onClick={copyParamsObject} color={'primary'}>
+            <FileCopyIcon />
+          </IconButton>
+        </Tooltip>
       </div>
     </Paper>
   )

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)

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'