import { Badge, Body, centerFlexChildren, hFlex, Icon, MenuItem, MenuItemSize, Stack, Sticker, } from '@biom3/react'; import { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; import { Chain } from '../../../../lib/squid/types'; import { getDurationFormatted } from '../../../../functions/getDurationFormatted'; import { getFormattedAmounts } from '../../../../functions/getFormattedNumber'; import { DirectCryptoPayData } from '../../types'; import { getRouteAndTokenBalancesForDirectCryptoPay } from '../../functions/getRouteAndBalancesForDirectCryptoPay'; export interface DirectCryptoPayOptionProps< RC extends ReactElement | undefined = undefined, > { routeData: DirectCryptoPayData; chains: Chain[] | null; onClick: (route: DirectCryptoPayData) => void; disabled?: boolean; isFastest?: boolean; size?: MenuItemSize; rc?: RC; selected?: boolean; } export function DirectCryptoPayOption({ routeData, onClick, chains, disabled = false, isFastest = false, size = 'small', rc = , selected = false, }: DirectCryptoPayOptionProps) { const { t } = useTranslation(); const { fromToken } = routeData.amountData; const estimate = 0; const gasTokenSymbol = 'IMX'; const totalFeesUsd = 0; const chain = chains?.find((c) => c.id === fromToken.chainId); const estimatedDurationFormatted = getDurationFormatted( estimate, t('views.PURCHASE.routeSelection.minutesText'), t('views.PURCHASE.routeSelection.minuteText'), t('views.PURCHASE.routeSelection.secondsText'), ); const { routeBalanceUsd, } = getRouteAndTokenBalancesForDirectCryptoPay(routeData); const handleClick = () => { onClick(routeData); }; const menuItemProps = { selected, disabled, emphasized: true, rc, size, onClick: disabled ? undefined : handleClick, }; return ( {' '} {fromToken.name} {' '} {t('views.PURCHASE.routeOption.on')} {' '} {chain?.name} {chain && ( } size="xSmall" /> } /> )} {`${t('views.PURCHASE.fees.balance')} ${t('views.PURCHASE.fees.fiatPricePrefix')}${routeBalanceUsd}`} {routeData.isInsufficientGas && ( <>
{t('views.PURCHASE.noGasRouteMessage', { token: gasTokenSymbol, })} )} } direction="row" justifyContent="space-between" sx={{ w: '100%', }} > {estimatedDurationFormatted} {' '} | {' '} { `${t('views.PURCHASE.fees.fee')} ${t('views.PURCHASE.fees.fiatPricePrefix')}${getFormattedAmounts(totalFeesUsd)}` } {isFastest && ( )} ); }