@@ -7,9 +7,13 @@ import { getConfig } from 'config/index';
77import { GlobalConst , DRAGON_EGGS_SHOW } from 'constants/index' ;
88import CustomTabSwitch from 'components/v3/CustomTabSwitch' ;
99import { Eggs } from 'components' ;
10-
11- import { useV3Positions } from 'hooks/v3/useV3Positions' ;
10+ import Loader from 'components/Loader' ;
11+ import {
12+ useV3SteerPositionsCount ,
13+ useV3Positions ,
14+ } from 'hooks/v3/useV3Positions' ;
1215import MyQuickswapPoolsV3 from '../MyQuickswapPoolsV3' ;
16+ import MySteerPoolsV3 from '../MySteerPoolsV3' ;
1317import FilterPanelItem from '../FilterPanelItem' ;
1418
1519export default function MyLiquidityPoolsV4 ( ) {
@@ -28,33 +32,56 @@ export default function MyLiquidityPoolsV4() {
2832 userHideQuickClosedPositions ,
2933 setUserHideQuickClosedPositions ,
3034 ] = useState ( true ) ;
35+ const [ quickswapPoolsLoading , setQuickswapPoolsLoading ] = useState ( false ) ;
3136
3237 const filters = [
3338 {
3439 title : t ( 'closed' ) ,
3540 method : setUserHideQuickClosedPositions ,
3641 checkValue : userHideQuickClosedPositions ,
3742 } ,
38- // {
39- // title: t('farming'),
40- // method: setHideQuickFarmingPositions,
41- // checkValue: hideQuickFarmingPositions,
42- // },
4343 ] ;
4444
45- const { count : quickPoolsCount } = useV3Positions (
46- account ,
47- userHideQuickClosedPositions ,
48- false ,
49- true ,
50- ) ;
45+ const {
46+ count : quickPoolsCount ,
47+ includeCloseCount : quickPoolsTotalCount ,
48+ loading : quickswapCountLoading ,
49+ } = useV3Positions ( account , userHideQuickClosedPositions , false , true ) ;
50+
51+ const {
52+ count : steerPoolsCount ,
53+ loading : steerPoolsCountLoading ,
54+ } = useV3SteerPositionsCount ( ) ;
55+
56+ const counterLoading = quickswapCountLoading || steerPoolsCountLoading ;
57+ const poolLoading = quickswapPoolsLoading ;
5158
5259 const [ poolFilter , setPoolFilter ] = useState (
53- GlobalConst . utils . poolsFilter . quickswap ,
60+ GlobalConst . utils . poolsFilter . all ,
5461 ) ;
5562
5663 const myPoolsFilter = useMemo ( ( ) => {
5764 const filters : any [ ] = [ ] ;
65+ // all tab
66+ filters . push ( {
67+ id : GlobalConst . utils . poolsFilter . all ,
68+ text : (
69+ < Box className = 'flex items-center' >
70+ < small > All</ small >
71+ < Box
72+ ml = '6px'
73+ className = { `myV3PoolCountWrapper ${
74+ poolFilter === GlobalConst . utils . poolsFilter . all
75+ ? 'activeMyV3PoolCountWrapper'
76+ : ''
77+ } `}
78+ >
79+ { ( quickPoolsTotalCount ?? 0 ) + steerPoolsCount }
80+ </ Box >
81+ </ Box >
82+ ) ,
83+ } ) ;
84+
5885 filters . push ( {
5986 id : GlobalConst . utils . poolsFilter . quickswap ,
6087 text : (
@@ -73,8 +100,28 @@ export default function MyLiquidityPoolsV4() {
73100 </ Box >
74101 ) ,
75102 } ) ;
103+ if ( steerPoolsCount > 0 ) {
104+ filters . push ( {
105+ id : GlobalConst . utils . poolsFilter . steer ,
106+ text : (
107+ < Box className = 'flex items-center' >
108+ < small > Steer</ small >
109+ < Box
110+ ml = '6px'
111+ className = { `myV3PoolCountWrapper ${
112+ poolFilter === GlobalConst . utils . poolsFilter . steer
113+ ? 'activeMyV3PoolCountWrapper'
114+ : ''
115+ } `}
116+ >
117+ { steerPoolsCount }
118+ </ Box >
119+ </ Box >
120+ ) ,
121+ } ) ;
122+ }
76123 return filters ;
77- } , [ poolFilter , quickPoolsCount ] ) ;
124+ } , [ poolFilter , quickPoolsTotalCount , steerPoolsCount , quickPoolsCount ] ) ;
78125
79126 return (
80127 < Box >
@@ -103,34 +150,66 @@ export default function MyLiquidityPoolsV4() {
103150 </ Box >
104151 ) }
105152 </ Box >
106- < Box className = 'myV3PoolsFilterWrapper' >
107- < CustomTabSwitch
108- items = { myPoolsFilter }
109- value = { poolFilter }
110- handleTabChange = { setPoolFilter }
111- height = { 50 }
112- />
113- </ Box >
114- < Box >
115- { poolFilter === GlobalConst . utils . poolsFilter . quickswap && (
116- < >
117- { account && (
118- < Box mt = { 2 } className = 'flex justify-between items-center' >
119- < Box className = 'flex' >
120- { filters . map ( ( item , key ) => (
121- < Box mr = { 1 } key = { key } >
122- < FilterPanelItem item = { item } />
123- </ Box >
124- ) ) }
125- </ Box >
153+ { ! ! account && counterLoading ? (
154+ < Box py = { 5 } className = 'flex items-center justify-center' >
155+ < Loader stroke = 'white' size = { '2rem' } />
156+ </ Box >
157+ ) : (
158+ < >
159+ < Box className = 'myV3PoolsFilterWrapper' >
160+ < CustomTabSwitch
161+ items = { myPoolsFilter }
162+ value = { poolFilter }
163+ handleTabChange = { setPoolFilter }
164+ height = { 50 }
165+ />
166+ </ Box >
167+ < Box >
168+ { ( ( ! ! account && counterLoading ) || ( account && poolLoading ) ) && (
169+ < Box py = { 5 } className = 'flex items-center justify-center' >
170+ < Loader size = '40px' />
126171 </ Box >
127172 ) }
128- < MyQuickswapPoolsV3
129- userHideClosedPositions = { userHideQuickClosedPositions }
130- />
131- </ >
132- ) }
133- </ Box >
173+ { ! counterLoading && (
174+ < >
175+ { poolFilter === GlobalConst . utils . poolsFilter . all && (
176+ < >
177+ { ( quickPoolsCount ?? 0 ) > 0 && (
178+ < MyQuickswapPoolsV3
179+ userHideClosedPositions = { userHideQuickClosedPositions }
180+ isForAll = { true }
181+ setIsLoading = { setQuickswapPoolsLoading }
182+ />
183+ ) }
184+ { steerPoolsCount > 0 && < MySteerPoolsV3 isForAll = { true } /> }
185+ </ >
186+ ) }
187+ { poolFilter === GlobalConst . utils . poolsFilter . quickswap && (
188+ < >
189+ { account && (
190+ < Box mt = { 2 } className = 'flex justify-between items-center' >
191+ < Box className = 'flex' >
192+ { filters . map ( ( item , key ) => (
193+ < Box mr = { 1 } key = { key } >
194+ < FilterPanelItem item = { item } />
195+ </ Box >
196+ ) ) }
197+ </ Box >
198+ </ Box >
199+ ) }
200+ < MyQuickswapPoolsV3
201+ userHideClosedPositions = { userHideQuickClosedPositions }
202+ />
203+ </ >
204+ ) }
205+ { poolFilter === GlobalConst . utils . poolsFilter . steer && (
206+ < MySteerPoolsV3 />
207+ ) }
208+ </ >
209+ ) }
210+ </ Box >
211+ </ >
212+ ) }
134213 </ Box >
135214 ) ;
136215}
0 commit comments