Skip to content

I
interface
Commit 8a9388ed authored by Zach Pomerantz's avatar Zach Pomerantz Committed by GitHub
Browse files
Options

feat: make Expando element (#3515) 

* feat: make Expando element

* fix: cleanup

* fix: simplify margin

* fix: summary height

* fix: special case gap transition
parent 884bf41d
Hide whitespace changes
Inline Side-by-side
Showing with 174 additions and 183 deletions
src/lib/components/Error/ErrorDialog.tsx
View file @ 8a9388ed
import { Trans } from '@lingui/macro'
import useScrollbar from 'lib/hooks/useScrollbar'
import { AlertTriangle, Expando, Icon, Info, LargeIcon } from 'lib/icons'
import ActionButton from 'lib/components/ActionButton'
import Column from 'lib/components/Column'
import Expando from 'lib/components/Expando'
import { AlertTriangle, Icon, LargeIcon } from 'lib/icons'
import styled, { Color, ThemedText } from 'lib/theme'
import { ReactNode, useState } from 'react'
import ActionButton from '../ActionButton'
import { IconButton } from '../Button'
import Column from '../Column'
import Row from '../Row'
import Rule from '../Rule'
import { ReactNode, useCallback, useState } from 'react'
const HeaderIcon = styled(LargeIcon)`
flex-grow: 1;
......@@ -35,7 +31,6 @@ export function StatusHeader({ icon: Icon, iconColor, iconSize = 4, children }:
{children}
</Column>
</Column>
<Rule />
</>
)
}
......@@ -49,40 +44,6 @@ const ErrorHeader = styled(Column)<{ open: boolean }>`
transition: max-height 0.25s;
}
`
const ErrorColumn = styled(Column)``
const ExpandoColumn = styled(Column)<{ open: boolean }>`
flex-grow: ${({ open }) => (open ? 2 : 0)};
transition: flex-grow 0.25s, gap 0.25s;
${Rule} {
margin-bottom: ${({ open }) => (open ? 0 : 0.75)}em;
transition: margin-bottom 0.25s;
}
${ErrorColumn} {
flex-basis: 0;
flex-grow: ${({ open }) => (open ? 1 : 0)};
overflow-y: hidden;
position: relative;
transition: flex-grow 0.25s;
${Column} {
height: 6.825em;
padding: ${({ open }) => (open ? '0.5em 0' : 0)};
transition: padding 0.25s;
:after {
background: linear-gradient(#ffffff00, ${({ theme }) => theme.dialog});
bottom: 0;
content: '';
height: 0.75em;
pointer-events: none;
position: absolute;
width: calc(100% - 1em);
}
}
}
`
interface ErrorDialogProps {
header?: ReactNode
......@@ -93,8 +54,8 @@ interface ErrorDialogProps {
export default function ErrorDialog({ header, error, action, onClick }: ErrorDialogProps) {
const [open, setOpen] = useState(false)
const [details, setDetails] = useState<HTMLDivElement | null>(null)
const scrollbar = useScrollbar(details)
const onExpand = useCallback(() => setOpen((open) => !open), [])
return (
<Column flex padded gap={0.75} align="stretch" style={{ height: '100%' }}>
<StatusHeader icon={AlertTriangle} iconColor="error" iconSize={open ? 3 : 4}>
......@@ -105,27 +66,15 @@ export default function ErrorDialog({ header, error, action, onClick }: ErrorDia
<ThemedText.Body2>{header}</ThemedText.Body2>
</ErrorHeader>
</StatusHeader>
<Row>
<Row gap={0.5}>
<Info color="secondary" />
<ThemedText.Subhead2 color="secondary">
<Trans>Error details</Trans>
</ThemedText.Subhead2>
</Row>
<IconButton color="secondary" onClick={() => setOpen(!open)} icon={Expando} iconProps={{ open }} />
</Row>
<ExpandoColumn flex align="stretch" open={open}>
<Rule />
<ErrorColumn>
<Column gap={0.5} ref={setDetails} css={scrollbar}>
<ThemedText.Code userSelect>
{error.name}
{error.message ? `: ${error.message}` : ''}
</ThemedText.Code>
</Column>
</ErrorColumn>
<Column gap={open ? 0 : 0.75} style={{ transition: 'gap 0.25s' }}>
<Expando title={<Trans>Error details</Trans>} open={open} onExpand={onExpand} height={7.5}>
<ThemedText.Code userSelect>
{error.name}
{error.message ? `: ${error.message}` : ''}
</ThemedText.Code>
</Expando>
<ActionButton onClick={onClick}>{action}</ActionButton>
</ExpandoColumn>
</Column>
</Column>
)
}
src/lib/components/Expando.tsx 0 → 100644
View file @ 8a9388ed
import { IconButton } from 'lib/components/Button'
import Column from 'lib/components/Column'
import Row from 'lib/components/Row'
import Rule from 'lib/components/Rule'
import useScrollbar from 'lib/hooks/useScrollbar'
import { Expando as ExpandoIcon } from 'lib/icons'
import styled from 'lib/theme'
import { PropsWithChildren, ReactNode, useState } from 'react'
const HeaderColumn = styled(Column)`
transition: gap 0.25s;
`
const ExpandoColumn = styled(Column)<{ height: number; open: boolean }>`
height: ${({ height, open }) => (open ? height : 0)}em;
overflow: hidden;
position: relative;
transition: height 0.25s, padding 0.25s;
:after {
background: linear-gradient(#ffffff00, ${({ theme }) => theme.dialog});
bottom: 0;
content: '';
height: 0.75em;
pointer-events: none;
position: absolute;
width: calc(100% - 1em);
}
`
const InnerColumn = styled(Column)<{ height: number }>`
height: ${({ height }) => height}em;
padding: 0.5em 0;
`
interface ExpandoProps {
title: ReactNode
open: boolean
onExpand: () => void
// The absolute height of the expanded container, in em.
height: number
}
/** A scrollable Expando with an absolute height. */
export default function Expando({ title, open, onExpand, height, children }: PropsWithChildren<ExpandoProps>) {
const [scrollingEl, setScrollingEl] = useState<HTMLDivElement | null>(null)
const scrollbar = useScrollbar(scrollingEl)
return (
<Column>
<HeaderColumn gap={open ? 0.5 : 0.75}>
<Rule />
<Row>
{title}
<IconButton color="secondary" onClick={onExpand} icon={ExpandoIcon} iconProps={{ open }} />
</Row>
<Rule />
</HeaderColumn>
<ExpandoColumn open={open} height={height}>
<InnerColumn flex align="stretch" height={height} ref={setScrollingEl} css={scrollbar}>
{children}
</InnerColumn>
</ExpandoColumn>
</Column>
)
return null
}
src/lib/components/Swap/Summary/Details.tsx
View file @ 8a9388ed
......@@ -3,6 +3,8 @@ import { useLingui } from '@lingui/react'
import { Trade } from '@uniswap/router-sdk'
import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
import { useAtomValue } from 'jotai/utils'
import Column from 'lib/components/Column'
import Row from 'lib/components/Row'
import { feeOptionsAtom } from 'lib/state/swap'
import styled, { Color, ThemedText } from 'lib/theme'
import { useMemo } from 'react'
......@@ -10,8 +12,6 @@ import { currencyId } from 'utils/currencyId'
import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
import { computeRealizedLPFeeAmount } from 'utils/prices'
import Row from '../../Row'
const Value = styled.span<{ color?: Color }>`
color: ${({ color, theme }) => color && theme[color]};
white-space: nowrap;
......@@ -97,10 +97,10 @@ export default function Details({ trade, slippage, usdcPriceImpact }: DetailsPro
])
return (
<>
<Column gap={0.5}>
{details.map(([label, detail, color]) => (
<Detail key={label} label={label} value={detail} color={color} />
))}
</>
</Column>
)
}
src/lib/components/Swap/Summary/index.tsx
View file @ 8a9388ed
......@@ -3,18 +3,15 @@ import { useLingui } from '@lingui/react'
import { Trade } from '@uniswap/router-sdk'
import { Currency, TradeType } from '@uniswap/sdk-core'
import ActionButton, { Action } from 'lib/components/ActionButton'
import { IconButton } from 'lib/components/Button'
import Column from 'lib/components/Column'
import { Header } from 'lib/components/Dialog'
import Expando from 'lib/components/Expando'
import Row from 'lib/components/Row'
import Rule from 'lib/components/Rule'
import { useSwapTradeType } from 'lib/hooks/swap'
import useScrollbar from 'lib/hooks/useScrollbar'
import { Slippage } from 'lib/hooks/useSlippage'
import useUSDCPriceImpact from 'lib/hooks/useUSDCPriceImpact'
import { AlertTriangle, BarChart, Expando, Info } from 'lib/icons'
import { AlertTriangle, BarChart, Info } from 'lib/icons'
import styled, { Color, ThemedText } from 'lib/theme'
import { useMemo, useState } from 'react'
import { useCallback, useMemo, useState } from 'react'
import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
import { tradeMeaningfullyDiffers } from 'utils/tradeMeaningFullyDiffer'
......@@ -24,60 +21,27 @@ import Summary from './Summary'
export default Summary
const SummaryColumn = styled(Column)``
const ExpandoColumn = styled(Column)``
const DetailsColumn = styled(Column)``
const Estimate = styled(ThemedText.Caption)``
const Content = styled(Column)``
const Heading = styled(Column)``
const Footing = styled(Column)``
const Body = styled(Column)<{ open: boolean }>`
height: calc(100% - 2.5em);
${SummaryColumn} {
flex-grow: ${({ open }) => (open ? 0 : 1)};
${Content}, ${Heading} {
flex-grow: 1;
transition: flex-grow 0.25s;
}
${ExpandoColumn} {
flex-grow: ${({ open }) => (open ? 1 : 0)};
transition: flex-grow 0.25s;
${DetailsColumn} {
flex-basis: ${({ open }) => (open ? 6.75 : 0)}em;
overflow-y: hidden;
position: relative;
transition: flex-basis 0.25s;
${Column} {
height: 6.75em;
grid-template-rows: repeat(auto-fill, 1em);
padding: ${({ open }) => (open ? '0.5em 0' : 0)};
transition: padding 0.25s;
:after {
background: linear-gradient(#ffffff00, ${({ theme }) => theme.dialog});
bottom: 0;
content: '';
height: 0.75em;
pointer-events: none;
position: absolute;
width: calc(100% - 1em);
}
}
}
${Estimate} {
max-height: ${({ open }) => (open ? 0 : 56 / 12)}em; // 2 * line-height + padding
min-height: 0;
overflow-y: hidden;
padding: ${({ open }) => (open ? 0 : '1em 0')};
transition: ${({ open }) =>
open
? 'max-height 0.1s ease-out, padding 0.25s ease-out'
: 'flex-grow 0.25s ease-out, max-height 0.1s ease-in, padding 0.25s ease-out'};
}
${Footing} {
margin-bottom: ${({ open }) => (open ? '-0.75em' : undefined)};
max-height: ${({ open }) => (open ? 0 : '3em')};
opacity: ${({ open }) => (open ? 0 : 1)};
transition: max-height 0.25s, margin-bottom 0.25s, opacity 0.15s 0.1s;
visibility: ${({ open }) => (open ? 'hidden' : undefined)};
}
`
function Subhead({ priceImpact, slippage }: { priceImpact: { warning?: Color }; slippage: { warning?: Color } }) {
function Subhead({ priceImpact, slippage }: { priceImpact: { warning?: Color }; slippage: Slippage }) {
return (
<Row gap={0.5}>
{priceImpact.warning || slippage.warning ? (
......@@ -98,41 +62,55 @@ function Subhead({ priceImpact, slippage }: { priceImpact: { warning?: Color };
)
}
interface SummaryDialogProps {
trade: Trade<Currency, Currency, TradeType>
slippage: Slippage
onConfirm: () => void
}
export function SummaryDialog({ trade, slippage, onConfirm }: SummaryDialogProps) {
const { inputAmount, outputAmount } = trade
const inputCurrency = inputAmount.currency
const outputCurrency = outputAmount.currency
const usdcPriceImpact = useUSDCPriceImpact(inputAmount, outputAmount)
const tradeType = useSwapTradeType()
function Estimate({ trade, slippage }: { trade: Trade<Currency, Currency, TradeType>; slippage: Slippage }) {
const { i18n } = useLingui()
const text = useMemo(() => {
switch (trade.tradeType) {
case TradeType.EXACT_INPUT:
return (
<Trans>
Output is estimated. You will receive at least{' '}
{formatCurrencyAmount(trade.minimumAmountOut(slippage.allowed), 6, i18n.locale)}{' '}
{trade.outputAmount.currency.symbol} or the transaction will revert.
</Trans>
)
case TradeType.EXACT_OUTPUT:
return (
<Trans>
Output is estimated. You will send at most{' '}
{formatCurrencyAmount(trade.maximumAmountIn(slippage.allowed), 6, i18n.locale)}{' '}
{trade.inputAmount.currency.symbol} or the transaction will revert.
</Trans>
)
}
}, [i18n.locale, slippage.allowed, trade])
return <ThemedText.Caption color="secondary">{text}</ThemedText.Caption>
}
const [open, setOpen] = useState(false)
const [details, setDetails] = useState<HTMLDivElement | null>(null)
const scrollbar = useScrollbar(details)
function ConfirmButton({
trade,
highPriceImpact,
onConfirm,
}: {
trade: Trade<Currency, Currency, TradeType>
highPriceImpact: boolean
onConfirm: () => void
}) {
const [ackPriceImpact, setAckPriceImpact] = useState(false)
const [confirmedTrade, setConfirmedTrade] = useState(trade)
const [ackTrade, setAckTrade] = useState(trade)
const doesTradeDiffer = useMemo(
() => Boolean(trade && confirmedTrade && tradeMeaningfullyDiffers(trade, confirmedTrade)),
[confirmedTrade, trade]
() => Boolean(trade && ackTrade && tradeMeaningfullyDiffers(trade, ackTrade)),
[ackTrade, trade]
)
const action = useMemo((): Action | undefined => {
if (doesTradeDiffer) {
return {
message: <Trans>Price updated</Trans>,
icon: BarChart,
onClick: () => setConfirmedTrade(trade),
onClick: () => setAckTrade(trade),
children: <Trans>Accept</Trans>,
}
} else if (usdcPriceImpact.warning === 'error' && !ackPriceImpact) {
} else if (highPriceImpact && !ackPriceImpact) {
return {
message: <Trans>High price impact</Trans>,
onClick: () => setAckPriceImpact(true),
......@@ -140,52 +118,50 @@ export function SummaryDialog({ trade, slippage, onConfirm }: SummaryDialogProps
}
}
return
}, [ackPriceImpact, doesTradeDiffer, trade, usdcPriceImpact.warning])
}, [ackPriceImpact, doesTradeDiffer, highPriceImpact, trade])
if (!(inputAmount && outputAmount && inputCurrency && outputCurrency)) {
return null
}
return (
<ActionButton onClick={onConfirm} action={action}>
<Trans>Confirm swap</Trans>
</ActionButton>
)
}
interface SummaryDialogProps {
trade: Trade<Currency, Currency, TradeType>
slippage: Slippage
onConfirm: () => void
}
export function SummaryDialog({ trade, slippage, onConfirm }: SummaryDialogProps) {
const { inputAmount, outputAmount } = trade
const usdcPriceImpact = useUSDCPriceImpact(inputAmount, outputAmount)
const [open, setOpen] = useState(false)
const onExpand = useCallback(() => setOpen((open) => !open), [])
return (
<>
<Header title={<Trans>Swap summary</Trans>} ruled />
<Body flex align="stretch" gap={0.75} padded open={open}>
<SummaryColumn gap={0.75} flex justify="center">
<Body flex align="stretch" padded gap={0.75} open={open}>
<Heading gap={0.75} flex justify="center">
<Summary input={inputAmount} output={outputAmount} usdcPriceImpact={usdcPriceImpact} />
<Price trade={trade} />
</SummaryColumn>
<Rule />
<Row>
<Subhead priceImpact={usdcPriceImpact} slippage={slippage} />
<IconButton color="secondary" onClick={() => setOpen(!open)} icon={Expando} iconProps={{ open }} />
</Row>
<ExpandoColumn flex align="stretch">
<Rule />
<DetailsColumn>
<Column gap={0.5} ref={setDetails} css={scrollbar}>
<Details trade={trade} slippage={slippage} usdcPriceImpact={usdcPriceImpact} />
</Column>
</DetailsColumn>
<Estimate color="secondary">
<Trans>Output is estimated.</Trans>{' '}
{tradeType === TradeType.EXACT_INPUT && (
<Trans>
You will receive at least{' '}
{formatCurrencyAmount(trade.minimumAmountOut(slippage.allowed), 6, i18n.locale)} {outputCurrency.symbol}{' '}
or the transaction will revert.
</Trans>
)}
{tradeType === TradeType.EXACT_OUTPUT && (
<Trans>
You will send at most {formatCurrencyAmount(trade.maximumAmountIn(slippage.allowed), 6, i18n.locale)}{' '}
{inputCurrency.symbol} or the transaction will revert.
</Trans>
)}
</Estimate>
<ActionButton onClick={onConfirm} action={action}>
<Trans>Confirm swap</Trans>
</ActionButton>
</ExpandoColumn>
</Heading>
<Column gap={open ? 0 : 0.75} style={{ transition: 'gap 0.25s' }}>
<Expando
title={<Subhead priceImpact={usdcPriceImpact} slippage={slippage} />}
open={open}
onExpand={onExpand}
height={7.25}
>
<Details trade={trade} slippage={slippage} usdcPriceImpact={usdcPriceImpact} />
</Expando>
<Footing>
<Estimate trade={trade} slippage={slippage} />
</Footing>
<ConfirmButton trade={trade} highPriceImpact={usdcPriceImpact.warning === 'error'} onConfirm={onConfirm} />
</Column>
</Body>
</>
)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment