fix: fot ui bug in swap details dropdown (#7277)

* init

* fix: completely hide tax rows while syncing

* test: use syncing = false for fot tests
This commit is contained in:
cartcrom 2023-09-08 10:27:18 -04:00 committed by GitHub
parent 08e0fb7f4b
commit 1ac1002c37
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 6 deletions

@ -84,8 +84,8 @@ export function AdvancedSwapDetails({ trade, allowedSlippage, syncing = false }:
)} )}
{isClassicTrade(trade) && ( {isClassicTrade(trade) && (
<> <>
<TokenTaxLineItem trade={trade} type="input" /> <TokenTaxLineItem trade={trade} type="input" syncing={syncing} />
<TokenTaxLineItem trade={trade} type="output" /> <TokenTaxLineItem trade={trade} type="output" syncing={syncing} />
<RowBetween> <RowBetween>
<MouseoverTooltip text={<Trans>The impact your trade has on the market price of this pool.</Trans>}> <MouseoverTooltip text={<Trans>The impact your trade has on the market price of this pool.</Trans>}>
<ThemedText.BodySmall color="neutral2"> <ThemedText.BodySmall color="neutral2">
@ -182,7 +182,17 @@ export function AdvancedSwapDetails({ trade, allowedSlippage, syncing = false }:
) )
} }
function TokenTaxLineItem({ trade, type }: { trade: ClassicTrade; type: 'input' | 'output' }) { function TokenTaxLineItem({
trade,
type,
syncing,
}: {
trade: ClassicTrade
type: 'input' | 'output'
syncing: boolean
}) {
if (syncing) return null
const [currency, percentage] = const [currency, percentage] =
type === 'input' ? [trade.inputAmount.currency, trade.inputTax] : [trade.outputAmount.currency, trade.outputTax] type === 'input' ? [trade.inputAmount.currency, trade.inputTax] : [trade.outputAmount.currency, trade.outputTax]
@ -203,7 +213,7 @@ function TokenTaxLineItem({ trade, type }: { trade: ClassicTrade; type: 'input'
</> </>
} }
> >
<ThemedText.BodySmall color="textSecondary">{`${currency.symbol} fee`}</ThemedText.BodySmall> <ThemedText.BodySmall color="neutral2">{`${currency.symbol} fee`}</ThemedText.BodySmall>
</MouseoverTooltip> </MouseoverTooltip>
<ThemedText.BodySmall>{formatPriceImpact(percentage)}</ThemedText.BodySmall> <ThemedText.BodySmall>{formatPriceImpact(percentage)}</ThemedText.BodySmall>
</RowBetween> </RowBetween>

@ -51,7 +51,7 @@ describe('SwapDetailsDropdown.tsx', () => {
render( render(
<SwapDetailsDropdown <SwapDetailsDropdown
trade={TEST_TRADE_FEE_ON_SELL} trade={TEST_TRADE_FEE_ON_SELL}
syncing={true} syncing={false}
loading={true} loading={true}
allowedSlippage={TEST_ALLOWED_SLIPPAGE} allowedSlippage={TEST_ALLOWED_SLIPPAGE}
/> />
@ -70,7 +70,7 @@ describe('SwapDetailsDropdown.tsx', () => {
render( render(
<SwapDetailsDropdown <SwapDetailsDropdown
trade={TEST_TRADE_FEE_ON_BUY} trade={TEST_TRADE_FEE_ON_BUY}
syncing={true} syncing={false}
loading={true} loading={true}
allowedSlippage={TEST_ALLOWED_SLIPPAGE} allowedSlippage={TEST_ALLOWED_SLIPPAGE}
/> />