add rpc list url

.prettierignore

@@ -0,0 +1 @@
+sitemap.xml.js

components/Layout/index.js

@@ -0,0 +1,106 @@
+import React from "react";
+import { Typography, Button } from "@material-ui/core";
+import AddIcon from "@material-ui/icons/Add";
+import Header from "../header";
+import styles from "../../styles/Home.module.css";
+import classes from "./index.module.css";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+
+export default function Layout({ changeTheme, theme, children }) {
+  const t = useTranslations("Common");
+  const addNetwork = () => {
+    window.open("https://github.com/ethereum-lists/chains", "_blank");
+  };
+
+  const addRpc = () => {
+    window.open(
+      "https://github.com/DefiLlama/chainlist/blob/main/constants/extraRpcs.json",
+      "_blank"
+    );
+  };
+
+  const url = '/logo.svg'
+
+  return (
+    <div className={styles.container}>
+      <main className={styles.main}>
+        <div
+          className={
+            theme.palette.type === "dark"
+              ? classes.containerDark
+              : classes.container
+          }
+        >
+          <div className={classes.copyContainer}>
+            <div className={classes.copyCentered}>
+            <img style={{
+                width: '360px',
+                marginLeft: '-15px',
+              }} src={url} alt="Chainlist logo" />
+
+              <Typography variant="h2" className={classes.helpingParagraph}>
+                {t("help-info")}
+              </Typography>
+              <Typography className={classes.subTitle}>
+                {t("description")}
+              </Typography>
+              <Button
+                size="large"
+                color="primary"
+                variant="contained"
+                className={classes.addNetworkButton}
+                onClick={addNetwork}
+                endIcon={<AddIcon />}
+              >
+                <Typography className={classes.buttonLabel}>
+                  {t("add-your-network")}
+                </Typography>
+              </Button>
+              <Button
+                size="large"
+                color="primary"
+                variant="outlined"
+                className={classes.addRpcButton}
+                onClick={addRpc}
+                endIcon={<AddIcon />}
+              >
+                <Typography className={classes.buttonLabel}>
+                  {t("add-your-rpc")}
+                </Typography>
+              </Button>
+              <div className={classes.socials}>
+                <a
+                  className={`${classes.socialButton}`}
+                  href="https://github.com/DefiLlama/chainlist"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <svg version="1.1" width="24" height="24" viewBox="0 0 24 24">
+                    <path
+                      fill={"#2F80ED"}
+                      d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
+                    />
+                  </svg>
+                  <Typography variant="body1" className={classes.sourceCode}>
+                    {t("view-source-code")}
+                  </Typography>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div
+            className={
+              theme.palette.type === "dark"
+                ? classes.listContainerDark
+                : classes.listContainer
+            }
+          >
+            <Header changeTheme={changeTheme} />
+            {children}
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}

pages/index.module.css → components/Layout/index.module.css

@@ -28,34 +28,6 @@
   width: 425px;
 }
 
-.headerContainer {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 48px;
-  padding-top: 24px;
-  position: sticky;
-  top: 0;
-  background: linear-gradient(rgba(243, 243, 243, 1) 90%, rgba(243, 243, 243, 0) 100%);
-  padding: 24px 80px 48px 80px;
-  z-index: 1;
-}
-
-.headerContainerDark {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: 48px;
-  padding-top: 24px;
-  position: sticky;
-  top: 0;
-  background: linear-gradient(rgba(35, 37, 46, 1) 90%, rgba(35, 37, 46, 0) 100%);
-  padding: 24px 80px 48px 80px;
-  z-index: 1;
-}
-
 .listContainer {
   min-height: 100vh;
   width: 100%;
@@ -73,9 +45,10 @@
 }
 
 .cardsContainer {
-  padding: 0px 80px;
+  padding: 0px 20px;
   display: grid;
-  grid-template-columns: calc(33% - 15px) calc(33% - 15px) calc(33% - 15px);
+  grid-template-columns: repeat(auto-fit, calc(33% - 20px));
+  grid-auto-flow: dense;
   gap: 30px;
   max-width: 1400px;
 }
@@ -98,20 +71,16 @@
   width: fit-content;
 }
 
-.filterRow {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  width: 100%;
-  flex: 1;
-}
-
-.searchContainer {
-  margin-right: 24px !important;
+.addRpcButton {
+  margin-top: 12px !important;
+  width: fit-content;
 }
 
 .socials {
   margin-top: 50px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
 }
 
 .socialButton {
@@ -127,15 +96,6 @@
   padding-left: 30px;
 }
 
-.searchPaper {
-  width: 100%;
-}
-
-.searchInputAdnornment {
-  font-size: 14px !important;
-  font-weight: bold !important;
-}
-
 .buttonLabel {
   text-transform: capitalize !important;
   font-weight: 500 !important;
@@ -148,9 +108,15 @@
   justify-content: space-between;
 }
 
+.form {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
 @media screen and (max-width: 1700px) {
   .cardsContainer {
-    grid-template-columns: calc(50% - 15px) calc(50% - 15px);
+    grid-template-columns: repeat(auto-fit, calc(50% - 15px));
   }
 }
 
@@ -235,6 +201,9 @@
   .subTitle {
     padding: 0 10px;
   }
+  .socials {
+    justify-content: center;
+  }
   .socialButton {
     text-align: center;
     justify-content: center;