diff --git a/components/layout/SidebarMenuGroup.tsx b/components/layout/SidebarMenuGroup.tsx index f7b7abfe..4a9d8b42 100644 --- a/components/layout/SidebarMenuGroup.tsx +++ b/components/layout/SidebarMenuGroup.tsx @@ -322,21 +322,22 @@ export default function SidebarMenuGroup({ }} > {Object.keys(ChainGroups).length > 0 && - Object.entries(ChainGroups).map(([bucket, chains]: any) => { + Object.entries(ChainGroups).map(([bucket, chains]: any, i) => { if (chains.length === 0) return null; return (
-
-
-
- -
+
+
+
{sidebarOpen ? bucket :  }
@@ -404,31 +405,55 @@ export default function SidebarMenuGroup({ /> )}
-
- {option.label} - {option.showNew && ( -
+
+
+
+ +
+ {option.category ? (
- NEW! + {option.label}
-
+ ) : ( +
+ {sidebarOpen ? ( + option.label + ) : ( +   + )} +
+ )}
- )} + {option.showNew && ( +
+
+
+ NEW! +
+
+
+ )} +
@@ -616,29 +641,15 @@ export default function SidebarMenuGroup({ }`} >
-
- {["Blockspace"].includes(item.name) && ( +
+
- )} -
-
-
+
{option.category ? (
{ name: "Chains", label: "Single Chain", key: "chains", - icon: "gtp:link", + icon: "gtp:gtp-chain", options: chainKeys.map((key) => { const chain = chains[key]; return { diff --git a/lib/navigation.tsx b/lib/navigation.tsx index 7237c2ff..e2c2381b 100644 --- a/lib/navigation.tsx +++ b/lib/navigation.tsx @@ -106,9 +106,9 @@ export const navigationItems: NavigationItem[] = [ description: "The number of distinct addresses that interacted with a chain.", why: "Active addresses is a widely used metric for estimating the number of users on a blockchain network. Although it is not a perfect metric due to the possibility of a single person owning multiple addresses, it can still provide valuable insights into the overall user base of a chain. It is worth noting, however, that this metric can be influenced by Sybil attacks, where an attacker creates a large number of fake identities to artificially inflate the active address count. Therefore, while daily active addresses can be a useful measure, it should be used in conjunction with other metrics to provide a more comprehensive analysis of a chain's user activity.", - icon: "feather:sunrise", + icon: "gtp:gtp-metrics-activeaddresses", }, - icon: "feather:sunrise", + icon: "gtp:gtp-metrics-activeaddresses", key: "daa", rootKey: "metricsDailyActiveAddresses", urlKey: "daily-active-addresses", @@ -121,9 +121,9 @@ export const navigationItems: NavigationItem[] = [ description: "The number of daily transactions. We try to only count transactions that are executed by users/smart contracts - no system transactions.", why: "The number of transactions processed on a blockchain is a reliable metric for measuring its usage. However, it should be noted that this metric alone may not provide sufficient insight into the actual value of the transactions being conducted. For instance, while some chains may have a lower transaction count, the value of these transactions may be significantly higher due to their use in decentralized finance (DeFi) applications. On the other hand, certain chains may have a higher transaction count due to their use in gaming or other applications involving lower value transactions.", - icon: "feather:clock", + icon: "gtp:gtp-metrics-transactioncount", }, - icon: "feather:clock", + icon: "gtp:gtp-metrics-transactioncount", key: "txcount", rootKey: "metricsTxCount", urlKey: "transaction-count", @@ -136,9 +136,9 @@ export const navigationItems: NavigationItem[] = [ description: "A chains throughput measured in gas per second. We only include EVM equivalent Layer 2 gas usage.", why: "Throughput is a crucial metric for assessing scalability, reflecting a blockchain's actual compute capacity more accurately than transaction counts, which can vary in complexity (i.e. 21,000 gas for an eth transfer vs 280,000 gas for a simple Uniswap swap). Similarly to how modern storage devices are marketed with specs on read/write speeds rather than the number of files they can process, throughput provides a direct measure of a blockchain's ability to handle compute effectively. Throughput also reveals how close a chain is to its operational limits. This metric is essential for app developers and Layer 2 teams to gauge growth potential, potential cost implications, and performance constraints.", - icon: "feather:sunrise", + icon: "gtp:gtp-metrics-throughput", }, - icon: "feather:sunrise", + icon: "gtp:gtp-metrics-throughput", key: "throughput", rootKey: "throughput", urlKey: "throughput", @@ -150,9 +150,9 @@ export const navigationItems: NavigationItem[] = [ title: "Stablecoin Market Cap", description: "The sum of stablecoins that are locked on the chain.", why: "Stablecoin market cap is a crucial metric for evaluating the growth and development of a blockchain's decentralized finance (DeFi) ecosystem.Stables are a popular choice for use in DeFi applications such as lending, borrowing, and trading. The market cap of stablecoins on a particular chain can provide valuable insights into the level of adoption and usage of DeFi applications on the network. A high stablecoin market cap is indicative of a robust and thriving DeFi ecosystem, where users are actively engaged in utilizing the various financial applications available on the chain.", - icon: "feather:dollar-sign", + icon: "gtp:gtp-metrics-stablecoinmarketcap", }, - icon: "feather:dollar-sign", + icon: "gtp:gtp-metrics-stablecoinmarketcap", key: "stables_mcap", rootKey: "metricsStablesMcap", urlKey: "stablecoin-market-cap", @@ -165,9 +165,9 @@ export const navigationItems: NavigationItem[] = [ description: "The sum of all funds locked on the chain. Methodology and data is derived from L2Beat.com.", why: "TVL is a crucial metric for assessing the success of a blockchain. A high TVL indicates that users have significant trust in the chain's security and reliability, as well as confidence in the usefulness and functionality of the various applications available on the chain.", - icon: "feather:star", + icon: "gtp:gtp-metrics-totalvaluelocked", }, - icon: "feather:star", + icon: "gtp:gtp-metrics-totalvaluelocked", key: "tvl", rootKey: "metricsTvl", urlKey: "total-value-locked", @@ -197,7 +197,7 @@ export const navigationItems: NavigationItem[] = [ showGwei: true, reversePerformer: true, }, - icon: "gtp:transaction-costs", + icon: "gtp:gtp-metrics-transactioncosts", key: "txcosts", rootKey: "metricsTxCosts", urlKey: "transaction-costs", @@ -251,9 +251,9 @@ export const navigationItems: NavigationItem[] = [ page: { title: "Overview", description: `Our Onchain Economics page breaks down how profitable L2s operate.`, - icon: "gtp:gtp-book-open", + icon: "gtp:gtp-overview", }, - icon: "gtp:gtp-book-open", + icon: "gtp:gtp-overview", key: "economics-overview", rootKey: "economics", urlKey: "economics", @@ -267,9 +267,9 @@ export const navigationItems: NavigationItem[] = [ description: "The sum of fees that were paid by users of the chain in gas fees.", why: "Fees paid by users is a critical metric for measuring a blockchain's adoption and revenue generation. A high fee revenue can be an indication that users find the chain's applications and security valuable, and are willing to pay for it. This metric is often referred to as a chain's revenue, as it reflects the total amount of income generated by the network.", - icon: "feather:credit-card", + icon: "gtp:gtp-metrics-feespaidbyusers", }, - icon: "feather:credit-card", + icon: "gtp:gtp-metrics-feespaidbyusers", key: "fees", rootKey: "metricsFeesPaidToEthereum", urlKey: "fees-paid-by-users", @@ -283,9 +283,9 @@ export const navigationItems: NavigationItem[] = [ description: "The gas fees paid by Layer 2s to post transaction data & verification states onto Ethereum. For data availability: Ethereum calldata and blobs are tracked here.", why: "Rent paid to L1 quantifies the expenses associated with posting L2 transaction data and proofs onto the Ethereum blockchain. The term 'rent' signifies the gas fees L2s incur to leverage the security of the Ethereum blockchain. This metric provides valuable insights into the value accrual for ETH holders.", - icon: "feather:credit-card", + icon: "gtp:gtp-metrics-rentpaidtol1", }, - icon: "feather:credit-card", + icon: "gtp:gtp-metrics-rentpaidtol1", key: "rent_paid", rootKey: "metricsRentPaid", urlKey: "rent-paid", @@ -299,9 +299,9 @@ export const navigationItems: NavigationItem[] = [ description: "The net profit of L2s, accounting for revenues as L2 gas fees collected and expenses as posting transaction data & verification states onto Ethereum.", why: "Onchain Profit is a key metric for assessing the financial viability of scaling solutions. It quantifies profitability by comparing the revenue generated from L2 gas fees collected to the costs associated with data & proof posting onto the Ethereum blockchain. L2 profitability can increases for two reasons: firstly, when there is high demand for L2 blockspace, enabling an auction of the available blockspace for a premium. Secondly, if the operator (who controls the sequencer) increases the base fee scalar. This metric can be used to gauge the health and success of Layer 2 solutions.", - icon: "feather:credit-card", + icon: "gtp:gtp-metrics-onchainprofit", }, - icon: "feather:credit-card", + icon: "gtp:gtp-metrics-onchainprofit", key: "profit", rootKey: "metricsEarnings", urlKey: "profit", @@ -336,10 +336,10 @@ export const navigationItems: NavigationItem[] = [
, ], why: "FDV helps investors understand the potential size and value of a token, which can be useful for comparing similar assets and assessing the risk of dilution. Note: A token can be related to multiple chains (i.e. MATIC is connected to Polygon zkEVM and Polygon PoS)", - icon: "gtp:transaction-costs", + icon: "gtp:gtp-metrics-fdv", showGwei: false, }, - icon: "gtp:transaction-costs", + icon: "gtp:gtp-metrics-fdv", key: "fdv", rootKey: "metricsFullyDilutedValuation", urlKey: "fully-diluted-valuation", @@ -379,7 +379,7 @@ export const navigationItems: NavigationItem[] = [ icon: "gtp:transaction-costs", showGwei: false, }, - icon: "gtp:transaction-costs", + icon: "gtp:gtp-metrics-marketcap", key: "market_cap", rootKey: "marketCap", urlKey: "market-cap", @@ -401,7 +401,7 @@ export const navigationItems: NavigationItem[] = [ Toggling between the "Absolute" and "Share of Chain Usage" options shows either the absolute amount of gas fees/transactions, or the share of the chain's total blockspace.`, icon: "gtp:blockspace-chain-overview", }, - icon: "gtp:blockspace-chain-overview", + icon: "gtp:gtp-chain", key: "chain-overview", rootKey: "chainOverview", urlKey: "chain-overview", @@ -415,7 +415,7 @@ export const navigationItems: NavigationItem[] = [ description: "How are certain blockspace categories used on different chains? Explore the varied applications of blockspace categories across Ethereum Layer-2s.", }, - icon: "gtp:blockspace-category-comparison", + icon: "gtp:gtp-compare", key: "category-comparison", rootKey: "categoryComparison", urlKey: "category-comparison", @@ -427,9 +427,9 @@ export const navigationItems: NavigationItem[] = [ title: "Contracts", description: "The number of contracts created in the last 24 hours. Methodology and data is derived from L2Beat.com.", - icon: "gtp:contracts", + icon: "gtp:gtp-labeled", }, - icon: "gtp:contracts", + icon: "gtp:gtp-labeled", key: "contracts", rootKey: "contracts", urlKey: "contracts",