Skip to content
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

Jump to bottom

merge sepolia into mainnet #1356

Merged
merged 4 commits into from
Nov 10, 2024
Merged

merge sepolia into mainnet #1356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
265ab95
fix: ecosystem get in touch
Holybasil Nov 9, 2024
0aa3a38
fix: style
Holybasil Nov 10, 2024
05ad54b
fix: mobile bg
Holybasil Nov 10, 2024
1f5178b
Merge pull request #1353 from scroll-tech/ecosystem-update
Holybasil Nov 10, 2024
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
Binary file modified public/imgs/ecosystem/ecosystem-bg-mobile.webp
View file
Open in desktop
Binary file not shown.
6 changes: 4 additions & 2 deletions src/pages/ecosystem/Header/Statistic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@ const Statistic = props => {
sx={{
flex: 1,
borderRadius: ["0.8rem", "1.6rem"],
p: ["0.8rem 1.2rem", "1.6rem 2.4rem"],
p: ["0.8rem 1.2rem", "1.6rem 1.6rem"],
minWidth: ["auto", "20rem"],
backgroundColor: theme => theme.palette.themeBackground.normal,
}}
>
Expand All @@ -30,6 +31,7 @@ const Statistic = props => {
lineHeight: ["2rem", "2.8rem"],
fontWeight: 600,
textAlign: "center",
whiteSpace: ["pre-wrap", "pre-wrap", "nowrap"],
[theme.breakpoints.down("md")]: {
flex: 1,
display: "inline-flex",
Expand All @@ -41,7 +43,7 @@ const Statistic = props => {
{label}
</Typography>
<NumberTypography
sx={{ fontSize: ["2rem", "4.8rem"], lineHeight: ["3.2rem", "5.6rem"], fontWeight: 600, textAlign: "center", whiteSpace: "nowrap" }}
sx={{ fontSize: ["2rem", "3.2rem"], lineHeight: ["3.2rem", "4rem"], fontWeight: 600, textAlign: "center", whiteSpace: "nowrap" }}
>
{loading ? <StatisticSkeleton></StatisticSkeleton> : <>{children}</>}
</NumberTypography>
Expand Down
48 changes: 35 additions & 13 deletions src/pages/ecosystem/Header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@ import { Box, Container, Stack, Typography } from "@mui/material"

import { fetchEcosystemMetricsData } from "@/apis/ecosystem"
import { fetchLastBatchIndexesUrl } from "@/apis/rollupscan"
// import useCheckViewport from "@/hooks/useCheckViewport"
import Button from "@/components/Button"
import { GET_IN_TOUCH_LINK } from "@/constants"
import useCheckViewport from "@/hooks/useCheckViewport"
import { formatLargeNumber } from "@/utils"

import Statistic from "./Statistic"

const Header = () => {
// const { isLandscape } = useCheckViewport()
const { isPortrait } = useCheckViewport()
const { data, isLoading } = useSWR(fetchEcosystemMetricsData, () => scrollRequest(fetchEcosystemMetricsData), { refreshInterval: 18e4 })

const { data: totalBatches, isLoading: isBatchesLoading } = useSWR(
Expand All @@ -27,7 +29,7 @@ const Header = () => {
sx={[
{
position: "relative",
height: ["42.8rem", "72rem", "auto"],
height: ["calc(100vh - 6.2rem)", "72rem", "auto"],
},
theme => ({
[theme.breakpoints.up("md")]: {
Expand All @@ -52,26 +54,46 @@ const Header = () => {
)} */}

<Container
sx={{ position: "absolute", top: ["5.8rem", "5.8rem", "calc(100vw*0.05 + 6.5rem)"], left: "50%", transform: "translateX(-50%)", zIndex: 1 }}
sx={{
position: "absolute",
top: ["calc(24% - 5rem)", "5.8rem", "calc(100vw*0.05 + 6.5rem)"],
left: "50%",
transform: "translateX(-50%)",
zIndex: 1,
}}
>
<Stack direction="column" alignItems="center">
<Stack direction="column" alignItems="center" gap="4rem">
<Typography
sx={{ fontSize: ["3.6rem", "6.4rem"], lineHeight: ["5rem", "8.8rem"], fontWeight: 600, maxWidth: "66rem", textAlign: "center" }}
sx={{ fontSize: ["4rem", "6.4rem"], lineHeight: ["5rem", "8.8rem"], fontWeight: 600, maxWidth: ["30rem", "unset"], textAlign: "center" }}
>
An Ecosystem <br />
Forever in Motion
Ecosystem projects
</Typography>
<Stack direction="row" gap="2.4rem" sx={{ width: "94.8rem", maxWidth: "100%", mt: "4rem", mb: "5.2rem" }}>
<Statistic label="Total value locked" loading={isLoading}>
{data?.tvl}
<Stack
direction="row"
gap={["0.8rem", "2.4rem"]}
sx={{
maxWidth: "100%",
}}
>
<Statistic label={isPortrait ? "TVL" : "Total value locked"} loading={isLoading}>
{data?.tvl ?? "--"}
</Statistic>
<Statistic label="Transaction count" loading={isLoading}>
{data?.txAll}
{data?.txAll ?? "--"}
</Statistic>
<Statistic label="Batches settled to L1" loading={isBatchesLoading}>
{totalBatches}
{totalBatches ?? "--"}
</Statistic>
</Stack>
<Button
width={isPortrait ? "18.5rem" : "25rem"}
sx={{ backgroundColor: "#FFF8F3 !important" }}
href={GET_IN_TOUCH_LINK}
target="_blank"
color="primary"
>
Get in touch
</Button>
</Stack>
</Container>
</Box>
Expand Down
11 changes: 2 additions & 9 deletions src/pages/ecosystem/Protocols/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@ import { withStyles } from "tss-react/mui"
import { Box, Stack, Typography } from "@mui/material"
import useScrollTrigger from "@mui/material/useScrollTrigger"

import Button from "@/components/Button"
import SectionWrapper from "@/components/SectionWrapper"
import { ECOSYSTEM_NETWORK_LIST, ECOSYSTEM_PAGE_SYMBOL, GET_IN_TOUCH_LINK, NORMAL_HEADER_HEIGHT } from "@/constants"
import { ECOSYSTEM_NETWORK_LIST, ECOSYSTEM_PAGE_SYMBOL, NORMAL_HEADER_HEIGHT } from "@/constants"
import useCheckViewport from "@/hooks/useCheckViewport"

import Category from "./Category"
Expand Down Expand Up @@ -35,7 +34,7 @@ const Grid = withStyles(Box, theme => ({

const Protocols = () => {
const trigger = useScrollTrigger()
const { isMobile, isTablet, isLandscape } = useCheckViewport()
const { isLandscape } = useCheckViewport()
const [searchInput, setSearchInput] = useState("")
const [searchParams, setSearchParams] = useState({
category: "All categories",
Expand Down Expand Up @@ -107,12 +106,6 @@ const Protocols = () => {
>
Browse all protocols
</Typography>

{isMobile ? null : (
<Button width={isTablet ? "21.5rem" : "25rem"} href={GET_IN_TOUCH_LINK} target="_blank" color="primary">
Get in touch
</Button>
)}
</Stack>
<Grid id={`${ECOSYSTEM_PAGE_SYMBOL}-protocols`}>
<Category top={stickyTop} value={searchParams.category} onChange={handleChangeCategory}></Category>
Expand Down