From 1f38108ba2a4ffacc87420cd8fc57c9e66b15a39 Mon Sep 17 00:00:00 2001 From: mokelgit Date: Thu, 6 Jun 2024 15:06:31 -0400 Subject: [PATCH 01/15] start glodollar section for stablecoin page --- app/(layout)/fundamentals/[metric]/layout.tsx | 6 + .../layout/Economics/ChainBreakdown.tsx | 2 - components/layout/StableInsights.tsx | 305 ++++++++++++++++++ lib/urls.ts | 2 + public/Glo_Dollar.svg | 4 + types/api/Holders.ts | 24 ++ 6 files changed, 341 insertions(+), 2 deletions(-) create mode 100644 components/layout/StableInsights.tsx create mode 100644 public/Glo_Dollar.svg create mode 100644 types/api/Holders.ts diff --git a/app/(layout)/fundamentals/[metric]/layout.tsx b/app/(layout)/fundamentals/[metric]/layout.tsx index a115470e..a177cc26 100644 --- a/app/(layout)/fundamentals/[metric]/layout.tsx +++ b/app/(layout)/fundamentals/[metric]/layout.tsx @@ -12,6 +12,7 @@ import { notFound } from "next/navigation"; import { track } from "@vercel/analytics/server"; import Link from "next/link"; import Icon from "@/components/layout/Icon"; +import StableInsights from "@/components/layout/StableInsights"; type Props = { params: { metric: string }; @@ -86,6 +87,8 @@ export default async function Layout({ icon: "", }; + console.log(pageData); + let jsonLd: null | WithContext = null; // if (url) { @@ -243,6 +246,9 @@ export default async function Layout({ startOpen /> + + + ); } diff --git a/components/layout/Economics/ChainBreakdown.tsx b/components/layout/Economics/ChainBreakdown.tsx index 828a5bc9..f8f50d7c 100644 --- a/components/layout/Economics/ChainBreakdown.tsx +++ b/components/layout/Economics/ChainBreakdown.tsx @@ -298,8 +298,6 @@ export default function ChainBreakdown({ }, ); - console.log(data); - return (
{sortedChainData && ( diff --git a/components/layout/StableInsights.tsx b/components/layout/StableInsights.tsx new file mode 100644 index 00000000..f1e0e4a8 --- /dev/null +++ b/components/layout/StableInsights.tsx @@ -0,0 +1,305 @@ +"use client"; +import Icon from "@/components/layout/Icon"; +import Image from "next/image"; +import Heading from "@/components/layout/Heading"; +import { useState, useEffect, useMemo } from "react"; +import { + TopRowContainer, + TopRowParent, + TopRowChild, +} from "@/components/layout/TopRow"; +import { GloHolderURL } from "@/lib/urls"; +import useSWR from "swr"; +import { IS_DEVELOPMENT, IS_PREVIEW, IS_PRODUCTION } from "@/lib/helpers"; +import { HolderReponse } from "@/types/api/Holders"; +import { useTransition, animated } from "@react-spring/web"; +import ShowLoading from "@/components/layout/ShowLoading"; + +export default function StableInsights({}: {}) { + const [clicked, setClicked] = useState(true); + const [sortOrder, setSortOrder] = useState(true); + const [sortMetric, setSortMetric] = useState("balance"); + const [selectedTimespan, setSelectedTimespan] = useState("180d"); + const handleClick = () => { + setClicked(!clicked); + }; + + const { + data: data, + error: error, + isLoading: isLoading, + isValidating: isValidating, + } = useSWR(GloHolderURL); + + const timespans = useMemo(() => { + return { + "30d": { + label: "30 days", + value: 30, + xMin: Date.now() - 30 * 24 * 60 * 60 * 1000, + xMax: Date.now(), + }, + "90d": { + label: "90 days", + value: 90, + xMin: Date.now() - 90 * 24 * 60 * 60 * 1000, + xMax: Date.now(), + }, + "180d": { + label: "180 days", + value: 180, + xMin: Date.now() - 180 * 24 * 60 * 60 * 1000, + xMax: Date.now(), + }, + max: { + label: "Maximum", + value: 0, + }, + }; + }, []); + + const sortedTableData = useMemo(() => { + if (!data) return; + + const holdersTable = data.holders_table; + const sortedEntries = Object.entries(holdersTable).sort( + ([keyA, valueA], [keyB, valueB]) => + valueB[sortMetric] - valueA[sortMetric], + ); + + const sortedData = sortedEntries.reduce((acc, [key, value]) => { + acc[key] = value; + return acc; + }, {} as TableDataBreakdown); + + return sortedData; + }, [data, sortMetric]); + + const transitions = useTransition( + sortedTableData + ? (sortOrder + ? Object.keys(sortedTableData) + : Object.keys(sortedTableData).reverse() + ).map((key, index) => ({ + y: index * 39, + height: 34, + key: key, + i: index, + })) + : [], + { + key: (d) => d.key, + from: { height: 0 }, + leave: { height: 0 }, + enter: ({ y, height }) => ({ y, height }), + update: ({ y, height }) => ({ y, height }), + config: { mass: 5, tension: 500, friction: 100 }, + trail: 25, + }, + ); + + function formatNumber(x: number) { + return ( +
+ + {Intl.NumberFormat("en-GB", { + notation: "standard", + maximumFractionDigits: 2, + minimumFractionDigits: 2, + }).format(x)} + +
+ ); + } + + return ( + <> + {(IS_DEVELOPMENT || IS_PREVIEW) && sortedTableData && ( +
+
+ GTP Chain + + Stablecoin Insights + +
+
+
{ + handleClick(); + }} + > + + +
+
+ Top 10 Glo Dollar Stablecoin Holders +
+
+
+
+
+
+ Glo Dollar is a fiat-backed stablecoin that funds public + goods. With Glo Dollar, you can help fund public goods and + charitable causes just by holding a stablecoin. It's a new, + donationless form of philanthropy. Check here which are the + top supporting Glo Dollar wallets currently. +
+
+ Check here which are the top supporting Glo Dollar wallets + currently. +
+
+
+
+ +
+ Glo + Dollar +
+
+
+ More about Glo Dollar on their website +
+
+
+ + + + By Wallet + + + + {Object.keys(timespans).map((timespan) => { + return ( + { + setSelectedTimespan(timespan); + }} + > + {timespans[timespan].label} + + ); + })} + + +
+
+
+
+ Holder +
+
{ + if (sortMetric === "balance") { + setSortOrder(!sortOrder); + } else { + setSortMetric("balance"); + } + }} + > +
Amount
{" "} + +
+
{ + if (sortMetric === "share") { + setSortOrder(!sortOrder); + } else { + setSortMetric("share"); + } + }} + > +
Share
+ +
+
+ {transitions((style, item) => { + if (item.i > 9) { + return; + } + return ( + +
+
+ {item.key} +
+
+ ${formatNumber(data.holders_table[item.key].balance)} +
+ +
+
+ % + {formatNumber( + data.holders_table[item.key].share * 100, + )} +
+
+
+ + ); + })} +
+
+
+
+
+ )} + + ); +} diff --git a/lib/urls.ts b/lib/urls.ts index 0b54c932..65454926 100644 --- a/lib/urls.ts +++ b/lib/urls.ts @@ -73,6 +73,8 @@ export const MasterURL = "https://api.growthepie.xyz/v1/master.json"; export const ContractsURL = "https://api.growthepie.xyz/v1/contracts.json"; +export const GloHolderURL = "https://api.growthepie.xyz/v1/glo_dollar.json"; + export const LabelsURLS = { quick: "https://api.growthepie.xyz/v1/labels/quick.json", full: "https://api.growthepie.xyz/v1/labels/full.json", diff --git a/public/Glo_Dollar.svg b/public/Glo_Dollar.svg new file mode 100644 index 00000000..1d28a6f9 --- /dev/null +++ b/public/Glo_Dollar.svg @@ -0,0 +1,4 @@ + + + + diff --git a/types/api/Holders.ts b/types/api/Holders.ts new file mode 100644 index 00000000..e3e45e02 --- /dev/null +++ b/types/api/Holders.ts @@ -0,0 +1,24 @@ +export interface HolderResponse { + data: { + chart: ChartDataBreakdown; + holders_table: TableDataBreakdown; + }; +} + +export interface ChartDataBreakdown { + [key: string]: { + data: { + [index: number]: [number, number, number]; + }; + types: string[]; + }; +} + +export interface TableDataBreakdown { + [key: string]: { + balance: number; + share: number; + twitter: string; + website: string; + }; +} From 144d396334eb052edb976e3d71b64b572f03bd3d Mon Sep 17 00:00:00 2001 From: mokelgit Date: Thu, 6 Jun 2024 15:26:14 -0400 Subject: [PATCH 02/15] Fixed build errors --- components/layout/StableInsights.tsx | 27 ++++++++++++--------------- types/api/Holders.ts | 6 ++---- 2 files changed, 14 insertions(+), 19 deletions(-) diff --git a/components/layout/StableInsights.tsx b/components/layout/StableInsights.tsx index f1e0e4a8..a7feef81 100644 --- a/components/layout/StableInsights.tsx +++ b/components/layout/StableInsights.tsx @@ -11,7 +11,7 @@ import { import { GloHolderURL } from "@/lib/urls"; import useSWR from "swr"; import { IS_DEVELOPMENT, IS_PREVIEW, IS_PRODUCTION } from "@/lib/helpers"; -import { HolderReponse } from "@/types/api/Holders"; +import { HolderResponse, TableDataBreakdown } from "@/types/api/Holders"; import { useTransition, animated } from "@react-spring/web"; import ShowLoading from "@/components/layout/ShowLoading"; @@ -29,7 +29,7 @@ export default function StableInsights({}: {}) { error: error, isLoading: isLoading, isValidating: isValidating, - } = useSWR(GloHolderURL); + } = useSWR(GloHolderURL); const timespans = useMemo(() => { return { @@ -114,7 +114,7 @@ export default function StableInsights({}: {}) { return ( <> - {(IS_DEVELOPMENT || IS_PREVIEW) && sortedTableData && ( + {(IS_DEVELOPMENT || IS_PREVIEW) && sortedTableData && data && (
{"Glo @@ -167,10 +168,11 @@ export default function StableInsights({}: {}) {
Glo Dollar is a fiat-backed stablecoin that funds public goods. With Glo Dollar, you can help fund public goods and - charitable causes just by holding a stablecoin. It's a new, - donationless form of philanthropy. Check here which are the - top supporting Glo Dollar wallets currently. + charitable causes just by holding a stablecoin. It's a + new, donationless form of philanthropy. Check here which are + the top supporting Glo Dollar wallets currently.
+
Check here which are the top supporting Glo Dollar wallets currently. @@ -180,6 +182,7 @@ export default function StableInsights({}: {}) {
{"Glo - - By Wallet - + By Wallet {Object.keys(timespans).map((timespan) => { return ( { setSelectedTimespan(timespan); }} + key={timespan} > {timespans[timespan].label} diff --git a/types/api/Holders.ts b/types/api/Holders.ts index e3e45e02..e210e8f3 100644 --- a/types/api/Holders.ts +++ b/types/api/Holders.ts @@ -1,8 +1,6 @@ export interface HolderResponse { - data: { - chart: ChartDataBreakdown; - holders_table: TableDataBreakdown; - }; + chart: ChartDataBreakdown; + holders_table: TableDataBreakdown; } export interface ChartDataBreakdown { From 76a1337cc738791e3a70f7f6e0c7009bbfbec0f4 Mon Sep 17 00:00:00 2001 From: mokelgit Date: Fri, 7 Jun 2024 11:43:20 -0400 Subject: [PATCH 03/15] Fixed some type error issues, further progress on glo-dollar pages --- components/layout/StableInsights.tsx | 487 ++++++++++++++++++++++++++- types/api/Holders.ts | 8 +- 2 files changed, 482 insertions(+), 13 deletions(-) diff --git a/components/layout/StableInsights.tsx b/components/layout/StableInsights.tsx index a7feef81..82503e0e 100644 --- a/components/layout/StableInsights.tsx +++ b/components/layout/StableInsights.tsx @@ -2,7 +2,7 @@ import Icon from "@/components/layout/Icon"; import Image from "next/image"; import Heading from "@/components/layout/Heading"; -import { useState, useEffect, useMemo } from "react"; +import { useState, useEffect, useMemo, useCallback } from "react"; import { TopRowContainer, TopRowParent, @@ -14,16 +14,47 @@ import { IS_DEVELOPMENT, IS_PREVIEW, IS_PRODUCTION } from "@/lib/helpers"; import { HolderResponse, TableDataBreakdown } from "@/types/api/Holders"; import { useTransition, animated } from "@react-spring/web"; import ShowLoading from "@/components/layout/ShowLoading"; +import Highcharts from "highcharts/highstock"; +import { + HighchartsProvider, + HighchartsChart, + Chart, + XAxis, + YAxis, + Title, + Subtitle, + Legend, + LineSeries, + Tooltip, + PlotBand, + PlotLine, + withHighcharts, + AreaSeries, +} from "react-jsx-highcharts"; +import { AllChainsByKeys } from "@/lib/chains"; +import { useUIContext } from "@/contexts/UIContext"; +import { useLocalStorage } from "usehooks-ts"; +import { tooltipFormatter, tooltipPositioner } from "@/lib/chartUtils"; + +const COLORS = { + GRID: "rgb(215, 223, 222)", + PLOT_LINE: "rgb(215, 223, 222)", + LABEL: "rgb(215, 223, 222)", + LABEL_HOVER: "#6c7696", + TOOLTIP_BG: "#1b2135", + ANNOTATION_BG: "rgb(215, 223, 222)", +}; export default function StableInsights({}: {}) { const [clicked, setClicked] = useState(true); const [sortOrder, setSortOrder] = useState(true); const [sortMetric, setSortMetric] = useState("balance"); const [selectedTimespan, setSelectedTimespan] = useState("180d"); + const [showUsd, setShowUsd] = useLocalStorage("showUsd", true); const handleClick = () => { setClicked(!clicked); }; - + const { isMobile } = useUIContext(); const { data: data, error: error, @@ -31,6 +62,15 @@ export default function StableInsights({}: {}) { isValidating: isValidating, } = useSWR(GloHolderURL); + const valuePrefix = useMemo(() => { + if (showUsd) return "$"; + // eth symbol + return "Ξ"; + }, [showUsd]); + + const reversePerformer = true; + const selectedScale: string = "absolute"; + const timespans = useMemo(() => { return { "30d": { @@ -98,6 +138,194 @@ export default function StableInsights({}: {}) { }, ); + 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", + }); + + // 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", + }); + } + + const tooltip = `
+
${dateString}
`; + const tooltipEnd = `
`; + + // let pointsSum = 0; + // if (selectedScale !== "percentage") + 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) => { + if (reversePerformer) return a.y - b.y; + + return b.y - a.y; + }) + .map((point: any) => { + const { series, y, percentage } = point; + const { name } = series; + if (selectedScale === "percentage") + return ` +
+
+
${name}
+
${Highcharts.numberFormat( + percentage, + 2, + )}%
+
+ +
+
+ +
+
`; + + let prefix = valuePrefix; + let suffix = ""; + let value = y; + let displayValue = y; + + return ` +
+
+
${name}
+
+
${prefix}
+ ${parseFloat(displayValue).toLocaleString("en-GB", { + minimumFractionDigits: valuePrefix ? 2 : 0, + maximumFractionDigits: valuePrefix ? 2 : 0, + })} +
${suffix}
+
+
+ `; + }) + .join(""); + + let prefix = valuePrefix; + let suffix = ""; + let value = pointsSum; + + const sumRow = + selectedScale === "stacked" + ? ` +
+
+
Total
+
+ +
${prefix}
+ ${parseFloat(value).toLocaleString("en-GB", { + minimumFractionDigits: valuePrefix ? 2 : 0, + maximumFractionDigits: valuePrefix ? 2 : 0, + })} +
${suffix}
+
+
+
+
+
` + : ""; + + return tooltip + tooltipPoints + sumRow + tooltipEnd; + }, + [valuePrefix, reversePerformer], + ); + + const tooltipPositioner = + useCallback( + function (this, width, height, point) { + const chart = this.chart; + const { plotLeft, plotTop, plotWidth, plotHeight } = chart; + const tooltipWidth = width; + const tooltipHeight = height; + + const distance = 40; + const pointX = point.plotX + plotLeft; + const pointY = point.plotY + plotTop; + let tooltipX = + pointX - distance - tooltipWidth < plotLeft + ? pointX + distance + : pointX - tooltipWidth - distance; + + const tooltipY = + pointY - tooltipHeight / 2 < plotTop + ? pointY + distance + : pointY - tooltipHeight / 2; + + if (isMobile) { + if (pointX - tooltipWidth / 2 < plotLeft) { + return { + x: plotLeft, + y: -250, + }; + } + if (pointX + tooltipWidth / 2 > plotLeft + plotWidth) { + return { + x: plotLeft + plotWidth - tooltipWidth, + y: -250, + }; + } + return { + x: pointX - tooltipWidth / 2, + y: -250, + }; + } + + return { + x: tooltipX, + y: tooltipY, + }; + }, + [isMobile], + ); + function formatNumber(x: number) { return (
@@ -218,7 +446,7 @@ export default function StableInsights({}: {}) {
-
+
{ if (sortMetric === "balance") { setSortOrder(!sortOrder); @@ -243,7 +471,7 @@ export default function StableInsights({}: {}) { />
{ if (sortMetric === "share") { setSortOrder(!sortOrder); @@ -265,7 +493,7 @@ export default function StableInsights({}: {}) { } return (
); })} +
+
+
+ Top 10+ Holders Combined +
+
+
+
+
+
+ Total Glo Dollar Market Cap +
+
+
+
+ +
+ {" "} + + + + + + X Axis + + + Y Axis + [ + d[0], + d[showUsd ? 2 : 1], + ])} + color={"#24E5DF"} + fillColor={"transparent"} + fillOpacity={1} + states={{ + hover: { + enabled: true, + halo: { + size: 5, + opacity: 1, + attributes: { + fill: "#24E5DF" + "99", + stroke: "#24E5DF" + "66", + }, + }, + brightness: 0.3, + }, + inactive: { + enabled: true, + opacity: 0.6, + }, + }} + > + + +
-
diff --git a/types/api/Holders.ts b/types/api/Holders.ts index e210e8f3..ffccddf6 100644 --- a/types/api/Holders.ts +++ b/types/api/Holders.ts @@ -4,12 +4,8 @@ export interface HolderResponse { } export interface ChartDataBreakdown { - [key: string]: { - data: { - [index: number]: [number, number, number]; - }; - types: string[]; - }; + data: number[][]; + types: string[]; } export interface TableDataBreakdown { From 1c766a1f8e89cce6bb1a9f537d69f3db5fb5723c Mon Sep 17 00:00:00 2001 From: Manish Gupta Date: Fri, 7 Jun 2024 12:41:03 -0400 Subject: [PATCH 04/15] Labels - sticky header --- app/(labels)/labels/Footer.tsx | 844 +++++++++--------- app/(labels)/labels/Header.tsx | 8 +- app/(labels)/labels/page.tsx | 383 ++++---- app/(labels)/layout.tsx | 4 +- app/(layout)/layout.tsx | 2 +- .../LabelsHorizontalScrollContainer.tsx | 30 +- 6 files changed, 632 insertions(+), 639 deletions(-) diff --git a/app/(labels)/labels/Footer.tsx b/app/(labels)/labels/Footer.tsx index c245bfb5..a7f5644c 100644 --- a/app/(labels)/labels/Footer.tsx +++ b/app/(labels)/labels/Footer.tsx @@ -35,427 +35,7 @@ export default function Footer() {
track("click", { location: "footer", link: "feedback" })} className="flex text-[8px] gap-x-1"> powered by - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
@@ -463,4 +43,424 @@ export default function Footer() {
); -} \ No newline at end of file +} + +const OLIIcon = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); diff --git a/app/(labels)/labels/Header.tsx b/app/(labels)/labels/Header.tsx index 58b90d76..9d791adc 100644 --- a/app/(labels)/labels/Header.tsx +++ b/app/(labels)/labels/Header.tsx @@ -14,12 +14,8 @@ import Search from "./Search"; export default function Header() { return (
-
-
+
+
diff --git a/app/(labels)/labels/page.tsx b/app/(labels)/labels/page.tsx index 43cd6f36..ae0ef082 100644 --- a/app/(labels)/labels/page.tsx +++ b/app/(labels)/labels/page.tsx @@ -7,7 +7,7 @@ import { useTheme } from "next-themes"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import useSWR, { useSWRConfig } from "swr"; import { - + useEventListener, useSessionStorage, useLocalStorage, } from "usehooks-ts"; @@ -261,6 +261,16 @@ export default function LabelsPage() { overscan: 5, }) + const items = virtualizer.getVirtualItems() + + const [paddingTop, paddingBottom] = + items.length > 0 + ? [ + Math.max(0, items[0].start - virtualizer.options.scrollMargin), + Math.max(0, virtualizer.getTotalSize() - items[items.length - 1].end), + ] + : [0, 0] + const subcategoryToCategoryMapping = useMemo(() => { if (!master) return {}; @@ -288,211 +298,192 @@ export default function LabelsPage() { + return ( <>
-
- -

+ + +
+ +

Latest contracts on Ethereum Layer 2s

+
+
+
+
+
+
+
+
+ -
- {filteredLabelsData && ( - -
-
Contract Address
-
Owner Project
-
Contract Name
- {/*
Category
*/} -
- -
-
- -
-
Date Deployed
-
-
- {metricKeysLabels[currentMetric]} (7 days) -
- -
-
- -
+ header={ + <> + {filteredLabelsData && ( + +
+
Contract Address
+
Owner Project
+
Contract Name
+ {/*
Category
*/} +
+
+
+ +
+
Date Deployed
+
+
+ {metricKeysLabels[currentMetric]} (7 days) +
+ +
+
+ +
+
-
- - )} - - {/* {labelsData && labelsData.getData().map((label, index) => { - return ( - -
-
-
{label.address}
-
{label.owner_project}
-
{label.name}
- - ); - })} */} -
- {filteredLabelsData && (
+ )} + + } + > +
+ {filteredLabelsData && (
+ {virtualizer.getVirtualItems().map((item) => ( +
- {virtualizer.getVirtualItems().map((item) => ( -
- -
- -
- -
-
- {filteredLabelsData[item.index].address} -
+ height: `${item.size}px`, + transform: `translateY(${item.start - virtualizer.options.scrollMargin}px)`, + }}> + +
+ +
+ +
+
+ {filteredLabelsData[item.index].address}
- -
- {filteredLabelsData[item.index].owner_project ? - ( -
- handleFilter("owner_project", filteredLabelsData[item.index].owner_project)} - /> -
- ) : ( -
- Not Available -
- )} -
-
- {filteredLabelsData[item.index].name ? - ( -
-
{filteredLabelsData[item.index].name}
- {labelsFilters.name.includes(filteredLabelsData[item.index].name) ? handleFilter("name", filteredLabelsData[item.index].name)} /> : handleFilter("name", filteredLabelsData[item.index].name)} />} -
- ) : ( -
- Not Available -
- )}
+ +
+ {filteredLabelsData[item.index].owner_project ? + ( +
+ handleFilter("owner_project", filteredLabelsData[item.index].owner_project)} + /> +
+ ) : ( +
+ Not Available +
+ )} +
+
+ {filteredLabelsData[item.index].name ? + ( +
+
{filteredLabelsData[item.index].name}
+ {labelsFilters.name.includes(filteredLabelsData[item.index].name) ? handleFilter("name", filteredLabelsData[item.index].name)} /> : handleFilter("name", filteredLabelsData[item.index].name)} />} +
+ ) : ( +
+ Not Available +
+ )} +
- {/*
+ {/*
{master?.blockspace_categories.main_categories[subcategoryToCategoryMapping[filteredLabelsData[item.index].usage_category]]}
{filteredLabelsData[item.index].usage_category && }
*/} +
+ {filteredLabelsData[item.index].usage_category && ( + + + + } + leftIconColor="#FFFFFF" + rightIcon={labelsFilters.category.includes(subcategoryToCategoryMapping[filteredLabelsData[item.index].usage_category]) ? "heroicons-solid:x-circle" : "heroicons-solid:plus-circle"} + rightIconColor={labelsFilters.category.includes(subcategoryToCategoryMapping[filteredLabelsData[item.index].usage_category]) ? "#FE5468" : undefined} + onClick={() => handleFilter("category", subcategoryToCategoryMapping[filteredLabelsData[item.index].usage_category])} + /> + )} + {/* {filteredLabelsData[item.index].usage_category && + + } leftIconColor="#FFFFFF" rightIcon="heroicons-solid:plus-circle" />} */} +
+
{filteredLabelsData[item.index].usage_category && ( - - - } + label={master?.blockspace_categories.sub_categories[filteredLabelsData[item.index].usage_category]} + leftIcon={null} leftIconColor="#FFFFFF" - rightIcon={labelsFilters.category.includes(subcategoryToCategoryMapping[filteredLabelsData[item.index].usage_category]) ? "heroicons-solid:x-circle" : "heroicons-solid:plus-circle"} - rightIconColor={labelsFilters.category.includes(subcategoryToCategoryMapping[filteredLabelsData[item.index].usage_category]) ? "#FE5468" : undefined} - onClick={() => handleFilter("category", subcategoryToCategoryMapping[filteredLabelsData[item.index].usage_category])} + rightIcon={labelsFilters.subcategory.includes(filteredLabelsData[item.index].usage_category) ? "heroicons-solid:x-circle" : "heroicons-solid:plus-circle"} + rightIconColor={labelsFilters.subcategory.includes(filteredLabelsData[item.index].usage_category) ? "#FE5468" : undefined} + onClick={() => handleFilter("subcategory", filteredLabelsData[item.index].usage_category)} /> )} - {/* {filteredLabelsData[item.index].usage_category && - - } leftIconColor="#FFFFFF" rightIcon="heroicons-solid:plus-circle" />} */} -
-
-
- {filteredLabelsData[item.index].usage_category && ( - handleFilter("subcategory", filteredLabelsData[item.index].usage_category)} - /> - )} -
- {/* {filteredLabelsData[item.index].usage_category && } */}
-
- {/* random date with in the last 2 years*/} -
-
{new Date(Date.now() - Math.floor(parseFloat((`0.${parseInt(filteredLabelsData[item.index].address).toString()}`)) * 1000 * 60 * 60 * 24 * 365 * 2)).toLocaleDateString("en-GB", { - year: "numeric", - month: "short", - day: "numeric", - })}
- -
+ {/* {filteredLabelsData[item.index].usage_category && } */} +
+
+ {/* random date with in the last 2 years*/} +
+
{new Date(Date.now() - Math.floor(parseFloat((`0.${parseInt(filteredLabelsData[item.index].address).toString()}`)) * 1000 * 60 * 60 * 24 * 365 * 2)).toLocaleDateString("en-GB", { + year: "numeric", + month: "short", + day: "numeric", + })}
+
- {/*
+
+ {/*
{sparklineLabelsData && (
{sparklineLabelsData.data[`${filteredLabelsData[item.index].origin_key}_${filteredLabelsData[item.index].address}`] ? :
Unavailable
} @@ -500,30 +491,30 @@ export default function LabelsPage() { )}
{filteredLabelsData[item.index].txcount.toLocaleString("en-GB")}
*/} -
- {sparklineLabelsData && ( -
- {sparklineLabelsData.data[`${filteredLabelsData[item.index].origin_key}_${filteredLabelsData[item.index].address}`] ? ( - [d[0], d[sparklineLabelsData.data.types.indexOf(sparklineMetricKeys[metricKeys.indexOf(currentMetric)])]])} change={filteredLabelsData[item.index][`${currentMetric}_change`]} /> - ) : ( -
Unavailable
- )} -
- )} -
-
{filteredLabelsData[item.index][currentMetric].toLocaleString("en-GB")}
-
0 ? "font-normal" : "text-[#FE5468] font-semibold "}`}>{filteredLabelsData[item.index][`${currentMetric}_change`] > 0 && "+"}{formatNumber(filteredLabelsData[item.index][`${currentMetric}_change`] * 100, true, false)}%
+
+ {sparklineLabelsData && ( +
+ {sparklineLabelsData.data[`${filteredLabelsData[item.index].origin_key}_${filteredLabelsData[item.index].address}`] ? ( + [d[0], d[sparklineLabelsData.data.types.indexOf(sparklineMetricKeys[metricKeys.indexOf(currentMetric)])]])} change={filteredLabelsData[item.index][`${currentMetric}_change`]} /> + ) : ( +
Unavailable
+ )}
+ )} +
+
{filteredLabelsData[item.index][currentMetric].toLocaleString("en-GB")}
+
0 ? "font-normal" : "text-[#FE5468] font-semibold "}`}>{filteredLabelsData[item.index][`${currentMetric}_change`] > 0 && "+"}{formatNumber(filteredLabelsData[item.index][`${currentMetric}_change`] * 100, true, false)}%
- -
- ))} -
)} -
- +
+ +
+ ))} +
)}
- -
+ + {/*
*/} + +