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 1 commit
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
84 changes: 75 additions & 9 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,21 +221,27 @@ 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",
currency: "USD",
notation: "compact",
minimumSignificantDigits: 2,
maximumSignificantDigits: 3,
maximumSignificantDigits: 2,
Copy link
Contributor

@minimalsm minimalsm Apr 1, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently, the 'Average layer 2 ETH transfer fee' is showing up as 1 decimal point. I was verrrry confused by this because in school, we were taught decimal places ==== significant digits. Apparently not!

Screenshot 2022-04-01 at 21 20 32

Not 100% sure if this is what you're after but it looks like there is a minimumFractionDigits and maximumFractionDigits that we could use here instead to get it to display like regular currency ($1.10, in this case).

Tested a little and it seems to be working as we would expect.

Screenshot 2022-04-01 at 21 49 19
Screenshot 2022-04-01 at 21 49 39

}).format(feeAverage)
setAverageFee(`${intlFeeAverage}`)
} catch (error) {
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 @@ -360,21 +395,52 @@ const Layer2Page = ({ data }) => {
{/* TODO: remove hardcoded StatPrimary once lambda functions are working*/}
<StatPrimary>$7.27B</StatPrimary>
{/* <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/api/tvl.json",
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://api.cryptostats.community/api/v1/l2-fees/feeTransferEth?metadata=false",
apiProvider: "CryptoStats",
})}
>
<StyledIcon name="info" />
</Tooltip>
</StatSpan>
</StatBox>
<StatDivider />
<StatBox>
{/* TODO: remove hardcoded StatPrimary once lambda functions are working*/}
<StatPrimary>+33.01%</StatPrimary>
{/* <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/api/tvl.json",
apiProvider: "L2BEAT",
})}
>
<StyledIcon name="info" />
</Tooltip>
</StatSpan>
</StatBox>
</StatsContainer>
</PaddedContent>
Expand Down