import { Body, Box, ButtCon, } from '@biom3/react'; import { useContext } from 'react'; import { useTranslation } from 'react-i18next'; import { coinInfoButtonStyle, totalTokenBalanceStyle, totalTokenBalanceValueStyle, } from './TotalTokenBalanceStyles'; import { ViewActions, ViewContext, } from '../../../../context/view-context/ViewContext'; import { WalletWidgetViews } from '../../../../context/view-context/WalletViewContextTypes'; interface TotalTokenBalanceProps { totalBalance: number; loading: boolean; } export function TotalTokenBalance(props: TotalTokenBalanceProps) { const { t } = useTranslation(); const { viewDispatch } = useContext(ViewContext); const { totalBalance, loading } = props; return ( {t('views.WALLET_BALANCES.totalTokenBalance.heading')} viewDispatch({ payload: { type: ViewActions.UPDATE_VIEW, view: { type: WalletWidgetViews.COIN_INFO }, }, })} /> {t('views.WALLET_BALANCES.totalTokenBalance.totalHeading')} {!loading && ( ≈ USD $ {totalBalance.toFixed(2)} )} ); }