Skip to content

Commit dd4f2b0

Browse files
dungnguyen-artdungnguyen-art
committed
[Issue-3459] Avail Space - Support mission pool feature
1 parent da3a390 commit dd4f2b0

File tree

4 files changed

+67
-47
lines changed

4 files changed

+67
-47
lines changed

‎packages/extension-web-ui/src/Popup/router.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ const EarningPreviewOutlet = new LazyLoader('EarningPreviewOutlet', () => import
150150
// const CheckCrowdloanContributions = new LazyLoader('CrowdloanContributionsResult', () => import('@subwallet/extension-web-ui/Popup/CrowdloanUnlockCampaign/CheckCrowdloanContributions'));
151151
// const CrowdloanContributionsResult = new LazyLoader('CrowdloanContributionsResult', () => import('@subwallet/extension-web-ui/Popup/CrowdloanUnlockCampaign/CrowdloanContributionsResult'));
152152

153-
// const MissionPool = new LazyLoader('MissionPool', () => import('@subwallet/extension-web-ui/Popup/MissionPool'));
153+
const MissionPool = new LazyLoader('MissionPool', () => import('@subwallet/extension-web-ui/Popup/MissionPool'));
154154

155155
/* 404 */
156156

@@ -229,7 +229,7 @@ export const router = createBrowserRouter([
229229
EarningPositionDetail.generateRouterObject('position-detail')
230230
]
231231
},
232-
// MissionPool.generateRouterObject('mission-pools'),
232+
MissionPool.generateRouterObject('mission-pools'),
233233
History.generateRouterObject('history'),
234234
History.generateRouterObject('history/:address/:chain/:extrinsicHashOrId')
235235
// DApps.generateRouterObject('dapps')

‎packages/extension-web-ui/src/components/Layout/base/Base.tsx

+21-21
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ import { useDefaultNavigate, useSelector } from '@subwallet/extension-web-ui/hoo
99
import { RootState } from '@subwallet/extension-web-ui/stores';
1010
import { ThemeProps } from '@subwallet/extension-web-ui/types';
1111
import { computeStatus } from '@subwallet/extension-web-ui/utils';
12-
import { SwScreenLayout, SwScreenLayoutProps } from '@subwallet/react-ui';
12+
import { Icon, SwScreenLayout, SwScreenLayoutProps } from '@subwallet/react-ui';
1313
import { SwTabBarItem } from '@subwallet/react-ui/es/sw-tab-bar';
1414
import CN from 'classnames';
15-
import { Aperture, Clock, Vault, Wallet } from 'phosphor-react';
15+
import { Aperture, Clock, Parachute, Vault, Wallet } from 'phosphor-react';
1616
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
1717
import { useTranslation } from 'react-i18next';
1818
import { useLocation, useNavigate } from 'react-router-dom';
@@ -98,24 +98,24 @@ const Component = ({ children, className, footer, headerIcons, isSetTitleContext
9898
// key: 'dapps',
9999
// url: '/home/dapps'
100100
// },
101-
// {
102-
// icon: {
103-
// type: 'customIcon',
104-
// customIcon: (
105-
// <>
106-
// <Icon
107-
// phosphorIcon={Parachute}
108-
// type='phosphor'
109-
// weight='fill'
110-
// />
111-
// {(latestLiveMissionIds.length > 0) && <div className={CN('__active-count')}>{latestLiveMissionIds.length}</div>}
112-
// </>
113-
// )
114-
// },
115-
// label: t('Missions'),
116-
// key: 'mission-pools',
117-
// url: '/home/mission-pools'
118-
// },
101+
{
102+
icon: {
103+
type: 'customIcon',
104+
customIcon: (
105+
<>
106+
<Icon
107+
phosphorIcon={Parachute}
108+
type='phosphor'
109+
weight='fill'
110+
/>
111+
{(latestLiveMissionIds.length > 0) && <div className={CN('__active-count')}>{latestLiveMissionIds.length}</div>}
112+
</>
113+
)
114+
},
115+
label: t('Missions'),
116+
key: 'mission-pools',
117+
url: '/home/mission-pools'
118+
},
119119
// {
120120
// icon: {
121121
// type: 'phosphor',
@@ -136,7 +136,7 @@ const Component = ({ children, className, footer, headerIcons, isSetTitleContext
136136
key: 'history',
137137
url: '/home/history'
138138
}
139-
]), [t]);
139+
]), [latestLiveMissionIds.length, t]);
140140

141141
const selectedTab = useMemo((): string => {
142142
const isHomePath = pathname.includes('/home');

‎packages/extension-web-ui/src/components/Layout/parts/SideMenu/SideMenu.tsx

+43-23
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
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';
78
import usePreloadView from '@subwallet/extension-web-ui/hooks/router/usePreloadView';
9+
import { RootState } from '@subwallet/extension-web-ui/stores';
810
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';
1012
import { Button, Icon, Image } from '@subwallet/react-ui';
1113
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';
1315
import React, { useCallback, useEffect, useMemo, useState } from 'react';
1416
import { useLocation, useNavigate } from 'react-router-dom';
1517

@@ -27,6 +29,20 @@ function Component ({ className,
2729
const { t } = useTranslation();
2830
const notify = useNotification();
2931

32+
const { missions } = useSelector((state: RootState) => state.missionPool);
33+
34+
const [storedLiveMissionIds, setStoredLiveMissionIds] = useLocalStorage<number[]>(MISSIONS_POOL_LIVE_ID, []);
35+
36+
const liveMissionIds = useMemo(() => {
37+
return missions
38+
.filter((item) => computeStatus(item) === 'live')
39+
.map((mission) => mission.id);
40+
}, [missions]);
41+
42+
const latestLiveMissionIds = useMemo(() => {
43+
return liveMissionIds.filter((id) => !storedLiveMissionIds.includes(id));
44+
}, [liveMissionIds, storedLiveMissionIds]);
45+
3046
usePreloadView([
3147
'Home',
3248
'Tokens',
@@ -73,23 +89,23 @@ function Component ({ className,
7389
// weight: 'fill'
7490
// }
7591
// },
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-
// },
92+
{
93+
label: t('Mission Pools'),
94+
value: '/home/mission-pools',
95+
icon: {
96+
type: 'customIcon',
97+
customIcon: (
98+
<>
99+
<Icon
100+
phosphorIcon={Parachute}
101+
type='phosphor'
102+
weight='fill'
103+
/>
104+
{(latestLiveMissionIds.length > 0) && <div className={CN('__active-count')}>{latestLiveMissionIds.length}</div>}
105+
</>
106+
)
107+
}
108+
},
93109
// {
94110
// label: t('Crowdloans'),
95111
// value: '/home/crowdloans',
@@ -136,7 +152,7 @@ function Component ({ className,
136152
}
137153
}
138154
];
139-
}, [t]);
155+
}, [latestLiveMissionIds.length, t]);
140156

141157
const staticMenuItems = useMemo<MenuItemType[]>(() => {
142158
return [
@@ -194,8 +210,12 @@ function Component ({ className,
194210
return;
195211
}
196212

213+
if (value === '/home/mission-pools' && latestLiveMissionIds.length > 0) {
214+
setStoredLiveMissionIds(liveMissionIds);
215+
}
216+
197217
navigate(`${value}`);
198-
}, [navigate, showComingSoon]);
218+
}, [latestLiveMissionIds.length, liveMissionIds, navigate, setStoredLiveMissionIds, showComingSoon]);
199219

200220
const goHome = useCallback(() => {
201221
navigate('/home');

‎packages/webapp/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,4 @@
4949
"webpack-cli": "^5.1.4",
5050
"webpack-dev-server": "^5.0.4"
5151
}
52-
}
52+
}

0 commit comments

Comments
 (0)