Skip to content

I
interface
Commit 5dd80597 authored by Zach Pomerantz's avatar Zach Pomerantz Committed by GitHub
Browse files
Options

fix: routing tooltip styles (#3459)

parent b50e5511
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 104 deletions
src/assets/svg/dot_line.svg
View file @ 5dd80597
<svg width="100%" height="35" viewBox="800 0 300 200" xmlns="http://www.w3.org/2000/svg">
<line x1="0" x2="2000" y1="100" y2="100" stroke="currentColor" stroke-width="20" stroke-linecap="round" stroke-dasharray="1, 45"/>
<svg width="100%" height="35" viewBox="850 0 300 200" xmlns="http://www.w3.org/2000/svg">
<line x1="0" x2="3000" y1="100" y2="100" stroke="currentColor" stroke-width="20" stroke-linecap="round" stroke-dasharray="1, 45"/>
</svg>
src/lib/components/Badge.tsx deleted 100644 → 0
View file @ b50e5511
import styled, { Color } from 'lib/theme'
import Row from './Row'
const Badge = styled(Row)<{ borderRadius?: number; padding?: string; color?: Color }>`
background-color: ${({ theme, color = 'outline' }) => theme[color]};
border-radius: ${({ borderRadius }) => `${borderRadius ?? 0.5}em`};
padding: ${({ padding }) => padding ?? '0.25em 0.375em'};
`
export default Badge
src/lib/components/Swap/RoutingDiagram/index.tsx
View file @ 5dd80597
import { Plural, Trans } from '@lingui/macro'
import { Currency, TradeType } from '@uniswap/sdk-core'
import { FeeAmount } from '@uniswap/v3-sdk'
import { ReactComponent as DotLineImage } from 'assets/svg/dot_line.svg'
import Badge from 'lib/components/Badge'
import { ReactComponent as DotLine } from 'assets/svg/dot_line.svg'
import Column from 'lib/components/Column'
import Row from 'lib/components/Row'
import Rule from 'lib/components/Rule'
......@@ -14,53 +13,72 @@ import { InterfaceTrade } from 'state/routing/types'
import { getTokenPath, RoutingDiagramEntry } from './utils'
const Wrapper = styled(Column)`
padding: 0.25em;
`
const RouteRow = styled(Row)`
grid-template-columns: 1em 1.15em 1fr 1em;
min-width: 430px;
const StyledAutoRouterLabel = styled(ThemedText.ButtonSmall)`
@supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
background-image: linear-gradient(90deg, #2172e5 0%, #54e521 163.16%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
`
const RouteDetailsContainer = styled(Row)`
padding: 0.1em 0.5em;
position: relative;
`
function Header({ routes }: { routes: RoutingDiagramEntry[] }) {
return (
<Row justify="space-between" gap={1}>
<ThemedText.Subhead2>
<Row gap={0.25}>
<AutoRouter />
<StyledAutoRouterLabel color="primary" lineHeight={'16px'}>
<Trans>Auto Router</Trans>
</StyledAutoRouterLabel>
</Row>
</ThemedText.Subhead2>
<ThemedText.Body2>
<Plural value={routes.length} _1="Best route via 1 hop" other="Best route via # hops" />
</ThemedText.Body2>
</Row>
)
}
const DotsContainer = styled.div`
align-items: center;
display: flex;
opacity: 0.5;
const Dots = styled(DotLine)`
color: ${({ theme }) => theme.outline};
position: absolute;
width: calc(100% - 1em);
z-index: ${Layer.UNDERLAYER};
`
const DotsContainerShort = styled(DotsContainer)`
overflow: hidden;
position: relative;
width: 71px;
const RouteRow = styled(Row)`
flex-wrap: nowrap;
`
const Dots = styled(DotLineImage)`
path {
stroke: ${({ theme }) => theme.secondary};
}
const RouteNode = styled(Row)`
background-color: ${({ theme }) => theme.interactive};
border-radius: ${({ theme }) => `${(theme.borderRadius ?? 1) * 0.5}em`};
margin-left: 1.625em;
padding: 0.25em 0.375em;
width: max-content;
`
const DetailsRow = styled(Row)`
display: grid;
grid-template-columns: 4.8125em 1fr;
width: 100%;
const RouteBadge = styled.div`
background-color: ${({ theme }) => theme.module};
border-radius: ${({ theme }) => `${(theme.borderRadius ?? 1) * 0.25}em`};
padding: 0.125em;
`
const StyledAutoRouterLabel = styled(ThemedText.ButtonSmall)`
@supports (-webkit-background-clip: text) and (-webkit-text-fill-color: transparent) {
background-image: linear-gradient(90deg, #2172e5 0%, #54e521 163.16%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
function RouteDetail({ route }: { route: RoutingDiagramEntry }) {
const protocol = route.protocol.toUpperCase()
return (
<RouteNode>
<Row gap={0.375}>
<ThemedText.Caption>{route.percent.toSignificant(2)}%</ThemedText.Caption>
<RouteBadge>
<ThemedText.Badge color="secondary">{protocol}</ThemedText.Badge>
</RouteBadge>
</Row>
</RouteNode>
)
}
const RoutePool = styled(RouteNode)`
margin: 0 0.75em;
`
function Pool({
......@@ -73,15 +91,36 @@ function Pool({
feeAmount: FeeAmount
}) {
return (
<Badge padding="0 4px" color="dialog">
<Badge gap={0.375}>
<Row>
<RoutePool>
<ThemedText.Caption>
<Row gap={0.25}>
<TokenImg token={originCurrency} />
<TokenImg token={targetCurrency} />
<TokenImg token={targetCurrency} style={{ marginLeft: '-0.65em' }} />
{feeAmount / 10_000}%
</Row>
<ThemedText.Subhead2>{feeAmount / 10_000}%</ThemedText.Subhead2>
</Badge>
</Badge>
</ThemedText.Caption>
</RoutePool>
)
}
function Route({ route }: { route: RoutingDiagramEntry }) {
const [originCurrency] = route.path[0]
const [, targetCurrency] = route.path[route.path.length - 1]
return (
<Row align="center" style={{ gridTemplateColumns: '1em 1fr 1em' }}>
<TokenImg token={originCurrency} />
<RouteRow flex style={{ position: 'relative' }}>
<Dots />
<RouteDetail route={route} />
<RouteRow justify="space-evenly" flex>
{route.path.map(([originCurrency, targetCurrency, feeAmount], index) => (
<Pool key={index} originCurrency={originCurrency} targetCurrency={targetCurrency} feeAmount={feeAmount} />
))}
</RouteRow>
</RouteRow>
<TokenImg token={targetCurrency} />
</Row>
)
}
......@@ -89,55 +128,12 @@ export default function RoutingDiagram({ trade }: { trade: InterfaceTrade<Curren
const routes: RoutingDiagramEntry[] = useMemo(() => getTokenPath(trade), [trade])
return (
<Wrapper gap={0.75}>
<Row justify="space-between">
<Row gap={0.25}>
<AutoRouter />
<StyledAutoRouterLabel color="primary" lineHeight={'16px'}>
<Trans>Auto Router</Trans>
</StyledAutoRouterLabel>
</Row>
<ThemedText.ButtonSmall>
<Plural value={routes.length} _1="Best route via 1 hop" other="Best route via # hops" />
</ThemedText.ButtonSmall>
</Row>
<Column gap={0.75}>
<Header routes={routes} />
<Rule />
{routes.map((route, index) => (
<RouteRow key={index} align="center">
<TokenImg token={trade.inputAmount.currency} />
<DotsContainerShort>
<Dots />
</DotsContainerShort>
<RouteDetailsContainer justify="flex-start" flex>
<DotsContainer>
<Dots />
</DotsContainer>
<DetailsRow>
<Badge padding="0 4px" color="dialog">
<Badge gap={0.375}>
<ThemedText.ButtonSmall color="secondary">{route.percent.toSignificant(2)}%</ThemedText.ButtonSmall>
<Badge padding="0.125em" borderRadius={0.25} color="module">
<ThemedText.Badge color="secondary" fontSize={'0.5rem'}>
{route.protocol.toUpperCase()}
</ThemedText.Badge>
</Badge>
</Badge>
</Badge>
<Row justify="space-evenly" flex style={{ width: '100%' }}>
{route.path.map(([originCurrency, targetCurrency, feeAmount], index) => (
<Pool
key={index}
originCurrency={originCurrency}
targetCurrency={targetCurrency}
feeAmount={feeAmount}
/>
))}
</Row>
</DetailsRow>
</RouteDetailsContainer>
<TokenImg token={trade.outputAmount.currency} />
</RouteRow>
<Route key={index} route={route} />
))}
</Wrapper>
</Column>
)
}
src/lib/theme/type.tsx
View file @ 5dd80597
......@@ -65,7 +65,7 @@ export function Caption(props: TextProps) {
}
export function Badge(props: TextProps) {
return <TextWrapper className="badge" fontSize={8} fontWeight={600} lineHeight="8px" noWrap />
return <TextWrapper className="badge" fontSize="8px" fontWeight={600} lineHeight="8px" noWrap {...props} />
}
export function ButtonLarge(props: TextProps) {
......
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