import {
Accordion,
Body,
Box,
PriceDisplay, ShimmerBox,
SxProps,
} from '@biom3/react';
import { TokenInfo } from '@imtbl/checkout-sdk';
import { useTranslation } from 'react-i18next';
import { useState } from 'react';
import { formatZeroAmount, tokenValueFormat } from '../../lib/utils';
import { FeesBreakdown } from '../FeesBreakdown/FeesBreakdown';
import { gasAmountAccordionStyles, gasAmountHeadingStyles } from './FeeStyles';
import { FormattedFee } from '../../widgets/swap/functions/swapFees';
interface FeesProps {
gasFeeValue: string;
gasFeeToken?: TokenInfo;
gasFeeFiatValue: string;
fees: FormattedFee[];
onFeesClick?: () => void;
loading?: boolean;
sx?: SxProps;
}
export function Fees({
gasFeeValue, gasFeeToken, gasFeeFiatValue, fees, onFeesClick, loading, sx,
}: FeesProps) {
const [showFeeBreakdown, setShowFeeBreakdown] = useState(false);
const { t } = useTranslation();
if (!gasFeeValue && !loading) return null;
const gasFee = formatZeroAmount(tokenValueFormat(gasFeeValue));
const gasTokenSymbol = gasFeeToken?.symbol;
const viewFees = () => {
setShowFeeBreakdown(true);
onFeesClick?.();
};
return (
<>
{t('drawers.feesBreakdown.heading')}
{loading && (
\')',
}}
rc={}
>
}
/>
)}
{!loading && (
)}
setShowFeeBreakdown(false)}
/>
);
}