ghost-dao-interface/src/containers/Stake/components/FarmPools.jsx

import {
    TableContainer,
    TableHead,
    TableBody,
    TableRow,
    TableCell,
    Table,
    Typography,
    Box,
    useMediaQuery,
} from "@mui/material";
import { useNavigate, createSearchParams } from "react-router-dom";

import Paper from "../../../components/Paper/Paper";
import { SecondaryButton } from "../../../components/Button";
import TokenStack from "../../../components/TokenStack/TokenStack";
import { DecimalBigNumber } from "../../../helpers/DecimalBigNumber";
import { formatCurrency } from "../../../helpers";
import { tokenNameConverter } from "../../../helpers/tokenConverter";
import { isNetworkLegacy } from "../../../constants";

import { useLpValuation } from "../../../hooks/treasury";
import { useTotalSupply, useTokenSymbol } from "../../../hooks/tokens";

import { RESERVE_ADDRESSES, FTSO_ADDRESSES } from "../../../constants/addresses";

const FarmPools = ({ chainId }) => {
    const isSmallScreen = useMediaQuery("(max-width: 775px)");

    const { totalSupply: reserveFtsoUniTotalSupply } = useTotalSupply(chainId, "RESERVE_FTSO");
    const reserveFtsoUniValuation = useLpValuation(chainId, "RESERVE_FTSO", reserveFtsoUniTotalSupply._value);

    const { symbol: reserveSymbol } = useTokenSymbol(chainId, "RESERVE");
    const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO");

    const pools = [
        {
            icons: ["FTSO", isNetworkLegacy(chainId) ? "GDAI" : tokenNameConverter(chainId, reserveSymbol)],
            name: `${ftsoSymbol}-${reserveSymbol}`,
            dex: "Uniswap V2",
            url: "/dex/uniswap",
            tvl: reserveFtsoUniValuation,
            params: createSearchParams({
                pool: "true",
                from: `${RESERVE_ADDRESSES[chainId]}`,
                to: `${FTSO_ADDRESSES[chainId]}`,
            })
        },
    ];

    if (isSmallScreen) {
        return (
            <>
                {pools.map((pool, id) => {
                    return (
                        <FarmPoolCard key={id} id={id} pool={pool} />
                    )
                })}
            </>
        )
    }

    return (
        <Paper headerText="Farm Pools" fullWidth enableBackground>
            <TableContainer>
                <Table aria-label="Farm pools" style={{ tableLayout: "fixed" }}>
                    <TableHead>
                        <TableRow>
                            <TableCell style={{ padding: "8px 0", width: "30%" }}>Asset</TableCell>
                            <TableCell style={{ padding: "8px 0", width: "30%" }}>TVL</TableCell>
                            <TableCell style={{ padding: "8px 0", width: "40%" }}></TableCell>
                        </TableRow>
                    </TableHead>

                    <TableBody>
                        {pools.map((pool, id) => {
                            return (
                                <FarmPoolRow key={id} id={id} pool={pool} />
                            )
                        })}
                    </TableBody>
                </Table>
            </TableContainer>
        </Paper>
    )
}

const FarmPoolCard = ({ id, pool }) => {
    return (
        <Paper enableBackground fullWidth>
            <Box id={id + `--bond`}>
                <Box display="flex" alignItems="center" flexDirection="column" gap="20px">
                    <Box display="flex" alignItems="center" gap="20px">
                        <TokenStack tokens={pool.icons} />
                        <Typography>{pool.name}</Typography>
                    </Box>

                    <Typography>{formatCurrency(pool.tvl, 2)}</Typography>

                    <SecondaryButton
                        fullWidth
                        sx={{ maxWidth: "320px" }}
                        href={pool.url}
                    >
                        Get on {pool.dex}
                    </SecondaryButton>
                </Box>
            </Box>
        </Paper>

    )
}

const FarmPoolRow = ({ id, pool }) => {
    const navigate = useNavigate();
    return (
        <TableRow key={id} id={id + `--pool`} data-testid={id + `--pool`}>
            <TableCell style={{ padding: "8px 0" }}>
                <Box display="flex" alignItems="center" gap="20px">
                    <TokenStack tokens={pool.icons} />
                    <Typography>{pool.name}</Typography>
                </Box>
            </TableCell>

            <TableCell style={{ padding: "8px 0" }}>
                <Typography>{formatCurrency(pool.tvl, 2)}</Typography>
            </TableCell>

            <TableCell style={{ display: "flex", justifyContent: "end", padding: "8px 0" }}>
                <SecondaryButton
                    fullWidth
                    sx={{ maxWidth: "320px" }}
                    onClick={() => navigate({ pathname: pool.url, search: pool.params.toString() })}
                >
                    Get on {pool.dex}
                </SecondaryButton>
            </TableCell>
        </TableRow>
    )
}

export default FarmPools;