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) && (
<>
<TokenTaxLineItem trade={trade} type="input" />
<TokenTaxLineItem trade={trade} type="output" />
<TokenTaxLineItem trade={trade} type="input" syncing={syncing} />
<TokenTaxLineItem trade={trade} type="output" syncing={syncing} />
<RowBetween>
<MouseoverTooltip text={<Trans>The impact your trade has on the market price of this pool.</Trans>}>
<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] =
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>
<ThemedText.BodySmall>{formatPriceImpact(percentage)}</ThemedText.BodySmall>
</RowBetween>

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