show borrow fee in swap review
This commit is contained in:
parent
c8edebc1fc
commit
50e567b278
|
@ -367,7 +367,7 @@ const SwapReviewRouteInfo = ({
|
|||
<ArrowLeftIcon className="h-5 w-5" />
|
||||
</IconButton>
|
||||
<div className="flex justify-center bg-gradient-to-t from-th-bkg-1 to-th-bkg-2 p-6 pb-0">
|
||||
<div className="mb-4 flex w-full flex-col items-center border-b border-th-bkg-3 pb-4">
|
||||
<div className="mb-3 flex w-full flex-col items-center border-b border-th-bkg-3 pb-4">
|
||||
<div className="relative mb-2 w-[72px]">
|
||||
<Image alt="" width="40" height="40" src={inputTokenIconUri} />
|
||||
<div className="absolute right-0 top-0">
|
||||
|
@ -385,7 +385,7 @@ const SwapReviewRouteInfo = ({
|
|||
<FormatNumericValue value={amountIn} />
|
||||
</span>{' '}
|
||||
{inputTokenInfo?.symbol}
|
||||
<ArrowRightIcon className="mx-2 h-5 w-5 text-th-fgd-4" />
|
||||
<ArrowRightIcon className="mx-2 h-5 w-5 text-th-fgd-2" />
|
||||
<span className="mr-1 font-mono text-th-fgd-1">
|
||||
<FormatNumericValue value={amountOut} />
|
||||
</span>{' '}
|
||||
|
@ -511,9 +511,7 @@ const SwapReviewRouteInfo = ({
|
|||
</>
|
||||
}
|
||||
>
|
||||
<span className="tooltip-underline">
|
||||
{t('swap:price-impact')}
|
||||
</span>
|
||||
<p className="tooltip-underline">{t('swap:price-impact')}</p>
|
||||
</Tooltip>
|
||||
<p className="text-right font-mono text-sm text-th-fgd-2">
|
||||
{selectedRoute?.priceImpactPct * 100 < 0.1
|
||||
|
@ -522,39 +520,67 @@ const SwapReviewRouteInfo = ({
|
|||
</p>
|
||||
</div>
|
||||
{borrowAmount ? (
|
||||
<div className="flex justify-between">
|
||||
<Tooltip
|
||||
content={
|
||||
balance
|
||||
? t('swap:tooltip-borrow-balance', {
|
||||
balance: formatNumericValue(balance),
|
||||
borrowAmount: formatNumericValue(borrowAmount),
|
||||
token: inputTokenInfo?.symbol,
|
||||
rate: formatNumericValue(
|
||||
inputBank!.getBorrowRateUi(),
|
||||
2
|
||||
),
|
||||
})
|
||||
: t('swap:tooltip-borrow-no-balance', {
|
||||
borrowAmount: formatNumericValue(borrowAmount),
|
||||
token: inputTokenInfo?.symbol,
|
||||
rate: formatNumericValue(
|
||||
inputBank!.getBorrowRateUi(),
|
||||
2
|
||||
),
|
||||
})
|
||||
}
|
||||
delay={100}
|
||||
>
|
||||
<p className="tooltip-underline text-sm text-th-fgd-3">
|
||||
{t('borrow-amount')}
|
||||
<>
|
||||
<div className="flex justify-between">
|
||||
<Tooltip
|
||||
content={
|
||||
balance
|
||||
? t('swap:tooltip-borrow-balance', {
|
||||
balance: formatNumericValue(balance),
|
||||
borrowAmount: formatNumericValue(borrowAmount),
|
||||
token: inputTokenInfo?.symbol,
|
||||
rate: formatNumericValue(
|
||||
inputBank!.getBorrowRateUi(),
|
||||
2
|
||||
),
|
||||
})
|
||||
: t('swap:tooltip-borrow-no-balance', {
|
||||
borrowAmount: formatNumericValue(borrowAmount),
|
||||
token: inputTokenInfo?.symbol,
|
||||
rate: formatNumericValue(
|
||||
inputBank!.getBorrowRateUi(),
|
||||
2
|
||||
),
|
||||
})
|
||||
}
|
||||
delay={100}
|
||||
>
|
||||
<p className="tooltip-underline">{t('borrow-amount')}</p>
|
||||
</Tooltip>
|
||||
<p className="text-right font-mono text-sm text-th-fgd-2">
|
||||
<FormatNumericValue value={borrowAmount} />{' '}
|
||||
<span className="font-body text-th-fgd-3">
|
||||
{inputTokenInfo?.symbol}
|
||||
</span>
|
||||
</p>
|
||||
</Tooltip>
|
||||
<p className="text-right font-mono text-sm text-th-fgd-2">
|
||||
~<FormatNumericValue value={borrowAmount} />{' '}
|
||||
<span className="font-body">{inputTokenInfo?.symbol}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<Tooltip
|
||||
content={t('loan-origination-fee-tooltip', {
|
||||
fee: `${(
|
||||
inputBank!.loanOriginationFeeRate.toNumber() * 100
|
||||
).toFixed(3)}%`,
|
||||
})}
|
||||
delay={100}
|
||||
>
|
||||
<p className="tooltip-underline">
|
||||
{t('loan-origination-fee')}
|
||||
</p>
|
||||
</Tooltip>
|
||||
<p className="text-right font-mono text-th-fgd-2">
|
||||
<FormatNumericValue
|
||||
value={
|
||||
borrowAmount *
|
||||
inputBank!.loanOriginationFeeRate.toNumber()
|
||||
}
|
||||
decimals={inputBank!.mintDecimals}
|
||||
/>{' '}
|
||||
<span className="font-body text-th-fgd-3">
|
||||
{inputBank!.name}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -584,7 +610,7 @@ const SwapReviewRouteInfo = ({
|
|||
open ? 'mb-2 rounded-b-none' : ''
|
||||
}`}
|
||||
>
|
||||
<p>{open ? t('swap:hide-fees') : t('swap:show-fees')}</p>
|
||||
<p>{t('swap:route-info')}</p>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
|
@ -592,35 +618,6 @@ const SwapReviewRouteInfo = ({
|
|||
/>
|
||||
</Disclosure.Button>
|
||||
<Disclosure.Panel className="space-y-2 p-3 pt-0">
|
||||
{borrowAmount ? (
|
||||
<div className="flex justify-between">
|
||||
<Tooltip
|
||||
content={t('loan-origination-fee-tooltip', {
|
||||
fee: `${(
|
||||
inputBank!.loanOriginationFeeRate.toNumber() * 100
|
||||
).toFixed(3)}%`,
|
||||
})}
|
||||
delay={100}
|
||||
>
|
||||
<p className="tooltip-underline">
|
||||
{t('loan-origination-fee')}
|
||||
</p>
|
||||
</Tooltip>
|
||||
<p className="text-right font-mono text-th-fgd-2">
|
||||
~
|
||||
<FormatNumericValue
|
||||
value={
|
||||
borrowAmount *
|
||||
inputBank!.loanOriginationFeeRate.toNumber()
|
||||
}
|
||||
decimals={inputBank!.mintDecimals}
|
||||
/>{' '}
|
||||
<span className="font-body text-th-fgd-4">
|
||||
{inputBank!.name}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-th-fgd-3">
|
||||
{t('swap:swap-route')}
|
||||
|
|
|
@ -93,7 +93,7 @@
|
|||
"liquidity": "Liquidity",
|
||||
"loading": "Loading",
|
||||
"loan-origination-fee": "Borrow Fee",
|
||||
"loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow.",
|
||||
"loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow",
|
||||
"mango": "Mango",
|
||||
"mango-stats": "Mango Stats",
|
||||
"market": "Market",
|
||||
|
|
|
@ -23,6 +23,7 @@
|
|||
"receive": "You Receive",
|
||||
"received": "Received",
|
||||
"review-swap": "Review Swap",
|
||||
"route-info": "Route Info",
|
||||
"show-fees": "Show Fees",
|
||||
"show-swap-history": "Show Swap History – Prices shown are from CoinGecko and may not match your swap price",
|
||||
"slippage": "Slippage",
|
||||
|
|
|
@ -93,7 +93,7 @@
|
|||
"liquidity": "Liquidity",
|
||||
"loading": "Loading",
|
||||
"loan-origination-fee": "Borrow Fee",
|
||||
"loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow.",
|
||||
"loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow",
|
||||
"mango": "Mango",
|
||||
"mango-stats": "Mango Stats",
|
||||
"market": "Market",
|
||||
|
|
|
@ -23,6 +23,7 @@
|
|||
"receive": "You Receive",
|
||||
"received": "Received",
|
||||
"review-swap": "Review Swap",
|
||||
"route-info": "Route Info",
|
||||
"show-fees": "Show Fees",
|
||||
"show-swap-history": "Show Swap History – Prices shown are from CoinGecko and may not match your swap price",
|
||||
"slippage": "Slippage",
|
||||
|
|
|
@ -93,7 +93,7 @@
|
|||
"liquidity": "Liquidity",
|
||||
"loading": "Loading",
|
||||
"loan-origination-fee": "Borrow Fee",
|
||||
"loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow.",
|
||||
"loan-origination-fee-tooltip": "{{fee}} fee for opening a borrow",
|
||||
"mango": "Mango",
|
||||
"mango-stats": "Mango Stats",
|
||||
"market": "Market",
|
||||
|
|
|
@ -23,6 +23,7 @@
|
|||
"receive": "You Receive",
|
||||
"received": "Received",
|
||||
"review-swap": "Review Swap",
|
||||
"route-info": "Route Info",
|
||||
"show-fees": "Show Fees",
|
||||
"show-swap-history": "Show Swap History – Prices shown are from CoinGecko and may not match your swap price",
|
||||
"slippage": "Slippage",
|
||||
|
|
|
@ -24,6 +24,7 @@
|
|||
"receive": "你将获取",
|
||||
"received": "获取",
|
||||
"review-swap": "检视换币",
|
||||
"route-info": "Route Info",
|
||||
"show-fees": "显示费用",
|
||||
"show-swap-history": "显示换币纪录–价格来自CoinGecko而也许跟换币价格不同",
|
||||
"slippage": "下滑",
|
||||
|
|
|
@ -24,6 +24,7 @@
|
|||
"receive": "你將獲取",
|
||||
"received": "獲取",
|
||||
"review-swap": "檢視換幣",
|
||||
"route-info": "Route Info",
|
||||
"show-fees": "顯示費用",
|
||||
"show-swap-history": "顯示換幣紀錄–價格來自CoinGecko而也許跟換幣價格不同",
|
||||
"slippage": "下滑",
|
||||
|
|
Loading…
Reference in New Issue