Skip to content

Commit 1f6825e

Browse files
DanielSchiaviniDanielSchiavini
committed
Merge branch 'main' of github.com:curvefi/curve-frontend into refactor/routes
2 parents e8579b9 + d517730 commit 1f6825e

File tree

37 files changed

+817
-1403
lines changed

37 files changed

+817
-1403
lines changed

‎apps/main/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,17 @@
2222
"@hookform/error-message": "^2.0.1",
2323
"@hookform/resolvers": "^5.2.2",
2424
"@supercharge/promise-pool": "^3.2.0",
25-
"@tanstack/react-router": "^1.134.9",
26-
"@tanstack/react-router-devtools": "^1.134.9",
25+
"@tanstack/react-router": "^1.139.12",
26+
"@tanstack/react-router-devtools": "^1.139.12",
2727
"@types/memoizee": "^0.4.12",
2828
"curve-ui-kit": "*",
2929
"echarts": "^6.0.0",
30-
"echarts-for-react": "^3.0.2",
30+
"echarts-for-react": "^3.0.5",
3131
"external-rewards": "*",
3232
"fuse.js": "^7.1.0",
3333
"lightweight-charts": "^5.0.9",
3434
"memoizee": "^0.4.17",
35-
"react-hook-form": "7.66.0",
35+
"react-hook-form": "7.67.0",
3636
"recharts": "2.15.4",
3737
"solid-js": "^1.9.10",
3838
"ui": "*",
@@ -54,7 +54,7 @@
5454
"devDependencies": {
5555
"@curvefi/api": "*",
5656
"@eslint/js": "*",
57-
"@types/lodash": "^4.17.20",
57+
"@types/lodash": "^4.17.21",
5858
"@types/memoizee": "^0.4.12",
5959
"@types/node": "*",
6060
"@types/react": "*",
@@ -66,7 +66,7 @@
6666
"globals": "^16.5.0",
6767
"pinst": "^3.0.0",
6868
"typescript": "*",
69-
"typescript-eslint": "^8.46.2",
69+
"typescript-eslint": "^8.48.0",
7070
"vite": "*"
7171
}
7272
}

‎apps/main/src/dex/components/PagePool/PoolDetails/ChartOhlcWrapper/PoolActivity.tsx‎

Lines changed: 30 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -5,31 +5,28 @@ import TradesData from '@/dex/components/PagePool/PoolDetails/ChartOhlcWrapper/T
55
import useStore from '@/dex/store/useStore'
66
import { ChainId } from '@/dex/types/main.types'
77
import Button from '@ui/Button/Button'
8-
import Icon from '@ui/Icon'
98
import Spinner, { SpinnerWrapper } from '@ui/Spinner'
109
import type { LpTradeToken, PricesApiCoin } from '@ui-kit/features/candle-chart/types'
1110
import { t } from '@ui-kit/lib/i18n'
1211

12+
const MIN_HEIGHT = 330
13+
1314
const PoolActivity = ({
1415
chainId,
1516
poolAddress,
16-
chartExpanded,
1717
coins,
1818
tradesTokens,
1919
chartCombinations,
2020
}: {
2121
poolAddress: string
2222
chainId: ChainId
23-
chartExpanded: boolean
2423
coins: PricesApiCoin[]
2524
tradesTokens: LpTradeToken[]
2625
chartCombinations: PricesApiCoin[][]
2726
}) => {
28-
const activityHidden = useStore((state) => state.pools.pricesApiState.activityHidden)
2927
const activityStatus = useStore((state) => state.pools.pricesApiState.activityStatus)
3028
const tradeEventsData = useStore((state) => state.pools.pricesApiState.tradeEventsData)
3129
const liquidityEventsData = useStore((state) => state.pools.pricesApiState.liquidityEventsData)
32-
const setActivityHidden = useStore((state) => state.pools.setActivityHidden)
3330
const fetchPricesApiActivity = useStore((state) => state.pools.fetchPricesApiActivity)
3431

3532
const [eventOption, setEventOption] = useState<'TRADE' | 'LP'>('TRADE')
@@ -39,42 +36,35 @@ const PoolActivity = ({
3936
}, [chainId, chartCombinations, fetchPricesApiActivity, poolAddress])
4037

4138
return (
42-
<Wrapper chartExpanded={chartExpanded}>
39+
<Wrapper>
4340
<SectionHeader>
44-
{chartExpanded && (
45-
<HidePoolActivityButton variant={'select'} onClick={() => setActivityHidden(!activityHidden)}>
46-
<Icon name={activityHidden ? 'SidePanelClose' : 'SidePanelOpen'} size={16} />
47-
</HidePoolActivityButton>
48-
)}
49-
{!activityHidden && (
50-
<>
51-
<SectionTitle>{eventOption === 'TRADE' ? t`Swaps` : t`Liquidity`}</SectionTitle>
52-
<ButtonGroup>
53-
<Button
54-
className={eventOption === 'TRADE' ? 'active' : ''}
55-
variant={'select'}
56-
onClick={() => setEventOption('TRADE')}
57-
>
58-
{t`Swaps`}
59-
</Button>
60-
<Button
61-
className={eventOption === 'LP' ? 'active' : ''}
62-
variant={'select'}
63-
onClick={() => setEventOption('LP')}
64-
>
65-
{t`Liquidity`}
66-
</Button>
67-
</ButtonGroup>
68-
</>
69-
)}
41+
<>
42+
<SectionTitle>{eventOption === 'TRADE' ? t`Swaps` : t`Liquidity`}</SectionTitle>
43+
<ButtonGroup>
44+
<Button
45+
className={eventOption === 'TRADE' ? 'active' : ''}
46+
variant={'select'}
47+
onClick={() => setEventOption('TRADE')}
48+
>
49+
{t`Swaps`}
50+
</Button>
51+
<Button
52+
className={eventOption === 'LP' ? 'active' : ''}
53+
variant={'select'}
54+
onClick={() => setEventOption('LP')}
55+
>
56+
{t`Liquidity`}
57+
</Button>
58+
</ButtonGroup>
59+
</>
7060
</SectionHeader>
71-
{!activityHidden && activityStatus === 'READY' && (
61+
{activityStatus === 'READY' && (
7262
<GridContainer>
7363
<TitlesRow key={'titles'}>
7464
<EventTitle>{eventOption === 'TRADE' ? t`Swap` : t`Action`}</EventTitle>
7565
<TimestampColumnTitle>{t`Time`}</TimestampColumnTitle>
7666
</TitlesRow>
77-
<ElementsContainer minHeight={chartExpanded ? 548 : 330}>
67+
<ElementsContainer minHeight={MIN_HEIGHT}>
7868
{eventOption === 'TRADE' ? (
7969
tradeEventsData.length === 0 ? (
8070
<SpinnerWrapper>
@@ -93,37 +83,24 @@ const PoolActivity = ({
9383
</ElementsContainer>
9484
</GridContainer>
9585
)}
96-
{!activityHidden && activityStatus === 'LOADING' && (
97-
<SpinnerWrapper minHeight={chartExpanded ? '548px' : '330px'}>
86+
{activityStatus === 'LOADING' && (
87+
<SpinnerWrapper minHeight={`${MIN_HEIGHT}px`}>
9888
<Spinner size={18} />
9989
</SpinnerWrapper>
10090
)}
101-
{!activityHidden && activityStatus === 'ERROR' && (
102-
<SpinnerWrapper minHeight={chartExpanded ? '548px' : '330px'}>
91+
{activityStatus === 'ERROR' && (
92+
<SpinnerWrapper minHeight={`${MIN_HEIGHT}px`}>
10393
<ErrorMessage>{t`There was an error fetching the pool activity data.`}</ErrorMessage>
10494
</SpinnerWrapper>
10595
)}
10696
</Wrapper>
10797
)
10898
}
10999

110-
const Wrapper = styled.div<{ chartExpanded: boolean }>`
100+
const Wrapper = styled.div`
111101
display: flex;
112102
flex-direction: column;
113-
max-height: ${(props) => (props.chartExpanded ? '548px' : '350px')};
114-
margin: 1px; // align hide activity button
115-
`
116-
117-
const HidePoolActivityButton = styled(Button)`
118-
display: flex;
119-
justify-content: center;
120-
align-items: center;
121-
margin-left: calc(-1 * var(--spacing-3) * 2.5);
122-
margin-right: var(--spacing-2);
123-
box-shadow: none;
124-
&:hover:not(:disabled) {
125-
box-shadow: none;
126-
}
103+
max-height: 350px;
127104
`
128105

129106
const SectionHeader = styled.div`

‎apps/main/src/dex/components/PagePool/PoolDetails/ChartOhlcWrapper/index.tsx‎

Lines changed: 6 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,32 @@ import useStore from '@/dex/store/useStore'
66
import { ChainId } from '@/dex/types/main.types'
77
import Box from '@ui/Box'
88
import Button from '@ui/Button'
9-
import Icon from '@ui/Icon'
109
import ChartWrapper from '@ui-kit/features/candle-chart/ChartWrapper'
1110
import type { PricesApiPool, PricesApiCoin, LabelList } from '@ui-kit/features/candle-chart/types'
1211
import { getThreeHundredResultsAgo, subtractTimeUnit } from '@ui-kit/features/candle-chart/utils'
13-
import { useLayoutStore } from '@ui-kit/features/layout'
1412
import { useUserProfileStore } from '@ui-kit/features/user-profile'
1513
import { t } from '@ui-kit/lib/i18n'
1614

15+
const CHART_HEIGHT = 300
16+
1717
const PoolInfoData = ({ rChainId, pricesApiPoolData }: { rChainId: ChainId; pricesApiPoolData: PricesApiPool }) => {
1818
const theme = useUserProfileStore((state) => state.theme)
1919
const chartOhlcData = useStore((state) => state.pools.pricesApiState.chartOhlcData)
2020
const chartStatus = useStore((state) => state.pools.pricesApiState.chartStatus)
2121
const timeOption = useStore((state) => state.pools.pricesApiState.timeOption)
22-
const chartExpanded = useStore((state) => state.pools.pricesApiState.chartExpanded)
23-
const activityHidden = useStore((state) => state.pools.pricesApiState.activityHidden)
2422
const tradesTokens = useStore((state) => state.pools.pricesApiState.tradesTokens)
2523
const refetchingCapped = useStore((state) => state.pools.pricesApiState.refetchingCapped)
2624
const lastFetchEndTime = useStore((state) => state.pools.pricesApiState.lastFetchEndTime)
2725
const setChartTimeOption = useStore((state) => state.pools.setChartTimeOption)
28-
const setChartExpanded = useStore((state) => state.pools.setChartExpanded)
2926
const fetchPricesApiCharts = useStore((state) => state.pools.fetchPricesApiCharts)
3027
const fetchPricesApiActivity = useStore((state) => state.pools.fetchPricesApiActivity)
3128
const fetchMorePricesApiCharts = useStore((state) => state.pools.fetchMorePricesApiCharts)
32-
const isMdUp = useLayoutStore((state) => state.isMdUp)
3329

3430
const [poolInfo, setPoolInfo] = useState<'chart' | 'poolActivity'>('chart')
3531
const [selectChartList, setSelectChartList] = useState<LabelList[]>([])
3632
const [selectedChartIndex, setChartSelectedIndex] = useState<number>(0)
3733
const [isFlipped, setIsFlipped] = useState<boolean[]>([])
3834

39-
const chartHeight = {
40-
expanded: 500,
41-
standard: 300,
42-
}
43-
4435
const chartCombinations: PricesApiCoin[][] = useMemo(() => {
4536
const coins = pricesApiPoolData.coins.slice(0, pricesApiPoolData.n_coins)
4637

@@ -195,42 +186,8 @@ const PoolInfoData = ({ rChainId, pricesApiPoolData }: { rChainId: ChainId; pric
195186
setIsFlipped(updatedList)
196187
}
197188

198-
return chartExpanded ? (
199-
<ExpandedWrapper activityHidden={activityHidden}>
200-
<Wrapper variant={'secondary'} chartExpanded={chartExpanded}>
201-
<ChartWrapper
202-
hideCandleSeriesLabel={false}
203-
chartType="poolPage"
204-
chartStatus={chartStatus}
205-
chartHeight={chartHeight}
206-
chartExpanded={chartExpanded}
207-
themeType={theme}
208-
ohlcData={chartOhlcData}
209-
selectChartList={selectChartList}
210-
selectedChartIndex={selectedChartIndex}
211-
setChartSelectedIndex={setChartSelectedIndex}
212-
timeOption={timeOption}
213-
setChartTimeOption={setChartTimeOption}
214-
refetchPricesData={refetchPricesData}
215-
flipChart={flipChart}
216-
refetchingCapped={refetchingCapped}
217-
fetchMoreChartData={fetchMoreChartData}
218-
lastFetchEndTime={lastFetchEndTime}
219-
/>
220-
</Wrapper>
221-
<LpEventsWrapperExpanded>
222-
<PoolActivity
223-
chartExpanded={chartExpanded}
224-
coins={pricesApiPoolData.coins}
225-
tradesTokens={tradesTokens}
226-
poolAddress={pricesApiPoolData.address}
227-
chainId={rChainId}
228-
chartCombinations={chartCombinations}
229-
/>
230-
</LpEventsWrapperExpanded>
231-
</ExpandedWrapper>
232-
) : (
233-
<Wrapper chartExpanded={chartExpanded}>
189+
return (
190+
<Wrapper>
234191
<SelectorRow>
235192
<SelectorButton
236193
variant={'text'}
@@ -246,16 +203,9 @@ const PoolInfoData = ({ rChainId, pricesApiPoolData }: { rChainId: ChainId; pric
246203
>
247204
{t`Pool Activity`}
248205
</SelectorButton>
249-
{isMdUp && (
250-
<ExpandButton variant={'text'} onClick={() => setChartExpanded(!chartExpanded)}>
251-
{chartExpanded ? 'Minimize' : 'Expand'}
252-
<ExpandIcon name={chartExpanded ? 'Minimize' : 'Maximize'} size={16} aria-label={t`Expand chart`} />
253-
</ExpandButton>
254-
)}
255206
</SelectorRow>
256207
{pricesApiPoolData && poolInfo === 'poolActivity' && (
257208
<PoolActivity
258-
chartExpanded={chartExpanded}
259209
coins={pricesApiPoolData.coins}
260210
tradesTokens={tradesTokens}
261211
poolAddress={pricesApiPoolData.address}
@@ -268,8 +218,7 @@ const PoolInfoData = ({ rChainId, pricesApiPoolData }: { rChainId: ChainId; pric
268218
hideCandleSeriesLabel={false}
269219
chartType="poolPage"
270220
chartStatus={chartStatus}
271-
chartHeight={chartHeight}
272-
chartExpanded={chartExpanded}
221+
chartHeight={CHART_HEIGHT}
273222
themeType={theme}
274223
ohlcData={chartOhlcData}
275224
selectChartList={selectChartList}
@@ -288,23 +237,9 @@ const PoolInfoData = ({ rChainId, pricesApiPoolData }: { rChainId: ChainId; pric
288237
)
289238
}
290239

291-
const ExpandedWrapper = styled.div<{ activityHidden: boolean }>`
292-
display: grid;
293-
${(props) =>
294-
!props.activityHidden
295-
? 'grid-template-columns: 2fr 26.4375rem'
296-
: 'grid-template-columns: auto calc(var(--spacing-3) + var(--spacing-3))'}
297-
`
298-
299-
const LpEventsWrapperExpanded = styled(Box)`
300-
padding: var(--spacing-3);
301-
background: var(--box--secondary--content--background-color);
302-
`
303-
304-
const Wrapper = styled(Box)<{ chartExpanded: boolean }>`
240+
const Wrapper = styled(Box)`
305241
display: flex;
306242
flex-direction: column;
307-
padding: ${(props) => (props.chartExpanded ? 'var(--spacing-3)' : '0')};
308243
`
309244

310245
const SelectorRow = styled.div`
@@ -326,14 +261,4 @@ const SelectorButton = styled(Button)`
326261
}
327262
`
328263

329-
const ExpandButton = styled(SelectorButton)`
330-
margin-left: auto;
331-
display: flex;
332-
align-content: center;
333-
`
334-
335-
const ExpandIcon = styled(Icon)`
336-
margin-left: var(--spacing-1);
337-
`
338-
339264
export default PoolInfoData

0 commit comments

Comments
 (0)