ghost-dao-interface/src/containers/History/StakingViewModal.jsx

import { useTransactionReceipt } from 'wagmi';
import { decodeEventLog } from 'viem';
import { useMemo } from "react";

import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import { Box, Typography, Link } from "@mui/material";

import Token from "../../components/Token/Token";
import Modal from "../../components/Modal/Modal";
import GhostStyledIcon from "../../components/Icon/GhostIcon";
import { PrimaryButton } from "../../components/Button";

import { abi as StakingAbi } from "../../abi/GhostStaking.json";
import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
import { formatNumber, shorten } from "../../helpers";

import { useTokenSymbol } from "../../hooks/tokens";
import { getTokenDecimals } from "../../hooks/helpers";

const TokenBox = ({ tokenAmount, tokenSymbol, decimals, chainTokenSymbol }) => {
    return (
        <Box display="flex" flexDirection="column" width="70px">
            <Token
                parentSx={{
                    height: "80px",
                    "& svg:nth-of-type(2)": {
                        transform: "translate(10%, -50%)",
                        zIndex: 100,
                    }
                }}
                sx={{ transform: "scale(1.65)", }}
                chainTokenName={chainTokenSymbol}
                name={tokenSymbol}
            />

            <Box display="flex" flexDirection="column" alignItems="center">
                <Typography>{tokenSymbol}</Typography>

                <Typography>{formatNumber(
                    new DecimalBigNumber(tokenAmount ? tokenAmount : 0n, decimals),
                    5
                )}</Typography>
            </Box>
        </Box>
    )
}

const StakingViewModal = ({ chainId, isOpen, close, config, historyRecord }) => {
    if (historyRecord === null) return null;

    const { data: receipt, isLoading, error } = useTransactionReceipt({
        hash: historyRecord?.txHash,
        query: {
            enabled: !!historyRecord?.txHash && isOpen,
        }
    });

    const allDecodedLogs = useMemo(() => {
        if (!receipt?.logs) return [];

        return receipt.logs.map((log) => {
            try {
                const decoded = decodeEventLog({
                    abi: StakingAbi,
                    data: log.data,
                    topics: log.topics,
                });

                return {
                    eventName: decoded.eventName,
                    args: decoded.args,
                    address: log.address
                };
            } catch (e) {
                return null;
            }
        }).filter(Boolean);
    }, [receipt]);

    const stakeInfo = useMemo(() => {
        return allDecodedLogs.find(l => l.eventName === 'Staked');
    }, [allDecodedLogs]);

    const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO");
    const ftsoDecimals = getTokenDecimals("FTSO");

    const chainInfo = useMemo(() => {
        const client = config?.getClient();

        return {
            url: client?.chain?.blockExplorers?.default?.url,
            symbol: client?.chain?.nativeCurrency?.symbol,
        };
    }, [config]);

    return (
        <Modal
            maxWidth="420px"
            minHeight="200px"
            open={isOpen}
            headerText={
                <>
                    {stakeInfo && "Staked"}
                    {!stakeInfo && "Parsing Transaction Hash"}
                </>
            }
            onClose={() => close()}
        >
            {stakeInfo && <Box display="flex" flexDirection="column" gap="15px">
                <Box width="100%" display="flex" flexDirection="row" justifyContent="space-between" alignItems="center">
                    <Token
                        parentSx={{
                            height: "80px",
                            paddingLeft: "10px",
                            "& svg:nth-of-type(2)": {
                                transform: "translate(50%, -50%)",
                                zIndex: 100,
                            }
                        }}
                        sx={{ transform: "scale(1.65)", }}
                        chainTokenName={chainInfo.symbol}
                        name={ftsoSymbol ? ftsoSymbol : ""}
                    />

                    <Box flexBasis="75%" display="flex" flexDirection="column">
                        <Box display="flex" justifyContent="space-between">
                            <Typography>Receiver</Typography>
                            <Link
                                href={`${chainInfo.url}/address/${stakeInfo.args.receiver}`}
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                <Typography>{shorten(stakeInfo.args.receiver, 9, -7)}</Typography>
                            </Link>
                        </Box>
                        <Box display="flex" justifyContent="space-between">
                            <Typography>Amount</Typography>
                            <Typography>{formatNumber(
                                new DecimalBigNumber(stakeInfo ? stakeInfo.args.amount : 0n, ftsoDecimals),
                                5
                            )} {ftsoSymbol}</Typography>
                        </Box>
                    </Box>
                </Box>

                <PrimaryButton
                    fullWidth
                    component="a"
                    href={`${chainInfo.url}/tx/${historyRecord.txHash}`}
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    View Transaction Details
                </PrimaryButton>
            </Box>}
        </Modal>
    )
}

export default StakingViewModal;