Good project

.gitignore

@@ -33,3 +33,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# others
+build.log

README.md

@@ -14,4 +14,4 @@ You can start editing the page by modifying `pages/index.js`. The page auto-upda
 
 ## Adding your RPC
 
-If you wish to add your RPC, please follow the [PR template](https://github.com/DefiLlama/chainlist/blob/main/pull_request_template.md)
+If you wish to add your RPC, please follow this [PR template](https://github.com/DefiLlama/chainlist/blob/main/pull_request_template.md)

components/AdBanner/index.js

@@ -0,0 +1,93 @@
+import * as Fathom from "fathom-client";
+import { useEffect, useState } from "react";
+
+import { FATHOM_ADS_ID } from "../../hooks/useAnalytics";
+import { notTranslation as useTranslations, shuffleArray } from "../../utils";
+
+const BANNERS = [
+  {
+    image: "brave.png",
+    name: "Brave",
+    url: "https://brave.com/wallet/?mtm_source=chainlist&mtm_medium=paid&mtm_campaign=q3wallet",
+    isActive: true,
+  },
+  {
+    image: "llamanodes.png",
+    name: "LlamaNodes",
+    url: "https://llamanodes.com",
+    isActive: true,
+  },
+  {
+    image: "gmx.png",
+    name: "GMX",
+    url: "https://app.gmx.io/#/trade/?ref=chainlist",
+    isActive: false,
+  },
+].filter((banner) => banner.isActive);
+
+export const AdBanner = () => {
+  const t = useTranslations("Common");
+  const [banner, setBanner] = useState();
+
+  // only render banner client-side to prevent hydration errors due to the random banners
+  useEffect(() => {
+    setBanner(BANNERS[Math.floor(Math.random() * BANNERS.length)]);
+  }, []);
+
+  if (!banner) {
+    return null;
+  }
+
+  const srcLarge = `./banners/large/${banner.image}`;
+  const srcSmall = `./banners/small/${banner.image}`;
+  const srcName = banner.name;
+
+  return (
+    <div className="flex flex-col w-full h-full justify-center gap-2">
+      <div className="w-full h-full rounded-[10px]">
+        <a
+          href={banner.url}
+          rel="noopener noreferrer"
+          target="_blank"
+          onClick={() => Fathom.trackGoal(FATHOM_ADS_ID[banner.name.toLowerCase()], 0)}
+        >
+          <picture className="rounded-[10px] duration-500 w-full h-full">
+            <source
+              srcSet={srcSmall}
+              media="(max-width: 420px)"
+              className="rounded-[10px] duration-500 w-full h-full"
+            />
+            <source
+              srcSet={srcLarge}
+              media="(max-width: 639px)"
+              className="rounded-[10px] duration-500 w-full h-full"
+            />
+            <source
+              srcSet={srcSmall}
+              media="(max-width: 1399px)"
+              className="rounded-[10px] duration-500 w-full h-full"
+            />
+            <source
+              srcSet={srcLarge}
+              media="(max-width: 1679px)"
+              className="rounded-[10px] duration-500 w-full h-full"
+            />
+            <source
+              srcSet={srcSmall}
+              media="(max-width: 2000px)"
+              className="rounded-[10px] duration-500 w-full h-full"
+            />
+
+            <img src={srcLarge} alt={srcName} className="rounded-[10px] duration-500 w-full h-full" />
+          </picture>
+        </a>
+      </div>
+
+      <div className="w-full text-center text-xs text-gray-500 dark:text-[#B3B3B3] italic">
+        <a href="mailto:[email protected]" rel="noopener noreferrer" target="_blank">
+          {`${t("your-ad-here")}, ${t("contact-us").toLowerCase()}`}
+        </a>
+      </div>
+    </div>
+  );
+};

components/Layout/index.js

@@ -1,11 +1,34 @@
 import * as React from "react";
+import { useEffect } from "react";
 import Header from "../header";
 // import { useTranslations } from "next-intl";
 import { notTranslation as useTranslations } from "../../utils";
 import Logo from "./Logo";
 import { useRouter } from "next/router";
 
+const toggleTheme = (e) => {
+  e.preventDefault();
+  const element = document.body;
+  document.getElementById("theme-toggle-dark-icon").classList.toggle("hidden");
+  document.getElementById("theme-toggle-light-icon").classList.toggle("hidden");
+  const result = element.classList.toggle("dark");
+  localStorage.setItem("theme", result ? "dark" : "light");
+};
+
+const initTheme = () => {
+  const element = document.body;
+  if (element.classList.contains("dark")) {
+    document.getElementById("theme-toggle-light-icon").classList.remove("hidden");
+  } else {
+    document.getElementById("theme-toggle-dark-icon").classList.remove("hidden");
+  }
+};
+
 export default function Layout({ children, lang }) {
+  useEffect(() => {
+    initTheme();
+  }, []);
+
   const t = useTranslations("Common", lang);
 
   const router = useRouter();
@@ -16,7 +39,7 @@ export default function Layout({ children, lang }) {
 
   return (
     <div className="grid grid-cols-1 lg:grid-cols-[40vw,_auto]">
-      <div className="relative h-full">
+      <div className="dark:text-[#B3B3B3] text-black dark:bg-[#0D0D0D] bg-white relative h-full">
         <div className="p-5 sticky top-0 bottom-0 m-auto flex flex-col items-center gap-8 justify-center h-screen max-w-[480px] mx-auto">
           <figure className="lg:mr-auto">
             <Logo />
@@ -27,7 +50,7 @@ export default function Layout({ children, lang }) {
 
           <div className="flex flex-col gap-4 w-full">
             <a
-              className="flex items-center justify-center mx-auto lg:ml-0 gap-2 rounded-[50px] max-w-[16.25rem] font-medium py-[18px] px-6 shadow-lg w-full bg-[#2F80ED] text-white"
+              className="flex items-center justify-center mx-auto lg:ml-0 gap-2 rounded-[50px] max-w-[16.25rem] font-medium py-[18px] px-6 shadow-lg w-full dark:bg-[#2F80ED] bg-[#2F80ED] dark:text-black text-white"
               href="https://github.com/ethereum-lists/chains"
               target="_blank"
               rel="noopener noreferrer"
@@ -46,7 +69,7 @@ export default function Layout({ children, lang }) {
             </a>
 
             <a
-              className="flex items-center justify-center mx-auto lg:ml-0 gap-2 rounded-[50px] max-w-[16.25rem] font-medium py-[17px] px-6 w-full bg-white text-[#2F80ED] border border-[#EAEAEA]"
+              className="flex items-center justify-center mx-auto lg:ml-0 gap-2 rounded-[50px] max-w-[16.25rem] font-medium py-[17px] px-6 w-full dark:bg-[#0D0D0D] bg-white dark:text-[#2F80ED] text-[#2F80ED] border dark:border-[#171717] border-[#EAEAEA]"
               href="https://github.com/DefiLlama/chainlist/blob/main/constants/extraRpcs.js"
               target="_blank"
               rel="noopener noreferrer"
@@ -79,10 +102,36 @@ export default function Layout({ children, lang }) {
             </svg>
             <span className="text-base font-medium">{t("view-source-code")}</span>
           </a>
+
+          <a className="flex items-center gap-2 mx-auto lg:ml-0" href="#" onClick={toggleTheme} id="theme-toggle">
+            <svg
+              id="theme-toggle-dark-icon"
+              className="w-5 h-5 hidden"
+              fill="#2F80ED"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
+            </svg>
+            <svg
+              id="theme-toggle-light-icon"
+              className="w-5 h-5 hidden"
+              fill="#2F80ED"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
+                fillRule="evenodd"
+                clipRule="evenodd"
+              ></path>
+            </svg>
+            <span className="text-base font-medium">{t("toggle-theme")}</span>
+          </a>
         </div>
       </div>
-      <div className="bg-[#f3f3f3] p-5 relative flex flex-col gap-5">
-        <Header lang={lang} chainName={chainName} key={chainName} />
+      <div className="dark:bg-[#181818] bg-[#f3f3f3] p-5 relative flex flex-col gap-5">
+        <Header lang={lang} chainName={chainName} key={chainName + "header"} />
 
         {children}
       </div>

components/RPCList/index.js

@@ -58,7 +58,7 @@ export default function RPCList({ chain, lang }) {
       let trust = "transparent";
       let disableConnect = false;
 
-      if (!height || !latency || topRpc.height - height > 3 || topRpc.latency - latency > 5000) {
+      if (!height || !latency || topRpc.height - height > 3 || latency - topRpc.latency > 5000) {
         trust = "red";
       } else if (topRpc.height - height < 2 && topRpc.latency - latency > -600) {
         trust = "green";
@@ -79,30 +79,13 @@ export default function RPCList({ chain, lang }) {
 
   const { rpcData, hasLlamaNodesRpc } = useLlamaNodesRpcData(chain.chainId, data);
 
-  const isEthMainnet = chain?.name === "Ethereum Mainnet";
-
   return (
-    <div className="shadow bg-white p-8 rounded-[10px] flex flex-col gap-3 overflow-hidden col-span-full relative overflow-x-auto">
-      {isEthMainnet && (
-        <p className="text-center">
-          Follow{" "}
-          <a
-            href="https://docs.llama.fi/chainlist/how-to-change-ethereums-rpc"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="underline"
-          >
-            this guide
-          </a>{" "}
-          to change RPC endpoint's of Ethereum Mainnet
-        </p>
-      )}
-
-      <table className="m-0 border-collapse whitespace-nowrap">
+    <div className="shadow dark:bg-[#0D0D0D] bg-white p-8 rounded-[10px] flex flex-col gap-3 overflow-hidden col-span-full relative overflow-x-auto">
+      <table className="m-0 border-collapse whitespace-nowrap dark:text-[#B3B3B3] text-black">
         <caption className="relative w-full px-3 py-1 text-base font-medium border border-b-0">
           <span className="mr-4">{`${chain.name} RPC URL List`}</span>
           <button
-            className="text-sm font-normal flex items-center gap-1 absolute right-4 top-[2px] bottom-[2px] hover:bg-[#EAEAEA] px-2 rounded-[10px]"
+            className="text-sm font-normal flex items-center gap-1 absolute right-4 top-[2px] bottom-[2px] dark:hover:bg-[#171717] hover:bg-[#EAEAEA] px-2 rounded-[10px]"
             onClick={() => setSorting(!sortChains)}
           >
             {sortChains ? (
@@ -136,23 +119,22 @@ export default function RPCList({ chain, lang }) {
 
         <tbody>
           {rpcData.map((item, index) => {
-            let className = 'bg-inherit';
+            let className = "bg-inherit";
 
             if (hasLlamaNodesRpc && index === 0) {
-              className = 'bg-[#F9F9F9]';
+              className = "dark:bg-[#0D0D0D] bg-[#F9F9F9]";
             }
 
             return (
               <Row
                 values={item}
                 chain={chain}
-                isEthMainnet={isEthMainnet}
-                key={index}
+                key={"rpc" + index}
                 privacy={urlToData[item.data.url]}
                 lang={lang}
                 className={className}
               />
-            )
+            );
           })}
         </tbody>
       </table>
@@ -161,7 +143,7 @@ export default function RPCList({ chain, lang }) {
 }
 
 const Shimmer = () => {
-  return <div className="rounded h-5 w-full min-w-[40px] animate-pulse bg-[#EAEAEA]"></div>;
+  return <div className="rounded h-5 w-full min-w-[40px] animate-pulse dark:bg-[#171717] bg-[#EAEAEA]"></div>;
 };
 
 function PrivacyIcon({ tracking, isOpenSource = false }) {
@@ -181,7 +163,7 @@ function PrivacyIcon({ tracking, isOpenSource = false }) {
   return <EmptyIcon />;
 }
 
-const Row = ({ values, chain, isEthMainnet, privacy, lang, className }) => {
+const Row = ({ values, chain, privacy, lang, className }) => {
   const t = useTranslations("Common", lang);
   const { data, isLoading, refetch } = values;
 
@@ -225,27 +207,23 @@ const Row = ({ values, chain, isEthMainnet, privacy, lang, className }) => {
           </>
         )}
       </td>
-        <td className="px-3 py-1 text-sm border">
-          <Tooltip content={privacy?.trackingDetails || t('no-privacy-info')}>
-            {isLoading ? <Shimmer /> : <PrivacyIcon tracking={privacy?.tracking} isOpenSource={privacy?.isOpenSource} />}
-          </Tooltip>
-        </td>
+      <td className="px-3 py-1 text-sm border">
+        <Tooltip content={privacy?.trackingDetails || t("no-privacy-info")}>
+          {isLoading ? <Shimmer /> : <PrivacyIcon tracking={privacy?.tracking} isOpenSource={privacy?.isOpenSource} />}
+        </Tooltip>
+      </td>
       <td className="px-3 py-1 text-sm text-center border">
         {isLoading ? (
           <Shimmer />
         ) : (
           <>
-            {isEthMainnet ? (
-              <CopyUrl url={data?.url} />
-            ) : (
-              !data.disableConnect && (
-                <button
-                  className="px-2 py-[2px] -my-[2px] text-center text-sm hover:bg-[#EAEAEA] rounded-[50px]"
-                  onClick={() => addToNetwork({ address, chain, rpc: data?.url })}
-                >
-                  {t(renderProviderText(account))}
-                </button>
-              )
+            {!data.disableConnect && (
+              <button
+                className="px-2 py-[2px] -my-[2px] text-center text-sm dark:hover:bg-[#171717] hover:bg-[#EAEAEA] rounded-[50px]"
+                onClick={() => addToNetwork({ address, chain, rpc: data?.url })}
+              >
+                {t(renderProviderText(account))}
+              </button>
             )}
           </>
         )}
@@ -255,31 +233,31 @@ const Row = ({ values, chain, isEthMainnet, privacy, lang, className }) => {
 };
 
 const CopyUrl = ({ url = "" }) => {
-  const { hasCopied, onCopy } = useClipboard()
+  const { hasCopied, onCopy } = useClipboard();
 
   const handleCopy = () => {
     if (url.includes("eth.llamarpc")) {
       Fathom.trackGoal(FATHOM_DROPDOWN_EVENTS_ID[1], 0);
     }
 
-    return onCopy(url)
-  }
+    return onCopy(url);
+  };
 
   return (
     <button
-      className="px-2 py-[2px] -my-[2px] text-sm hover:bg-[#EAEAEA] rounded-[50px] mx-auto"
+      className="px-2 py-[2px] -my-[2px] text-sm dark:hover:bg-[#171717] hover:bg-[#EAEAEA] rounded-[50px] mx-auto"
       onClick={handleCopy}
     >
-      {!hasCopied ? 'Copy URL' : 'Copied!'}
+      {!hasCopied ? "Copy URL" : "Copied!"}
     </button>
   );
 };
 
 const EmptyIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25" fill="none" className="w-4 h-4 mx-auto">
-    <circle cx="12.2844" cy="12.6242" r="11.0662" stroke="black" strokeWidth="1.47549" strokeDasharray="2.95 2.95"/>
+    <circle cx="12.2844" cy="12.6242" r="11.0662" stroke="black" strokeWidth="1.47549" strokeDasharray="2.95 2.95" />
   </svg>
-)
+);
 
 const RedIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="red" className="w-5 h-5 mx-auto">