Skip to content

Commit dfcea1c

Browse files
neikopneikop
committed
Improve review modal
1 parent 441f7a4 commit dfcea1c

File tree

8 files changed

+173
-245
lines changed

8 files changed

+173
-245
lines changed

‎apps/kyberswap-interface/src/pages/Earns/PoolDetail/AddLiquidity/components/ReviewModal/EstimateInfo.tsx‎

Lines changed: 63 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { PartnerFeeAction, Pool, ProtocolFeeAction, RefundAction, ZapAction, ZapRouteDetail } from '@kyber/schema'
22
import { getZapImpact } from '@kyber/utils'
3-
import { rgba } from 'polished'
43
import { useMemo } from 'react'
54
import { Text } from 'rebass'
65
import styled from 'styled-components'
@@ -12,50 +11,24 @@ import { getOutputTokenItems } from 'pages/Earns/PoolDetail/AddLiquidity/utils'
1211
import { formatDisplayNumber } from 'utils/numbers'
1312

1413
const Card = styled(Stack)`
15-
padding: 20px;
16-
border-radius: 20px;
1714
background: ${({ theme }) => theme.buttonGray};
18-
`
19-
20-
const SectionLabel = styled(Text)`
21-
color: ${({ theme }) => theme.subText};
22-
font-size: 14px;
23-
`
24-
25-
const ValueText = styled(Text)`
26-
font-weight: 500;
27-
`
28-
29-
const TotalText = styled(Text)`
30-
font-weight: 500;
31-
`
32-
33-
const EstimateTokenBox = styled(Stack)`
34-
flex: 1 1 0;
35-
min-width: 0;
36-
gap: 4px;
15+
border-radius: 12px;
16+
padding: 12px 16px;
3717
`
3818

3919
const Divider = styled.div`
40-
width: 100%;
20+
background: ${({ theme }) => theme.tabActive};
4121
height: 1px;
42-
background: ${({ theme }) => theme.border};
22+
width: 100%;
4323
`
4424

4525
const MetricCard = styled(Stack)`
26+
background: ${({ theme }) => theme.tabActive};
27+
border-radius: 12px;
4628
flex: 1 1 0;
29+
gap: 4px;
4730
min-width: 0;
48-
gap: 8px;
49-
padding: 12px;
50-
border-radius: 12px;
51-
background: ${({ theme }) => theme.tabActive};
52-
`
53-
54-
const MetricTitle = styled(Text)`
55-
width: fit-content;
56-
color: ${({ theme }) => theme.subText};
57-
font-size: 12px;
58-
border-bottom: 1px dotted ${({ theme }) => rgba(theme.border, 0.24)};
31+
padding: 8px 12px;
5932
`
6033

6134
type EstimateInfoProps = {
@@ -125,55 +98,64 @@ const EstimateInfo = ({ pool, route, slippage }: EstimateInfoProps) => {
12598
const estimate = useMemo(() => buildEstimate({ pool, route, slippage }), [pool, route, slippage])
12699

127100
return (
128-
<Card gap={16}>
129-
<HStack align="center" justify="space-between">
130-
<SectionLabel>Est. Liquidity Value</SectionLabel>
131-
<TotalText color={theme.text}>
132-
{formatDisplayNumber(estimate.totalUsd, { style: 'currency', significantDigits: 6 })}
133-
</TotalText>
134-
</HStack>
135-
136-
<HStack align="flex-start" gap={12} wrap="wrap">
137-
{estimate.items.map(item => (
138-
<EstimateTokenBox key={item.token.address}>
139-
<HStack minWidth={0} align="center" gap={6}>
140-
<TokenLogo src={item.token.logo} size={16} />
141-
<ValueText color={theme.text}>
142-
{formatDisplayNumber(item.amount, { significantDigits: 8 })} {item.token.symbol}
143-
</ValueText>
144-
</HStack>
145-
<SectionLabel>
146-
~{formatDisplayNumber(item.usdValue, { style: 'currency', significantDigits: 6 })}
147-
</SectionLabel>
148-
</EstimateTokenBox>
149-
))}
150-
</HStack>
101+
<Card gap={8}>
102+
<Stack gap={12}>
103+
<HStack align="center" justify="space-between">
104+
<Text color={theme.subText}>Est. Liquidity Value</Text>
105+
<Text color={theme.text} fontWeight={500}>
106+
{formatDisplayNumber(estimate.totalUsd, { style: 'currency', significantDigits: 6 })}
107+
</Text>
108+
</HStack>
109+
110+
<HStack align="flex-start" gap={12} wrap="wrap">
111+
{estimate.items.map((item, index) => (
112+
<Stack key={item.token.address} flex="1 1 0" gap={4} minWidth={0} align={index ? 'flex-end' : 'flex-start'}>
113+
<HStack align="center" gap={4} minWidth={0} wrap="wrap">
114+
<TokenLogo src={item.token.logo} size={16} />
115+
<Text color={theme.text}>
116+
{formatDisplayNumber(item.amount, { significantDigits: 6 })} {item.token.symbol}
117+
</Text>
118+
</HStack>
119+
120+
<Text color={theme.subText}>
121+
~{formatDisplayNumber(item.usdValue, { style: 'currency', significantDigits: 6 })}
122+
</Text>
123+
</Stack>
124+
))}
125+
</HStack>
126+
</Stack>
151127

152128
<Divider />
153129

154-
<HStack align="center" justify="space-between">
155-
<MetricTitle as="div">Max Slippage</MetricTitle>
156-
<ValueText color={theme.text}>{formatBpsLabel(estimate.slippage)}</ValueText>
157-
</HStack>
158-
159-
<HStack align="stretch" gap={12} wrap="wrap">
160-
<MetricCard>
161-
<MetricTitle>Est. Remaining</MetricTitle>
162-
<ValueText color={theme.text}>
163-
{formatDisplayNumber(estimate.remainingUsd, { style: 'currency', significantDigits: 6 })}
164-
</ValueText>
165-
</MetricCard>
166-
167-
<MetricCard>
168-
<MetricTitle>Zap Impact</MetricTitle>
169-
<ValueText color={theme.text}>{estimate.zapImpact?.display || '--'}</ValueText>
170-
</MetricCard>
171-
172-
<MetricCard>
173-
<MetricTitle>Zap Fee</MetricTitle>
174-
<ValueText color={theme.text}>{formatPercent(estimate.zapFeePercent)}</ValueText>
175-
</MetricCard>
176-
</HStack>
130+
<Stack gap={8}>
131+
<HStack align="center" justify="space-between">
132+
<Text color={theme.subText}>Max Slippage</Text>
133+
<Text color={theme.text} fontWeight={500}>
134+
{formatBpsLabel(estimate.slippage)}
135+
</Text>
136+
</HStack>
137+
138+
<HStack align="stretch" gap={8} wrap="wrap">
139+
<MetricCard>
140+
<Text color={theme.subText}>Est. Remaining</Text>
141+
<Text color={theme.text} fontWeight={500}>
142+
{formatDisplayNumber(estimate.remainingUsd, { style: 'currency', significantDigits: 6 })}
143+
</Text>
144+
</MetricCard>
145+
<MetricCard>
146+
<Text color={theme.subText}>Zap Impact</Text>
147+
<Text color={theme.text} fontWeight={500}>
148+
{estimate.zapImpact?.display}
149+
</Text>
150+
</MetricCard>
151+
<MetricCard>
152+
<Text color={theme.subText}>Zap Fee</Text>
153+
<Text color={theme.text} fontWeight={500}>
154+
{formatPercent(estimate.zapFeePercent)}
155+
</Text>
156+
</MetricCard>
157+
</HStack>
158+
</Stack>
177159
</Card>
178160
)
179161
}

‎apps/kyberswap-interface/src/pages/Earns/PoolDetail/AddLiquidity/components/ReviewModal/PriceInfo.tsx‎

Lines changed: 39 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -9,56 +9,42 @@ import type { ZapState } from 'pages/Earns/PoolDetail/AddLiquidity/hooks/useZapS
99
import { formatDisplayNumber } from 'utils/numbers'
1010

1111
const Card = styled(Stack)`
12-
padding: 20px;
13-
border-radius: 20px;
1412
background: ${({ theme }) => theme.buttonGray};
15-
`
16-
17-
const SectionLabel = styled(Text)`
18-
color: ${({ theme }) => theme.subText};
19-
font-size: 14px;
20-
`
21-
22-
const LabelText = styled(Text)`
23-
color: ${({ theme }) => theme.subText};
24-
font-size: 12px;
13+
border-radius: 12px;
14+
padding: 12px 16px;
2515
`
2616

2717
const RangeBox = styled(HStack)`
2818
flex: 1 1 0;
2919
min-width: 0;
3020
align-items: stretch;
31-
gap: 0;
32-
overflow: hidden;
33-
border-radius: 16px;
21+
border-radius: 12px;
3422
background: ${({ theme }) => theme.tabActive};
3523
`
3624

3725
const RangeLabelBox = styled(Stack)`
3826
justify-content: center;
39-
min-width: 72px;
4027
padding: 8px 12px;
28+
border-top-left-radius: 12px;
29+
border-bottom-left-radius: 12px;
4130
background: ${({ theme }) => theme.background};
4231
`
4332

44-
const RangeValue = styled(Text)`
45-
display: flex;
46-
align-items: center;
47-
justify-content: center;
33+
const RangeValueBox = styled(HStack)`
4834
flex: 1 1 0;
4935
min-width: 0;
36+
justify-content: center;
5037
padding: 8px 12px;
51-
font-weight: 500;
5238
`
5339

54-
const IconButton = styled.button`
40+
const RevertButton = styled.button`
5541
display: flex;
5642
align-items: center;
5743
justify-content: center;
58-
width: 40px;
59-
height: 40px;
60-
padding: 0;
61-
border: 0;
44+
flex: 0 0 auto;
45+
width: 24px;
46+
height: 24px;
47+
border: none;
6248
border-radius: 999px;
6349
background: ${({ theme }) => theme.tabActive};
6450
color: ${({ theme }) => theme.subText};
@@ -81,38 +67,49 @@ const PriceInfo = ({ pool, priceRange }: PriceInfoProps) => {
8167
const isUniV3 = priceRange.minPrice !== null || priceRange.maxPrice !== null
8268

8369
return (
84-
<Card gap={16}>
70+
<Card gap={12}>
8571
<HStack align="center" justify="space-between" gap={12}>
86-
<HStack align="center" gap={6} wrap="wrap">
87-
<SectionLabel>Current Price</SectionLabel>
88-
<Text color={theme.text}>
89-
1 {baseToken.symbol} = {formatDisplayNumber(priceRange.poolPrice, { significantDigits: 8 })}{' '}
90-
{quoteToken.symbol}
91-
</Text>
72+
<HStack flex="1 1 auto" align="center" gap={8} wrap="wrap">
73+
<Text color={theme.subText}>Current Price</Text>
74+
<HStack gap={4} wrap="wrap">
75+
<Text>1</Text>
76+
<Text>{baseToken.symbol}</Text>
77+
<Text>=</Text>
78+
<Text>{formatDisplayNumber(priceRange.poolPrice, { significantDigits: 8 })}</Text>
79+
<Text>{quoteToken.symbol}</Text>
80+
</HStack>
9281
</HStack>
9382

94-
<IconButton type="button" onClick={priceRange.toggleRevertPrice}>
95-
<RevertPriceIcon width={14} height={14} />
96-
</IconButton>
83+
<RevertButton aria-label="Reverse price" onClick={priceRange.toggleRevertPrice} type="button">
84+
<RevertPriceIcon width={12} height={12} />
85+
</RevertButton>
9786
</HStack>
9887

99-
{isUniV3 ? (
88+
{isUniV3 && (
10089
<HStack gap={12}>
10190
<RangeBox>
10291
<RangeLabelBox>
103-
<LabelText>MIN</LabelText>
92+
<Text fontSize={12} color={theme.subText}>
93+
MIN
94+
</Text>
10495
</RangeLabelBox>
105-
<RangeValue color={theme.text}>{priceRange.minPrice || '--'}</RangeValue>
96+
<RangeValueBox>
97+
<Text fontWeight={500}>{priceRange.minPrice}</Text>
98+
</RangeValueBox>
10699
</RangeBox>
107100

108101
<RangeBox>
109102
<RangeLabelBox>
110-
<LabelText>MAX</LabelText>
103+
<Text fontSize={12} color={theme.subText}>
104+
MAX
105+
</Text>
111106
</RangeLabelBox>
112-
<RangeValue color={theme.text}>{priceRange.maxPrice || '--'}</RangeValue>
107+
<RangeValueBox>
108+
<Text fontWeight={500}>{priceRange.maxPrice}</Text>
109+
</RangeValueBox>
113110
</RangeBox>
114111
</HStack>
115-
) : null}
112+
)}
116113
</Card>
117114
)
118115
}

‎apps/kyberswap-interface/src/pages/Earns/PoolDetail/AddLiquidity/components/ReviewModal/ZapInfo.tsx‎

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,9 @@ import { getInputTokenItems, getNetworkInfo } from 'pages/Earns/PoolDetail/AddLi
1111
import { formatDisplayNumber } from 'utils/numbers'
1212

1313
const Card = styled(Stack)`
14-
padding: 20px;
15-
border-radius: 20px;
1614
background: ${({ theme }) => theme.buttonGray};
17-
`
18-
19-
const SectionLabel = styled(Text)`
20-
color: ${({ theme }) => theme.subText};
21-
font-size: 14px;
22-
`
23-
24-
const TotalText = styled(Text)`
25-
font-weight: 500;
15+
border-radius: 12px;
16+
padding: 12px 16px;
2617
`
2718

2819
type ZapInfoProps = {
@@ -90,27 +81,27 @@ const ZapInfo = ({ chainId, route, tokenInput }: ZapInfoProps) => {
9081
)
9182

9283
return (
93-
<Card gap={16}>
84+
<Card gap={12}>
9485
<HStack align="center" justify="space-between">
95-
<SectionLabel>Zap-in Amount</SectionLabel>
96-
<TotalText color={theme.text}>
86+
<Text color={theme.subText}>Zap-in Amount</Text>
87+
<Text color={theme.text} fontWeight={500}>
9788
{formatDisplayNumber(totalInputUsd, { style: 'currency', significantDigits: 6 })}
98-
</TotalText>
89+
</Text>
9990
</HStack>
10091

101-
<Stack gap={12}>
92+
<Stack gap={8}>
10293
{items.map(item => (
10394
<HStack key={item.token.address} align="center" gap={12} wrap="wrap">
104-
<HStack minWidth={0} align="center" gap={8} wrap="wrap">
95+
<HStack align="center" gap={8} minWidth={0} wrap="wrap">
10596
<TokenLogo src={item.token.logo} size={18} />
10697
<Text color={theme.text}>
10798
{formatDisplayNumber(item.amount, { significantDigits: 6 })} {item.token.symbol}
10899
</Text>
109100
</HStack>
110101

111-
<SectionLabel>
102+
<Text color={theme.subText}>
112103
~{formatDisplayNumber(item.usdValue, { style: 'currency', significantDigits: 6 })}
113-
</SectionLabel>
104+
</Text>
114105
</HStack>
115106
))}
116107
</Stack>

0 commit comments

Comments
 (0)