Merge branch 'dev' of https://github.com/growthepie/gtp-frontend into…

… dev
growthepie · Jan 14, 2025 · 19e66e9 · 19e66e9
2 parents 6c149c4 + e851bbe
commit 19e66e9
Show file tree

Hide file tree

Showing 10 changed files with 866 additions and 482 deletions.
diff --git a/app/(layout)/layout.tsx b/app/(layout)/layout.tsx
@@ -194,7 +194,7 @@ export default function RootLayout({
       }}
     >
       <Head />
-      <body className="bg-forest-50 dark:bg-[#1F2726] text-forest-900 dark:text-forest-500 font-raleway !overflow-x-hidden overflow-y-scroll">
+      <body className="!overflow-x-hidden overflow-y-scroll bg-forest-50 font-raleway text-forest-900 dark:bg-[#1F2726] dark:text-forest-500">
         <script
           dangerouslySetInnerHTML={{
             __html: script,
@@ -206,27 +206,33 @@ export default function RootLayout({
         />
         <Providers>
           <div className="flex h-fit w-full justify-center">
-            <div className="flex w-full max-w-[1680px] min-h-screen">
+            <div className="flex min-h-screen w-full max-w-[1680px]">
               <SidebarContainer />
-              <div id="content-panel" className="flex flex-col flex-1 overflow-y-auto z-10 overflow-x-hidden relative min-h-full bg-white dark:bg-inherit">
-                <div className="w-full relative min-h-full">
-                  <div className="background-container !fixed">
+              <div
+                id="content-panel"
+                className="relative z-10 flex min-h-full flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white dark:bg-inherit"
+              >
+                <div className="relative min-h-full w-full">
+                  <div
+                    id="background-container"
+                    className="background-container !fixed"
+                  >
                     <div className="background-gradient-group">
                       <div className="background-gradient-yellow"></div>
                       <div className="background-gradient-green"></div>
                     </div>
                   </div>
                   <Header />
-                  <main className="flex-1 w-full mx-auto z-10 pb-[165px] min-h-[calc(100vh-218px-56px)] md:min-h-[calc(100vh-207px-80px)]">
+                  <main className="z-10 mx-auto min-h-[calc(100vh-218px-56px)] w-full flex-1 pb-[165px] md:min-h-[calc(100vh-207px-80px)]">
                     {children}
                   </main>
                   {/* <BottomBanner /> */}
                   <Footer />
                 </div>
               </div>
-              <div className="z-50 flex fixed bottom-[20px] w-full max-w-[1680px] justify-end pointer-events-none">
-                <div className="pr-[20px] md:pr-[50px] pointer-events-auto">
-                  <div className="relative flex gap-x-[15px] z-50 p-[5px] bg-forest-500 dark:bg-[#5A6462] rounded-full shadow-[0px_0px_50px_0px_#00000033] dark:shadow-[0px_0px_50px_0px_#000000]">
+              <div className="pointer-events-none fixed bottom-[20px] z-50 flex w-full max-w-[1680px] justify-end">
+                <div className="pointer-events-auto pr-[20px] md:pr-[50px]">
+                  <div className="relative z-50 flex gap-x-[15px] rounded-full bg-forest-500 p-[5px] shadow-[0px_0px_50px_0px_#00000033] dark:bg-[#5A6462] dark:shadow-[0px_0px_50px_0px_#000000]">
                     {/* <Details /> */}
                     <Share />
                   </div>

diff --git a/app/(layout)/trackers/octant/page.tsx b/app/(layout)/trackers/octant/page.tsx
diff --git a/app/providers.tsx b/app/providers.tsx
@@ -21,7 +21,9 @@ type ProvidersProps = {
 
 // bypass AWS rate limiting in development
 const headers = new Headers();
-headers.set("Test-Header", "true");
+headers.set("Cache-Control", "no-cache, no-store, must-revalidate");
+headers.set("Pragma", "no-cache");
+headers.set("Expires", "0");
 
 if (process.env.NEXT_PUBLIC_X_DEVELOPER_TOKEN)
   headers.set("X-Developer-Token", process.env.NEXT_PUBLIC_X_DEVELOPER_TOKEN);

diff --git a/components/development/ApiTool.tsx b/components/development/ApiTool.tsx
@@ -1,11 +1,11 @@
 "use client";
 import { useLocalStorage } from "usehooks-ts";
-import { useSWRConfig } from 'swr';
-import { useMemo } from "react";
+import { useSWRConfig } from "swr";
+import { useEffect, useMemo } from "react";
 
 // ability to change the API root between v1 and dev
 export default function ApiTool() {
-  const { cache, mutate, fetcher } = useSWRConfig()
+  const { cache, mutate, fetcher } = useSWRConfig();
   const roots = ["v1", "dev"];
   const [apiRoot, setApiRoot] = useLocalStorage("apiRoot", "v1");
 
@@ -18,32 +18,50 @@ export default function ApiTool() {
     }
 
     mutate(
-      key => true, // which cache keys are updated
+      (key) => true, // which cache keys are updated
       undefined, // update cache data to `undefined`
-      { revalidate: false } // do not revalidate
-    )
+      { revalidate: false }, // do not revalidate
+    );
 
     // revalidate after 1 second
     setTimeout(() => {
       mutate(
-        key => true, // which cache keys are updated
+        (key) => true, // which cache keys are updated
         undefined, // update cache data to `undefined`
-        { revalidate: true } // revalidate
-      )
-    }, 1000)
-  }
+        { revalidate: true }, // revalidate
+      );
+    }, 1000);
+  };
 
   const currentApiRoot = useMemo(() => {
     return apiRoot;
-  }, [apiRoot])
+  }, [apiRoot]);
 
+  useEffect(() => {
+    // shift the colors of the background container to indicate the API root
+    const backgroundContainerElement = document.getElementById(
+      "background-container",
+    );
+    if (backgroundContainerElement) {
+      if (apiRoot === "v1") {
+        backgroundContainerElement.classList.remove("hue-rotate-180");
+      } else {
+        backgroundContainerElement.classList.add("hue-rotate-180");
+      }
+    }
+  }, [apiRoot]);
 
   return (
     <div className="">
       <div className="flex gap-x-0.5">
         <div>API Root:</div>
-        <div className={`px-1 rounded-sm cursor-pointer ${currentApiRoot === "v1" ? "bg-white/30" : "bg-yellow-500/50"}`} onClick={() => toggleApiRoot()}>/{apiRoot}/</div>
+        <div
+          className={`cursor-pointer rounded-sm px-1 ${currentApiRoot === "v1" ? "bg-white/30" : "bg-yellow-500/50"}`}
+          onClick={() => toggleApiRoot()}
+        >
+          /{apiRoot}/
+        </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/components/layout/CategoryMetrics.tsx b/components/layout/CategoryMetrics.tsx
@@ -188,9 +188,14 @@ export default function CategoryMetrics({
     [key: string]: boolean;
   }>(
     Object.entries(AllChainsByKeys).reduce((acc, [key, chain]) => {
-      if (AllChainsByKeys[key].chainType === "L2") acc[key] = true;
+      if (Get_SupportedChainKeys(master).includes(chain.key)) acc[key] = true;
       return acc;
     }, {}),
+
+    // Object.entries(AllChainsByKeys).reduce((acc, [key, chain]) => {
+    //   if (AllChainsByKeys[key].chainType === "L2") acc[key] = true;
+    //   return acc;
+    // }, {}),
   );
 
   const [contracts, setContracts] = useState<{ [key: string]: ContractInfo }>(
@@ -916,6 +921,7 @@ export default function CategoryMetrics({
     selectedMode,
     showUsd,
     chainEcosystemFilter,
+    AllChainsByKeys,
   ]);
 
   const largestContractValue = useMemo(() => {

diff --git a/components/layout/DA-Overview/DATable.tsx b/components/layout/DA-Overview/DATable.tsx
@@ -31,7 +31,7 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
     const {data: chart_data, error: chart_error, isLoading: chart_loading, isValidating: chart_validating} = useSWR<DATimeseriesResponse>(DATimeseriesURL);
 
     const { isSidebarOpen } = useUIContext();
-    const { AllDALayersByKeys, AllChainsByKeys } = useMaster();
+    const { AllDALayersByKeys, AllChainsByKeys, data: master } = useMaster();
 
     const [selectedCategory, setSelectedCategory] = useState("size");
     const [isBouncing, setIsBouncing] = useState(false);
@@ -247,7 +247,7 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
       let typeIndex = breakdown_data[Object.keys(breakdown_data)[0]][selectedTimespan]["fees"].types.indexOf(showUsd ? "usd" : "eth");
 
       Object.keys(breakdown_data).filter((key) => key !== "totals").map((key) => {
-        console.log(breakdown_data[key][selectedTimespan]["fees"].total[typeIndex])
+
         if(breakdown_data[key][selectedTimespan]["fees"].total[typeIndex] > maxFees){
 
 
@@ -337,15 +337,22 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
 
 
     const createDAConsumers = useCallback((da_row) => {
+      if (!master) return;
 
+      const tempBrokeChains = ["orderly", "manta", "derive", "ancient8", "karak"]
       let more = 0;
+
+
       const retHTML = da_row.chains.values.map((chain, index) => {
-        if (chain[1] && chain[1] !== "gitcoin_pgn") {
-
+
+        if (chain[1] && chain[1] !== "gitcoin_pgn" && !tempBrokeChains.includes(chain[1])) {
+          console.log(chain[1])
+          console.log(AllChainsByKeys[chain[1]] ? "" : master.custom_logos[chain[1]].body)
+
           return (
             <Icon 
               key={index} 
-              icon={`gtp:${AllChainsByKeys[chain[1]].urlKey}-logo-monochrome`} 
+              icon={AllChainsByKeys[chain[1]] ? `gtp:${AllChainsByKeys[chain[1]].urlKey}-logo-monochrome` : master.custom_logos[chain[1]].body } 
               className="w-[15px] h-[15px]" 
             />
           );