Rpc list

components/RPCList/index.js

@@ -0,0 +1,49 @@
+import { Paper } from '@material-ui/core';
+import { useEffect } from 'react';
+import { useRPCData } from '../../utils/utils';
+import classes from './index.module.css';
+
+export default function RPCList({ chain }) {
+  const { data } = useRPCData(chain.rpc);
+  const darkMode = window.localStorage.getItem('yearn.finance-dark-mode') === 'dark';
+
+  useEffect(() => {
+    // clear network resources list for better performance to find latency of each rpc url
+    window.performance.clearResourceTimings();
+
+    const interval = setInterval(() => {
+      window.performance.clearResourceTimings();
+    }, 15000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Paper elevation={1} className={classes.disclosure}>
+      <table
+        className={classes.table}
+        style={{ '--border-color': darkMode ? 'hsl(0deg 0% 39% / 33%)' : 'hsl(0deg 0% 17% / 4%)' }}
+      >
+        <caption>{`${chain.name} RPC URL List`}</caption>
+        <thead>
+          <tr>
+            <th>RPC Server Address</th>
+            <th>Height</th>
+            <th>Latency</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {data?.map((item, index) => (
+            <tr key={index}>
+              <td>{item.url}</td>
+              <td>{item.height}</td>
+              <td>{item.latency}</td>
+              <td>Add to Wallet</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Paper>
+  );
+}

components/RPCList/index.module.css

@@ -0,0 +1,32 @@
+.disclosure {
+  grid-column: 1 / -1;
+  position: relative;
+  padding: 30px;
+  overflow-x: auto;
+}
+
+.table {
+  border-collapse: collapse;
+  margin: 0 auto;
+}
+
+.table {
+  white-space: nowrap;
+}
+
+.table caption,
+.table th,
+.table td {
+  padding: 2px 12px;
+  border: 1px solid var(--border-color);
+}
+
+.table caption {
+  font-size: 1rem;
+  font-weight: 500;
+  border-bottom: 0;
+}
+
+.table th {
+  font-weight: 500;
+}

components/chain/chain.js

@@ -1,31 +1,33 @@
-import React, { useState, useEffect, useMemo } from "react";
-import { Typography, Paper, Grid, Button, Tooltip } from "@material-ui/core";
-import Skeleton from "@material-ui/lab/Skeleton";
-import { useRouter } from "next/router";
-import Web3 from "web3";
-
-import classes from "./chain.module.css";
-
-import stores from "../../stores/index.js";
-import { getProvider } from "../../utils";
-
-import { ERROR, CONNECT_WALLET, TRY_CONNECT_WALLET, ACCOUNT_CONFIGURED } from "../../stores/constants";
-import Image from "next/image";
+import React, { useState, useEffect, useMemo } from 'react';
+import { Typography, Paper, Button, Tooltip, withStyles } from '@material-ui/core';
+import classes from './chain.module.css';
+import stores, { useChain } from '../../stores/index.js';
+import { getProvider } from '../../utils';
+import { ERROR, TRY_CONNECT_WALLET, ACCOUNT_CONFIGURED } from '../../stores/constants';
+import Image from 'next/image';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import RPCList from '../RPCList';
+
+const ExpandButton = withStyles((theme) => ({
+  root: {
+    width: '100%',
+    marginTop: '12px',
+    marginBottom: '-24px',
+  },
+}))(Button);
 
 export default function Chain({ chain }) {
-  const router = useRouter();
-
   const [account, setAccount] = useState(null);
 
   useEffect(() => {
     const accountConfigure = () => {
-      const accountStore = stores.accountStore.getStore("account");
+      const accountStore = stores.accountStore.getStore('account');
       setAccount(accountStore);
     };
 
     stores.emitter.on(ACCOUNT_CONFIGURED, accountConfigure);
 
-    const accountStore = stores.accountStore.getStore("account");
+    const accountStore = stores.accountStore.getStore('account');
     setAccount(accountStore);
 
     return () => {
@@ -34,7 +36,7 @@ export default function Chain({ chain }) {
   }, []);
 
   const toHex = (num) => {
-    return "0x" + num.toString(16);
+    return '0x' + num.toString(16);
   };
 
   const addToNetwork = () => {
@@ -62,7 +64,7 @@ export default function Chain({ chain }) {
     window.web3.eth.getAccounts((error, accounts) => {
       window.ethereum
         .request({
-          method: "wallet_addEthereumChain",
+          method: 'wallet_addEthereumChain',
           params: [params, accounts[0]],
         })
         .then((result) => {
@@ -78,65 +80,84 @@ export default function Chain({ chain }) {
   const renderProviderText = () => {
     if (account && account.address) {
       const providerTextList = {
-        Metamask: "Add to Metamask",
-        imToken: "Add to imToken",
-        Wallet: "Add to Wallet",
+        Metamask: 'Add to Metamask',
+        imToken: 'Add to imToken',
+        Wallet: 'Add to Wallet',
       };
       return providerTextList[getProvider()];
     } else {
-      return "Connect wallet";
+      return 'Connect wallet';
     }
   };
 
   const icon = useMemo(() => {
-    return chain.chainSlug ? `https://defillama.com/chain-icons/rsz_${chain.chainSlug}.jpg` : "/unknown-logo.png";
+    return chain.chainSlug ? `https://defillama.com/chain-icons/rsz_${chain.chainSlug}.jpg` : '/unknown-logo.png';
   }, [chain]);
 
+  const chainId = useChain((state) => state.id);
+  const updateChain = useChain((state) => state.updateChain);
+
+  const handleClick = () => {
+    if (chain.chainId === chainId) {
+      updateChain(null);
+    } else {
+      updateChain(chain.chainId);
+    }
+  };
+
+  const showAddlInfo = chain.chainId === chainId;
+
   if (!chain) {
     return <div></div>;
   }
 
   return (
-    <Paper elevation={1} className={classes.chainContainer} key={chain.chainId}>
-      <div className={classes.chainNameContainer}>
-        <Image
-          src={icon}
-          onError={(e) => {
-            e.target.onerror = null;
-            e.target.src = "/chains/unknown-logo.png";
-          }}
-          width={28}
-          height={28}
-          className={classes.avatar}
-        />
-
-        <Tooltip title={chain.name}>
-          <Typography variant="h3" className={classes.name} noWrap style={{ marginLeft: "24px" }}>
-            <a href={chain.infoURL} target="_blank" rel="noreferrer">
-              {chain.name}
-            </a>
-          </Typography>
-        </Tooltip>
-      </div>
-      <div className={classes.chainInfoContainer}>
-        <div className={classes.dataPoint}>
-          <Typography variant="subtitle1" color="textSecondary" className={classes.dataPointHeader}>
-            ChainID
-          </Typography>
-          <Typography variant="h5">{chain.chainId}</Typography>
+    <>
+      <Paper elevation={1} className={classes.chainContainer} key={chain.chainId}>
+        <div className={classes.chainNameContainer}>
+          <Image
+            src={icon}
+            onError={(e) => {
+              e.target.onerror = null;
+              e.target.src = '/chains/unknown-logo.png';
+            }}
+            width={28}
+            height={28}
+            className={classes.avatar}
+          />
+
+          <Tooltip title={chain.name}>
+            <Typography variant="h3" className={classes.name} noWrap style={{ marginLeft: '24px' }}>
+              <a href={chain.infoURL} target="_blank" rel="noreferrer">
+                {chain.name}
+              </a>
+            </Typography>
+          </Tooltip>
+        </div>
+        <div className={classes.chainInfoContainer}>
+          <div className={classes.dataPoint}>
+            <Typography variant="subtitle1" color="textSecondary" className={classes.dataPointHeader}>
+              ChainID
+            </Typography>
+            <Typography variant="h5">{chain.chainId}</Typography>
+          </div>
+          <div className={classes.dataPoint}>
+            <Typography variant="subtitle1" color="textSecondary" className={classes.dataPointHeader}>
+              Currency
+            </Typography>
+            <Typography variant="h5">{chain.nativeCurrency ? chain.nativeCurrency.symbol : 'none'}</Typography>
+          </div>
         </div>
-        <div className={classes.dataPoint}>
-          <Typography variant="subtitle1" color="textSecondary" className={classes.dataPointHeader}>
-            Currency
-          </Typography>
-          <Typography variant="h5">{chain.nativeCurrency ? chain.nativeCurrency.symbol : "none"}</Typography>
+        <div className={classes.addButton}>
+          <Button variant="outlined" color="primary" onClick={addToNetwork}>
+            {renderProviderText()}
+          </Button>
         </div>
-      </div>
-      <div className={classes.addButton}>
-        <Button variant="outlined" color="primary" onClick={addToNetwork}>
-          {renderProviderText()}
-        </Button>
-      </div>
-    </Paper>
+        <ExpandButton onClick={handleClick}>
+          <ExpandMoreIcon style={{ transform: showAddlInfo ? 'rotate(180deg)' : '', transition: 'all 0.2s ease' }} />
+        </ExpandButton>
+      </Paper>
+      {showAddlInfo && <RPCList chain={chain} />}
+    </>
   );
 }