Patch 2

.gitignore

@@ -32,3 +32,4 @@ yarn-error.log*
 
 # vercel
 .vercel
+.idea

Dockerfile

@@ -0,0 +1,35 @@
+FROM node:14 as builder
+
+ARG COMMIT_SHA
+ENV COMMIT_SHA=$COMMIT_SHA
+
+WORKDIR /opt/app
+
+COPY . .
+RUN yarn
+ENV NODE_ENV production
+RUN yarn build
+
+ARG STATIC_BUCKET
+
+RUN apt-get update && apt-get install -y awscli
+
+RUN aws s3 cp /opt/app/.next/static s3://${STATIC_BUCKET}/static/_next/static --recursive --cache-control "private, max-age=259200" \
+  &&  aws s3 cp /opt/app/public s3://${STATIC_BUCKET}/static --recursive --cache-control "private, max-age=259200"
+
+FROM node:14
+
+RUN mkdir /mnt/efs
+
+WORKDIR /opt/app
+COPY --from=builder /opt/app/.next .next
+COPY --from=builder /opt/app/node_modules node_modules
+COPY --from=builder /opt/app/package.json package.json
+COPY --from=builder /opt/app/yarn.lock yarn.lock
+COPY --from=builder /opt/app/public/connectors public/connectors
+
+EXPOSE 3000
+
+ENV NODE_ENV production
+
+CMD [ "yarn", "start" ]

SECURITY.md

@@ -0,0 +1,21 @@
+# Security Policy
+
+## Supported Versions
+
+Use this section to tell people about which versions of your project are
+currently being supported with security updates.
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 5.1.x   | :white_check_mark: |
+| 5.0.x   | :x:                |
+| 4.0.x   | :white_check_mark: |
+| < 4.0   | :x:                |
+
+## Reporting a Vulnerability
+
+Use this section to tell people how to report a vulnerability.
+
+Tell them where to go, how often they can expect to get an update on a
+reported vulnerability, what to expect if the vulnerability is accepted or
+declined, etc.

base/env.js

@@ -0,0 +1,5 @@
+import getConfig from "next/config";
+
+const { publicRuntimeConfig = {} } = getConfig()
+
+export const assetPrefix = publicRuntimeConfig.assetPrefix || 'https://www.bnbchainlist.org/static';

components/RPCList/index.js

@@ -0,0 +1,176 @@
+import { Button, Paper } from '@material-ui/core';
+import { useEffect, useMemo } from 'react';
+import useRPCData from '../../hooks/useRPCData';
+import { useAccount, useRpcStore } from '../../stores';
+import { addToNetwork, renderProviderText } from '../../utils/utils';
+import classes from './index.module.css';
+import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
+
+export default function RPCList({ chain }) {
+  const chains = useRPCData(chain.rpc);
+  const specialChain = [];
+  const normalChain = [];
+  chains.forEach(item => {
+    if (item.data && item.data.url.includes('nodereal.io')) {
+      specialChain.push(item);
+    } else {
+      normalChain.push(item);
+    }
+  });
+
+  const data = useMemo(() => {
+    const sortedData = specialChain.concat(normalChain?.sort((a, b) => {
+      if (a.isLoading) {
+        return 1;
+      }
+
+      const h1 = a?.data?.height;
+      const h2 = b?.data?.height;
+      const l1 = a?.data?.latency;
+      const l2 = b?.data?.latency;
+
+      if (!h2) {
+        return -1;
+      }
+
+      if (h2 - h1 > 0) {
+        return 1;
+      }
+      if (h2 - h1 < 0) {
+        return -1;
+      }
+      if (h1 === h2) {
+        if (l1 - l2 < 0) {
+          return -1;
+        } else {
+          return 1;
+        }
+      }
+    }));
+
+    const topRpc = sortedData[0]?.data ?? {};
+
+    return sortedData.map(({ data, ...rest }) => {
+      const { height = null, latency = null, url = '' } = data || {};
+
+      let trust = 'transparent';
+      let disableConnect = false;
+
+      if (!height || !latency || topRpc.height - height > 3 || topRpc.latency - latency > 5000) {
+        trust = 'red';
+      } else if (topRpc.height - height < 2 && topRpc.latency - latency > -600) {
+        trust = 'green';
+      } else {
+        trust = 'orange';
+      }
+
+      if (url.includes('wss://') || url.includes('API_KEY')) disableConnect = true;
+
+      const lat = latency ? (latency / 1000).toFixed(3) + 's' : null;
+
+      return { ...rest, data: { ...data, height, latency: lat, trust, disableConnect } };
+    });
+  }, [chains]);
+
+  const darkMode = window.localStorage.getItem('yearn.finance-dark-mode') === 'dark';
+
+  const isEthMainnet = chain?.name === 'Ethereum Mainnet';
+
+  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>Score</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((item, index) => (
+            <Row values={item} chain={chain} isEthMainnet={isEthMainnet} key={index} />
+          ))}
+        </tbody>
+      </table>
+      {isEthMainnet && (
+        <p className={classes.helperText}>
+          Follow{' '}
+          <a
+            href="https://docs.llama.fi/chainlist/how-to-change-ethereums-rpc"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            this
+          </a>{' '}
+          guide to change RPC endpoint's of Ethereum Mainnet
+        </p>
+      )}
+    </Paper>
+  );
+}
+
+const Shimmer = () => {
+  const darkMode = window.localStorage.getItem('yearn.finance-dark-mode') === 'dark';
+  const linearGradient = darkMode
+    ? 'linear-gradient(90deg, rgb(255 247 247 / 7%) 0px, rgb(85 85 85 / 80%) 40px, rgb(255 247 247 / 7%) 80px)'
+    : 'linear-gradient(90deg, #f4f4f4 0px, rgba(229, 229, 229, 0.8) 40px, #f4f4f4 80px)';
+  return <div className={classes.shimmer} style={{ '--linear-gradient': linearGradient }}></div>;
+};
+
+const Row = ({ values, chain, isEthMainnet }) => {
+  const { data, isLoading, refetch } = values;
+
+  const rpcs = useRpcStore((state) => state.rpcs);
+  const addRpc = useRpcStore((state) => state.addRpc);
+  const account = useAccount((state) => state.account);
+
+  useEffect(() => {
+    // ignore first request to a url and refetch to calculate latency which doesn't include DNS lookup
+    if (data && !rpcs.includes(data.url)) {
+      refetch();
+      addRpc(data.url);
+    }
+  }, [data, rpcs, addRpc, refetch]);
+
+  return (
+    <tr>
+      <td>{isLoading ? <Shimmer /> : data?.url}</td>
+      <td>{isLoading ? <Shimmer /> : data?.height}</td>
+      <td>{isLoading ? <Shimmer /> : data?.latency}</td>
+      <td className={classes.trustScore} style={{ '--trust-color': data?.trust ?? 'transparent' }}>
+        {isLoading ? <Shimmer /> : <FiberManualRecordIcon />}
+      </td>
+      <td>
+        {isLoading ? (
+          <Shimmer />
+        ) : (
+          <>
+            {isEthMainnet ? (
+              <CopyUrl url={data?.url} />
+            ) : (
+              !data.disableConnect && (
+                <Button style={{ padding: '0 8px' }} onClick={() => addToNetwork(account, chain, data?.url)}>
+                  {renderProviderText(account)}
+                </Button>
+              )
+            )}
+          </>
+        )}
+      </td>
+    </tr>
+  );
+};
+
+const CopyUrl = ({ url = '' }) => {
+  return (
+    <Button style={{ padding: '0 8px' }} onClick={() => navigator.clipboard.writeText(url)}>
+      Copy URL
+    </Button>
+  );
+};

components/RPCList/index.module.css

@@ -0,0 +1,65 @@
+.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: 4px 12px;
+  border: 1px solid var(--border-color);
+}
+
+.table caption {
+  font-size: 1rem;
+  font-weight: 500;
+  border-bottom: 0;
+}
+
+.table th {
+  font-weight: 500;
+}
+
+.shimmer {
+  border-radius: 4px;
+  height: 20px;
+  width: 100%;
+  min-width: 40px;
+  background-image: var(--linear-gradient);
+  background-size: 600px;
+  animation: loading 2s infinite;
+}
+
+.trustScore {
+  text-align: center;
+  color: var(--trust-color);
+}
+
+.helperText {
+  text-align: center;
+}
+
+.helperText a {
+  text-decoration: underline;
+}
+
+@keyframes loading {
+  0% {
+    background-position: -100px;
+  }
+  40%,
+  100% {
+    background-position: 140px;
+  }
+}