Skip to content

Commit

Permalink
Merge branch 'refs/heads/mythical-dev' into mythical-preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@lw-cdm
lw-cdm committed Dec 27, 2024
2 parents ec986c4 + c6a6335 commit edc9cef
Show file tree
Hide file tree
Showing 23 changed files with 958 additions and 219 deletions.
16 changes: 12 additions & 4 deletions packages/extension-koni-ui/src/Popup/Home/Events/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
// SPDX-License-Identifier: Apache-2.0

import { FilterTabItemType, FilterTabs } from '@subwallet/extension-koni-ui/components/FilterTabs';
import { MainScreenHeader, UsersThreeIcon } from '@subwallet/extension-koni-ui/components/Mythical';
import { MainScreenHeader } from '@subwallet/extension-koni-ui/components/Mythical';
import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
import { Game, GameEvent } from '@subwallet/extension-koni-ui/connector/booka/types';
import { TelegramConnector } from '@subwallet/extension-koni-ui/connector/telegram';
import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
import { useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
import { GameApp } from '@subwallet/extension-koni-ui/Popup/Home/Games/gameSDK';
import { ThemeProps } from '@subwallet/extension-koni-ui/types';
import { isDesktop, isMobile } from '@subwallet/extension-koni-ui/utils';
import { isDesktop, isMobile, preloadImages } from '@subwallet/extension-koni-ui/utils';
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
Expand Down Expand Up @@ -184,6 +184,12 @@ const Component = ({ className }: Props): React.ReactElement => {
// };
// }, [currentGame, currentGame?.slug, reloadGame]);

useEffect(() => {
preloadImages([
'/images/mythical/invite/user-three-icon.png'
]);
}, []);

useEffect(() => {
const gameListSub = apiSDK.subscribeGameList().subscribe((data) => {
setGameList(data);
Expand Down Expand Up @@ -230,7 +236,6 @@ const Component = ({ className }: Props): React.ReactElement => {
className={'invite-button'}
onClick={navigateToInvite}
>
<UsersThreeIcon />
</button>
</>
)
Expand Down Expand Up @@ -288,7 +293,10 @@ const Event = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }:
border: 0,
fontSize: 32,
color: extendToken.mythColorGray1,
cursor: 'pointer'
cursor: 'pointer',
backgroundImage: 'url(/images/mythical/invite/user-three-icon.png)',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat'
},

'.game-iframe': {
Expand Down
81 changes: 60 additions & 21 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 @@ -2,6 +2,7 @@
// SPDX-License-Identifier: Apache-2.0

import { MythButton } from '@subwallet/extension-koni-ui/components/Mythical';
import ContentGenerator from '@subwallet/extension-koni-ui/components/StaticContent/ContentGenerator';
import { ThemeProps } from '@subwallet/extension-koni-ui/types';
import { preloadImages } from '@subwallet/extension-koni-ui/utils';
import { SwModal } from '@subwallet/react-ui';
Expand All @@ -13,14 +14,20 @@ import styled from 'styled-components';
interface Props extends ThemeProps {
onCancel: VoidFunction;
onOk: VoidFunction;
metadata?: LeaderboardMetadata
}

export interface LeaderboardMetadata {
title: string;
content: string;
}

export const TERM_AND_CONDITION_MODAL_ID = 'TERM_AND_CONDITION_MODAL_ID';
const modalId = TERM_AND_CONDITION_MODAL_ID;

function Component (props: Props): React.ReactElement<Props> {
const { t } = useTranslation();
const { className = '', onCancel } = props;
const { className = '', metadata, onCancel } = props;

useEffect(() => {
preloadImages([
Expand All @@ -34,24 +41,23 @@ function Component (props: Props): React.ReactElement<Props> {
<SwModal
className={CN(className)}
closable={true}
closeIcon={
<div
className={CN(className, '__cancel-button-header')}
onClick={onCancel}
></div>
}
id={modalId}
onCancel={onCancel}
>
<div className={'__cancel-button-header'} onClick={onCancel}></div>
<div className={'__modal-title'}>{t('Lorem ipsum')}</div>
<div className={'__modal-title'}>{t(`${metadata?.title || 'modal'}`)}</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={'__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>
<ContentGenerator
className={'__content-wrapper'}
content={metadata?.content || ''}
></ContentGenerator>
</div>

<div className='__buttons-container'>
<MythButton
Expand All @@ -71,6 +77,25 @@ export const TermAndConditionModal = styled(Component)<Props>(({ theme: { extend
paddingLeft: 16,
paddingRight: 16,

'.__modal-description .__content-wrapper': {
display: 'flex',
alignItems: 'start',
flexDirection: 'column'
},

'.ant-sw-modal-header.ant-sw-modal-header': {
display: 'flex',
position: 'absolute',
top: -51,
right: 15
},

'.ant-sw-header-left-part': {
position: 'absolute',
top: 17,
right: 0
},

'&.ant-sw-modal.ant-sw-modal': {
justifyContent: 'flex-start',
alignItems: 'center',
Expand All @@ -85,7 +110,10 @@ export const TermAndConditionModal = styled(Component)<Props>(({ theme: { extend
'.ant-sw-modal-content.ant-sw-modal-content': {
borderRadius: 0,
maxWidth: 370,
maxHeight: 484,
paddingTop: 24,
width: '100%',
height: 'auto',
backgroundImage: 'url(/images/mythical/leaderboard-terms-conditions-bg.png)',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat',
Expand All @@ -100,13 +128,24 @@ export const TermAndConditionModal = styled(Component)<Props>(({ theme: { extend
backgroundSize: '30px 32px',
height: 32,
width: 30,
position: 'absolute',
top: -13,
right: 4,
backgroundPosition: 'center',
zIndex: 1000,
backgroundRepeat: 'no-repeat'
},

'.__header-wrapper': {
position: 'absolute',
top: '-44px',
right: 0
},

'.ant-sw-modal-body': {
paddingBottom: 54
paddingBottom: 54,
display: 'flex',
flexDirection: 'column'
},

'.ant-sw-modal-header': {
Expand All @@ -122,19 +161,19 @@ export const TermAndConditionModal = styled(Component)<Props>(({ theme: { extend
fontWeight: 400,
lineHeight: '40px',
textTransform: 'uppercase',
marginBottom: 10
paddingBottom: 8
},

'.__modal-description': {
color: extendToken.mythColorGray1,
textAlign: 'center',
fontFamily: extendToken.fontBarlowCondensed,
fontSize: '16px',
fontStyle: 'normal',
fontWeight: 400,
lineHeight: '18px',
letterSpacing: '0.32px',
marginBottom: 20
marginBottom: 20,
overflow: 'auto'
},

'.__buttons-container': {
Expand All @@ -144,8 +183,8 @@ export const TermAndConditionModal = styled(Component)<Props>(({ theme: { extend

'.__action-button': {
height: 52,
paddingLeft: 12,
paddingRight: 10,
marginLeft: 16,
marginRight: 16,

'.__button-content': {
fontSize: '22px',
Expand Down Expand Up @@ -178,7 +217,7 @@ export const TermAndConditionModal = styled(Component)<Props>(({ theme: { extend

'.__button-background:before': {
backgroundColor: token.colorWhite,
maskImage: 'url(/images/mythical/okay-button-background.png)',
maskImage: 'url(/images/mythical/okay-button-background.png)'
// filter: 'drop-shadow(1.444px 2.167px 0px #000)'
}
}
Expand Down
14 changes: 11 additions & 3 deletions packages/extension-koni-ui/src/Popup/Home/LeaderboardTemp/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@ import { LINK_NFL_APP_DOWNLOAD } from '@subwallet/extension-koni-ui/constants';
import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
import { useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
import { GameAccountListArea } from '@subwallet/extension-koni-ui/Popup/Home/LeaderboardTemp/GameAccountListArea';
import { TERM_AND_CONDITION_MODAL_ID, TermAndConditionModal } from '@subwallet/extension-koni-ui/Popup/Home/LeaderboardTemp/TermAndConditionModal';
import { LeaderboardMetadata, TERM_AND_CONDITION_MODAL_ID, TermAndConditionModal } from '@subwallet/extension-koni-ui/Popup/Home/LeaderboardTemp/TermAndConditionModal';
import { TopThreeArea } from '@subwallet/extension-koni-ui/Popup/Home/LeaderboardTemp/TopThreeArea';
import { ThemeProps } from '@subwallet/extension-koni-ui/types';
import { openInNewTab } from '@subwallet/extension-koni-ui/utils';
import { ModalContext, Skeleton } from '@subwallet/react-ui';
import React, { useCallback, useContext, useEffect, useState } from 'react';
import CN from 'classnames';
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';

Expand Down Expand Up @@ -111,14 +112,20 @@ const Component = ({ className }: Props): React.ReactElement => {
openInNewTab(LINK_NFL_APP_DOWNLOAD)();
}, []);

const shouldShowInfoButton = useMemo(() => {
const leaderboard = leaderboardInfo?.metadata as LeaderboardMetadata | undefined;

return !!(leaderboard && 'title' in leaderboard && 'content' in leaderboard);
}, [leaderboardInfo]);

return (
<div className={className}>
<MainScreenHeader
className={'main-screen-header'}
rightPartNode={
(
<button
className={'info-button hidden'}
className={CN('info-button', { hidden: !shouldShowInfoButton })}
onClick={openTermAndConditionModal}
>
<InfoIcon />
Expand Down Expand Up @@ -185,6 +192,7 @@ const Component = ({ className }: Props): React.ReactElement => {
</div>

<TermAndConditionModal
metadata={leaderboardInfo?.metadata as LeaderboardMetadata}
onCancel={closeTermAndConditionModal}
onOk={closeTermAndConditionModal}
/>
Expand Down
37 changes: 36 additions & 1 deletion packages/extension-koni-ui/src/Popup/Home/MissionTemp/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// SPDX-License-Identifier: Apache-2.0

import { FilterTabItemType, FilterTabs } from '@subwallet/extension-koni-ui/components/FilterTabs';
import { CallToAction, MainScreenHeader, TimeRemaining } from '@subwallet/extension-koni-ui/components/Mythical';
import { CallToAction, MainScreenHeader, MythButton, TimeRemaining } from '@subwallet/extension-koni-ui/components/Mythical';
import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
import { Achievement, Task, TaskCategory, TaskCategoryType } from '@subwallet/extension-koni-ui/connector/booka/types';
import { LINK_NFL_APP_DOWNLOAD } from '@subwallet/extension-koni-ui/constants';
Expand All @@ -12,6 +12,7 @@ import { ThemeProps } from '@subwallet/extension-koni-ui/types';
import { openInNewTab } from '@subwallet/extension-koni-ui/utils';
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';

import MissionSectionListContainer from './MissionSectionListContainer';
Expand All @@ -22,6 +23,7 @@ const apiSDK = BookaSdk.instance;

const Component = ({ className }: Props): React.ReactElement => {
useSetCurrentPage('/home/mission');
const navigate = useNavigate();
const { setBackgroundStyle } = useContext(HomeContext);
const { t } = useTranslation();
const [accountInfo, setAccountInfo] = useState(apiSDK.account);
Expand Down Expand Up @@ -67,6 +69,10 @@ const Component = ({ className }: Props): React.ReactElement => {
}
}, [metadata?.timeRange, selectedFilterTab]);

const navigateToInvite = useCallback(() => {
navigate('/invite');
}, [navigate]);

useEffect(() => {
const timeSub = apiSDK.subscribeServerTime().subscribe((time) => {
setServerTime(time);
Expand Down Expand Up @@ -124,6 +130,16 @@ const Component = ({ className }: Props): React.ReactElement => {
return (
<div className={className}>
<MainScreenHeader
rightPartNode={
(
<MythButton
className={'invite-friends-button'}
onClick={navigateToInvite}
>
{t('INVITE FRIENDS')}
</MythButton>
)
}
title={t('Tasks')}
/>

Expand Down Expand Up @@ -166,6 +182,25 @@ const MissionTemp = styled(Component)<ThemeProps>(({ theme: { extendToken, token
display: 'flex',
flexDirection: 'column',
height: '100%',
'.invite-friends-button': {
minWidth: 158,
height: 40,

'.__button-content': {
color: extendToken.mythColorDark
},

'.__button-background': {
// filter: 'drop-shadow(2px 3px 0px #000)'
},

'.__button-background:before': {
backgroundColor: token.colorPrimary,
maskImage: 'url(/images/mythical/call-to-action-button.png)',
maskSize: '100% 100%',
maskPosition: 'top left'
}
},

'.filter-tabs-container': {
marginBottom: 24
Expand Down
Loading

0 comments on commit edc9cef

Please sign in to comment.