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:
parent
08e0fb7f4b
commit
1ac1002c37
@ -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}
|
||||||
/>
|
/>
|
||||||
|
Loading…
Reference in New Issue
Block a user