88 lines
3.4 KiB
JavaScript
88 lines
3.4 KiB
JavaScript
import { Box, Tab, Tabs, Container, useMediaQuery } from "@mui/material";
|
|
import { useEffect, useState } from "react";
|
|
import ReactGA from "react-ga4";
|
|
|
|
import Paper from "../../components/Paper/Paper";
|
|
import Metric from "../../components/Metric/Metric";
|
|
import MetricCollection from "../../components/Metric/MetricCollection";
|
|
import PageTitle from "../../components/PageTitle/PageTitle";
|
|
|
|
import { formatCurrency } from "../../helpers";
|
|
import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
|
|
|
|
import { BondList } from "./components/BondList";
|
|
import { ClaimBonds } from "./components/ClaimBonds";
|
|
|
|
import { useLiveBonds } from "../../hooks/bonds";
|
|
import { useTotalReserves } from "../../hooks/treasury";
|
|
import { useFtsoPrice } from "../../hooks/prices";
|
|
import { useTokenSymbol } from "../../hooks/tokens";
|
|
|
|
const Bonds = ({ chainId, address, connect }) => {
|
|
const [isZoomed] = useState(false);
|
|
const [secondsTo, setSecondsTo] = useState(0);
|
|
|
|
const isSmallScreen = useMediaQuery("(max-width: 650px)");
|
|
const isVerySmallScreen = useMediaQuery("(max-width: 379px)");
|
|
|
|
useEffect(() => {
|
|
ReactGA.send({ hitType: "pageview", page: "/bonds" });
|
|
}, []);
|
|
|
|
const { liveBonds } = useLiveBonds(chainId);
|
|
const totalReserves = useTotalReserves(chainId);
|
|
const ftsoPrice = useFtsoPrice(chainId);
|
|
|
|
const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO");
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
const date = Math.round(Date.now() / 1000);
|
|
setSecondsTo(date);
|
|
}, 1000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
return (
|
|
<Box>
|
|
<PageTitle name={"Protocol Bonding"} subtitle={`Buy ${ftsoSymbol} from the protocol at a discount`} />
|
|
<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 display="flex" alignItems="center" justifyContent="center" flexDirection="column">
|
|
<Paper headerText="Active bonds" fullWidth enableBackground>
|
|
<MetricCollection>
|
|
<Metric
|
|
label={`Treasury Balance`}
|
|
metric={formatCurrency(totalReserves, 2)}
|
|
isLoading={false}
|
|
/>
|
|
<Metric
|
|
label={`${ftsoSymbol} price`}
|
|
metric={formatCurrency(ftsoPrice, 2)}
|
|
isLoading={false}
|
|
/>
|
|
</MetricCollection>
|
|
|
|
<Box mt="24px">
|
|
<Box mt="24px">
|
|
<BondList chainId={chainId} bonds={liveBonds} secondsTo={secondsTo} />
|
|
</Box>
|
|
</Box>
|
|
</Paper>
|
|
<ClaimBonds chainId={chainId} secondsTo={secondsTo} address={address} />
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default Bonds;
|