Skip to content

Commit

Permalink
Merge remote-tracking branch 'refs/remotes/origin/mythical-dev' into …
Browse files Browse the repository at this point in the history 
…koni/dev/issue-153

# Conflicts:
#	packages/extension-koni-ui/src/Popup/Home/Cards/index.tsx
#	packages/extension-koni-ui/src/components/Mythical/Modal/CardDetailModal/index.tsx
  • Loading branch information
@dungnguyen-art
dungnguyen-art committed Nov 15, 2024
2 parents d4912d2 + 5fab355 commit 84e6b3a
Show file tree
Hide file tree
Showing 25 changed files with 276 additions and 204 deletions.
2 changes: 1 addition & 1 deletion packages/extension-base/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
},
"devDependencies": {
"@subwallet/extension-mocks": "^1.2.10-0",
"@types/telegram-web-app": "^7.3.1",
"@types/telegram-web-app": "^7.10.1",
"@types/uuid": "^9.0.1"
}
}
2 changes: 1 addition & 1 deletion packages/extension-koni-ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
"@types/sinon-chrome": "^2.2.11",
"@types/store": "^2.0.2",
"@types/styled-components": "^5.1.26",
"@types/telegram-web-app": "^7.3.1",
"@types/telegram-web-app": "^7.10.1",
"@types/url-parse": "^1.4.11",
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
"enzyme": "^3.11.0",
Expand Down
7 changes: 7 additions & 0 deletions packages/extension-koni-ui/src/Popup/Home/Cards/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
import { NFLRivalCard } from '@subwallet/extension-koni-ui/connector/booka/types';
import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
import { ThemeProps } from '@subwallet/extension-koni-ui/types';
import { openInNewTab } from '@subwallet/extension-koni-ui/utils';
import { ModalContext } from '@subwallet/react-ui';
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
Expand All @@ -29,6 +30,7 @@ const ConditionProcessDefault: ConditionProcessState = {

const cardDetailModalId = 'cardDetailModalId';
const bookaSDK = BookaSdk.instance;
const NFL_RIVALS_MARKET_LINK = 'https://mythical.market/game/nfl-rivals';

const Component = ({ className }: Props): React.ReactElement => {
const { setContainerClass } = useContext(HomeContext);
Expand Down Expand Up @@ -88,6 +90,10 @@ const Component = ({ className }: Props): React.ReactElement => {
};
}, [setContainerClass]);

const handleOpenMarket = useCallback(() => {
openInNewTab(NFL_RIVALS_MARKET_LINK)();
}, []);

return (
<>
<div className={className}>
Expand All @@ -99,6 +105,7 @@ const Component = ({ className }: Props): React.ReactElement => {
<CallToAction
buttonLabel={t('Get more players')}
className={'__call-to-action'}
onAction={handleOpenMarket}
subtitle={t('Visit the NFL Rivals marketplace')}
title={t('Want to get more cards?')}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-koni-ui/src/Popup/Home/Events/DailyRewards/CheckInItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import React from 'react';
import styled from 'styled-components';

export type CheckInItemType = {
id: string;
id: number;
label: string;
point: number;
state: 'AVAILABLE' | 'LOCKED' | 'CHECKED'
Expand Down
90 changes: 70 additions & 20 deletions packages/extension-koni-ui/src/Popup/Home/Events/DailyRewards/DailyRewardsModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@
// SPDX-License-Identifier: Apache-2.0

import { MythButton, XIcon } from '@subwallet/extension-koni-ui/components/Mythical';
import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
import { Achievement } from '@subwallet/extension-koni-ui/connector/booka/types';
import { CheckInItem, CheckInItemType } from '@subwallet/extension-koni-ui/Popup/Home/Events/DailyRewards/CheckInItem';
import { ThemeProps } from '@subwallet/extension-koni-ui/types';
import { getTimeRemaining, preloadImages } from '@subwallet/extension-koni-ui/utils';
import { SwModal } from '@subwallet/react-ui';
import CN from 'classnames';
import React, { useCallback, useEffect, useMemo } from 'react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';

Expand All @@ -18,15 +20,49 @@ interface Props extends ThemeProps {

export const DAILY_REWARDS_MODAL_ID = 'DAILY_REWARDS_MODAL_ID';
const modalId = DAILY_REWARDS_MODAL_ID;
const apiSdk = BookaSdk.instance;

function Component (props: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const { className = '', onCancel, onClaimed } = props;
const isClaimable = false;
const { className = '', onCancel } = props;
const [loading, setLoading] = useState(false);
const [isClaimable, setIsClaimable] = useState(false);
const [dailyRewards, setDailyRewards] = useState(apiSdk.getDailyRewardAchievements());
const [timeRange, setTimeRange] = useState(apiSdk.getMetadata()?.timeRange);

const onClaim = useCallback(() => {
onClaimed();
}, [onClaimed]);
if (loading || !isClaimable) {
return;
}

const remainingDailyRewards = dailyRewards.filter((item) => item.status === 'claimable');

setLoading(true);

Promise.all(remainingDailyRewards.map((item) => apiSdk.claimAchievement(item.milestoneId)))
.catch(console.error)
.finally(() => {
apiSdk.fetchAchievementList()
.catch(console.error)
.finally(() => {
setLoading(false);
});
});
}, [dailyRewards, isClaimable, loading]);

useEffect(() => {
const sub1 = apiSdk.subscribeDailyRewardAchievements().subscribe((achievements: Achievement[]) => {
setDailyRewards(achievements);
});
const sub2 = apiSdk.subscribeMetadata().subscribe((metadata) => {
metadata && setTimeRange(metadata.timeRange);
});

return () => {
sub1.unsubscribe();
sub2.unsubscribe();
};
}, []);

const claimButtonLabel = useMemo(() => {
const claimLabel = t('Claim');
Expand All @@ -35,46 +71,59 @@ function Component (props: Props): React.ReactElement<Props> {
return claimLabel;
}

const endTime = Date.now() + 20 * 60 * 60 * 1000 + 30 * 60 * 1000;
const now = timeRange?.now;
const endTime = timeRange?.daily?.end;

if (!now || !endTime) {
return t('Unavailable');
}

return (
<>
<span className={'__claim-text'}>{claimLabel}</span>
<span>&nbsp;</span>
<span className={'__time-remaining'}>
({getTimeRemaining(Date.now(), new Date(endTime).toString())})
({getTimeRemaining(now, new Date(endTime).toString())})
</span>
</>
);
}, [isClaimable, t]);
}, [isClaimable, t, timeRange?.daily?.end, timeRange?.now]);

const checkinItems = useMemo<CheckInItemType[]>(() => {
const result: CheckInItemType[] = [];

for (let i = 1; i <= 8; i++) {
let claimable = false;
let getChecked = false;

for (const item of dailyRewards) {
let state: CheckInItemType['state'] = 'LOCKED';
let label = `Day ${i}`;
let point = 100 * i;

if (i === 1) {
console.log(item.milestoneName, item.status);

if (item.status === 'claimed') {
state = 'CHECKED';
} else if (i === 2) {
getChecked = true;
} else if (item.status === 'claimable') {
state = 'AVAILABLE';
} else if (i === 8) {
label = 'Day 7+';
point = 1000;
claimable = true;
} else if (claimable || getChecked) {
state = 'LOCKED';
} else {
state = 'CHECKED';
}

result.push({
id: `${i}`,
label,
point,
id: item.id,
label: item.milestoneName,
point: item.pointReward,
state
});
}

setIsClaimable(claimable);

return result;
}, []);
}, [dailyRewards]);

useEffect(() => {
preloadImages([
Expand Down Expand Up @@ -124,6 +173,7 @@ function Component (props: Props): React.ReactElement<Props> {
'-lock': !isClaimable,
'-claimable': isClaimable
})}
isLoading={loading}
onClick={onClaim}
>
{claimButtonLabel}
Expand Down
71 changes: 27 additions & 44 deletions packages/extension-koni-ui/src/Popup/Home/LeaderboardTemp/TermAndConditionModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,27 +24,34 @@ function Component (props: Props): React.ReactElement<Props> {

useEffect(() => {
preloadImages([
'/images/mythical/daily-rewards/modal-background.png',
'/images/mythical/daily-rewards/claimed.png',
'/images/mythical/daily-rewards/unclaimed.png',
'/images/mythical/daily-rewards/cancel-button-mask.png',
'/images/mythical/leaderboard-terms-conditions-bg.png',
'/images/mythical/close-button.png',
'/images/mythical/okay-button-background.png'
]);
}, []);

return (
<SwModal
className={CN(className)}
closable={true}
id={modalId}
onCancel={onCancel}
// cancelButtonProps={}
>
<div className={'__cancel-button-header'} onClick={onCancel}></div>
<div className={'__modal-title'}>{t('Lorem ipsum')}</div>

<div className={'__modal-description'}>
{t('Lorem ipsum dolor sit amet, consectetur adipiscing elit, ' +
'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, ' +
'quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.')}</div>
'quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. \n' +
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et ' +
'dolore magna tempor incididunt ut labore et dolore magna tempor incididunt')}</div>
<div className={'__modal-description'}>
{t('Lorem ipsum dolor sit amet, consectetur adipiscing elit, ' +
'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, ' +
'quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. \n' +
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et ' +
'dolore magna tempor incididunt ut labore et dolore magna tempor incididunt')}</div>

<div className='__buttons-container'>
<MythButton
Expand Down Expand Up @@ -79,16 +86,27 @@ export const TermAndConditionModal = styled(Component)<Props>(({ theme: { extend
borderRadius: 0,
maxWidth: 370,
paddingTop: 24,
backgroundImage: 'url(/images/mythical/daily-rewards/modal-background.png)',
backgroundImage: 'url(/images/mythical/leaderboard-terms-conditions-bg.png)',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat',
filter: 'drop-shadow(4px 6px 0px #000)',
backgroundColor: 'transparent',
boxShadow: 'none'
boxShadow: 'none',
position: 'relative'
},

'.__cancel-button-header': {
backgroundImage: 'url(/images/mythical/close-button.png)',
backgroundSize: '30px 32px',
height: 32,
width: 30,
position: 'absolute',
top: '-44px',
right: 0
},

'.ant-sw-modal-body': {
paddingBottom: 35
paddingBottom: 54
},

'.ant-sw-modal-header': {
Expand Down Expand Up @@ -119,17 +137,6 @@ export const TermAndConditionModal = styled(Component)<Props>(({ theme: { extend
marginBottom: 20
},

'.__checkin-item-list-container': {
display: 'grid',
gridTemplateColumns: 'repeat(4, 1fr)',
gap: 12,
marginBottom: 20
},

'.__checkin-item': {
// flex: '1 1 20.1%'
},

'.__buttons-container': {
display: 'flex',
gap: 12
Expand Down Expand Up @@ -174,30 +181,6 @@ export const TermAndConditionModal = styled(Component)<Props>(({ theme: { extend
maskImage: 'url(/images/mythical/okay-button-background.png)',
filter: 'drop-shadow(1.444px 2.167px 0px #000)'
}
},

'.__time-remaining': {
color: extendToken.mythColorGray4
},

'.__claim-button': {
flex: '1 0 auto',

'.__button-background:before': {
maskImage: 'url(/images/mythical/daily-rewards/claim-button-mask.png)'
},

'&.-lock': {
'.__button-background:before': {
backgroundColor: extendToken.mythColorGray2
}
},

'&.-claimable': {
'.__button-background:before': {
backgroundColor: token.colorPrimary
}
}
}
});
});
8 changes: 4 additions & 4 deletions packages/extension-koni-ui/src/Popup/Home/MissionTemp/MissionSectionListContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ type Props = ThemeProps & {
achievements: Achievement[];
selectedTab: TaskCategoryType;
accountInfo: BookaAccount | undefined;
endTime?: number;
};

type MissionSectionType = {
Expand Down Expand Up @@ -85,6 +86,7 @@ const telegramConnector = TelegramConnector.instance;
const Component = ({ accountInfo,
achievements,
className,
endTime,
selectedTab,
taskCategories,
tasks }: Props): React.ReactElement => {
Expand Down Expand Up @@ -295,14 +297,12 @@ const Component = ({ accountInfo,
};
});

const dateNow = Date.now();

tasks.forEach((tk) => {
if (!tk.categoryId || !taskSectionMap[tk.categoryId]) {
return;
}

if (tk.endTime && (new Date(tk.endTime).getTime() <= dateNow)) {
if (tk.endTime && endTime && (new Date(tk.endTime).getTime() <= endTime)) {
return;
}

Expand Down Expand Up @@ -334,7 +334,7 @@ const Component = ({ accountInfo,
});

return Object.values(taskSectionMap).filter((ts) => !!ts.items.length);
}, [taskCategories, tasks, achievements, selectedTab, getTaskStatusText, getTaskActionContent, doTaskAction, getAchievementStatusText, getAchievementActionContent, doAchievementAction]);
}, [taskCategories, endTime, tasks, achievements, selectedTab, getTaskStatusText, getTaskActionContent, doTaskAction, getAchievementStatusText, getAchievementActionContent, doAchievementAction]);

// const mockItems: MissionSectionType[] = useMemo(() => {
// return [
Expand Down
Loading

0 comments on commit 84e6b3a

Please sign in to comment.