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,162 @@
+import { useEffect, useRef, useState } from "react";
+
+import { Native, NativeMediaContent, NativeLink } from "hypelab-react";
+import { HYPELAB_NATIVE_PLACEMENT_SLUG } from "../../constants/hypelab";
+
+export const AdBanner = () => {
+  return (
+    <Native placement={HYPELAB_NATIVE_PLACEMENT_SLUG}>
+      {function (ad) {
+        if (ad.icon !== "") {
+          return <NativeWrapper ad={ad} />;
+        }
+      }}
+    </Native>
+  );
+};
+
+const NativeWrapper = ({ ad }) => {
+  const imageRef = useRef(null);
+  const [isSquare, setIsSquare] = useState(false);
+  const [hideNativeTextContent, setHideNativeTextContent] = useState(true);
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.contentRect.width > 0 && entry.contentRect.height > 0) {
+          setIsSquare(entry.contentRect.width == entry.contentRect.height);
+          setHideNativeTextContent(entry.contentRect.height > 220);
+        }
+      }
+    });
+
+    const container = imageRef.current;
+
+    if (container) {
+      resizeObserver.observe(container);
+    }
+
+    return () => {
+      if (container) {
+        resizeObserver.unobserve(container);
+      }
+    };
+  }, [imageRef]);
+
+  return (
+    <div className="flex flex-col w-full h-full items-center justify-center">
+      <div
+        className={`flex flex-col w-fit max-w-full bg-white dark:bg-[#0D0D0D] rounded-[10px] shadow overflow-hidden ${
+          isSquare ? "max-w-[260px] lg:max-w-[290px]" : ""
+        }`}
+      >
+        <div className="flex">
+          <NativeLink>
+            <div className="relative" ref={imageRef}>
+              <NativeMediaContent />
+
+              <HypeLabOverlay />
+            </div>
+          </NativeLink>
+        </div>
+        {isSquare || hideNativeTextContent ? "" : <NativeTextContent ad={ad} />}
+      </div>
+    </div>
+  );
+};
+
+const NativeTextContent = ({ ad }) => {
+  const containerRef = useRef(null);
+  const [width, setWidth] = useState(0);
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setWidth(entry.contentRect.width);
+      }
+    });
+
+    const container = containerRef.current;
+
+    if (container) {
+      resizeObserver.observe(container);
+    }
+
+    return () => {
+      if (container) {
+        resizeObserver.unobserve(container);
+      }
+    };
+  }, [containerRef]);
+
+  return (
+    <div className="flex items-center justify-center px-3 py-3 w-full h-full" id="ctaContainer" ref={containerRef}>
+      <AdvertiserIcon ad={ad} small={width < 300} />
+      <div className="grow flex items-center justify-between overflow-hidden">
+        <div className="grow truncate">
+          <AdvertiserName ad={ad} small={width < 300} />
+        </div>
+        <div className="flex-none ml-4">
+          <AdvertiserCta ad={ad} small={width < 300} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const AdvertiserIcon = ({ ad, small = false }) => {
+  return (
+    <div className="flex-none mr-2">
+      <NativeLink>
+        <img className={`${small ? "w-8" : "w-10"} rounded-full`} alt={ad.icon} src={ad.icon} />
+      </NativeLink>
+    </div>
+  );
+};
+
+const AdvertiserName = ({ ad, small = false }) => {
+  return (
+    <div
+      className={`${
+        small ? "text-sm" : ""
+      } font-semibold overflow-hidden text-ellipsis relative top-[1px] dark:text-[#B3B3B3]`}
+    >
+      <NativeLink>{ad.advertiser}</NativeLink>
+    </div>
+  );
+};
+
+const AdvertiserCta = ({ ad, small = false }) => {
+  return (
+    <div className="flex-none">
+      <NativeLink>
+        <div
+          data-cy="ctaText"
+          className={`${
+            small ? "text-sm px-2 py-1" : "px-4 py-2"
+          } border dark:border-[#171717] border-[#EAEAEA] text-center rounded-[50px] dark:text-[#2F80ED] text-[#2F80ED] dark:hover:text-black hover:text-white dark:hover:bg-[#2F80ED] hover:bg-[#2F80ED] truncate`}
+        >
+          {ad.ctaText}
+        </div>
+      </NativeLink>
+    </div>
+  );
+};
+
+const HypeLabOverlay = () => {
+  const iconStyle = {
+    width: "18px",
+    height: "18px",
+    backgroundSize: "15px 15px",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+    backgroundImage: `url("data:image/svg+xml,%3Csvg width='436' height='660' viewBox='0 0 436 660' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M406.851 295.413C422.472 311.034 422.472 336.36 406.851 351.981L160.171 598.661C152.694 606.138 142.561 610.35 131.988 610.376L89.6175 610.483C67.4476 610.539 49.4613 592.552 49.5171 570.382L49.6237 528.012C49.6503 517.439 53.8625 507.306 61.3393 499.829L308.019 253.149C323.64 237.528 348.966 237.528 364.587 253.149L406.851 295.413Z' fill='url(%23paint0_linear_302_3)'/%3E%3Cpath d='M40.7391 354.979C25.1181 339.358 25.1181 314.031 40.7391 298.41L279.222 59.927C286.703 52.4462 296.843 48.2336 307.422 48.2113L347.024 48.1279C369.181 48.0812 387.155 66.0549 387.108 88.2121L387.024 127.814C387.002 138.393 382.79 148.533 375.309 156.014L136.826 394.497C121.205 410.118 95.8782 410.118 80.2572 394.497L40.7391 354.979Z' fill='url(%23paint1_linear_302_3)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_302_3' x1='-1.91062' y1='918.002' x2='34.7376' y2='209.271' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='white'/%3E%3Cstop offset='1' stop-color='%2300FF85'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_302_3' x1='622.605' y1='-507.064' x2='360.234' y2='489.074' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.0001' stop-color='%233BE160'/%3E%3Cstop offset='1' stop-color='%23D7FF35'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A")`,
+  };
+
+  return (
+    <div className="flex flex-row absolute top-0 right-0 bg-black/30 items-center pr-2 hover:translate-x-0 translate-x-[calc(100%-18px)] duration-500 transition-transform">
+      <div style={iconStyle}></div>
+      <div className="text-white text-xs h-[15px]">Ads by HypeLab</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>