2
2
// SPDX-License-Identifier: Apache-2.0
3
3
4
4
import { MenuItem , MenuItemType } from '@subwallet/extension-web-ui/components/Layout/parts/SideMenu/MenuItem' ;
5
- import { FAQS_URL , SUPPORT_MAIL , TERMS_OF_SERVICE_URL } from '@subwallet/extension-web-ui/constants' ;
6
- import { useNotification , useTranslation } from '@subwallet/extension-web-ui/hooks' ;
5
+ import { FAQS_URL , MISSIONS_POOL_LIVE_ID , SUPPORT_MAIL , TERMS_OF_SERVICE_URL } from '@subwallet/extension-web-ui/constants' ;
6
+ import { useNotification , useSelector , useTranslation } from '@subwallet/extension-web-ui/hooks' ;
7
+ import { useLocalStorage } from '@subwallet/extension-web-ui/hooks/common/useLocalStorage' ;
7
8
import usePreloadView from '@subwallet/extension-web-ui/hooks/router/usePreloadView' ;
9
+ import { RootState } from '@subwallet/extension-web-ui/stores' ;
8
10
import { ThemeProps } from '@subwallet/extension-web-ui/types' ;
9
- import { openInNewTab } from '@subwallet/extension-web-ui/utils' ;
11
+ import { computeStatus , openInNewTab } from '@subwallet/extension-web-ui/utils' ;
10
12
import { Button , Icon , Image } from '@subwallet/react-ui' ;
11
13
import CN from 'classnames' ;
12
- import { ArrowCircleLeft , ArrowCircleRight , ArrowsLeftRight , Clock , Gear , MessengerLogo , NewspaperClipping , Vault , Wallet } from 'phosphor-react' ;
14
+ import { ArrowCircleLeft , ArrowCircleRight , ArrowsLeftRight , Clock , Gear , MessengerLogo , NewspaperClipping , Parachute , Vault , Wallet } from 'phosphor-react' ;
13
15
import React , { useCallback , useEffect , useMemo , useState } from 'react' ;
14
16
import { useLocation , useNavigate } from 'react-router-dom' ;
15
17
@@ -27,6 +29,21 @@ function Component ({ className,
27
29
const { t } = useTranslation ( ) ;
28
30
const notify = useNotification ( ) ;
29
31
32
+
33
+ const { missions } = useSelector ( ( state : RootState ) => state . missionPool ) ;
34
+
35
+ const [ storedLiveMissionIds , setStoredLiveMissionIds ] = useLocalStorage < number [ ] > ( MISSIONS_POOL_LIVE_ID , [ ] ) ;
36
+
37
+ const liveMissionIds = useMemo ( ( ) => {
38
+ return missions
39
+ . filter ( ( item ) => computeStatus ( item ) === 'live' )
40
+ . map ( ( mission ) => mission . id ) ;
41
+ } , [ missions ] ) ;
42
+
43
+ const latestLiveMissionIds = useMemo ( ( ) => {
44
+ return liveMissionIds . filter ( ( id ) => ! storedLiveMissionIds . includes ( id ) ) ;
45
+ } , [ liveMissionIds , storedLiveMissionIds ] ) ;
46
+
30
47
usePreloadView ( [
31
48
'Home' ,
32
49
'Tokens' ,
@@ -73,23 +90,23 @@ function Component ({ className,
73
90
// weight: 'fill'
74
91
// }
75
92
// },
76
- // {
77
- // label: t('Mission Pools'),
78
- // value: '/home/mission-pools',
79
- // icon: {
80
- // type: 'customIcon',
81
- // customIcon: (
82
- // <>
83
- // <Icon
84
- // phosphorIcon={Parachute}
85
- // type='phosphor'
86
- // weight='fill'
87
- // />
88
- // {(latestLiveMissionIds.length > 0) && <div className={CN('__active-count')}>{latestLiveMissionIds.length}</div> }
89
- // </>
90
- // )
91
- // }
92
- // },
93
+ {
94
+ label : t ( 'Mission Pools' ) ,
95
+ value : '/home/mission-pools' ,
96
+ icon : {
97
+ type : 'customIcon' ,
98
+ customIcon : (
99
+ < >
100
+ < Icon
101
+ phosphorIcon = { Parachute }
102
+ type = 'phosphor'
103
+ weight = 'fill'
104
+ />
105
+ { ( latestLiveMissionIds . length > 0 ) && < div className = { CN ( '__active-count' ) } > { latestLiveMissionIds . length } </ div > }
106
+ </ >
107
+ )
108
+ }
109
+ } ,
93
110
// {
94
111
// label: t('Crowdloans'),
95
112
// value: '/home/crowdloans',
@@ -136,7 +153,7 @@ function Component ({ className,
136
153
}
137
154
}
138
155
] ;
139
- } , [ t ] ) ;
156
+ } , [ latestLiveMissionIds . length , t ] ) ;
140
157
141
158
const staticMenuItems = useMemo < MenuItemType [ ] > ( ( ) => {
142
159
return [
@@ -194,8 +211,12 @@ function Component ({ className,
194
211
return ;
195
212
}
196
213
214
+ if ( value === '/home/mission-pools' && latestLiveMissionIds . length > 0 ) {
215
+ setStoredLiveMissionIds ( liveMissionIds ) ;
216
+ }
217
+
197
218
navigate ( `${ value } ` ) ;
198
- } , [ navigate , showComingSoon ] ) ;
219
+ } , [ latestLiveMissionIds . length , liveMissionIds , navigate , setStoredLiveMissionIds , showComingSoon ] ) ;
199
220
200
221
const goHome = useCallback ( ( ) => {
201
222
navigate ( '/home' ) ;
0 commit comments