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 { gasAmountAccordionStyles } from '../../../components/Fees/FeeStyles';
import { FormattedFee } from '../functions/swapFees';
import { FeesBreakdown } from '../../../components/FeesBreakdown/FeesBreakdown';
interface FeesProps {
gasFeeToken?: TokenInfo;
feeFiatValue: number | null;
fees: FormattedFee[];
onFeesClick?: () => void;
loading: boolean;
sx?: SxProps;
}
export function Fees({
gasFeeToken, feeFiatValue, fees, onFeesClick, loading, sx,
}: FeesProps) {
const [showFeeBreakdown, setShowFeeBreakdown] = useState(false);
const { t } = useTranslation();
if (!loading && !feeFiatValue) return null;
const viewFees = () => {
setShowFeeBreakdown(true);
onFeesClick?.();
};
return (
<>
{t('drawers.feesBreakdown.heading')}
{loading && (
\')',
}}
rc={}
>
}
/>
)}
{!loading && (
)}
setShowFeeBreakdown(false)}
/>
);
}