From 95a2c664dbf5c7cfc781574f480869e63cdb8bfa Mon Sep 17 00:00:00 2001 From: Manish Gupta Date: Thu, 23 Jan 2025 10:55:21 -0800 Subject: [PATCH] DA Overview - re-use badges from Labels, update Consumers & More tooltips --- app/(labels)/labels/Search.tsx | 67 +++++-- components/VerticalScrollContainer.tsx | 30 ++- components/layout/DA-Overview/DATable.tsx | 171 +++++++++++------- .../layout/DA-Overview/DATableCharts.tsx | 135 +++++++++----- icons/gtp-figma-export.json | 22 ++- icons/gtp-icon-names.ts | 8 +- lib/icons.mjs | 38 ++++ 7 files changed, 336 insertions(+), 135 deletions(-) diff --git a/app/(labels)/labels/Search.tsx b/app/(labels)/labels/Search.tsx index 4cb1d461..451a9001 100644 --- a/app/(labels)/labels/Search.tsx +++ b/app/(labels)/labels/Search.tsx @@ -897,13 +897,15 @@ const SearchIcon = () => ( ); type BadgeProps = { - onClick: (e: React.MouseEvent) => void; + onClick?: (e: React.MouseEvent) => void; + onMouseEnter?: (e: React.MouseEvent) => void; + onMouseLeave?: (e: React.MouseEvent) => void; label: string | React.ReactNode; leftIcon?: string; leftIconColor?: string; - rightIcon: string; + rightIcon?: string; rightIconColor?: string; - rightIconSize?: "sm" | "base"; + rightIconSize?: "sm" | "md" | "base"; size?: "sm" | "base"; className?: string; showLabel?: boolean; @@ -911,6 +913,8 @@ type BadgeProps = { }; export const Badge = ({ onClick, + onMouseEnter, + onMouseLeave, label, leftIcon, leftIconColor = "#CDD8D3", @@ -922,15 +926,30 @@ export const Badge = ({ showLabel = true, altColoring = false, }: BadgeProps) => { - if (size === "sm") + if (size === "sm"){ + let rIconSize = "w-[14px] h-[14px]"; + let rIconContainerSize = "w-[14px] h-[14px]"; + if(rightIconSize === "sm") + rIconSize = "w-[10px] h-[10px]"; + rIconContainerSize = "w-[10px] h-[10px]"; + if(rightIconSize === "md") + rIconSize = "size-[15px] h-[15px]"; + rIconContainerSize = "w-[14px] h-[12px] -mt-[1px]"; + return (
{leftIcon ? (
- {leftIcon} +
) : (
@@ -938,25 +957,29 @@ export const Badge = ({
{label}
-
+ > -
+
) : ( +
+ )}
); + } return (
{leftIcon ? (
@@ -976,13 +999,17 @@ export const Badge = ({ {label}
)} -
- -
+ {rightIcon ? ( +
+ +
+ ) : ( +
+ )}
); }; diff --git a/components/VerticalScrollContainer.tsx b/components/VerticalScrollContainer.tsx index 11c357a7..54e04df5 100644 --- a/components/VerticalScrollContainer.tsx +++ b/components/VerticalScrollContainer.tsx @@ -17,6 +17,8 @@ type VerticalScrollContainerProps = { scrollbarPosition?: ScrollbarPosition; // New Prop scrollbarAbsolute?: boolean; scrollbarWidth?: string | number; + scrollThumbColor?: string; + scrollTrackColor?: string; header?: React.ReactNode; }; @@ -32,6 +34,8 @@ export default forwardRef(function VerticalScrollContainer( scrollbarPosition = 'right', // Default to 'right' scrollbarAbsolute = false, scrollbarWidth = "8px", + scrollThumbColor = "rgb(136 160 157 / 0.3)", //"bg-forest-400/30", + scrollTrackColor = "rgb(0 0 0 / 0.3)", //"bg-black/30", header, }: VerticalScrollContainerProps, ref: React.Ref @@ -325,6 +329,16 @@ export default forwardRef(function VerticalScrollContainer( } }, [showTopGradient, showBottomGradient]); + useEffect(() => { + // on content change, check if scrollbar is needed and hide gradient if not + if (contentScrollAreaRef.current) { + if (contentHeight < contentScrollAreaHeight) { + setMaskGradient(''); + } + } + + }, [children, contentHeight, contentScrollAreaHeight, contentScrollAreaRef]); + // Determine padding based on scrollbar position const computedPaddingRight = scrollbarPosition === 'right' ? paddingRight : undefined; @@ -374,7 +388,10 @@ export default forwardRef(function VerticalScrollContainer( style={{ height: height }} >
{createDAConsumers(breakdown_data[item.key][selectedTimespan].da_consumers)} -
-
DA Consumers (Chains)
- -
- {Object.keys(breakdown_data[item.key][selectedTimespan].da_consumers.chains.values).map((chain, index) => { - const types = breakdown_data[item.key][selectedTimespan].da_consumers.chains.types - - - const custom_logo_keys = Object.keys(master.custom_logos); - const first_key = types.findIndex((type) => type.includes("gtp_origin_key")); - - const alt_key = types.findIndex((type) => type.includes("da_consumer_key")); - - return ( -
-
{AllChainsByKeys[breakdown_data[item.key][selectedTimespan].da_consumers.chains.values[index][first_key]] ? - () - : custom_logo_keys.includes(alt_key) - ? ( - - ) - : ( - )}
-
{breakdown_data[item.key][selectedTimespan].da_consumers.chains.values[index][1]}
- -
- ) - })} -
- -
+ +
@@ -879,19 +840,7 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: { )} `} > -
-
Parameters
-
Blob Size:
{breakdown_data[item.key][selectedTimespan].fixed_params.blob_size}
-
Bandwidth:
{breakdown_data[item.key][selectedTimespan].fixed_params.bandwidth}
- -
Blocktime:
{breakdown_data[item.key][selectedTimespan].fixed_params.block_time}
-
Risk Analysis:
L2BEAT DA Risk
-
+
@@ -963,4 +912,102 @@ export default function DATable({breakdown_data, selectedTimespan, isMonthly}: { )} ) +} + +const DaConsumersTooltip = ({item, selectedTimespan, breakdown_data, AllChainsByKeys, master}) => { + return ( +
{ + e.stopPropagation(); + }} + > +
DA Consumers (Chains)
+ +
+ {Object.keys(breakdown_data[item.key][selectedTimespan].da_consumers.chains.values).map((chain, index) => { + const types = breakdown_data[item.key][selectedTimespan].da_consumers.chains.types + + + const custom_logo_keys = Object.keys(master.custom_logos); + const first_key = types.findIndex((type) => type.includes("gtp_origin_key")); + const alt_key = types.findIndex((type) => type.includes("da_consumer_key")); + + // default to unlisted chain icon + let icon = "gtp:chain-dark"; + let color = UNLISTED_CHAIN_COLORS[index]; + + // check if chain exists in AllChainsByKeys + if (AllChainsByKeys[breakdown_data[item.key][selectedTimespan].da_consumers.chains.values[index][first_key]]) { + icon = `gtp:${AllChainsByKeys[breakdown_data[item.key][selectedTimespan].da_consumers.chains.values[index][first_key]].urlKey}-logo-monochrome`; + color = AllChainsByKeys[breakdown_data[item.key][selectedTimespan].da_consumers.chains.values[index][first_key]].colors["dark"][0]; + // check if chain exists in custom logos (see libs/icons.mjs for how it gets imported) + } else if (custom_logo_keys.includes(alt_key)) { + icon = `gtp:${alt_key}-custom-logo-monochrome`; + color = "#b5c4c3"; + } + return ( + { + }} + /> + ); + })} +
+ + +
+ ) +} + +const MoreTooltip = ({ item, selectedTimespan, breakdown_data}) => { + return ( +
{ + e.stopPropagation(); + }} + > +
Parameters
+
+ {[{ + key: "blob_size", + label: "Blob Size", + }, { + key: "bandwidth", + label: "Bandwidth", + }, { + key: "block_time", + label: "Blocktime", + }, { + key: "l2beat_risk", + label: "Risk Analysis", + }].map((param) => ( +
+
{param.label}:
+
+ {param.key === "l2beat_risk" ? ( + + L2BEAT DA Risk + + ) : ( + breakdown_data[item.key][selectedTimespan].fixed_params[param.key] + )} +
+
+ ))} +
+
+ ); } \ No newline at end of file diff --git a/components/layout/DA-Overview/DATableCharts.tsx b/components/layout/DA-Overview/DATableCharts.tsx index 0e230803..35fbf47e 100644 --- a/components/layout/DA-Overview/DATableCharts.tsx +++ b/components/layout/DA-Overview/DATableCharts.tsx @@ -36,6 +36,7 @@ import useChartSync from "./components/ChartHandler"; import { get } from "lodash"; import { locale } from "moment"; import ChartWatermark from "../ChartWatermark"; +import { Badge } from "@/app/(labels)/labels/Search"; const COLORS = { GRID: "rgb(215, 223, 222)", @@ -1061,55 +1062,97 @@ const ChartLegend = ( }).map((key, index) => { const custom_logo_keys = Object.keys(master.custom_logos); - + // default to unlisted chain icon + let icon = "gtp:chain-dark"; + let color = UNLISTED_CHAIN_COLORS[index]; + + // check if chain exists in AllChainsByKeys + if(AllChainsByKeys[data[selectedTimespan].da_consumers[key][isMonthly ? "monthly" : "daily"].values[0][2]]){ + icon = `gtp:${AllChainsByKeys[data[selectedTimespan].da_consumers[key][isMonthly ? "monthly" : "daily"].values[0][2]].urlKey}-logo-monochrome`; + color = AllChainsByKeys[key].colors["dark"][0]; + // check if chain exists in custom logos (see libs/icons.mjs for how it gets imported) + }else if(custom_logo_keys.includes(key)){ + icon = `gtp:${key}-custom-logo-monochrome`; + color="#b5c4c3"; + } return ( -
{ - setSelectedChain((prev) => { - if (selectedChain === key) { - return "all"; - } else { - return key - } - }); - }} - onMouseEnter={() => { - setHoverChain(key); - - - }} - onMouseLeave={() => { - setHoverChain(null); - }} - > - -
{AllChainsByKeys[data[selectedTimespan].da_consumers[key][isMonthly ? "monthly" : "daily"].values[0][2]] ? - () - : custom_logo_keys.includes(key) - ? ( - - ) - : ( )}
-
{data[selectedTimespan].da_consumers[key][isMonthly ? "monthly" : "daily"].values[0][1]}
-
-
+ { + setSelectedChain((prev) => { + if (selectedChain === key) { + return "all"; + } else { + return key + } + }); + }} + onMouseEnter={() => { + setHoverChain(key); + }} + onMouseLeave={() => { + setHoverChain(null); + }} + className={`bg-[#344240] hover:bg-[#5A6462] cursor-pointer select-none`} + /> ) + + + // return ( + //
{ + // setSelectedChain((prev) => { + // if (selectedChain === key) { + // return "all"; + // } else { + // return key + // } + // }); + // }} + // onMouseEnter={() => { + // setHoverChain(key); + + + // }} + // onMouseLeave={() => { + // setHoverChain(null); + // }} + // > + + //
{AllChainsByKeys[data[selectedTimespan].da_consumers[key][isMonthly ? "monthly" : "daily"].values[0][2]] ? + // () + // : custom_logo_keys.includes(key) + // ? ( + // + // ) + // : ( )}
+ //
{data[selectedTimespan].da_consumers[key][isMonthly ? "monthly" : "daily"].values[0][1]}
+ //
+ //
+ // ) } )}
diff --git a/icons/gtp-figma-export.json b/icons/gtp-figma-export.json index 9316a20c..daa7890a 100644 --- a/icons/gtp-figma-export.json +++ b/icons/gtp-figma-export.json @@ -1,6 +1,6 @@ { "prefix": "gtp", - "lastModified": 1737498904, + "lastModified": 1737652474, "icons": { "discord": { "body": "" @@ -1101,6 +1101,26 @@ "body": "", "width": 15, "height": 15 + }, + "eclipse-custom-logo-monochrome": { + "body": "", + "width": 15, + "height": 15 + }, + "lightlink-custom-logo-monochrome": { + "body": "", + "width": 15, + "height": 15 + }, + "b3-custom-logo-monochrome": { + "body": "", + "width": 15, + "height": 15 + }, + "forma-custom-logo-monochrome": { + "body": "", + "width": 15, + "height": 15 } }, "width": 15, diff --git a/icons/gtp-icon-names.ts b/icons/gtp-icon-names.ts index 43ffab5f..0d0f246f 100644 --- a/icons/gtp-icon-names.ts +++ b/icons/gtp-icon-names.ts @@ -301,6 +301,10 @@ export const iconNames = [ "zora-logo-monochrome", "da-celestia-logo-monochrome", "da-ethereum-blobs-logo-monochrome", - "da-ethereum-calldata-logo-monochrome" + "da-ethereum-calldata-logo-monochrome", + "eclipse-custom-logo-monochrome", + "lightlink-custom-logo-monochrome", + "b3-custom-logo-monochrome", + "forma-custom-logo-monochrome" ]; -export type GTPIconName = "discord" | "discord-monochrome" | "farcaster" | "farcaster-monochrome" | "github" | "github-monochrome" | "giveth" | "giveth-monochrome" | "glo-dollar" | "glo-dollar-monochrome" | "gtp-about" | "gtp-about-monochrome" | "gtp-arrowdown" | "gtp-arrowdown-monochrome" | "gtp-arrownochange" | "gtp-arrownochange-monochrome" | "gtp-arrowup" | "gtp-arrowup-monochrome" | "gtp-backgroundinformation" | "gtp-backgroundinformation-monochrome" | "gtp-blob-producers" | "gtp-blob-producers-monochrome" | "gtp-blobs" | "gtp-blobs-ethereum" | "gtp-blobs-ethereum-monochrome" | "gtp-blobs-monochrome" | "gtp-blobs-number" | "gtp-blobs-number-monochrome" | "gtp-blockexplorer" | "gtp-blockexplorer-monochrome" | "gtp-blockspace" | "gtp-blockspace-monochrome" | "gtp-blog" | "gtp-blog-monochrome" | "gtp-book-open" | "gtp-book-open-monochrome" | "gtp-bridge" | "gtp-bridge-monochrome" | "gtp-calldata" | "gtp-calldata-ethereum" | "gtp-calldata-ethereum-monochrome" | "gtp-calldata-monochrome" | "gtp-categories" | "gtp-categories-monochrome" | "gtp-cefi" | "gtp-cefi-monochrome" | "gtp-celestia" | "gtp-celestia-monochrome" | "gtp-chain" | "gtp-chain-monochrome" | "gtp-checkmark-checked" | "gtp-checkmark-checked-monochrome" | "gtp-checkmark-unchecked" | "gtp-checkmark-unchecked-monochrome" | "gtp-compare" | "gtp-compare-monochrome" | "gtp-compass" | "gtp-compass-monochrome" | "gtp-copy" | "gtp-copy-monochrome" | "gtp-crosschain" | "gtp-crosschain-monochrome" | "gtp-da-fees-paid" | "gtp-da-fees-paid-monochrome" | "gtp-da-fees-paid-per-mb" | "gtp-da-fees-paid-per-mb-monochrome" | "gtp-dac" | "gtp-dac-monochrome" | "gtp-dacustomoffchain" | "gtp-dacustomoffchain-monochrome" | "gtp-data" | "gtp-data-availability" | "gtp-data-availability-monochrome" | "gtp-data-monochrome" | "gtp-data-posted" | "gtp-data-posted-monochrome" | "gtp-defi" | "gtp-defi-monochrome" | "gtp-donate" | "gtp-donate-monochrome" | "gtp-download" | "gtp-download-monochrome" | "gtp-feedback" | "gtp-feedback-monochrome" | "gtp-file-text" | "gtp-file-text-monochrome" | "gtp-fundamentals" | "gtp-fundamentals-monochrome" | "gtp-house" | "gtp-house-monochrome" | "gtp-jumptosection" | "gtp-jumptosection-monochrome" | "gtp-label-add" | "gtp-label-add-monochrome" | "gtp-labeled" | "gtp-labeled-monochrome" | "gtp-layer1" | "gtp-layer1-monochrome" | "gtp-layers" | "gtp-layers-monochrome" | "gtp-link" | "gtp-link-monochrome" | "gtp-memo" | "gtp-memo-monochrome" | "gtp-menu" | "gtp-menu-monochrome" | "gtp-metrics" | "gtp-metrics-activeaddresses" | "gtp-metrics-activeaddresses-monochrome" | "gtp-metrics-activity" | "gtp-metrics-activity-monochrome" | "gtp-metrics-convenience" | "gtp-metrics-convenience-monochrome" | "gtp-metrics-economics" | "gtp-metrics-economics-monochrome" | "gtp-metrics-fdv" | "gtp-metrics-fdv-monochrome" | "gtp-metrics-feespaidbyusers" | "gtp-metrics-feespaidbyusers-monochrome" | "gtp-metrics-marketcap" | "gtp-metrics-marketcap-monochrome" | "gtp-metrics-monochrome" | "gtp-metrics-onchainprofit" | "gtp-metrics-onchainprofit-monochrome" | "gtp-metrics-rentpaidtol1" | "gtp-metrics-rentpaidtol1-monochrome" | "gtp-metrics-stablecoinmarketcap" | "gtp-metrics-stablecoinmarketcap-monochrome" | "gtp-metrics-throughput" | "gtp-metrics-throughput-monochrome" | "gtp-metrics-totalvaluelocked" | "gtp-metrics-totalvaluelocked-monochrome" | "gtp-metrics-transactioncosts" | "gtp-metrics-transactioncosts-monochrome" | "gtp-metrics-transactioncount" | "gtp-metrics-transactioncount-monochrome" | "gtp-metrics-valuelocked" | "gtp-metrics-valuelocked-monochrome" | "gtp-more" | "gtp-more-monochrome" | "gtp-nft" | "gtp-nft-monochrome" | "gtp-notification" | "gtp-notification-monochrome" | "gtp-optimisticrollup" | "gtp-optimisticrollup-monochrome" | "gtp-overview" | "gtp-overview-monochrome" | "gtp-package" | "gtp-package-monochrome" | "gtp-pie" | "gtp-pie-monochrome" | "gtp-piechart" | "gtp-piechart-monochrome" | "gtp-plus" | "gtp-plus-monochrome" | "gtp-png" | "gtp-png-monochrome" | "gtp-project" | "gtp-project-monochrome" | "gtp-realtime" | "gtp-realtime-monochrome" | "gtp-risk" | "gtp-risk-monochrome" | "gtp-search" | "gtp-search-monochrome" | "gtp-settings" | "gtp-settings-monochrome" | "gtp-share" | "gtp-share-monochrome" | "gtp-socials" | "gtp-socials-monochrome" | "gtp-subcategories" | "gtp-subcategories-monochrome" | "gtp-support" | "gtp-support-monochrome" | "gtp-svg" | "gtp-svg-monochrome" | "gtp-team" | "gtp-team-monochrome" | "gtp-technology" | "gtp-technology-monochrome" | "gtp-tokeneth" | "gtp-tokeneth-monochrome" | "gtp-tokentransfers" | "gtp-tokentransfers-monochrome" | "gtp-tracker" | "gtp-tracker-monochrome" | "gtp-unlabeled" | "gtp-unlabeled-monochrome" | "gtp-usage" | "gtp-usage-monochrome" | "gtp-users" | "gtp-users-monochrome" | "gtp-utilities" | "gtp-utilities-monochrome" | "gtp-wallet" | "gtp-wallet-monochrome" | "gtp-walletsmultiplechains" | "gtp-walletsmultiplechains-monochrome" | "gtp-zeroknowledgerollup" | "gtp-zeroknowledgerollup-monochrome" | "lens" | "lens-monochrome" | "octant" | "octant-monochrome" | "x" | "x-monochrome" | "logo" | "gtp-faq" | "gtp-chain-alt" | "gtp-block-explorer" | "gtp-block-explorer-alt" | "gtp-clock" | "gtp-jump-to-section" | "house" | "fundamentals" | "package" | "book-open" | "file-text" | "compass" | "wallet-chain" | "tracker" | "chevron-down" | "chevron-right" | "blockspace-chain-overview" | "blockspace-category-comparison" | "blog" | "donate" | "smiley" | "transaction-costs" | "twitter" | "add-tag" | "rpgf" | "agora" | "email" | "reddit" | "error" | "arrowupdown" | "arrowleftright" | "code-slash" | "blobs" | "calldata" | "celestiafp" | "memofp" | "committee" | "customoffchain" | "gtp-dollar" | "circle-arrow" | "value-locked" | "economics" | "convenience" | "activity" | "tvl" | "daa" | "txcount" | "throughput" | "stables-mcap" | "fees" | "rent-paid" | "profit" | "market-cap" | "fdv" | "txcosts" | "detailed-fees" | "chain-dark" | "x-circle" | "plus-circle" | "ethereum-logo-monochrome" | "all-l2s-logo-monochrome" | "arbitrum-logo-monochrome" | "base-logo-monochrome" | "blast-logo-monochrome" | "derive-logo-monochrome" | "fraxtal-logo-monochrome" | "gravity-logo-monochrome" | "immutable-x-logo-monochrome" | "imx-logo-monochrome" | "linea-logo-monochrome" | "loopring-logo-monochrome" | "manta-logo-monochrome" | "mantle-logo-monochrome" | "metis-logo-monochrome" | "mint-logo-monochrome" | "mode-logo-monochrome" | "multiple-logo-monochrome" | "optimism-logo-monochrome" | "orderly-logo-monochrome" | "polygon-zkevm-logo-monochrome" | "real-logo-monochrome" | "redstone-logo-monochrome" | "rhino-fi-logo-monochrome" | "rhino-logo-monochrome" | "scroll-logo-monochrome" | "starknet-logo-monochrome" | "taiko-logo-monochrome" | "worldchain-logo-monochrome" | "zksync-era-logo-monochrome" | "zora-logo-monochrome" | "da-celestia-logo-monochrome" | "da-ethereum-blobs-logo-monochrome" | "da-ethereum-calldata-logo-monochrome"; \ No newline at end of file +export type GTPIconName = "discord" | "discord-monochrome" | "farcaster" | "farcaster-monochrome" | "github" | "github-monochrome" | "giveth" | "giveth-monochrome" | "glo-dollar" | "glo-dollar-monochrome" | "gtp-about" | "gtp-about-monochrome" | "gtp-arrowdown" | "gtp-arrowdown-monochrome" | "gtp-arrownochange" | "gtp-arrownochange-monochrome" | "gtp-arrowup" | "gtp-arrowup-monochrome" | "gtp-backgroundinformation" | "gtp-backgroundinformation-monochrome" | "gtp-blob-producers" | "gtp-blob-producers-monochrome" | "gtp-blobs" | "gtp-blobs-ethereum" | "gtp-blobs-ethereum-monochrome" | "gtp-blobs-monochrome" | "gtp-blobs-number" | "gtp-blobs-number-monochrome" | "gtp-blockexplorer" | "gtp-blockexplorer-monochrome" | "gtp-blockspace" | "gtp-blockspace-monochrome" | "gtp-blog" | "gtp-blog-monochrome" | "gtp-book-open" | "gtp-book-open-monochrome" | "gtp-bridge" | "gtp-bridge-monochrome" | "gtp-calldata" | "gtp-calldata-ethereum" | "gtp-calldata-ethereum-monochrome" | "gtp-calldata-monochrome" | "gtp-categories" | "gtp-categories-monochrome" | "gtp-cefi" | "gtp-cefi-monochrome" | "gtp-celestia" | "gtp-celestia-monochrome" | "gtp-chain" | "gtp-chain-monochrome" | "gtp-checkmark-checked" | "gtp-checkmark-checked-monochrome" | "gtp-checkmark-unchecked" | "gtp-checkmark-unchecked-monochrome" | "gtp-compare" | "gtp-compare-monochrome" | "gtp-compass" | "gtp-compass-monochrome" | "gtp-copy" | "gtp-copy-monochrome" | "gtp-crosschain" | "gtp-crosschain-monochrome" | "gtp-da-fees-paid" | "gtp-da-fees-paid-monochrome" | "gtp-da-fees-paid-per-mb" | "gtp-da-fees-paid-per-mb-monochrome" | "gtp-dac" | "gtp-dac-monochrome" | "gtp-dacustomoffchain" | "gtp-dacustomoffchain-monochrome" | "gtp-data" | "gtp-data-availability" | "gtp-data-availability-monochrome" | "gtp-data-monochrome" | "gtp-data-posted" | "gtp-data-posted-monochrome" | "gtp-defi" | "gtp-defi-monochrome" | "gtp-donate" | "gtp-donate-monochrome" | "gtp-download" | "gtp-download-monochrome" | "gtp-feedback" | "gtp-feedback-monochrome" | "gtp-file-text" | "gtp-file-text-monochrome" | "gtp-fundamentals" | "gtp-fundamentals-monochrome" | "gtp-house" | "gtp-house-monochrome" | "gtp-jumptosection" | "gtp-jumptosection-monochrome" | "gtp-label-add" | "gtp-label-add-monochrome" | "gtp-labeled" | "gtp-labeled-monochrome" | "gtp-layer1" | "gtp-layer1-monochrome" | "gtp-layers" | "gtp-layers-monochrome" | "gtp-link" | "gtp-link-monochrome" | "gtp-memo" | "gtp-memo-monochrome" | "gtp-menu" | "gtp-menu-monochrome" | "gtp-metrics" | "gtp-metrics-activeaddresses" | "gtp-metrics-activeaddresses-monochrome" | "gtp-metrics-activity" | "gtp-metrics-activity-monochrome" | "gtp-metrics-convenience" | "gtp-metrics-convenience-monochrome" | "gtp-metrics-economics" | "gtp-metrics-economics-monochrome" | "gtp-metrics-fdv" | "gtp-metrics-fdv-monochrome" | "gtp-metrics-feespaidbyusers" | "gtp-metrics-feespaidbyusers-monochrome" | "gtp-metrics-marketcap" | "gtp-metrics-marketcap-monochrome" | "gtp-metrics-monochrome" | "gtp-metrics-onchainprofit" | "gtp-metrics-onchainprofit-monochrome" | "gtp-metrics-rentpaidtol1" | "gtp-metrics-rentpaidtol1-monochrome" | "gtp-metrics-stablecoinmarketcap" | "gtp-metrics-stablecoinmarketcap-monochrome" | "gtp-metrics-throughput" | "gtp-metrics-throughput-monochrome" | "gtp-metrics-totalvaluelocked" | "gtp-metrics-totalvaluelocked-monochrome" | "gtp-metrics-transactioncosts" | "gtp-metrics-transactioncosts-monochrome" | "gtp-metrics-transactioncount" | "gtp-metrics-transactioncount-monochrome" | "gtp-metrics-valuelocked" | "gtp-metrics-valuelocked-monochrome" | "gtp-more" | "gtp-more-monochrome" | "gtp-nft" | "gtp-nft-monochrome" | "gtp-notification" | "gtp-notification-monochrome" | "gtp-optimisticrollup" | "gtp-optimisticrollup-monochrome" | "gtp-overview" | "gtp-overview-monochrome" | "gtp-package" | "gtp-package-monochrome" | "gtp-pie" | "gtp-pie-monochrome" | "gtp-piechart" | "gtp-piechart-monochrome" | "gtp-plus" | "gtp-plus-monochrome" | "gtp-png" | "gtp-png-monochrome" | "gtp-project" | "gtp-project-monochrome" | "gtp-realtime" | "gtp-realtime-monochrome" | "gtp-risk" | "gtp-risk-monochrome" | "gtp-search" | "gtp-search-monochrome" | "gtp-settings" | "gtp-settings-monochrome" | "gtp-share" | "gtp-share-monochrome" | "gtp-socials" | "gtp-socials-monochrome" | "gtp-subcategories" | "gtp-subcategories-monochrome" | "gtp-support" | "gtp-support-monochrome" | "gtp-svg" | "gtp-svg-monochrome" | "gtp-team" | "gtp-team-monochrome" | "gtp-technology" | "gtp-technology-monochrome" | "gtp-tokeneth" | "gtp-tokeneth-monochrome" | "gtp-tokentransfers" | "gtp-tokentransfers-monochrome" | "gtp-tracker" | "gtp-tracker-monochrome" | "gtp-unlabeled" | "gtp-unlabeled-monochrome" | "gtp-usage" | "gtp-usage-monochrome" | "gtp-users" | "gtp-users-monochrome" | "gtp-utilities" | "gtp-utilities-monochrome" | "gtp-wallet" | "gtp-wallet-monochrome" | "gtp-walletsmultiplechains" | "gtp-walletsmultiplechains-monochrome" | "gtp-zeroknowledgerollup" | "gtp-zeroknowledgerollup-monochrome" | "lens" | "lens-monochrome" | "octant" | "octant-monochrome" | "x" | "x-monochrome" | "logo" | "gtp-faq" | "gtp-chain-alt" | "gtp-block-explorer" | "gtp-block-explorer-alt" | "gtp-clock" | "gtp-jump-to-section" | "house" | "fundamentals" | "package" | "book-open" | "file-text" | "compass" | "wallet-chain" | "tracker" | "chevron-down" | "chevron-right" | "blockspace-chain-overview" | "blockspace-category-comparison" | "blog" | "donate" | "smiley" | "transaction-costs" | "twitter" | "add-tag" | "rpgf" | "agora" | "email" | "reddit" | "error" | "arrowupdown" | "arrowleftright" | "code-slash" | "blobs" | "calldata" | "celestiafp" | "memofp" | "committee" | "customoffchain" | "gtp-dollar" | "circle-arrow" | "value-locked" | "economics" | "convenience" | "activity" | "tvl" | "daa" | "txcount" | "throughput" | "stables-mcap" | "fees" | "rent-paid" | "profit" | "market-cap" | "fdv" | "txcosts" | "detailed-fees" | "chain-dark" | "x-circle" | "plus-circle" | "ethereum-logo-monochrome" | "all-l2s-logo-monochrome" | "arbitrum-logo-monochrome" | "base-logo-monochrome" | "blast-logo-monochrome" | "derive-logo-monochrome" | "fraxtal-logo-monochrome" | "gravity-logo-monochrome" | "immutable-x-logo-monochrome" | "imx-logo-monochrome" | "linea-logo-monochrome" | "loopring-logo-monochrome" | "manta-logo-monochrome" | "mantle-logo-monochrome" | "metis-logo-monochrome" | "mint-logo-monochrome" | "mode-logo-monochrome" | "multiple-logo-monochrome" | "optimism-logo-monochrome" | "orderly-logo-monochrome" | "polygon-zkevm-logo-monochrome" | "real-logo-monochrome" | "redstone-logo-monochrome" | "rhino-fi-logo-monochrome" | "rhino-logo-monochrome" | "scroll-logo-monochrome" | "starknet-logo-monochrome" | "taiko-logo-monochrome" | "worldchain-logo-monochrome" | "zksync-era-logo-monochrome" | "zora-logo-monochrome" | "da-celestia-logo-monochrome" | "da-ethereum-blobs-logo-monochrome" | "da-ethereum-calldata-logo-monochrome" | "eclipse-custom-logo-monochrome" | "lightlink-custom-logo-monochrome" | "b3-custom-logo-monochrome" | "forma-custom-logo-monochrome"; \ No newline at end of file diff --git a/lib/icons.mjs b/lib/icons.mjs index c85cc903..474d1c08 100644 --- a/lib/icons.mjs +++ b/lib/icons.mjs @@ -102,6 +102,42 @@ var GetDAIcons = async () => { return icons; }; +var GetLogos = async () => { + const resp = await fetch("https://api.growthepie.xyz/v1/master.json").then( + (res) => res.json(), + ); + + const customLogos = Object.entries(resp.custom_logos) + + // start with empty collection + let icons = { + prefix: "gtp", + icons: {}, + }; + + customLogos.forEach(([logoKey, logoInfo]) => { + // skip if no logo + if (!logoInfo.body) return; + + const key = logoKey.replace("_", "-").replace("_", "-"); + let body = logoInfo.body; + + // replace fill="url(#..." and fill="#..." with fill="currentColor" + body = body + .replace(/fill="url\(#.*?\)"/g, 'fill="currentColor"') + .replace(/fill="#.*?"/g, 'fill="currentColor"'); + + // // add icon with key replacing _ with - + icons.icons[`${key}-custom-logo-monochrome`] = { + body: body, + width: logoInfo.width || 15, + height: logoInfo.height || 15, + }; + }); + + return icons; +}; + (async () => { // json filename to export const jsonFilename = "icons/gtp-figma-export.json"; @@ -180,11 +216,13 @@ var GetDAIcons = async () => { let chainIcons = await GetChainIcons(); let daIcons = await GetDAIcons(); + let logos = await GetLogos(); currIcons.icons = { ...currIcons.icons, ...chainIcons.icons, ...daIcons.icons, + ...logos.icons, }; // Export as IconifyJSON