b35c743286
* fix(useSWR): request hooks revalidation on focus disabled * [trade] add margin * [trade] include borrow rate in receipt * [trade] add tooltip margin and pr comments * updated regardign comments --------- Co-authored-by: Yusuf Seyrek <yusuf@delphilabs.io>
102 lines
3.1 KiB
TypeScript
102 lines
3.1 KiB
TypeScript
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 (
|
|
<div className={classNames(containerClassName, className.container)}>
|
|
<div className={className.summaryWrapper}>
|
|
<span className={className.title}>Summary</span>
|
|
<div className={className.infoLine}>
|
|
<span className={className.infoLineLabel}>Fees</span>
|
|
<span>{formatAmountWithSymbol(hardcodedFee.amount[0])}</span>
|
|
</div>
|
|
{isMargin && (
|
|
<>
|
|
<div className={className.infoLine}>
|
|
<span className={className.infoLineLabel}>Borrowing</span>
|
|
<span>
|
|
{formatAmountWithSymbol({
|
|
denom: sellAsset.denom,
|
|
amount: borrowAmount.toString(),
|
|
})}
|
|
</span>
|
|
</div>
|
|
<div className={className.infoLine}>
|
|
<span className={className.infoLineLabel}>Borrow rate</span>
|
|
<span>{formatPercent(borrowRate || 0)}</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<div className={className.infoLine}>
|
|
<span className={className.infoLineLabel}>Route</span>
|
|
<span>{parsedRoutes}</span>
|
|
</div>
|
|
</div>
|
|
<ActionButton
|
|
disabled={routes.length === 0 || buyButtonDisabled}
|
|
showProgressIndicator={showProgressIndicator || isRouteLoading}
|
|
text={buttonText}
|
|
onClick={buyAction}
|
|
size='md'
|
|
color='primary'
|
|
className='w-full'
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
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',
|
|
}
|