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 (