Skip to content

Commit 234c6f3

Browse files
authored
Merge pull request #63 from Koniverse/koni/dev/issue-3459
[Issue-3459] Avail Space - Support mission pool feature
2 parents da3a390 + cbd9cde commit 234c6f3

File tree

4 files changed

+67
-46
lines changed

4 files changed

+67
-46
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

+20-20
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',

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

+44-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,21 @@ function Component ({ className,
2729
const { t } = useTranslation();
2830
const notify = useNotification();
2931

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+
3047
usePreloadView([
3148
'Home',
3249
'Tokens',
@@ -73,23 +90,23 @@ function Component ({ className,
7390
// weight: 'fill'
7491
// }
7592
// },
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+
},
93110
// {
94111
// label: t('Crowdloans'),
95112
// value: '/home/crowdloans',
@@ -136,7 +153,7 @@ function Component ({ className,
136153
}
137154
}
138155
];
139-
}, [t]);
156+
}, [latestLiveMissionIds.length, t]);
140157

141158
const staticMenuItems = useMemo<MenuItemType[]>(() => {
142159
return [
@@ -194,8 +211,12 @@ function Component ({ className,
194211
return;
195212
}
196213

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

200221
const goHome = useCallback(() => {
201222
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)