ghost-dao-interface/src/containers/TreasuryDashboard/components/TokenInfo.jsx

import { Grid, Box, Typography, useTheme } from "@mui/material";
import { useAccount, useConfig, useBalance as useBalanceNative } from "wagmi";
import { useNavigate, createSearchParams } from "react-router-dom";

import Token from "../../../components/Token/Token";
import { SecondaryButton } from "../../../components/Button";
import { formatNumber, formatCurrency } from "../../../helpers";
import { DecimalBigNumber } from "../../../helpers/DecimalBigNumber";
import { isNetworkLegacy } from "../../../constants"

import { useBalance, useTokenSymbol } from "../../../hooks/tokens";
import {
    useFtsoPrice,
    useStnkPrice,
    useGhstPrice,
    useReservePrice,
    useNativePrice,
} from "../../../hooks/prices";
import { tokenNameConverter } from "../../../helpers/tokenConverter";

import { EMPTY_ADDRESS, WETH_ADDRESSES } from "../../../constants/addresses";

const TokenTab = ({ isMobileScreen, theme, tokenName, tokenUrl, tokenUrlParams, balance, price, description }) => {
    const navigate = useNavigate();
    const actualBalance = balance ? balance : new DecimalBigNumber(0, 0);

    return (
        <Box position="relative" width={`${isMobileScreen ? "100%" : "48%"}`}>
            <Box
                borderRadius="9px"
                padding="12px"
                sx={{ backgroundColor: theme.colors.paper.card }}
                display="flex"
                flexDirection="column"
                justifyContent="space-between"
            >
                <Box display="flex" gap={"3px"} alignItems="center" justifyContent="space-between">
                    <Box display="flex" gap="10px" alignItems="center">
                        <Token name={tokenName} />
                        <Typography fontSize="24px" fontWeight="500" lineHeight="33px">
                            {tokenName}
                        </Typography>
                    </Box>

                    <Box display="flex" flexDirection="column" alignItems="end" gap="3px">
                        <Typography fontSize="24px" fontWeight="500" lineHeight="33px">
                            {formatCurrency(price ? price : new DecimalBigNumber(0, 0), 2)}
                        </Typography>
                        <Typography fontSize="12px" fontWeight="450" lineHeight="12px" color={theme.colors.gray[40]}>
                            {formatNumber(actualBalance, 5)} {tokenName}
                        </Typography>
                    </Box>
                </Box>
                <>
                    <Box my="18px">
                        <Typography color={theme.colors.gray[40]} mt="9px">
                            {description}
                        </Typography>
                    </Box>

                    <Box display="flex" justifyContent="center" width="100%">
                        <SecondaryButton
                            onClick={() => tokenUrlParams
                                ? navigate({
                                    pathname: tokenUrl,
                                    search: tokenUrlParams.toString()
                                })
                                : window.open(tokenUrl, '_blank')
                            }
                            fullWidth
                        >
                            Get {tokenName}
                        </SecondaryButton>
                    </Box>
                </>
            </Box>
        </Box>
    )
}

const TokenInfo = ({ chainId, isMobileScreen }) => {
    const theme = useTheme();
    const { address } = useAccount();

    const config = useConfig();
    const nativeSymbol = config?.getClient()?.chain?.nativeCurrency?.symbol;
    const networkName = config?.getClient()?.chain?.name;

    const nativePrice = useNativePrice(chainId);
    const ftsoPrice = useFtsoPrice(chainId);
    const stnkPrice = useStnkPrice(chainId);
    const ghstPrice = useGhstPrice(chainId);
    const reservePrice = useReservePrice(chainId);

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

    const { data: nativeBalance } = useBalanceNative({ address });
    const { balance: ftsoBalance, contractAddress: ftsoAddress } = useBalance(chainId, "FTSO", address);
    const { balance: stnkBalance, contractAddress: stnkAddress } = useBalance(chainId, "STNK", address);
    const { balance: ghstBalance, contractAddress: ghstAddress } = useBalance(chainId, "GHST", address);
    const { balance: reserveBalance, contractAddress: reserveAddress } = useBalance(chainId, "RESERVE", address);

    return (
        <Grid container spacing={0} justifyContent={"center"}>
            <Box display="flex" flexWrap="wrap" justifyContent="space-between" mt="10px" gap="25px">
                <TokenTab
                    isMobileScreen={isMobileScreen}
                    tokenUrl="/dex/uniswap"
                    tokenUrlParams={createSearchParams({
                        from: `${reserveAddress}`,
                        to: `${ftsoAddress}`,
                    })}
                    theme={theme}
                    tokenName={ftsoSymbol}
                    balance={ftsoBalance}
                    price={ftsoPrice}
                    description={`${ftsoSymbol} is the native token of the ghostDAO protocol, fully backed by stablecoin reserves held in the ghostDAO treasury.`}
                />
                <TokenTab
                    isMobileScreen={isMobileScreen}
                    tokenUrl="/dex/uniswap"
                    tokenUrlParams={createSearchParams({
                        from: `${reserveAddress}`,
                        to: `${stnkAddress}`,
                    })}
                    theme={theme}
                    tokenName={stnkSymbol}
                    balance={stnkBalance}
                    price={stnkPrice}
                    description={`${stnkSymbol} is a receipt for staked ${ftsoSymbol}, growing with staking rewards. When unstaked, it’s burned for ${ftsoSymbol} at a 1:1 ratio.`}
                />
                <TokenTab
                    isMobileScreen={isMobileScreen}
                    tokenUrl="/dex/uniswap"
                    tokenUrlParams={createSearchParams({
                        from: `${reserveAddress}`,
                        to: `${ghstAddress}`,
                    })}
                    theme={theme}
                    tokenName={ghstSymbol}
                    balance={ghstBalance}
                    price={ghstPrice}
                    description={`${ghstSymbol} is the governance token enabling pure Web3 cross-chain magic. 1 ${ghstSymbol} =  1 ${ftsoSymbol} x Current Index.`}
                />
                <TokenTab
                    isMobileScreen={isMobileScreen}
                    tokenUrl="/dex/uniswap"
                    tokenUrlParams={createSearchParams({
                        from: `${EMPTY_ADDRESS}`,
                        to: `${WETH_ADDRESSES[chainId]}`,
                    })}
                    theme={theme}
                    tokenName={reserveSymbol}
                    balance={reserveBalance}
                    price={reservePrice}
                    description={isNetworkLegacy(chainId)
                        ? `${ftsoSymbol} is backed by a treasury reserve of crypto assets, with ${reserveSymbol} being the primary and most liquid asset.`
                        : `${reserveSymbol} (Wrapped ${nativeSymbol}) is an ERC-20 token that represents ${nativeSymbol} and is pegged 1:1 to the value of ${nativeSymbol}.`
                    }
                />
            </Box>
            {!isNetworkLegacy(chainId) && (
                <Box width="100%" mt="25px">
                    <TokenTab
                        isMobileScreen={true}
                        tokenUrl={"https://ghostchain.io/faucet/"}
                        theme={theme}
                        tokenName={nativeSymbol}
                        balance={new DecimalBigNumber(nativeBalance?.value ?? 0n, 18)}
                        price={reservePrice}
                        description={`${nativeSymbol} is the native currency of the ${networkName} Network, functioning as the backing asset for the ghostDAO.`}
                    />
                </Box>
            )}
        </Grid>
    )
}

export default TokenInfo;