import classNames from 'classnames' import { useMemo } from 'react' import ActionButton from 'components/Button/ActionButton' import useSwapRoute from 'hooks/useSwapRoute' import { getAssetByDenom } from 'utils/assets' import { hardcodedFee } from 'utils/constants' import { formatAmountWithSymbol, formatPercent } from 'utils/formatters' interface Props { buyAsset: Asset sellAsset: Asset borrowRate?: number | null buyButtonDisabled: boolean containerClassName?: string showProgressIndicator: boolean isMargin?: boolean borrowAmount: BigNumber buyAction: () => void } export default function TradeSummary(props: Props) { const { buyAsset, sellAsset, borrowRate, buyAction, buyButtonDisabled, containerClassName, isMargin, borrowAmount, showProgressIndicator, } = props const { data: routes, isLoading: isRouteLoading } = useSwapRoute(sellAsset.denom, buyAsset.denom) const parsedRoutes = useMemo(() => { if (!routes.length) return '-' const routeSymbols = routes.map((r) => getAssetByDenom(r.token_out_denom)?.symbol) routeSymbols.unshift(sellAsset.symbol) return routeSymbols.join(' -> ') }, [routes, sellAsset.symbol]) const buttonText = useMemo( () => (routes.length ? `Buy ${buyAsset.symbol}` : 'No route found'), [buyAsset.symbol, routes], ) return (
Summary
Fees {formatAmountWithSymbol(hardcodedFee.amount[0])}
{isMargin && ( <>
Borrowing {formatAmountWithSymbol({ denom: sellAsset.denom, amount: borrowAmount.toString(), })}
Borrow rate {formatPercent(borrowRate || 0)}
)}
Route {parsedRoutes}
) } const className = { container: 'flex flex-1 flex-col bg-white bg-opacity-5 rounded border-[1px] border-white border-opacity-20 ', title: 'text-xs font-bold mb-2', summaryWrapper: 'flex flex-1 flex-col m-3', infoLine: 'flex flex-1 flex-row text-xs text-white justify-between mb-1', infoLineLabel: 'opacity-40', }