109 lines
4.4 KiB
JavaScript
109 lines
4.4 KiB
JavaScript
import { Dispatch, SetStateAction, useState, useEffect } from "react";
|
|
import { Box, Container, Grid, Divider, Typography, Link, useMediaQuery, useTheme } from "@mui/material";
|
|
import ReactGA from "react-ga4";
|
|
|
|
import Paper from "../../components/Paper/Paper";
|
|
import PageTitle from "../../components/PageTitle/PageTitle";
|
|
import InfoTooltip from "../../components/Tooltip/InfoTooltip";
|
|
import Countdown from "../../components/Countdown/Countdown";
|
|
import { PrimaryButton } from "../../components/Button";
|
|
import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
|
|
|
|
import Stake from "./Stake";
|
|
import FarmPools from "./components/FarmPools";
|
|
import StakeInfoText from "./components/StakeInfoText";
|
|
import { ClaimsArea } from "./components/ClaimsArea";
|
|
import { Apy, CurrentIndex, TotalDeposit } from "./components/Metric";
|
|
|
|
import { useEpoch } from "../../hooks/staking";
|
|
|
|
export const StakeContainer = ({ chainId, address, connect }) => {
|
|
const [isModalOpened, handleModal] = useState(false);
|
|
|
|
const isSemiSmallScreen = useMediaQuery("(max-width: 745px)");
|
|
const isSmallScreen = useMediaQuery("(max-width: 650px)");
|
|
const isVerySmallScreen = useMediaQuery("(max-width: 379px)");
|
|
|
|
const { epoch, refetch: refetchEpoch } = useEpoch(chainId);
|
|
|
|
useEffect(() => {
|
|
ReactGA.send({ hitType: "pageview", page: "/stake" });
|
|
}, [])
|
|
|
|
if (isModalOpened) {
|
|
return (
|
|
<Stake
|
|
chainId={chainId}
|
|
address={address}
|
|
isOpened={isModalOpened}
|
|
connect={connect}
|
|
closeModal={() => handleModal(false)}
|
|
/>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Box >
|
|
<PageTitle name="Protocol Staking" subtitle="Stake your FTSO to earn rebase yields" />
|
|
<Container
|
|
style={{
|
|
paddingLeft: isSmallScreen || isVerySmallScreen ? "0" : "3.3rem",
|
|
paddingRight: isSmallScreen || isVerySmallScreen ? "0" : "3.3rem",
|
|
minHeight: "calc(100vh - 128px)",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center"
|
|
}}
|
|
>
|
|
<Box sx={{ mt: "15px" }}>
|
|
<Paper
|
|
fullWidth
|
|
enableBackground
|
|
headerContent={
|
|
<Box display="flex" alignItems="center" flexDirection="row" gap="5px">
|
|
<Typography variant="h6">
|
|
Rebase
|
|
<Countdown otherwise="Ready" targetDate={new Date(epoch.end * 1000)} />
|
|
</Typography>
|
|
|
|
</Box>
|
|
}
|
|
>
|
|
<Grid container spacing={1}>
|
|
<Grid item xs={isSmallScreen ? 12 : 4}>
|
|
<Apy distribute={epoch.distribute} chainId={chainId} />
|
|
</Grid>
|
|
<Grid item xs={isSmallScreen ? 12 : 4}>
|
|
<TotalDeposit chainId={chainId} />
|
|
</Grid>
|
|
<Grid item xs={isSmallScreen ? 12 : 4}>
|
|
<CurrentIndex chainId={chainId} />
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Divider sx={{ marginTop: "30px" }} />
|
|
<ClaimsArea chainId={chainId} address={address} epoch={epoch} />
|
|
<Divider />
|
|
|
|
<Box mt="15px" display="flex" flexDirection="column" alignItems="center" justifyContent="center">
|
|
<PrimaryButton
|
|
fullWidth
|
|
onClick={() => handleModal(true)}
|
|
sx={{ maxWidth: isSemiSmallScreen ? "100%" : "350px" }}
|
|
>
|
|
Start staking
|
|
</PrimaryButton>
|
|
<Box textAlign="center" mt="15px">
|
|
<StakeInfoText />
|
|
</Box>
|
|
</Box>
|
|
</Paper>
|
|
<FarmPools chainId={chainId} />
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
)
|
|
};
|
|
|
|
export default StakeContainer;
|