Merge remote-tracking branch 'origin/mythical-dev' into mythical-dev

packages/extension-koni-ui/src/Popup/Account/AccountBanned.tsx

@@ -1,8 +1,11 @@
-import React from 'react';
-import styled from 'styled-components';
+// [object Object]
+// SPDX-License-Identifier: Apache-2.0
+
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { Props } from 'react-select';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Props } from 'react-select';
+import styled from 'styled-components';
 
 const Component = ({ className }: Props): React.ReactElement => {
   const { t } = useTranslation();
@@ -11,7 +14,7 @@ const Component = ({ className }: Props): React.ReactElement => {
     <div className={className}>
       <h1>{t('Account suspended')}</h1>
       <p>{t('Your account has been suspended due to unusual activities.')}</p>
-      <p>{t('If you think this is a mistake, contact our support team')} <a href={"https://t.me/playnation_globalchat"}>Playnation Suport</a> </p>
+      <p>{t('If you think this is a mistake, contact our support team')} <a href={'https://t.me/playnation_globalchat'}>Playnation Suport</a> </p>
     </div>
   );
 };
@@ -30,14 +33,14 @@ const AccountBanned = styled(Component)<ThemeProps>(({ theme: { extendToken, tok
     h1: {
       fontSize: token.fontSizeLG,
       fontWeight: 'bold',
-      marginBottom: token.marginMD,
+      marginBottom: token.marginMD
     },
     p: {
       fontSize: 14,
       marginBottom: token.marginSM,
       textAlign: 'center',
-      maxWidth: '80%',
-    },
+      maxWidth: '80%'
+    }
   };
 });
 

packages/extension-koni-ui/src/Popup/Account/AccountDetail.tsx

@@ -5,7 +5,7 @@ import DefaultLogosMap from '@subwallet/extension-koni-ui/assets/logo';
 import { AccountRankLevel, GameAccountAvatar, GameEnergyBar, Layout } from '@subwallet/extension-koni-ui/components';
 import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
 import { AccountRankType, BookaAccount, EnergyConfig, RankInfo } from '@subwallet/extension-koni-ui/connector/booka/types';
-import { accountRankList, detailScreensLayoutBackgroundImages, rankNameMap, smallRankIconMap } from '@subwallet/extension-koni-ui/constants';
+import { accountRankList, rankNameMap, smallRankIconMap } from '@subwallet/extension-koni-ui/constants';
 import { useGetAccountByAddress, useGetEnergyInfo, useNotification } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { copyToClipboard, toDisplayNumber, toShort } from '@subwallet/extension-koni-ui/utils';
@@ -99,8 +99,6 @@ const Component: React.FC<Props> = (props: Props) => {
 
   return (
     <Layout.WithSubHeaderOnly
-      backgroundImages={detailScreensLayoutBackgroundImages}
-      backgroundStyle={'primary'}
       className={CN(className)}
       title={t('Account details')}
     >

packages/extension-koni-ui/src/Popup/BuyTokens.tsx

@@ -358,7 +358,6 @@ function Component ({ className }: Props) {
 
   return (
     <Layout.Home
-      backgroundStyle={'primary'}
       showFilterIcon
       showTabBar={false}
     >

packages/extension-koni-ui/src/Popup/Home/Airdrop/AirdropDetail/Header.tsx

@@ -25,7 +25,7 @@ function Component ({ airdropInfo, className }: Props) {
   const { t } = useTranslation();
 
   const { currentTimeline, pastTimelines } = (() => {
-    const { start, end, start_snapshot, end_claim, start_claim } = airdropInfo;
+    const { end, end_claim, start, start_claim, start_snapshot } = airdropInfo;
     const currentDate = Date.now();
     const startMs = new Date(start).getTime();
     const endMs = new Date(end).getTime();

packages/extension-koni-ui/src/Popup/Home/Airdrop/AirdropDetail/index.tsx

@@ -324,7 +324,6 @@ const Component: React.FC<Props> = ({ className, currentAirdrop }: Props) => {
 
   return (
     <Layout.WithSubHeaderOnly
-      backgroundStyle={'secondary'}
       className={className}
       onBack={onBack}
       subHeaderIcons={subHeaderIcons}

packages/extension-koni-ui/src/Popup/Home/Events/index.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { FilterTabItemType, FilterTabs } from '@subwallet/extension-koni-ui/components/FilterTabs';
-import { EventDifficulty, EventItem, EventStatus } from '@subwallet/extension-koni-ui/components/Mythical';
+import { EventDifficulty, EventItem, EventStatus, MainScreenHeader } from '@subwallet/extension-koni-ui/components/Mythical';
 import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
 import { useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
@@ -77,6 +77,10 @@ const Component = ({ className }: Props): React.ReactElement => {
 
   return (
     <div className={className}>
+      <MainScreenHeader
+        title={t('Events')}
+      />
+
       <FilterTabs
         className={'filter-tabs-container'}
         items={filterTabItems}
@@ -105,14 +109,19 @@ const Event = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }:
     overflow: 'hidden',
     display: 'flex',
     flexDirection: 'column',
-    backgroundColor: '#000',
+    height: '100%',
+
+    '.filter-tabs-container': {
+      marginBottom: 16
+    },
 
     '.event-list-container': {
       flex: 1,
       overflow: 'auto',
+      paddingTop: 12,
       paddingLeft: 16,
       paddingRight: 16,
-      paddingBottom: 34
+      paddingBottom: 12
     },
 
     '.event-item + .event-item': {

packages/extension-koni-ui/src/Popup/Home/History/index.tsx

@@ -10,6 +10,7 @@ import { quickFormatAddressToCompare } from '@subwallet/extension-base/utils';
 import { AccountSelector, BasicInputEvent, ChainSelector, EmptyList, FilterModal, HistoryItem, Layout, PageWrapper } from '@subwallet/extension-koni-ui/components';
 import { HISTORY_DETAIL_MODAL } from '@subwallet/extension-koni-ui/constants';
 import { DataContext } from '@subwallet/extension-koni-ui/contexts/DataContext';
+import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
 import { useChainInfoWithState, useFilterModal, useHistorySelection, useSelector, useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
 import { cancelSubscription, subscribeTransactionHistory } from '@subwallet/extension-koni-ui/messaging';
 import { ChainItemType, ThemeProps, TransactionHistoryDisplayData, TransactionHistoryDisplayItem } from '@subwallet/extension-koni-ui/types';
@@ -24,7 +25,6 @@ import styled from 'styled-components';
 import { isEthereumAddress } from '@polkadot/util-crypto';
 
 import { HistoryDetailModal } from './Detail';
-import {HomeContext} from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
 
 type Props = ThemeProps
 

packages/extension-koni-ui/src/Popup/Home/Invite/index.tsx

@@ -7,7 +7,7 @@ import GameAccount from '@subwallet/extension-koni-ui/components/Games/GameAccou
 import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
 import { BookaAccount, ReferralRecord } from '@subwallet/extension-koni-ui/connector/booka/types';
 import { TelegramConnector } from '@subwallet/extension-koni-ui/connector/telegram';
-import { detailScreensLayoutBackgroundImages, rankPointMap } from '@subwallet/extension-koni-ui/constants';
+import { rankPointMap } from '@subwallet/extension-koni-ui/constants';
 import { useNotification, useSetCurrentPage, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { copyToClipboard, toDisplayNumber } from '@subwallet/extension-koni-ui/utils';
@@ -125,8 +125,6 @@ const Component = ({ className }: Props): React.ReactElement => {
 
   return (
     <Layout.WithSubHeaderOnly
-      backgroundImages={detailScreensLayoutBackgroundImages}
-      backgroundStyle={'primary'}
       className={CN(className)}
       subHeaderIcons={subHeaderIcons}
       title={t('Invite frens')}

packages/extension-koni-ui/src/Popup/Home/Leaderboard/LeaderboardTemp.tsx

@@ -1,19 +1,32 @@
 // Copyright 2019-2022 @subwallet/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { GameAccountItem, TopAccountItem } from '@subwallet/extension-koni-ui/components/Mythical';
+import { GameAccountItem, MainScreenHeader, TimeRemaining, TopAccountItem } from '@subwallet/extension-koni-ui/components/Mythical';
 import { useSetCurrentPage } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
+import CallToAction from '../../../components/Mythical/Common/CallToAction';
+
 type Props = ThemeProps;
 
 const Component = ({ className }: Props): React.ReactElement => {
   useSetCurrentPage('/home/leaderboard');
+  const { t } = useTranslation();
 
   return (
     <div className={className}>
+      <MainScreenHeader
+        className={'__main-screen-header'}
+        title={t('Weekly leaderboard')}
+      />
+
+      <div className='__time-remaining-wrapper'>
+        <TimeRemaining datetime={'12day 10hrs'} />
+      </div>
+
       <div className='top-three-area'>
         <div className='top-account-item-wrapper'>
           {
@@ -45,6 +58,12 @@ const Component = ({ className }: Props): React.ReactElement => {
         </div>
       </div>
 
+      <CallToAction
+        buttonLabel={'Play now'}
+        subtitle={'Download NFL Rivals App'}
+        title={'Want to take your profile to the next level?'}
+      />
+
       <div>
         <GameAccountItem
           avatarSrc={'/images/mythical/user-image.png'}
@@ -76,7 +95,14 @@ const Component = ({ className }: Props): React.ReactElement => {
 
 const Leaderboard = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }: ThemeProps) => {
   return {
-    backgroundColor: '#000',
+    '.__main-screen-header': {
+      maxWidth: 250
+    },
+
+    '.__time-remaining-wrapper': {
+      paddingLeft: 16,
+      paddingRight: 16
+    },
 
     '.top-account-item-wrapper': {
       maxWidth: 94,

packages/extension-koni-ui/src/Popup/Home/Mission/TaskList.tsx

@@ -16,7 +16,7 @@ type Props = ThemeProps & {
   reloadTask: number;
 };
 
-const Component = ({ actionReloadPoint, className, taskCategoryInfoMap, taskCategoryMap, openWidget, reloadTask }: Props): React.ReactElement => {
+const Component = ({ actionReloadPoint, className, openWidget, reloadTask, taskCategoryInfoMap, taskCategoryMap }: Props): React.ReactElement => {
   const { t } = useTranslation();
 
   const taskCategoryInfoList = useMemo(() => {

packages/extension-koni-ui/src/Popup/Home/MissionTemp/index.tsx

@@ -1,8 +1,9 @@
 // Copyright 2019-2022 @subwallet/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import React, { useMemo } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 
 import { TaskItem, TaskItemType } from './TaskItem';
@@ -15,6 +16,8 @@ type TaskSectionType = {
 }
 
 const Component = ({ className }: Props): React.ReactElement => {
+  const { setBackgroundStyle } = useContext(HomeContext);
+
   const taskSections: TaskSectionType[] = useMemo(() => {
     return [
       {
@@ -130,6 +133,14 @@ const Component = ({ className }: Props): React.ReactElement => {
     ] as TaskSectionType[];
   }, []);
 
+  useEffect(() => {
+    setBackgroundStyle('style-2');
+
+    return () => {
+      setBackgroundStyle(undefined);
+    };
+  }, [setBackgroundStyle]);
+
   return (
     <div className={className}>
       {
@@ -160,8 +171,6 @@ const Component = ({ className }: Props): React.ReactElement => {
 
 const MissionTemp = styled(Component)<ThemeProps>(({ theme: { extendToken, token } }: ThemeProps) => {
   return {
-    backgroundColor: '#0e8a6a',
-
     '.task-section-title': {
       fontFamily: extendToken.fontDruk,
       fontSize: '28px',

packages/extension-koni-ui/src/Popup/Home/index.tsx

@@ -4,16 +4,13 @@
 import { CampaignBanner } from '@subwallet/extension-base/background/KoniTypes';
 import { CampaignBannerModal, Layout } from '@subwallet/extension-koni-ui/components';
 import { LayoutBaseProps } from '@subwallet/extension-koni-ui/components/Layout/base/Base';
-import { GlobalSearchTokenModal } from '@subwallet/extension-koni-ui/components/Modal/GlobalSearchTokenModal';
 import { MaintenanceInfo, MetadataHandler } from '@subwallet/extension-koni-ui/connector/booka/metadata';
 import { BookaSdk } from '@subwallet/extension-koni-ui/connector/booka/sdk';
-import { homeScreensLayoutBackgroundImages } from '@subwallet/extension-koni-ui/constants';
 import { HomeContext } from '@subwallet/extension-koni-ui/contexts/screen/HomeContext';
 import { useAccountBalance, useGetBannerByScreen, useGetChainSlugsByAccountType, useTokenGroup } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
-import { ModalContext } from '@subwallet/react-ui';
 import CN from 'classnames';
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Outlet } from 'react-router';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
@@ -25,7 +22,6 @@ const apiSDK = BookaSdk.instance;
 const metadataHandler = MetadataHandler.instance;
 
 function Component ({ className = '' }: Props): React.ReactElement<Props> {
-  const { activeModal, inactiveModal } = useContext(ModalContext);
   const chainsByAccountType = useGetChainSlugsByAccountType();
   const tokenGroupStructure = useTokenGroup(chainsByAccountType);
   const accountBalance = useAccountBalance(tokenGroupStructure.tokenGroupMap);
@@ -40,14 +36,6 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   const [backgroundStyle, setBackgroundStyle] = useState<LayoutBaseProps['backgroundStyle'] | undefined>();
   const navigate = useNavigate();
 
-  const onOpenGlobalSearchToken = useCallback(() => {
-    activeModal(GlobalSearchTokenModalId);
-  }, [activeModal]);
-
-  const onCloseGlobalSearchToken = useCallback(() => {
-    inactiveModal(GlobalSearchTokenModalId);
-  }, [inactiveModal]);
-
   useEffect(() => {
     const handleMaintenance = (info: MaintenanceInfo) => {
       if (info.isMaintenance) {
@@ -71,43 +59,22 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     };
   }, [navigate]);
 
-  const onTabSelected = useCallback(
-    (key: string) => {
-      if (key === 'tokens') {
-        setBackgroundStyle(undefined);
-      } else {
-        setBackgroundStyle('primary');
-      }
-    },
-    []
-  );
-
   return (
     <>
       <HomeContext.Provider value={{
         tokenGroupStructure,
         accountBalance,
-        setContainerClass
+        setContainerClass,
+        setBackgroundStyle
       }}
       >
         <Layout.Home
-          backgroundImages={homeScreensLayoutBackgroundImages}
           backgroundStyle={backgroundStyle}
           className={CN('home', 'home-container', className, containerClass)}
-          onClickSearchIcon={onOpenGlobalSearchToken}
-          onTabSelected={onTabSelected}
-          showGiftIcon
         >
           <Outlet />
         </Layout.Home>
       </HomeContext.Provider>
-
-      <GlobalSearchTokenModal
-        id={GlobalSearchTokenModalId}
-        onCancel={onCloseGlobalSearchToken}
-        sortedTokenSlugs={tokenGroupStructure.sortedTokenSlugs}
-        tokenBalanceMap={accountBalance.tokenBalanceMap}
-      />
       {firstBanner && <CampaignBannerModal banner={firstBanner} />}
     </>
   );

packages/extension-koni-ui/src/Popup/Keyring/ChangePassword.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Layout, PageWrapper } from '@subwallet/extension-koni-ui/components';
-import { simpleSettingsScreensLayoutBackgroundImages } from '@subwallet/extension-koni-ui/constants';
 import { useDefaultNavigate, useFocusFormItem, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { useBiometric } from '@subwallet/extension-koni-ui/hooks/biometric';
 import { keyringChangeMasterPassword } from '@subwallet/extension-koni-ui/messaging';
@@ -95,8 +94,6 @@ const Component: React.FC<Props> = ({ className }: Props) => {
   return (
     <PageWrapper className={CN(className)}>
       <Layout.WithSubHeaderOnly
-        backgroundImages={simpleSettingsScreensLayoutBackgroundImages}
-        backgroundStyle={'secondary'}
         leftFooterButton={{
           children: t('Cancel'),
           onClick: goBack,

packages/extension-koni-ui/src/Popup/Keyring/CreatePassword.tsx

@@ -4,7 +4,7 @@
 import { RequestChangeMasterPassword } from '@subwallet/extension-base/background/KoniTypes';
 import { Layout, PageWrapper } from '@subwallet/extension-koni-ui/components';
 import { TelegramConnector } from '@subwallet/extension-koni-ui/connector/telegram';
-import { DEFAULT_HOMEPAGE, DEFAULT_PASSWORD, simpleSettingsScreensLayoutBackgroundImages, SUBSTRATE_ACCOUNT_TYPE } from '@subwallet/extension-koni-ui/constants';
+import { DEFAULT_HOMEPAGE, DEFAULT_PASSWORD, SUBSTRATE_ACCOUNT_TYPE } from '@subwallet/extension-koni-ui/constants';
 import { useDefaultNavigate, useNotification } from '@subwallet/extension-koni-ui/hooks';
 import { useBiometric } from '@subwallet/extension-koni-ui/hooks/biometric';
 import useTranslation from '@subwallet/extension-koni-ui/hooks/common/useTranslation';
@@ -171,8 +171,6 @@ const Component: React.FC<Props> = ({ className }: Props) => {
   return (
     <PageWrapper className={CN(className)}>
       <Layout.WithSubHeaderOnly
-        backgroundImages={simpleSettingsScreensLayoutBackgroundImages}
-        backgroundStyle={'secondary'}
         onBack={goBack}
         rightFooterButton={{
           children: t('Finish'),