feat: add l2 chain logo to modal (#6575)
* test: swap flow cypress tests * fix: use default parameter * feat: use Swap Component on TDP * feat: auto nav for TDP tokens * chore: merge * chore: merge * chore: merge * chore: merge * fix: remove extra inputCurrency URL parsing logic * fix: undo last change * fix: pass expected chain id to swap component * fix: search for default tokens on unconnected networks if needed * test: e2e test for l2 token * fix: delete irrelevant tests * fix: address comments * fix: lint error * test: update TDP e2e tests * fix: use pageChainId for filter * fix: rename chainId * fix: typecheck * fix: chainId bug * fix: chainId required fixes * fix: bad merge in e2e test * fix: remove unused test util * fix: remove unnecessary variable * fix: token defaults * fix: address comments * fix: address comments and fix tests * fix: e2e test formatting, remove Maybe<> * fix: remove unused variable * fix: use feature flag for swap component on TDP * fix: back button * feat: copy review screen UI from widgetg * fix: modal padding * feat: add final detail row * fix: remove widget comment * fix: update unit tests * fix: code style consistency * fix: remove padding from AutoColumn * fix: update snapshots * fix: use semantic gaps * fix: more px and gaps * fix: design feedbacks * fix: button radius in summary modal * fix: design nits * feat: update design of summary modal * fix: font weight and vertical spacing * fix: update snapshots * fix: css nits * wip: move approval to summary modal * wip: not working * feat: working * fix: fix flow * feat: simplify states and build new modal UI * feat: todos and differs fix * feat: update tx status modal * feat: split up approve and permit * feat: error state * feat: update success and error states * feat: undo changes to TxConfirmationModal * feat: re-order functions * wip: move approval to summary modal * wip: not working * feat: update permit2 e2e tests * feat: tests passing * fix: swap test * fix: bad merge * wip: move approval to summary modal * wip: not working * feat: PendingModalContent tests * feat: useMaxAmountIn * fix: bad merge * fix: naming * fix: modal flicker when refetching trade * wip: move approval to summary modal * wip: not working * feat: working * fix: fix flow * feat: simplify states and build new modal UI * feat: todos and differs fix * feat: update tx status modal * feat: split up approve and permit * feat: error state * feat: update success and error states * feat: undo changes to TxConfirmationModal * feat: remove step indicators when only one step * feat: move content into PendingModalContent component * fix: lint * chore: merge * fix: update tests for new modal * feat: add l2 chain logo to modal * feat: add unit test * fix: correct modal state when moving between steps * fix: comments * fix: code style improvements * feat: require trade to be defined * fix: remove extra props from ThemedTexts * fix: one more trans * fix: remove unused export * feat: remove undefined checks and other fixes * fix: update test * fix: add missing dollar sign * fix: remove null check and update test * fix: remove max width from detail row value * fix: remove isOpen prop * fix: isopen * feat: refactor approval flow into a hook * fix: testid fix * fix: tradeMeaningfullyDiffers improvement and prepareFlow fix * fix: address comments * fix: headerContent prop * feat: add comments explaining async state * fix: test updates * fix: nits * fix: reduce nesting * fix: address comments * test: remove line from test for debugging * fix: update tests * fix: address comments * fix: update tests * fix: more nesting in test * fix: update test * fix: reorganize test code
This commit is contained in:
eddie
GitHub
parent
07527bab26
commit
0f5e871054
@ -0,0 +1,31 @@
|
||||
import { render, screen } from 'test-utils/render'
|
||||
import noop from 'utils/noop'
|
||||
|
||||
import { ConfirmationModalContent } from '.'
|
||||
|
||||
describe('ConfirmationModalContent', () => {
|
||||
it('should render the L2 icon for optimism', () => {
|
||||
render(
|
||||
<ConfirmationModalContent
|
||||
title="title"
|
||||
onDismiss={noop}
|
||||
topContent={() => <div>topContent</div>}
|
||||
bottomContent={() => <div>bottomContent</div>}
|
||||
headerContent={() => <div data-testid="confirmation-modal-chain-icon">headerContent</div>}
|
||||
/>
|
||||
)
|
||||
expect(screen.getByTestId('confirmation-modal-chain-icon')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('should not render a chain icon', () => {
|
||||
render(
|
||||
<ConfirmationModalContent
|
||||
title="title"
|
||||
onDismiss={jest.fn()}
|
||||
topContent={() => <div>topContent</div>}
|
||||
bottomContent={() => <div>bottomContent</div>}
|
||||
/>
|
||||
)
|
||||
expect(screen.queryByTestId('confirmation-modal-chain-icon')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@ -39,7 +39,7 @@ const ConfirmedIcon = styled(ColumnCenter)<{ inline?: boolean }>`
|
||||
padding: ${({ inline }) => (inline ? '20px 0' : '32px 0;')};
|
||||
`
|
||||
|
||||
const StyledLogo = styled.img`
|
||||
export const StyledLogo = styled.img`
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin-left: 6px;
|
||||
@ -173,16 +173,19 @@ export function ConfirmationModalContent({
|
||||
bottomContent,
|
||||
onDismiss,
|
||||
topContent,
|
||||
headerContent,
|
||||
}: {
|
||||
title: ReactNode
|
||||
onDismiss: () => void
|
||||
topContent: () => ReactNode
|
||||
bottomContent?: () => ReactNode | undefined
|
||||
bottomContent?: () => ReactNode
|
||||
headerContent?: () => ReactNode
|
||||
}) {
|
||||
return (
|
||||
<Wrapper>
|
||||
<AutoColumn gap="sm">
|
||||
<Row>
|
||||
{headerContent?.()}
|
||||
<Row justify="center" marginLeft="24px">
|
||||
<ThemedText.SubHeader>{title}</ThemedText.SubHeader>
|
||||
</Row>
|
||||
|
||||
@ -8,18 +8,22 @@ import {
|
||||
} from '@uniswap/analytics-events'
|
||||
import { Percent } from '@uniswap/sdk-core'
|
||||
import { useWeb3React } from '@web3-react/core'
|
||||
import Badge from 'components/Badge'
|
||||
import Modal, { MODAL_TRANSITION_DURATION } from 'components/Modal'
|
||||
import { RowFixed } from 'components/Row'
|
||||
import { getChainInfo } from 'constants/chainInfo'
|
||||
import { useMaxAmountIn } from 'hooks/useMaxAmountIn'
|
||||
import { Allowance, AllowanceState } from 'hooks/usePermit2Allowance'
|
||||
import usePrevious from 'hooks/usePrevious'
|
||||
import { getPriceUpdateBasisPoints } from 'lib/utils/analytics'
|
||||
import { ReactNode, useCallback, useEffect, useState } from 'react'
|
||||
import { InterfaceTrade } from 'state/routing/types'
|
||||
import { isL2ChainId } from 'utils/chains'
|
||||
import { formatSwapPriceUpdatedEventProperties } from 'utils/loggingFormatters'
|
||||
import { didUserReject } from 'utils/swapErrorToUserReadableMessage'
|
||||
import { tradeMeaningfullyDiffers } from 'utils/tradeMeaningFullyDiffer'
|
||||
|
||||
import { ConfirmationModalContent } from '../TransactionConfirmationModal'
|
||||
import { ConfirmationModalContent, StyledLogo } from '../TransactionConfirmationModal'
|
||||
import {
|
||||
ErrorModalContent,
|
||||
PendingConfirmModalState,
|
||||
@ -173,6 +177,7 @@ export default function ConfirmSwapModal({
|
||||
fiatValueInput: { data?: number; isLoading: boolean }
|
||||
fiatValueOutput: { data?: number; isLoading: boolean }
|
||||
}) {
|
||||
const { chainId } = useWeb3React()
|
||||
const doesTradeDiffer = originalTrade && tradeMeaningfullyDiffers(trade, originalTrade, allowedSlippage)
|
||||
const { startSwapFlow, onCancel, confirmModalState, approvalError, pendingModalSteps, prepareSwapFlow } =
|
||||
useConfirmModalState({
|
||||
@ -265,6 +270,21 @@ export default function ConfirmSwapModal({
|
||||
startSwapFlow,
|
||||
])
|
||||
|
||||
const l2Badge = () => {
|
||||
if (isL2ChainId(chainId) && confirmModalState !== ConfirmModalState.REVIEWING) {
|
||||
const info = getChainInfo(chainId)
|
||||
return (
|
||||
<Badge>
|
||||
<RowFixed data-testid="confirmation-modal-chain-icon" gap="sm">
|
||||
<StyledLogo src={info.logoUrl} />
|
||||
{info.label}
|
||||
</RowFixed>
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
return undefined
|
||||
}
|
||||
|
||||
return (
|
||||
<Trace modal={InterfaceModalName.CONFIRM_SWAP}>
|
||||
<Modal isOpen $scrollOverlay onDismiss={onModalDismiss} maxHeight={90}>
|
||||
@ -279,6 +299,7 @@ export default function ConfirmSwapModal({
|
||||
onDismiss={onModalDismiss}
|
||||
topContent={modalHeader}
|
||||
bottomContent={modalBottom}
|
||||
headerContent={l2Badge}
|
||||
/>
|
||||
)}
|
||||
</Modal>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user