import { Badge, Body, centerFlexChildren, hFlex, Icon, MenuItem, MenuItemSize, Stack, Sticker, } from '@biom3/react'; import { ReactElement, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; import { getRouteAndTokenBalances } from '../../../../lib/squid/functions/getRouteAndTokenBalances'; import { getTotalRouteFees } from '../../../../lib/squid/functions/getTotalRouteFees'; import { Chain, RouteData } from '../../../../lib/squid/types'; import { getDurationFormatted } from '../../../../functions/getDurationFormatted'; import { getFormattedAmounts } from '../../../../functions/getFormattedNumber'; export interface RouteOptionProps< RC extends ReactElement | undefined = undefined, > { routeData: RouteData; chains: Chain[] | null; onClick: (route: RouteData) => void; disabled?: boolean; isFastest?: boolean; size?: MenuItemSize; rc?: RC; selected?: boolean; } export function RouteOption({ routeData, onClick, chains, disabled = false, isFastest = false, size = 'small', rc = , selected = false, }: RouteOptionProps) { const { t } = useTranslation(); const { fromToken } = routeData.amountData; const { estimate } = routeData.route.route; const chain = chains?.find((c) => c.id === fromToken.chainId); const estimatedDurationFormatted = getDurationFormatted( estimate.estimatedRouteDuration, t('views.PURCHASE.routeSelection.minutesText'), t('views.PURCHASE.routeSelection.minuteText'), t('views.PURCHASE.routeSelection.secondsText'), ); const { totalFeesUsd } = useMemo( () => getTotalRouteFees(routeData.route), [routeData], ); const { routeBalanceUsd } = useMemo( () => getRouteAndTokenBalances(routeData), [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: routeData.route.route.estimate.gasCosts[0].token.symbol, })} )} } direction="row" justifyContent="space-between" sx={{ w: '100%', }} > {estimatedDurationFormatted} {' '} | {' '} { `${t('views.PURCHASE.fees.fee')} ${t('views.PURCHASE.fees.fiatPricePrefix')}${getFormattedAmounts(totalFeesUsd)}` } {isFastest && ( )} ); }