show borrow fee in swap review

This commit is contained in:
saml33 2023-05-14 21:33:01 +10:00
parent c8edebc1fc
commit 50e567b278
9 changed files with 72 additions and 70 deletions

View File

@ -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')}

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -24,6 +24,7 @@
"receive": "你将获取",
"received": "获取",
"review-swap": "检视换币",
"route-info": "Route Info",
"show-fees": "显示费用",
"show-swap-history": "显示换币纪录价格来自CoinGecko而也许跟换币价格不同",
"slippage": "下滑",

View File

@ -24,6 +24,7 @@
"receive": "你將獲取",
"received": "獲取",
"review-swap": "檢視換幣",
"route-info": "Route Info",
"show-fees": "顯示費用",
"show-swap-history": "顯示換幣紀錄價格來自CoinGecko而也許跟換幣價格不同",
"slippage": "下滑",