Skip to content

Add API tooltip to L2 page #5880

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wackerow merged 4 commits into from
Apr 2, 2022
Merged

Add API tooltip to L2 page #5880

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3739f0f
add toolip for api resources, and filter out l2s we havent listed fro…
corwintines Apr 1, 2022
e87c6f8
change requests
corwintines Apr 1, 2022
e4aecde
change urls for tooltip
corwintines Apr 2, 2022
cb2f9a9
fix url
corwintines Apr 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 73 additions & 8 deletions src/pages/layer-2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -342,6 +370,13 @@ const Layer2Page = ({ data }) => {

const layer2DataCombined = [...layer2Data.optimistic, ...layer2Data.zk]

const tooltipContent = (metric) => (
<div>
<Translation id="data-provided-by" />{" "}
<Link to={metric.apiUrl}>{metric.apiProvider}</Link>
</div>
)

return (
<Page>
<PageMetadata
Expand All @@ -358,19 +393,49 @@ const Layer2Page = ({ data }) => {
<StatsContainer>
<StatBox>
<StatPrimary>{tvl}</StatPrimary>
<StatDescription>TVL locked in layer 2 (USD)</StatDescription>
<StatSpan>
<StatDescription>TVL locked in layer 2 (USD)</StatDescription>
<Tooltip
content={tooltipContent({
apiUrl: "https://l2beat.com/",
apiProvider: "L2BEAT",
})}
>
<StyledIcon name="info" />
</Tooltip>
</StatSpan>
</StatBox>
<StatDivider />
<StatBox>
<StatPrimary>{averageFee}</StatPrimary>
<StatDescription>
Average layer 2 ETH transfer fee (USD)
</StatDescription>
<StatSpan>
<StatDescription>
Average layer 2 ETH transfer fee (USD)
</StatDescription>
<Tooltip
content={tooltipContent({
apiUrl: "https://cryptostats.community/",
apiProvider: "CryptoStats",
})}
>
<StyledIcon name="info" />
</Tooltip>
</StatSpan>
</StatBox>
<StatDivider />
<StatBox>
<StatPrimary>{percentChangeL2}</StatPrimary>
<StatDescription>Layer 2 TVL change (30 days)</StatDescription>
<StatSpan>
<StatDescription>Layer 2 TVL change (30 days)</StatDescription>
<Tooltip
content={tooltipContent({
apiUrl: "https://l2beat.com/",
apiProvider: "L2BEAT",
})}
>
<StyledIcon name="info" />
</Tooltip>
</StatSpan>
</StatBox>
</StatsContainer>
</PaddedContent>
Expand Down