diff --git a/src/pages/layer-2.js b/src/pages/layer-2.js index e567b71f4d0..044eeb68729 100644 --- a/src/pages/layer-2.js +++ b/src/pages/layer-2.js @@ -13,6 +13,7 @@ import ButtonLink from "../components/ButtonLink" import Card from "../components/Card" import ExpandableCard from "../components/ExpandableCard" import FeedbackCard from "../components/FeedbackCard" +import Icon from "../components/Icon" import InfoBanner from "../components/InfoBanner" import Layer2Onboard from "../components/Layer2/Layer2Onboard" import Link from "../components/Link" @@ -22,6 +23,8 @@ import PageMetadata from "../components/PageMetadata" import Pill from "../components/Pill" import Layer2ProductCard from "../components/Layer2ProductCard" import ProductList from "../components/ProductList" +import Tooltip from "../components/Tooltip" +import Translation from "../components/Translation" import { CardGrid, Content, Page } from "../components/SharedStyledComponents" // Utils @@ -66,6 +69,19 @@ const Flex50 = styled.div` } ` +const StyledIcon = styled(Icon)` + fill: ${(props) => props.theme.colors.text}; + margin-right: 0.5rem; + opacity: 0.8; + @media (max-width: ${({ theme }) => theme.breakpoints.l}) { + } + &:hover, + &:active, + &:focus { + fill: ${({ theme }) => theme.colors.primary}; + } +` + const TwoColumnContent = styled.div` display: flex; justify-content: space-between; @@ -139,6 +155,12 @@ const StatPrimary = styled.p` font-family: monospace; ` +const StatSpan = styled.div` + display: flex; + justify-content: center; + gap: 0.5rem; +` + const StatDescription = styled.p` opacity: 0.8; margin: 0; @@ -199,14 +221,20 @@ const Layer2Page = ({ data }) => { const fetchCryptoStats = async () => { try { // Average eth transfer fee from L2's supported by cryptostats API - const feeData = await getData( + let feeData = await getData( "https://api.cryptostats.community/api/v1/l2-fees/feeTransferEth?metadata=false" ) + + // Temporary, but filtering out L2's we arent listing + feeData = feeData.data.filter( + (l2) => l2.id !== "aztec-network" && l2.id !== "hermez" + ) + const feeAverage = - feeData.data.reduce( + feeData.reduce( (acc, curr) => (acc += curr.results.feeTransferEth), 0 - ) / feeData.data.length + ) / feeData.length const intlFeeAverage = new Intl.NumberFormat(intl.locale, { style: "currency", @@ -342,6 +370,13 @@ const Layer2Page = ({ data }) => { const layer2DataCombined = [...layer2Data.optimistic, ...layer2Data.zk] + const tooltipContent = (metric) => ( +
+ {" "} + {metric.apiProvider} +
+ ) + return ( { {tvl} - TVL locked in layer 2 (USD) + + TVL locked in layer 2 (USD) + + + + {averageFee} - - Average layer 2 ETH transfer fee (USD) - + + + Average layer 2 ETH transfer fee (USD) + + + + + {percentChangeL2} - Layer 2 TVL change (30 days) + + Layer 2 TVL change (30 days) + + + +