Remove unuse code for layout component

Koniverse · Oct 26, 2024 · 7925efc · 7925efc
1 parent 08ce17c
commit 7925efc
Show file tree

Hide file tree

Showing 30 changed files with 91 additions and 285 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/Account/AccountBanned.tsx b/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%'
+    }
   };
 });
 

diff --git a/packages/extension-koni-ui/src/Popup/Account/AccountDetail.tsx b/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')}
     >

diff --git a/packages/extension-koni-ui/src/Popup/BuyTokens.tsx b/packages/extension-koni-ui/src/Popup/BuyTokens.tsx
@@ -358,7 +358,6 @@ function Component ({ className }: Props) {
 
   return (
     <Layout.Home
-      backgroundStyle={'primary'}
       showFilterIcon
       showTabBar={false}
     >

diff --git a/packages/extension-koni-ui/src/Popup/Home/Airdrop/AirdropDetail/Header.tsx b/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();

diff --git a/packages/extension-koni-ui/src/Popup/Home/Airdrop/AirdropDetail/index.tsx b/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}

diff --git a/packages/extension-koni-ui/src/Popup/Home/History/index.tsx b/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
 

diff --git a/packages/extension-koni-ui/src/Popup/Home/Invite/index.tsx b/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')}

diff --git a/packages/extension-koni-ui/src/Popup/Home/Mission/TaskList.tsx b/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(() => {

diff --git a/packages/extension-koni-ui/src/Popup/Home/index.tsx b/packages/extension-koni-ui/src/Popup/Home/index.tsx
@@ -3,11 +3,9 @@
 
 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';
@@ -36,8 +34,6 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unsafe-return
   const firstBanner = useMemo((): CampaignBanner | undefined => banners[0], [banners]);
-
-  const [backgroundStyle, setBackgroundStyle] = useState<LayoutBaseProps['backgroundStyle'] | undefined>();
   const navigate = useNavigate();
 
   const onOpenGlobalSearchToken = useCallback(() => {
@@ -73,11 +69,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
 
   const onTabSelected = useCallback(
     (key: string) => {
-      if (key === 'tokens') {
-        setBackgroundStyle(undefined);
-      } else {
-        setBackgroundStyle('primary');
-      }
+      //
     },
     []
   );
@@ -91,8 +83,6 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
       }}
       >
         <Layout.Home
-          backgroundImages={homeScreensLayoutBackgroundImages}
-          backgroundStyle={backgroundStyle}
           className={CN('home', 'home-container', className, containerClass)}
           onClickSearchIcon={onOpenGlobalSearchToken}
           onTabSelected={onTabSelected}

diff --git a/packages/extension-koni-ui/src/Popup/Keyring/ChangePassword.tsx b/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,

diff --git a/packages/extension-koni-ui/src/Popup/Keyring/CreatePassword.tsx b/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'),

diff --git a/packages/extension-koni-ui/src/Popup/Keyring/Login.tsx b/packages/extension-koni-ui/src/Popup/Keyring/Login.tsx
@@ -35,7 +35,7 @@ const Component: React.FC<Props> = ({ className }: Props) => {
 
   const [loading, setLoading] = useState(false);
   const [isDisable, setIsDisable] = useState(true);
-  const { getToken, onUnlockSuccess, reportWrongBiometric, usingBiometric, isTokenUpdateToDate } = useBiometric();
+  const { getToken, isTokenUpdateToDate, onUnlockSuccess, reportWrongBiometric, usingBiometric } = useBiometric();
   const { unlock } = useUILock();
 
   const onUpdate: FormCallbacks<LoginFormState>['onFieldsChange'] = useCallback((changedFields: FormFieldData[], allFields: FormFieldData[]) => {

diff --git a/packages/extension-koni-ui/src/Popup/Settings/AddressBook/index.tsx b/packages/extension-koni-ui/src/Popup/Settings/AddressBook/index.tsx
@@ -3,7 +3,7 @@
 
 import { AddressJson } from '@subwallet/extension-base/background/types';
 import { AccountItemBase, AccountItemWithName, AddContactModal, BackIcon, EditContactModal, FilterModal, GeneralEmptyList, Layout, PageWrapper } from '@subwallet/extension-koni-ui/components';
-import { ADD_ADDRESS_BOOK_MODAL, EDIT_ADDRESS_BOOK_MODAL, settingsScreensLayoutBackgroundImages } from '@subwallet/extension-koni-ui/constants';
+import { ADD_ADDRESS_BOOK_MODAL, EDIT_ADDRESS_BOOK_MODAL } from '@subwallet/extension-koni-ui/constants';
 import { useFilterModal, useFormatAddress, useSelector } from '@subwallet/extension-koni-ui/hooks';
 import { ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { funcSortByName, reformatAddress } from '@subwallet/extension-koni-ui/utils';
@@ -196,8 +196,6 @@ const Component: React.FC<Props> = (props: Props) => {
   return (
     <PageWrapper className={CN(className)}>
       <Layout.WithSubHeaderOnly
-        backgroundImages={settingsScreensLayoutBackgroundImages}
-        backgroundStyle={'secondary'}
         onBack={goBack}
         subHeaderIcons={subHeaderIcons}
         title={t('Manage address book')}

diff --git a/packages/extension-koni-ui/src/Popup/Settings/Chains/AddProvider.tsx b/packages/extension-koni-ui/src/Popup/Settings/Chains/AddProvider.tsx
@@ -7,7 +7,6 @@ import { _generateCustomProviderKey, _getChainNativeTokenBasicInfo, _isChainEvmC
 import { isUrl } from '@subwallet/extension-base/utils';
 import { Layout, PageWrapper } from '@subwallet/extension-koni-ui/components';
 import InfoIcon from '@subwallet/extension-koni-ui/components/Icon/InfoIcon';
-import { settingsScreensLayoutBackgroundImages } from '@subwallet/extension-koni-ui/constants';
 import { DataContext } from '@subwallet/extension-koni-ui/contexts/DataContext';
 import useNotification from '@subwallet/extension-koni-ui/hooks/common/useNotification';
 import useTranslation from '@subwallet/extension-koni-ui/hooks/common/useTranslation';
@@ -249,8 +248,6 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
       resolve={dataContext.awaitStores(['chainStore'])}
     >
       <Layout.Base
-        backgroundImages={settingsScreensLayoutBackgroundImages}
-        backgroundStyle={'secondary'}
         leftFooterButton={{
           onClick: onCancel,
           className: 'ant-sw-screen-layout-footer-left-button -secondary-2',

diff --git a/packages/extension-koni-ui/src/Popup/Settings/Chains/ChainDetail.tsx b/packages/extension-koni-ui/src/Popup/Settings/Chains/ChainDetail.tsx
@@ -6,7 +6,6 @@ import { _getBlockExplorerFromChain, _getChainNativeTokenBasicInfo, _getChainSub
 import { isUrl } from '@subwallet/extension-base/utils';
 import { Layout, PageWrapper } from '@subwallet/extension-koni-ui/components';
 import { ProviderSelector } from '@subwallet/extension-koni-ui/components/Field/ProviderSelector';
-import { settingsScreensLayoutBackgroundImages } from '@subwallet/extension-koni-ui/constants';
 import { DataContext } from '@subwallet/extension-koni-ui/contexts/DataContext';
 import useNotification from '@subwallet/extension-koni-ui/hooks/common/useNotification';
 import useTranslation from '@subwallet/extension-koni-ui/hooks/common/useTranslation';
@@ -268,8 +267,6 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
       resolve={dataContext.awaitStores(['chainStore'])}
     >
       <Layout.Base
-        backgroundImages={settingsScreensLayoutBackgroundImages}
-        backgroundStyle={'secondary'}
         onBack={onBack}
         rightFooterButton={{
           block: true,

diff --git a/packages/extension-koni-ui/src/Popup/Settings/Chains/ChainImport.tsx b/packages/extension-koni-ui/src/Popup/Settings/Chains/ChainImport.tsx
@@ -7,7 +7,6 @@ import { _generateCustomProviderKey } from '@subwallet/extension-base/services/c
 import { isUrl } from '@subwallet/extension-base/utils';
 import { Layout, PageWrapper } from '@subwallet/extension-koni-ui/components';
 import InfoIcon from '@subwallet/extension-koni-ui/components/Icon/InfoIcon';
-import { settingsScreensLayoutBackgroundImages } from '@subwallet/extension-koni-ui/constants';
 import useNotification from '@subwallet/extension-koni-ui/hooks/common/useNotification';
 import useTranslation from '@subwallet/extension-koni-ui/hooks/common/useTranslation';
 import useFocusFormItem from '@subwallet/extension-koni-ui/hooks/form/useFocusFormItem';
@@ -276,8 +275,6 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   return (
     <PageWrapper className={`chain_import ${className}`}>
       <Layout.WithSubHeaderOnly
-        backgroundImages={settingsScreensLayoutBackgroundImages}
-        backgroundStyle={'secondary'}
         leftFooterButton={{
           onClick: onBack,
           className: 'ant-sw-screen-layout-footer-left-button -secondary-2',

diff --git a/packages/extension-koni-ui/src/Popup/Settings/Chains/ManageChains.tsx b/packages/extension-koni-ui/src/Popup/Settings/Chains/ManageChains.tsx
@@ -3,7 +3,6 @@
 
 import { _isChainEvmCompatible, _isCustomChain, _isSubstrateChain } from '@subwallet/extension-base/services/chain-service/utils';
 import { FilterModal, Layout, NetworkEmptyList, NetworkToggleItem, OptionType, PageWrapper } from '@subwallet/extension-koni-ui/components';
-import { settingsScreensLayoutBackgroundImages } from '@subwallet/extension-koni-ui/constants';
 import { DataContext } from '@subwallet/extension-koni-ui/contexts/DataContext';
 import { ChainInfoWithState, useFilterModal, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import useChainInfoWithStateAndStatus, { ChainInfoWithStateAndStatus } from '@subwallet/extension-koni-ui/hooks/chain/useChainInfoWithStateAndStatus';
@@ -141,8 +140,6 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
       resolve={dataContext.awaitStores(['chainStore'])}
     >
       <Layout.Base
-        backgroundImages={settingsScreensLayoutBackgroundImages}
-        backgroundStyle={'secondary'}
         onBack={onBack}
         showBackButton={true}
         showSubHeader={true}

diff --git a/packages/extension-koni-ui/src/Popup/Settings/Security/index.tsx b/packages/extension-koni-ui/src/Popup/Settings/Security/index.tsx
@@ -3,7 +3,7 @@
 
 import { WalletUnlockType } from '@subwallet/extension-base/background/KoniTypes';
 import { Layout, PageWrapper } from '@subwallet/extension-koni-ui/components';
-import { EDIT_AUTO_LOCK_TIME_MODAL, EDIT_UNLOCK_TYPE_MODAL, settingsScreensLayoutBackgroundImages } from '@subwallet/extension-koni-ui/constants';
+import { EDIT_AUTO_LOCK_TIME_MODAL, EDIT_UNLOCK_TYPE_MODAL } from '@subwallet/extension-koni-ui/constants';
 import { DEFAULT_ROUTER_PATH } from '@subwallet/extension-koni-ui/constants/router';
 import { useBiometric } from '@subwallet/extension-koni-ui/hooks/biometric';
 import useDefaultNavigate from '@subwallet/extension-koni-ui/hooks/router/useDefaultNavigate';
@@ -224,8 +224,6 @@ const Component: React.FC<Props> = (props: Props) => {
   return (
     <PageWrapper className={CN(className, '-screen')}>
       <Layout.WithSubHeaderOnly
-        backgroundImages={settingsScreensLayoutBackgroundImages}
-        backgroundStyle={'secondary'}
         onBack={onBack}
         title={t('Password setting')}
       >

diff --git a/packages/extension-koni-ui/src/Popup/Settings/Tokens/FungibleTokenImport.tsx b/packages/extension-koni-ui/src/Popup/Settings/Tokens/FungibleTokenImport.tsx
@@ -5,7 +5,6 @@ import { _AssetType, _ChainInfo } from '@subwallet/chain-list/types';
 import { _getTokenTypesSupportedByChain, _isChainTestNet, _parseMetadataForSmartContractAsset } from '@subwallet/extension-base/services/chain-service/utils';
 import { isValidSubstrateAddress } from '@subwallet/extension-base/utils';
 import { AddressInput, ChainSelector, Layout, PageWrapper, TokenTypeSelector } from '@subwallet/extension-koni-ui/components';
-import { settingsScreensLayoutBackgroundImages } from '@subwallet/extension-koni-ui/constants';
 import { DataContext } from '@subwallet/extension-koni-ui/contexts/DataContext';
 import { useChainChecker, useDefaultNavigate, useGetChainPrefixBySlug, useGetFungibleContractSupportedChains, useNotification, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { upsertCustomToken, validateCustomToken } from '@subwallet/extension-koni-ui/messaging';
@@ -254,8 +253,6 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
       resolve={dataContext.awaitStores(['assetRegistry'])}
     >
       <Layout.WithSubHeaderOnly
-        backgroundImages={settingsScreensLayoutBackgroundImages}
-        backgroundStyle={'secondary'}
         onBack={goBack}
         rightFooterButton={{
           block: true,

diff --git a/packages/extension-koni-ui/src/Popup/Settings/Tokens/ManageTokens.tsx b/packages/extension-koni-ui/src/Popup/Settings/Tokens/ManageTokens.tsx
@@ -4,7 +4,6 @@
 import { _ChainAsset } from '@subwallet/chain-list/types';
 import { _isCustomAsset } from '@subwallet/extension-base/services/chain-service/utils';
 import { FilterModal, Layout, OptionType, PageWrapper, TokenEmptyList, TokenToggleItem } from '@subwallet/extension-koni-ui/components';
-import { settingsScreensLayoutBackgroundImages } from '@subwallet/extension-koni-ui/constants';
 import { DataContext } from '@subwallet/extension-koni-ui/contexts/DataContext';
 import { useDefaultNavigate, useFilterModal, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { useChainAssets } from '@subwallet/extension-koni-ui/hooks/assets';
@@ -119,8 +118,6 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
       resolve={dataContext.awaitStores(['assetRegistry'])}
     >
       <Layout.Base
-        backgroundImages={settingsScreensLayoutBackgroundImages}
-        backgroundStyle={'secondary'}
         onBack={goBack}
         showBackButton={true}
         showSubHeader={true}