Skip to content

Commit cf4cd3a

Browse files
neikopneikop
committed
Update PriceInfo
1 parent 475bbc7 commit cf4cd3a

File tree

4 files changed

+136
-61
lines changed

4 files changed

+136
-61
lines changed

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

Lines changed: 51 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import styled from 'styled-components'
66
import { ReactComponent as RevertPriceIcon } from 'assets/svg/earn/ic_revert_price.svg'
77
import { HStack, Stack } from 'components/Stack'
88
import useTheme from 'hooks/useTheme'
9+
import { getDisplayedPriceTokens } from 'pages/Earns/PoolDetail/AddLiquidity/components/PriceSection/utils'
910
import { formatDisplayNumber } from 'utils/numbers'
1011

1112
const RevertButton = styled.button`
@@ -33,32 +34,62 @@ interface PriceInfoProps {
3334
onRevertPriceToggle?: () => void
3435
}
3536

36-
const PriceInfo = ({ pool, poolPrice, revertPrice, onRevertPriceToggle }: PriceInfoProps) => {
37+
export const CurrentPriceHeader = ({
38+
pool,
39+
poolPrice,
40+
revertPrice,
41+
formattedPrice,
42+
onRevertPriceToggle,
43+
}: {
44+
pool: Pool
45+
poolPrice: number | null
46+
revertPrice: boolean
47+
formattedPrice: string
48+
onRevertPriceToggle?: () => void
49+
}) => {
3750
const theme = useTheme()
38-
const token0 = revertPrice ? pool.token1 : pool.token0
39-
const token1 = revertPrice ? pool.token0 : pool.token1
51+
const { baseToken, quoteToken } = getDisplayedPriceTokens(pool, revertPrice)
4052

4153
return (
42-
<Stack border={`1px solid ${theme.border}`} borderRadius={12} gap={8} p="8px 12px">
43-
<HStack align="center" justify="space-between" gap={12}>
44-
<HStack flex="1 1 auto" align="center" gap={8} wrap="wrap">
45-
<Text color={theme.subText} fontSize={14}>
46-
Current Price
47-
</Text>
48-
<HStack color={theme.text} gap={4} wrap="wrap" fontSize={14}>
49-
<Text>1</Text>
50-
<Text>{token0.symbol}</Text>
51-
<Text>=</Text>
52-
<Text>{formatDisplayNumber(poolPrice, { significantDigits: 8 })}</Text>
53-
<Text>{token1.symbol}</Text>
54-
</HStack>
54+
<HStack align="center" justify="space-between" gap={12}>
55+
<HStack flex="1 1 auto" align="center" gap={8} wrap="wrap">
56+
<Text color={theme.subText} fontSize={14}>
57+
Current Price
58+
</Text>
59+
<HStack color={theme.text} gap={4} wrap="wrap" fontSize={14}>
60+
<Text>1</Text>
61+
<Text>{baseToken.symbol}</Text>
62+
<Text>=</Text>
63+
<Text>{formattedPrice}</Text>
64+
<Text>{quoteToken.symbol}</Text>
5565
</HStack>
56-
57-
<RevertButton aria-label="Reverse price" onClick={onRevertPriceToggle} type="button">
58-
<RevertPriceIcon width={12} height={12} />
59-
</RevertButton>
6066
</HStack>
6167

68+
<RevertButton
69+
aria-label="Reverse price"
70+
disabled={poolPrice === null}
71+
onClick={onRevertPriceToggle}
72+
type="button"
73+
>
74+
<RevertPriceIcon width={12} height={12} />
75+
</RevertButton>
76+
</HStack>
77+
)
78+
}
79+
80+
const PriceInfo = ({ pool, poolPrice, revertPrice, onRevertPriceToggle }: PriceInfoProps) => {
81+
const theme = useTheme()
82+
83+
return (
84+
<Stack border={`1px solid ${theme.border}`} borderRadius={12} gap={8} p="8px 12px">
85+
<CurrentPriceHeader
86+
pool={pool}
87+
poolPrice={poolPrice}
88+
revertPrice={revertPrice}
89+
formattedPrice={formatDisplayNumber(poolPrice, { significantDigits: 8 })}
90+
onRevertPriceToggle={onRevertPriceToggle}
91+
/>
92+
6293
{poolPrice === null && (
6394
<Stack borderRadius={8} background={rgba(theme.warning, 0.12)} p="8px 12px">
6495
<Text color={theme.text} fontSize={12} fontStyle="italic">

‎apps/kyberswap-interface/src/pages/Earns/PoolDetail/AddLiquidity/components/PriceSection/utils.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,11 @@ export interface RangeOption {
2424
tickUpper: number
2525
}
2626

27+
export const getDisplayedPriceTokens = (pool: Pool, revertPrice: boolean) => ({
28+
baseToken: revertPrice ? pool.token1 : pool.token0,
29+
quoteToken: revertPrice ? pool.token0 : pool.token1,
30+
})
31+
2732
export const getRangePresetOptions = ({
2833
pool,
2934
poolPrice,
@@ -102,3 +107,51 @@ export const getDefaultRangePreset = (category?: Pool['category']) =>
102107
? DEFAULT_PRICE_RANGE[category as keyof typeof DEFAULT_PRICE_RANGE] ||
103108
DEFAULT_PRICE_RANGE[POOL_CATEGORY.EXOTIC_PAIR]
104109
: undefined
110+
111+
export const getPriceRangeToShow = ({
112+
pool,
113+
revertPrice,
114+
tickLower,
115+
tickUpper,
116+
minPrice,
117+
maxPrice,
118+
}: {
119+
pool: Pool | null
120+
revertPrice: boolean
121+
tickLower: number | null
122+
tickUpper: number | null
123+
minPrice: string | null
124+
maxPrice: string | null
125+
}) => {
126+
if (!pool) return
127+
128+
const { success: isUniV3, data: uniV3Pool } = univ3PoolNormalize.safeParse(pool)
129+
130+
if (!isUniV3) {
131+
return {
132+
minPrice: '0',
133+
maxPrice: '∞',
134+
}
135+
}
136+
137+
const isMinTick = uniV3Pool.minTick === tickLower
138+
const isMaxTick = uniV3Pool.maxTick === tickUpper
139+
140+
let minPriceToShow = minPrice
141+
let maxPriceToShow = maxPrice
142+
143+
if (isMinTick) {
144+
if (!revertPrice) minPriceToShow = '0'
145+
else maxPriceToShow = '∞'
146+
}
147+
148+
if (isMaxTick) {
149+
if (!revertPrice) maxPriceToShow = '∞'
150+
else minPriceToShow = '0'
151+
}
152+
153+
return {
154+
minPrice: minPriceToShow,
155+
maxPrice: maxPriceToShow,
156+
}
157+
}

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

Lines changed: 31 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import { Pool } from '@kyber/schema'
22
import { Text } from 'rebass'
33
import styled from 'styled-components'
44

5-
import { ReactComponent as RevertPriceIcon } from 'assets/svg/earn/ic_revert_price.svg'
65
import { HStack, Stack } from 'components/Stack'
76
import useTheme from 'hooks/useTheme'
7+
import { CurrentPriceHeader } from 'pages/Earns/PoolDetail/AddLiquidity/components/PriceSection/PriceInfo'
8+
import { getPriceRangeToShow } from 'pages/Earns/PoolDetail/AddLiquidity/components/PriceSection/utils'
89
import type { ZapState } from 'pages/Earns/PoolDetail/AddLiquidity/hooks/useZapState'
910
import { formatDisplayNumber } from 'utils/numbers'
1011

@@ -27,7 +28,7 @@ const RangeLabelBox = styled(Stack)`
2728
padding: 8px 12px;
2829
border-top-left-radius: 12px;
2930
border-bottom-left-radius: 12px;
30-
background: ${({ theme }) => theme.background};
31+
background: ${({ theme }) => theme.darkText};
3132
`
3233

3334
const RangeValueBox = styled(HStack)`
@@ -37,22 +38,12 @@ const RangeValueBox = styled(HStack)`
3738
padding: 8px 12px;
3839
`
3940

40-
const RevertButton = styled.button`
41-
display: flex;
42-
align-items: center;
43-
justify-content: center;
44-
flex: 0 0 auto;
45-
width: 24px;
46-
height: 24px;
47-
border: none;
48-
border-radius: 999px;
49-
background: ${({ theme }) => theme.tabActive};
50-
color: ${({ theme }) => theme.subText};
51-
cursor: pointer;
52-
53-
:hover {
54-
filter: brightness(1.12);
55-
}
41+
const RangeValue = styled(Text)`
42+
min-width: 0;
43+
max-width: 100%;
44+
overflow: hidden;
45+
text-overflow: ellipsis;
46+
white-space: nowrap;
5647
`
5748

5849
type PriceInfoProps = {
@@ -62,30 +53,26 @@ type PriceInfoProps = {
6253

6354
const PriceInfo = ({ pool, priceRange }: PriceInfoProps) => {
6455
const theme = useTheme()
65-
const baseToken = priceRange.revertPrice ? pool.token1 : pool.token0
66-
const quoteToken = priceRange.revertPrice ? pool.token0 : pool.token1
67-
const isUniV3 = priceRange.minPrice !== null || priceRange.maxPrice !== null
56+
const rangeToShow = getPriceRangeToShow({
57+
pool,
58+
revertPrice: priceRange.revertPrice,
59+
tickLower: priceRange.tickLower,
60+
tickUpper: priceRange.tickUpper,
61+
minPrice: priceRange.minPrice,
62+
maxPrice: priceRange.maxPrice,
63+
})
6864

6965
return (
7066
<Card gap={12}>
71-
<HStack align="center" justify="space-between" gap={12}>
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>
81-
</HStack>
82-
83-
<RevertButton aria-label="Reverse price" onClick={priceRange.toggleRevertPrice} type="button">
84-
<RevertPriceIcon width={12} height={12} />
85-
</RevertButton>
86-
</HStack>
67+
<CurrentPriceHeader
68+
pool={pool}
69+
poolPrice={priceRange.poolPrice}
70+
revertPrice={priceRange.revertPrice}
71+
formattedPrice={formatDisplayNumber(priceRange.poolPrice, { significantDigits: 8 })}
72+
onRevertPriceToggle={priceRange.toggleRevertPrice}
73+
/>
8774

88-
{isUniV3 && (
75+
{rangeToShow && (
8976
<HStack gap={12}>
9077
<RangeBox>
9178
<RangeLabelBox>
@@ -94,7 +81,9 @@ const PriceInfo = ({ pool, priceRange }: PriceInfoProps) => {
9481
</Text>
9582
</RangeLabelBox>
9683
<RangeValueBox>
97-
<Text fontWeight={500}>{priceRange.minPrice}</Text>
84+
<RangeValue fontWeight={500} title={rangeToShow.minPrice?.toString()}>
85+
{rangeToShow.minPrice}
86+
</RangeValue>
9887
</RangeValueBox>
9988
</RangeBox>
10089

@@ -105,7 +94,9 @@ const PriceInfo = ({ pool, priceRange }: PriceInfoProps) => {
10594
</Text>
10695
</RangeLabelBox>
10796
<RangeValueBox>
108-
<Text fontWeight={500}>{priceRange.maxPrice}</Text>
97+
<RangeValue fontWeight={500} title={rangeToShow.maxPrice?.toString()}>
98+
{rangeToShow.maxPrice}
99+
</RangeValue>
109100
</RangeValueBox>
110101
</RangeBox>
111102
</HStack>

‎apps/kyberswap-interface/src/pages/Earns/PoolDetail/components/PoolHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const ProtocolLogo = styled.img`
6161
const FeeBadge = styled(Stack)`
6262
padding: 4px 12px;
6363
border-radius: 999px;
64-
background: ${({ theme }) => theme.background};
64+
background: ${({ theme }) => theme.darkText};
6565
`
6666

6767
const TooltipAddressRow = ({ token }: { token: PoolDetailToken }) => {

0 commit comments

Comments
 (0)