From acc5c0576863d379d7c0658d8aafd3cb0ede6821 Mon Sep 17 00:00:00 2001
From: mokelgit <maym2018@gmail.com>
Date: Mon, 13 Jan 2025 11:00:22 -0500
Subject: [PATCH] updated master, fixed errors

---
 components/layout/DA-Overview/DATable.tsx     |  16 +-
 .../layout/DA-Overview/DATableCharts.tsx      | 148 +++++++++++++++++-
 types/api/MasterResponse.d.ts                 |   7 +
 3 files changed, 162 insertions(+), 9 deletions(-)

diff --git a/components/layout/DA-Overview/DATable.tsx b/components/layout/DA-Overview/DATable.tsx
index 4bc24cae..5060b44d 100644
--- 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,21 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: {
 
 
     const createDAConsumers = useCallback((da_row) => {
+      if (!master) return;
 
+      const tempBrokeChains = ["orderly", "manta", "derive", "ancient8"]
       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])) {
+
+
           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]" 
             />
           );
diff --git a/components/layout/DA-Overview/DATableCharts.tsx b/components/layout/DA-Overview/DATableCharts.tsx
index 6582f936..db413dfe 100644
--- a/components/layout/DA-Overview/DATableCharts.tsx
+++ b/components/layout/DA-Overview/DATableCharts.tsx
@@ -17,7 +17,7 @@ import {
 import Highcharts, { chart } from "highcharts/highstock";
 import { useLocalStorage } from "usehooks-ts";
 import Image from "next/image";
-import { useMemo } from "react";
+import { useMemo, useState, useCallback } from "react";
 import { useMaster } from "@/contexts/MasterContext";
 import "@/app/highcharts.axis.css";
 import Icon from "@/components/layout/Icon";
@@ -25,6 +25,7 @@ import { DAConsumerChart } from "@/types/api/DAOverviewResponse";
 import { stringToDOM } from "million";
 import { Any } from "react-spring";
 import { format } from "path";
+import VerticalScrollContainer from "@/components/VerticalScrollContainer";
 
 const COLORS = {
     GRID: "rgb(215, 223, 222)",
@@ -42,6 +43,7 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
 
     const [showUsd, setShowUsd] = useLocalStorage("showUsd", true);
     const { AllDALayersByKeys, AllChainsByKeys } = useMaster();
+    const [selectedChain, setSelectedChain] = useState<string>("all");
 
 
     
@@ -59,8 +61,6 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
           }
         })
 
-        console.log(new Date(xMax))
-
     
         if (!isMonthly) {
           return {
@@ -176,6 +176,141 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
     
 
 
+    const tooltipFormatter = useCallback(
+        function (this: any) {
+            const { x, points } = this;
+            const date = new Date(x);
+            let dateString = date.toLocaleDateString("en-GB", {
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+            });
+            const chartTitle = this.series.chart.title.textStr;
+    
+            // check if data steps are less than 1 day
+            // if so, add the time to the tooltip
+            const timeDiff = points[0].series.xData[1] - points[0].series.xData[0];
+            if (timeDiff < 1000 * 60 * 60 * 24) {
+                dateString +=
+                    " " +
+                    date.toLocaleTimeString("en-GB", {
+                        hour: "numeric",
+                        minute: "2-digit",
+                    });
+            }
+    
+            // Create a scrollable container using CSS
+            const tooltip = `<div class="mt-3 mr-3 mb-3 w-52 md:w-52 text-xs font-raleway">
+                <div class="w-full font-bold text-[13px] md:text-[1rem] ml-6 mb-2">${dateString}</div>
+                <div class="max-height: 50px; overflow-y: auto; -webkit-overflow-scrolling: touch; hover:!pointer-events: auto; tooltip-scrollbar"
+                    onwheel="(function(e) {
+                        const scroller = e.currentTarget;
+                        const isAtTop = scroller.scrollTop === 0;
+                        const isAtBottom = scroller.scrollHeight - scroller.clientHeight === scroller.scrollTop;
+                        
+                        if (e.deltaY < 0 && isAtTop) {
+                            // Scrolling up at the top
+                            return;
+                        }
+                        if (e.deltaY > 0 && isAtBottom) {
+                            // Scrolling down at the bottom
+                            return;
+                        }
+                        
+                        e.stopPropagation();
+                        e.preventDefault();
+                        scroller.scrollTop += e.deltaY;
+                    })(event)"
+                >`;
+            const tooltipEnd = `</div></div>`;
+    
+            // Updated scrollbar styles with thicker width and new color
+            const scrollbarStyles = `
+                <style>
+                    .custom-scrollbar::-webkit-scrollbar {
+                        width: 8px;
+                    }
+                    .custom-scrollbar::-webkit-scrollbar-track {
+                        background: rgba(31, 39, 38, 0.1);
+                    }
+                    .custom-scrollbar::-webkit-scrollbar-thumb {
+                        background: #1F2726;
+                        border-radius: 4px;
+                    }
+                    /* Firefox */
+                    .custom-scrollbar {
+                        scrollbar-width: thin;
+                        scrollbar-color: #1F2726 rgba(31, 39, 38, 0.1);
+                    }
+                    /* Prevent text selection during scrolling */
+                    #tooltipScroller {
+                        user-select: none;
+                    }
+                </style>
+            `;
+    
+            let pointsSum = points.reduce((acc: number, point: any) => {
+                acc += point.y;
+                return acc;
+            }, 0);
+    
+            let pointSumNonNegative = points.reduce((acc: number, point: any) => {
+                if (point.y > 0) acc += point.y;
+                return acc;
+            }, 0);
+    
+            const maxPoint = points.reduce((max: number, point: any) => {
+                if (point.y > max) max = point.y;
+                return max;
+            }, 0);
+    
+            const maxPercentage = points.reduce((max: number, point: any) => {
+                if (point.percentage > max) max = point.percentage;
+                return max;
+            }, 0);
+    
+            const tooltipPoints = points
+                .sort((a: any, b: any) => b.y - a.y)
+                .map((point: any, index: number) => {
+                    const { series, y, percentage } = point;
+                    const { name } = series;
+                    const nameString = name;
+    
+                    let prefix = showUsd ? "$" : "Ξ";
+                    let suffix = "";
+                    let value = y;
+                    let displayValue = y;
+    
+                    return `
+                    <div class="flex w-[190px] space-x-2 items-center font-medium mb-0.5 pr-[5px]">
+                        <div class="w-4 h-1.5 rounded-r-full" style="background-color: ${series.color}"></div>
+                        <div class="tooltip-point-name text-xs">${nameString}</div>
+                        <div class="flex-1 text-right justify-end flex numbers-xs">
+                            <div class="flex justify-end text-right w-full">
+                                <div class="${!prefix && "hidden"}">${prefix}</div>
+                                ${Intl.NumberFormat("en-GB", {
+                                    notation: "standard",
+                                    maximumFractionDigits: 2,
+                                    minimumFractionDigits: 2,
+                                }).format(displayValue)}
+                            </div>
+                            <div class="ml-0.5 ${!suffix && "hidden"}">${suffix}</div>
+                        </div>
+                    </div>
+                    `;
+                })
+                .join("");
+    
+            return scrollbarStyles + tooltip + tooltipPoints + tooltipEnd;
+        },
+        [showUsd],
+    );
+
+
+    const filteredList = useMemo(() => {
+
+    }, [data, selectedTimespan]);
+
 
     return(
         <div className="flex h-full w-full gap-x-[10px]">
@@ -183,6 +318,7 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
                 <div className="absolute left-[calc(50%-113px)] top-[calc(50%-29.5px)] z-50">
                     <Image src="/da_table_watermark.png" alt="chart_watermark" width={226} height={59}  className="mix-blend-darken"/>
                 </div>
+                
                 <HighchartsProvider Highcharts={Highcharts}>
                     <HighchartsChart                             
                         containerProps={{
@@ -257,7 +393,7 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
                         split={false}
                         followPointer={true}
                         followTouchMove={true}
-                        backgroundColor={"#2A3433EE"}
+                        backgroundColor={"#1F2726"}
                         padding={0}
                         hideDelay={300}
                         stickOnContact={true}
@@ -279,6 +415,7 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
                         //positioner={tooltipPositioner}
                         valuePrefix={showUsd ? "$" : ""}
                         valueSuffix={showUsd ? "" : " Gwei"}
+                        formatter={tooltipFormatter}
                     />
                     <XAxis
                         title={undefined}
@@ -510,8 +647,11 @@ export default function DATableCharts({selectedTimespan, data, isMonthly, da_nam
                     
                         // ensure tooltip is always above the chart
                         //positioner={tooltipPositioner}
+
                         valuePrefix={showUsd ? "$" : ""}
                         valueSuffix={showUsd ? "" : " Gwei"}
+                       
+                        
                     />
                     <XAxis
                         title={undefined}
diff --git a/types/api/MasterResponse.d.ts b/types/api/MasterResponse.d.ts
index 64be9801..a144fd8a 100644
--- a/types/api/MasterResponse.d.ts
+++ b/types/api/MasterResponse.d.ts
@@ -1,6 +1,7 @@
 export interface MasterResponse {
   current_version: string;
   chains: Chains;
+  custom_logos: { [key: string]: CustomLogo };
   metrics: Metrics;
   da_metrics: Metrics;
   fee_metrics: FeeMetrics;
@@ -13,6 +14,12 @@ export interface Chains {
   [key: string]: ChainInfo;
 }
 
+export interface CustomLogo {
+  body: string;
+  width?: number;
+  height?: number;
+}
+
 export interface ChainInfo {
   name: string;
   url_key: string;