import { ChainId } from "@certusone/wormhole-sdk"; import { Checkbox, CircularProgress, FormControl, ListItemText, makeStyles, MenuItem, Paper, Select, TextField, Tooltip, Typography, withStyles, } from "@material-ui/core"; import { InfoOutlined } from "@material-ui/icons"; import { ToggleButton, ToggleButtonGroup } from "@material-ui/lab"; import { useCallback, useMemo, useState } from "react"; import useNotionalTransferred from "../../hooks/useNotionalTransferred"; import { COLORS } from "../../muiTheme"; import { CHAINS_BY_ID } from "../../utils/consts"; import { TIME_FRAMES } from "./Charts/TimeFrame"; import { createCumulativeTransferChartData, createCumulativeTransactionData, formatTransactionCount, } from "./Charts/utils"; import VolumeAreaChart from "./Charts/VolumeAreaChart"; import VolumeStackedBarChart from "./Charts/VolumeStackedBarChart"; import VolumeLineChart from "./Charts/VolumeLineChart"; import TransactionsAreaChart from "./Charts/TransactionsAreaChart"; import TransactionsLineChart from "./Charts/TransactionsLineChart"; import useTransactionTotals from "../../hooks/useTransactionTotals"; const DISPLAY_BY_VALUES = ["Dollar", "Percent", "Transactions"]; const useStyles = makeStyles((theme) => ({ description: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "16px", [theme.breakpoints.down("xs")]: { flexDirection: "column", }, }, displayBy: { display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", marginBottom: "16px", [theme.breakpoints.down("xs")]: { justifyContent: "center", columnGap: 8, rowGap: 8, }, }, mainPaper: { display: "flex", flexDirection: "column", backgroundColor: COLORS.whiteWithTransparency, padding: "2rem", marginBottom: theme.spacing(8), borderRadius: 8, }, toggleButton: { textTransform: "none", }, tooltip: { margin: 8, }, alignCenter: { margin: "0 auto", display: "block", }, })); const tooltipStyles = { tooltip: { minWidth: "max-content", borderRadius: "4px", backgroundColor: "#5EA1EC", color: "#0F0C48", fontSize: "14px", }, }; const StyledTooltip = withStyles(tooltipStyles)(Tooltip); const VolumeStats = () => { const classes = useStyles(); const [displayBy, setDisplayBy] = useState(DISPLAY_BY_VALUES[0]); const [timeFrame, setTimeFrame] = useState("All time"); const [selectedChains, setSelectedChains] = useState([]); const notionalTransferred = useNotionalTransferred(); const transferData = useMemo(() => { return notionalTransferred.data ? createCumulativeTransferChartData( notionalTransferred.data, TIME_FRAMES[timeFrame] ) : []; }, [notionalTransferred, timeFrame]); const transferredAllTime = useMemo(() => { return notionalTransferred.data ? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0, }).format(notionalTransferred.data.Total || 0) : ""; }, [notionalTransferred]); const transactionTotals = useTransactionTotals(); const transactionData = useMemo(() => { return transactionTotals.data ? createCumulativeTransactionData( transactionTotals.data, TIME_FRAMES[timeFrame] ) : []; }, [transactionTotals, timeFrame]); const transactionsAllTime = useMemo(() => { const totalTransactions = transactionData[transactionData.length - 1]?.totalTransactions; return totalTransactions !== undefined ? formatTransactionCount(totalTransactions) : ""; }, [transactionData]); const availableChains = useMemo(() => { const chainIds = notionalTransferred.data ? Object.keys( Object.values(notionalTransferred.data.Daily)[0] || {} ).reduce((chainIds, key) => { if (key !== "*") { const chainId = parseInt(key) as ChainId; if (CHAINS_BY_ID[chainId] !== undefined) { chainIds.push(chainId); } } return chainIds; }, []) : []; setSelectedChains(chainIds); return chainIds; }, [notionalTransferred]); const handleDisplayByChange = useCallback((event, nextValue) => { if (nextValue !== null) { setDisplayBy(nextValue); } }, []); const handleTimeFrameChange = useCallback( (event) => setTimeFrame(event.target.value), [] ); const handleSelectedChainsChange = useCallback( (event) => { const value = event.target.value; if (value[value.length - 1] === "all") { setSelectedChains((prevValue) => prevValue.length === availableChains.length ? [] : availableChains ); } else { setSelectedChains(value); } }, [availableChains] ); const allChainsSelected = selectedChains.length === availableChains.length; return ( <>
{displayBy === "Transactions" ? "Transaction Count" : "Outbound Volume"} {displayBy === "Transactions" ? transactionsAllTime : transferredAllTime}
Display by {DISPLAY_BY_VALUES.map((value) => ( {value} ))}
{Object.keys(TIME_FRAMES).map((timeFrame) => ( {timeFrame} ))}
{displayBy === "Dollar" ? ( notionalTransferred.data ? ( allChainsSelected ? ( ) : ( ) ) : ( ) ) : displayBy === "Percent" ? ( ) : transactionTotals.data ? ( allChainsSelected ? ( ) : ( ) ) : ( )} ); }; export default VolumeStats;