feat: animated review expando (#7440)
* feat: animated review expando * test: update snapshots * fix: pr comments + spacing
This commit is contained in:
parent
f09ded1a3f
commit
48855f487f
3
src/assets/svg/expando-icon-closed.svg
Normal file
3
src/assets/svg/expando-icon-closed.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.6376 8.86202C11.8982 9.12269 11.8982 9.54407 11.6376 9.80473L8.97089 12.4714C8.84089 12.6014 8.6702 12.6667 8.49954 12.6667C8.32887 12.6667 8.15818 12.6014 8.02818 12.4714L5.36152 9.80473C5.10085 9.54407 5.10085 9.12269 5.36152 8.86202C5.62218 8.60136 6.04356 8.60136 6.30422 8.86202L8.49954 11.0573L10.6948 8.86202C10.9555 8.60136 11.3769 8.60136 11.6376 8.86202ZM6.30422 7.13807L8.49954 4.94275L10.6948 7.13807C10.8248 7.26807 10.9955 7.33338 11.1662 7.33338C11.3369 7.33338 11.5076 7.26807 11.6376 7.13807C11.8982 6.8774 11.8982 6.45602 11.6376 6.19536L8.97089 3.52869C8.71022 3.26802 8.28885 3.26802 8.02818 3.52869L5.36152 6.19536C5.10085 6.45602 5.10085 6.8774 5.36152 7.13807C5.62218 7.39873 6.04356 7.39873 6.30422 7.13807Z" fill="#5E5E5E"/>
|
||||
</svg>
|
After Width: | Height: | Size: 866 B |
3
src/assets/svg/expando-icon-opened.svg
Normal file
3
src/assets/svg/expando-icon-opened.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.1376 11.5287C11.3982 11.7894 11.3982 12.2107 11.1376 12.4714C11.0076 12.6014 10.8369 12.6667 10.6662 12.6667C10.4955 12.6667 10.3248 12.6014 10.1948 12.4714L7.99954 10.2761L5.80422 12.4714C5.54356 12.7321 5.12218 12.7321 4.86152 12.4714C4.60085 12.2107 4.60085 11.7894 4.86152 11.5287L7.52818 8.86202C7.78885 8.60136 8.21022 8.60136 8.47089 8.86202L11.1376 11.5287ZM7.52818 7.13807C7.65818 7.26807 7.82887 7.33338 7.99954 7.33338C8.1702 7.33338 8.34089 7.26807 8.47089 7.13807L11.1376 4.4714C11.3982 4.21073 11.3982 3.78936 11.1376 3.52869C10.8769 3.26802 10.4555 3.26802 10.1948 3.52869L7.99954 5.724L5.80422 3.52869C5.54356 3.26802 5.12218 3.26802 4.86152 3.52869C4.60085 3.78936 4.60085 4.21073 4.86152 4.4714L7.52818 7.13807Z" fill="#5E5E5E"/>
|
||||
</svg>
|
After Width: | Height: | Size: 864 B |
@ -1,11 +1,13 @@
|
||||
import { animated, useSpring } from 'react-spring'
|
||||
import { animated, useSpring, UseSpringProps } from 'react-spring'
|
||||
import useResizeObserver from 'use-resize-observer'
|
||||
|
||||
type AnimatedDropdownProps = React.PropsWithChildren<{ open: boolean; springProps?: UseSpringProps }>
|
||||
/**
|
||||
* @param open conditional to show content or hide
|
||||
* @param springProps additional props to include in spring animation
|
||||
* @returns Wrapper to smoothly hide and expand content
|
||||
*/
|
||||
export default function AnimatedDropdown({ open, children }: React.PropsWithChildren<{ open: boolean }>) {
|
||||
export default function AnimatedDropdown({ open, springProps, children }: AnimatedDropdownProps) {
|
||||
const { ref, height } = useResizeObserver()
|
||||
|
||||
const props = useSpring({
|
||||
@ -20,6 +22,7 @@ export default function AnimatedDropdown({ open, children }: React.PropsWithChil
|
||||
clamp: true,
|
||||
velocity: 0.01,
|
||||
},
|
||||
...springProps,
|
||||
})
|
||||
return (
|
||||
<animated.div
|
||||
|
@ -188,7 +188,7 @@ export function ConfirmationModalContent({
|
||||
</Row>
|
||||
{topContent()}
|
||||
</AutoColumn>
|
||||
{bottomContent && <BottomSection gap="12px">{bottomContent()}</BottomSection>}
|
||||
{bottomContent && <BottomSection gap="16px">{bottomContent()}</BottomSection>}
|
||||
</Wrapper>
|
||||
)
|
||||
}
|
||||
|
@ -9,6 +9,7 @@ import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
|
||||
import useHoverProps from 'hooks/useHoverProps'
|
||||
import { useIsMobile } from 'nft/hooks'
|
||||
import React, { PropsWithChildren, useEffect, useState } from 'react'
|
||||
import { animated, SpringValue } from 'react-spring'
|
||||
import { InterfaceTrade, TradeFillType } from 'state/routing/types'
|
||||
import { isPreviewTrade, isUniswapXTrade } from 'state/routing/utils'
|
||||
import { useUserSlippageTolerance } from 'state/user/hooks'
|
||||
@ -238,11 +239,12 @@ function ValueWrapper({ children, lineItem, labelHovered, syncing }: ValueWrappe
|
||||
)
|
||||
}
|
||||
|
||||
interface SwapLineItemProps {
|
||||
export interface SwapLineItemProps {
|
||||
trade: InterfaceTrade
|
||||
syncing: boolean
|
||||
allowedSlippage: Percent
|
||||
type: SwapLineItemType
|
||||
animatedOpacity?: SpringValue<number>
|
||||
}
|
||||
|
||||
function SwapLineItem(props: SwapLineItemProps) {
|
||||
@ -252,6 +254,7 @@ function SwapLineItem(props: SwapLineItemProps) {
|
||||
if (!LineItem) return null
|
||||
|
||||
return (
|
||||
<animated.div style={{ opacity: props.animatedOpacity }}>
|
||||
<RowBetween>
|
||||
<LabelText {...hoverProps} hasTooltip={!!LineItem.TooltipBody} data-testid="swap-li-label">
|
||||
<LineItem.Label />
|
||||
@ -260,6 +263,7 @@ function SwapLineItem(props: SwapLineItemProps) {
|
||||
<LineItem.Value />
|
||||
</ValueWrapper>
|
||||
</RowBetween>
|
||||
</animated.div>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -2,28 +2,33 @@ import { Trans } from '@lingui/macro'
|
||||
import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
|
||||
import { Percent } from '@uniswap/sdk-core'
|
||||
import { TraceEvent } from 'analytics'
|
||||
import AnimatedDropdown from 'components/AnimatedDropdown'
|
||||
import Column from 'components/Column'
|
||||
import SpinningLoader from 'components/Loader/SpinningLoader'
|
||||
import { SwapResult } from 'hooks/useSwapCallback'
|
||||
import useTransactionDeadline from 'hooks/useTransactionDeadline'
|
||||
import { ReactNode } from 'react'
|
||||
import ms from 'ms'
|
||||
import { ReactNode, useState } from 'react'
|
||||
import { AlertTriangle } from 'react-feather'
|
||||
import { easings, useSpring } from 'react-spring'
|
||||
import { InterfaceTrade, RouterPreference } from 'state/routing/types'
|
||||
import { isClassicTrade } from 'state/routing/utils'
|
||||
import { useRouterPreference, useUserSlippageTolerance } from 'state/user/hooks'
|
||||
import styled, { useTheme } from 'styled-components'
|
||||
import { ThemedText } from 'theme/components'
|
||||
import { Separator, ThemedText } from 'theme/components'
|
||||
import getRoutingDiagramEntries from 'utils/getRoutingDiagramEntries'
|
||||
import { formatSwapButtonClickEventProperties } from 'utils/loggingFormatters'
|
||||
|
||||
import { ReactComponent as ExpandoIconClosed } from '../../assets/svg/expando-icon-closed.svg'
|
||||
import { ReactComponent as ExpandoIconOpened } from '../../assets/svg/expando-icon-opened.svg'
|
||||
import { ButtonError, SmallButtonPrimary } from '../Button'
|
||||
import Row, { AutoRow, RowBetween, RowFixed } from '../Row'
|
||||
import { SwapCallbackError, SwapShowAcceptChanges } from './styled'
|
||||
import { SwapLineItemType } from './SwapLineItem'
|
||||
import { SwapLineItemProps, SwapLineItemType } from './SwapLineItem'
|
||||
import SwapLineItem from './SwapLineItem'
|
||||
|
||||
const DetailsContainer = styled(Column)`
|
||||
padding: 0 8px;
|
||||
padding-bottom: 8px;
|
||||
`
|
||||
|
||||
const StyledAlertTriangle = styled(AlertTriangle)`
|
||||
@ -33,9 +38,45 @@ const StyledAlertTriangle = styled(AlertTriangle)`
|
||||
|
||||
const ConfirmButton = styled(ButtonError)`
|
||||
height: 56px;
|
||||
margin-top: 10px;
|
||||
`
|
||||
|
||||
const DropdownControllerWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: -6px;
|
||||
|
||||
padding: 0 16px;
|
||||
min-width: fit-content;
|
||||
white-space: nowrap;
|
||||
`
|
||||
|
||||
const DropdownButton = styled.button`
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
height: 28px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
background: none;
|
||||
border: none;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
`
|
||||
|
||||
function DropdownController({ open, onClick }: { open: boolean; onClick: () => void }) {
|
||||
return (
|
||||
<DropdownButton onClick={onClick}>
|
||||
<Separator />
|
||||
<DropdownControllerWrapper>
|
||||
<ThemedText.BodySmall color="neutral2">
|
||||
{open ? <Trans>Show less</Trans> : <Trans>Show more</Trans>}
|
||||
</ThemedText.BodySmall>
|
||||
{open ? <ExpandoIconOpened /> : <ExpandoIconClosed />}
|
||||
</DropdownControllerWrapper>
|
||||
<Separator />
|
||||
</DropdownButton>
|
||||
)
|
||||
}
|
||||
|
||||
export default function SwapModalFooter({
|
||||
trade,
|
||||
allowedSlippage,
|
||||
@ -66,17 +107,16 @@ export default function SwapModalFooter({
|
||||
const [routerPreference] = useRouterPreference()
|
||||
const routes = isClassicTrade(trade) ? getRoutingDiagramEntries(trade) : undefined
|
||||
const theme = useTheme()
|
||||
const [showMore, setShowMore] = useState(false)
|
||||
|
||||
const lineItemProps = { trade, allowedSlippage, syncing: false }
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropdownController open={showMore} onClick={() => setShowMore(!showMore)} />
|
||||
<DetailsContainer gap="md">
|
||||
<SwapLineItem {...lineItemProps} type={SwapLineItemType.EXCHANGE_RATE} />
|
||||
<SwapLineItem {...lineItemProps} type={SwapLineItemType.PRICE_IMPACT} />
|
||||
<SwapLineItem {...lineItemProps} type={SwapLineItemType.MAX_SLIPPAGE} />
|
||||
<SwapLineItem {...lineItemProps} type={SwapLineItemType.MAXIMUM_INPUT} />
|
||||
<SwapLineItem {...lineItemProps} type={SwapLineItemType.MINIMUM_OUTPUT} />
|
||||
<ExpandableLineItems {...lineItemProps} open={showMore} />
|
||||
<SwapLineItem {...lineItemProps} type={SwapLineItemType.INPUT_TOKEN_FEE_ON_TRANSFER} />
|
||||
<SwapLineItem {...lineItemProps} type={SwapLineItemType.OUTPUT_TOKEN_FEE_ON_TRANSFER} />
|
||||
<SwapLineItem {...lineItemProps} type={SwapLineItemType.NETWORK_COST} />
|
||||
@ -141,3 +181,43 @@ export default function SwapModalFooter({
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function AnimatedLineItem(props: SwapLineItemProps & { open: boolean; delay: number }) {
|
||||
const { open, delay } = props
|
||||
|
||||
const animatedProps = useSpring({
|
||||
animatedOpacity: open ? 1 : 0,
|
||||
config: { duration: ms('300ms'), easing: easings.easeOutSine },
|
||||
delay,
|
||||
})
|
||||
|
||||
return <SwapLineItem {...props} {...animatedProps} />
|
||||
}
|
||||
|
||||
function ExpandableLineItems(props: { trade: InterfaceTrade; allowedSlippage: Percent; open: boolean }) {
|
||||
const { open, trade, allowedSlippage } = props
|
||||
|
||||
if (!trade) return null
|
||||
|
||||
const lineItemProps = { trade, allowedSlippage, syncing: false, open }
|
||||
|
||||
return (
|
||||
<AnimatedDropdown
|
||||
open={open}
|
||||
springProps={{
|
||||
marginTop: open ? 0 : -12,
|
||||
config: {
|
||||
duration: ms('200ms'),
|
||||
easing: easings.easeOutSine,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Column gap="md">
|
||||
<AnimatedLineItem {...lineItemProps} type={SwapLineItemType.PRICE_IMPACT} delay={ms('50ms')} />
|
||||
<AnimatedLineItem {...lineItemProps} type={SwapLineItemType.MAX_SLIPPAGE} delay={ms('100ms')} />
|
||||
<AnimatedLineItem {...lineItemProps} type={SwapLineItemType.MINIMUM_OUTPUT} delay={ms('120ms')} />
|
||||
<AnimatedLineItem {...lineItemProps} type={SwapLineItemType.MAXIMUM_INPUT} delay={ms('120ms')} />
|
||||
</Column>
|
||||
</AnimatedDropdown>
|
||||
)
|
||||
}
|
||||
|
@ -6,14 +6,10 @@ import { InterfaceTrade } from 'state/routing/types'
|
||||
import { isPreviewTrade } from 'state/routing/utils'
|
||||
import { Field } from 'state/swap/actions'
|
||||
import styled from 'styled-components'
|
||||
import { Divider, ThemedText } from 'theme/components'
|
||||
import { ThemedText } from 'theme/components'
|
||||
|
||||
import { SwapModalHeaderAmount } from './SwapModalHeaderAmount'
|
||||
|
||||
const Rule = styled(Divider)`
|
||||
margin: 16px 2px 24px 2px;
|
||||
`
|
||||
|
||||
const HeaderContainer = styled(AutoColumn)`
|
||||
margin-top: 16px;
|
||||
`
|
||||
@ -50,7 +46,7 @@ export default function SwapModalHeader({
|
||||
isLoading={isPreviewTrade(trade) && trade.tradeType === TradeType.EXACT_INPUT}
|
||||
tooltipText={
|
||||
trade.tradeType === TradeType.EXACT_INPUT ? (
|
||||
<ThemedText.BodySmall>
|
||||
<ThemedText.Caption>
|
||||
<Trans>
|
||||
Output is estimated. You will receive at least{' '}
|
||||
<b>
|
||||
@ -58,9 +54,9 @@ export default function SwapModalHeader({
|
||||
</b>{' '}
|
||||
or the transaction will revert.
|
||||
</Trans>
|
||||
</ThemedText.BodySmall>
|
||||
</ThemedText.Caption>
|
||||
) : (
|
||||
<ThemedText.BodySmall>
|
||||
<ThemedText.Caption>
|
||||
<Trans>
|
||||
Input is estimated. You will sell at most{' '}
|
||||
<b>
|
||||
@ -68,12 +64,11 @@ export default function SwapModalHeader({
|
||||
</b>{' '}
|
||||
or the transaction will revert.
|
||||
</Trans>
|
||||
</ThemedText.BodySmall>
|
||||
</ThemedText.Caption>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Column>
|
||||
<Rule />
|
||||
</HeaderContainer>
|
||||
)
|
||||
}
|
||||
|
@ -61,7 +61,7 @@ export function SwapModalHeaderAmount({
|
||||
<Column gap="xs">
|
||||
<ThemedText.BodySecondary>
|
||||
<MouseoverTooltip text={tooltipText} disabled={!tooltipText}>
|
||||
<Label cursor="help">{label}</Label>
|
||||
<Label cursor={tooltipText ? 'help' : undefined}>{label}</Label>
|
||||
</MouseoverTooltip>
|
||||
</ThemedText.BodySecondary>
|
||||
<Column gap="xs">
|
||||
|
@ -327,6 +327,7 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
|
||||
<div
|
||||
class="c18"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
class="c2 c3 c4"
|
||||
>
|
||||
@ -352,6 +353,8 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="c2 c3 c4"
|
||||
>
|
||||
@ -380,6 +383,8 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="c2 c3 c4"
|
||||
>
|
||||
@ -434,9 +439,11 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c18"
|
||||
/>
|
||||
<div>
|
||||
<div
|
||||
class="c2 c3 c4"
|
||||
>
|
||||
@ -466,5 +473,6 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
@ -179,7 +179,8 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
|
||||
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -263,6 +264,7 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -473,7 +475,8 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
|
||||
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -550,6 +553,7 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -690,7 +694,8 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
|
||||
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -729,6 +734,7 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -925,7 +931,8 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -1025,6 +1032,7 @@ exports[`SwapLineItem.tsx dutch order eth input 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@ -1203,7 +1211,8 @@ exports[`SwapLineItem.tsx exact input 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -1287,6 +1296,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -1423,7 +1433,8 @@ exports[`SwapLineItem.tsx exact input 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -1466,6 +1477,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -1672,7 +1684,8 @@ exports[`SwapLineItem.tsx exact input 1`] = `
|
||||
content: 'Auto';
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -1749,6 +1762,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -1885,7 +1899,8 @@ exports[`SwapLineItem.tsx exact input 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -1924,6 +1939,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -2280,7 +2296,8 @@ exports[`SwapLineItem.tsx exact input 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -2478,6 +2495,7 @@ exports[`SwapLineItem.tsx exact input 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@ -2656,7 +2674,8 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -2740,6 +2759,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -2876,7 +2896,8 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -2919,6 +2940,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -3125,7 +3147,8 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
|
||||
content: 'Auto';
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -3202,6 +3225,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -3338,7 +3362,8 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -3377,6 +3402,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -3733,7 +3759,8 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -3931,6 +3958,7 @@ exports[`SwapLineItem.tsx exact input api 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@ -4109,7 +4137,8 @@ exports[`SwapLineItem.tsx exact output 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -4193,6 +4222,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -4329,7 +4359,8 @@ exports[`SwapLineItem.tsx exact output 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -4372,6 +4403,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -4578,7 +4610,8 @@ exports[`SwapLineItem.tsx exact output 1`] = `
|
||||
content: 'Auto';
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -4655,6 +4688,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -4791,7 +4825,8 @@ exports[`SwapLineItem.tsx exact output 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -4830,6 +4865,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -5186,7 +5222,8 @@ exports[`SwapLineItem.tsx exact output 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -5384,6 +5421,7 @@ exports[`SwapLineItem.tsx exact output 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@ -5562,7 +5600,8 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -5646,6 +5685,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -5801,7 +5841,8 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -5852,6 +5893,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -5988,7 +6030,8 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -6031,6 +6074,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -6237,7 +6281,8 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
|
||||
content: 'Auto';
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -6314,6 +6359,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -6450,7 +6496,8 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -6489,6 +6536,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -6845,7 +6893,8 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -7043,6 +7092,7 @@ exports[`SwapLineItem.tsx fee on buy 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@ -7221,7 +7271,8 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -7305,6 +7356,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -7460,7 +7512,8 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -7511,6 +7564,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -7647,7 +7701,8 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -7690,6 +7745,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -7896,7 +7952,8 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
|
||||
content: 'Auto';
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -7973,6 +8030,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -8109,7 +8167,8 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -8148,6 +8207,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -8504,7 +8564,8 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -8702,6 +8763,7 @@ exports[`SwapLineItem.tsx fee on sell 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@ -8875,7 +8937,8 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -8931,6 +8994,7 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -9080,7 +9144,8 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -9124,6 +9189,7 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -9330,7 +9396,8 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
|
||||
content: 'Auto';
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -9407,6 +9474,7 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -9543,7 +9611,8 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -9582,6 +9651,7 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -9639,7 +9709,8 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -9659,6 +9730,7 @@ exports[`SwapLineItem.tsx preview exact in 1`] = `
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
@ -9716,7 +9788,8 @@ exports[`SwapLineItem.tsx syncing 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -9732,6 +9805,7 @@ exports[`SwapLineItem.tsx syncing 1`] = `
|
||||
width="50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -9784,7 +9858,8 @@ exports[`SwapLineItem.tsx syncing 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -9800,6 +9875,7 @@ exports[`SwapLineItem.tsx syncing 1`] = `
|
||||
width="50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -9852,7 +9928,8 @@ exports[`SwapLineItem.tsx syncing 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -9868,6 +9945,7 @@ exports[`SwapLineItem.tsx syncing 1`] = `
|
||||
width="50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -9920,7 +9998,8 @@ exports[`SwapLineItem.tsx syncing 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -9936,6 +10015,7 @@ exports[`SwapLineItem.tsx syncing 1`] = `
|
||||
width="70"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -9988,7 +10068,8 @@ exports[`SwapLineItem.tsx syncing 1`] = `
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
<div
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
@ -10004,5 +10085,6 @@ exports[`SwapLineItem.tsx syncing 1`] = `
|
||||
width="50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
@ -2,6 +2,74 @@
|
||||
|
||||
exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] = `
|
||||
<DocumentFragment>
|
||||
.c3 {
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #22222212;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-right: -6px;
|
||||
padding: 0 16px;
|
||||
min-width: -webkit-fit-content;
|
||||
min-width: -moz-fit-content;
|
||||
min-width: fit-content;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
height: 28px;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
background: none;
|
||||
border: none;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
<button
|
||||
class="c0"
|
||||
>
|
||||
<div
|
||||
class="c1"
|
||||
/>
|
||||
<div
|
||||
class="c2"
|
||||
>
|
||||
<div
|
||||
class="c3 css-142zc9n"
|
||||
>
|
||||
Show more
|
||||
</div>
|
||||
<svg>
|
||||
expando-icon-closed.svg
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="c1"
|
||||
/>
|
||||
</button>
|
||||
.c2 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -68,14 +136,14 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.c11 {
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -151,12 +219,13 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
|
||||
}
|
||||
|
||||
.c1 {
|
||||
padding: 0 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
<div
|
||||
class="c0 c1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="c2 c3 c4"
|
||||
>
|
||||
@ -188,6 +257,17 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="height: 0px; margin-top: -12px; overflow: hidden; width: 100%; min-width: min-content; will-change: height;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="c0"
|
||||
>
|
||||
<div
|
||||
style="opacity: 0;"
|
||||
>
|
||||
<div
|
||||
class="c2 c3 c4"
|
||||
>
|
||||
@ -213,6 +293,10 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="opacity: 0;"
|
||||
>
|
||||
<div
|
||||
class="c2 c3 c4"
|
||||
>
|
||||
@ -241,6 +325,10 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="opacity: 0;"
|
||||
>
|
||||
<div
|
||||
class="c2 c3 c4"
|
||||
>
|
||||
@ -262,6 +350,11 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="c2 c3 c4"
|
||||
>
|
||||
@ -317,6 +410,7 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -467,7 +561,6 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
|
||||
|
||||
.c6 {
|
||||
height: 56px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
<div
|
||||
@ -490,6 +583,78 @@ exports[`SwapModalFooter.tsx matches base snapshot, test trade exact input 1`] =
|
||||
|
||||
exports[`SwapModalFooter.tsx renders a preview trade while disabling submission 1`] = `
|
||||
<DocumentFragment>
|
||||
.c3 {
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #22222212;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-right: -6px;
|
||||
padding: 0 16px;
|
||||
min-width: -webkit-fit-content;
|
||||
min-width: -moz-fit-content;
|
||||
min-width: fit-content;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
height: 28px;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
background: none;
|
||||
border: none;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width:960px) {
|
||||
|
||||
}
|
||||
|
||||
<button
|
||||
class="c0"
|
||||
>
|
||||
<div
|
||||
class="c1"
|
||||
/>
|
||||
<div
|
||||
class="c2"
|
||||
>
|
||||
<div
|
||||
class="c3 css-142zc9n"
|
||||
>
|
||||
Show more
|
||||
</div>
|
||||
<svg>
|
||||
expando-icon-closed.svg
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="c1"
|
||||
/>
|
||||
</button>
|
||||
.c2 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -538,14 +703,14 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -639,7 +804,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
|
||||
}
|
||||
|
||||
.c1 {
|
||||
padding: 0 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
@media (max-width:960px) {
|
||||
@ -649,6 +814,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
|
||||
<div
|
||||
class="c0 c1"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="c2 c3 c4"
|
||||
>
|
||||
@ -674,6 +840,17 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="height: 0px; margin-top: -12px; overflow: hidden; width: 100%; min-width: min-content; will-change: height;"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="c0"
|
||||
>
|
||||
<div
|
||||
style="opacity: 0;"
|
||||
>
|
||||
<div
|
||||
class="c2 c3 c4"
|
||||
>
|
||||
@ -700,6 +877,10 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="opacity: 0;"
|
||||
>
|
||||
<div
|
||||
class="c2 c3 c4"
|
||||
>
|
||||
@ -728,6 +909,10 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="opacity: 0;"
|
||||
>
|
||||
<div
|
||||
class="c2 c3 c4"
|
||||
>
|
||||
@ -749,6 +934,11 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="c2 c3 c4"
|
||||
>
|
||||
@ -776,6 +966,7 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@ -977,7 +1168,6 @@ exports[`SwapModalFooter.tsx renders a preview trade while disabling submission
|
||||
|
||||
.c6 {
|
||||
height: 56px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media (max-width:960px) {
|
||||
|
@ -34,14 +34,6 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-width: 0;
|
||||
margin: 0;
|
||||
background-color: #22222212;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -111,13 +103,14 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
|
||||
}
|
||||
|
||||
.c9 {
|
||||
cursor: help;
|
||||
color: #7D7D7D;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
margin: 16px 2px 24px 2px;
|
||||
.c13 {
|
||||
cursor: help;
|
||||
color: #7D7D7D;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
@ -145,7 +138,6 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
|
||||
<div>
|
||||
<div
|
||||
class="c8 c9 css-142zc9n"
|
||||
cursor="help"
|
||||
>
|
||||
You pay
|
||||
</div>
|
||||
@ -192,7 +184,7 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="c8 c9 css-142zc9n"
|
||||
class="c8 c13 css-142zc9n"
|
||||
cursor="help"
|
||||
>
|
||||
You receive
|
||||
@ -227,9 +219,6 @@ exports[`SwapModalHeader.tsx matches base snapshot, test trade exact input 1`] =
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c13 c14"
|
||||
/>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
@ -268,14 +257,6 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-width: 0;
|
||||
margin: 0;
|
||||
background-color: #22222212;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -345,13 +326,14 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
|
||||
}
|
||||
|
||||
.c9 {
|
||||
cursor: help;
|
||||
color: #7D7D7D;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
margin: 16px 2px 24px 2px;
|
||||
.c13 {
|
||||
cursor: help;
|
||||
color: #7D7D7D;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
@ -379,7 +361,6 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
|
||||
<div>
|
||||
<div
|
||||
class="c8 c9 css-142zc9n"
|
||||
cursor="help"
|
||||
>
|
||||
You pay
|
||||
</div>
|
||||
@ -426,7 +407,7 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="c8 c9 css-142zc9n"
|
||||
class="c8 c13 css-142zc9n"
|
||||
cursor="help"
|
||||
>
|
||||
You receive
|
||||
@ -461,9 +442,6 @@ exports[`SwapModalHeader.tsx renders ETH input token for an ETH input UniswapX s
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c13 c14"
|
||||
/>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
@ -502,14 +480,6 @@ exports[`SwapModalHeader.tsx renders preview trades with loading states 1`] = `
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-width: 0;
|
||||
margin: 0;
|
||||
background-color: #22222212;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -579,13 +549,14 @@ exports[`SwapModalHeader.tsx renders preview trades with loading states 1`] = `
|
||||
}
|
||||
|
||||
.c9 {
|
||||
cursor: help;
|
||||
color: #7D7D7D;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
margin: 16px 2px 24px 2px;
|
||||
.c13 {
|
||||
cursor: help;
|
||||
color: #7D7D7D;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
@ -613,7 +584,6 @@ exports[`SwapModalHeader.tsx renders preview trades with loading states 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="c8 c9 css-142zc9n"
|
||||
cursor="help"
|
||||
>
|
||||
You pay
|
||||
</div>
|
||||
@ -660,7 +630,7 @@ exports[`SwapModalHeader.tsx renders preview trades with loading states 1`] = `
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="c8 c9 css-142zc9n"
|
||||
class="c8 c13 css-142zc9n"
|
||||
cursor="help"
|
||||
>
|
||||
You receive
|
||||
@ -695,9 +665,6 @@ exports[`SwapModalHeader.tsx renders preview trades with loading states 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c13 c14"
|
||||
/>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
@ -736,14 +703,6 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.c13 {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-width: 0;
|
||||
margin: 0;
|
||||
background-color: #22222212;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
@ -813,13 +772,14 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
|
||||
}
|
||||
|
||||
.c9 {
|
||||
cursor: help;
|
||||
color: #7D7D7D;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.c14 {
|
||||
margin: 16px 2px 24px 2px;
|
||||
.c13 {
|
||||
cursor: help;
|
||||
color: #7D7D7D;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
@ -847,7 +807,6 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="c8 c9 css-142zc9n"
|
||||
cursor="help"
|
||||
>
|
||||
You pay
|
||||
</div>
|
||||
@ -894,7 +853,7 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="c8 c9 css-142zc9n"
|
||||
class="c8 c13 css-142zc9n"
|
||||
cursor="help"
|
||||
>
|
||||
You receive
|
||||
@ -929,9 +888,6 @@ exports[`SwapModalHeader.tsx test trade exact output, no recipient 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c13 c14"
|
||||
/>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
Loading…
Reference in New Issue
Block a user