[Issue 3062] [fix] Extension - Unable to back screen in case open Gen…

…eral settings to Marketing campaign #3

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

@@ -23,7 +23,8 @@ export const GlobalSearchTokenModalId = 'globalSearchToken';
 const DEFAULT_SESSION_VALUE: SessionStorage = {
   remind: false,
   timeBackup: 300000,
-  timeCalculate: Date.now()
+  timeCalculate: Date.now(),
+  finishStep: true
 };
 
 function Component ({ className = '' }: Props): React.ReactElement<Props> {
@@ -38,11 +39,13 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   const handleMantaPaySync = useHandleMantaPaySync();
   const banners = useGetBannerByScreen('home');
 
-  const firstBanner = useMemo((): CampaignBanner | undefined => banners[0], [banners]);
+  const firstBanner = useMemo((): CampaignBanner | undefined => banners[0]
+    , [banners]);
 
-  const sessionLatestInit = useMemo(() => {
-    return (JSON.parse(localStorage.getItem(LATEST_SESSION) || '{}') || DEFAULT_SESSION_VALUE) as SessionStorage;
-  }, []);
+  const sessionLatestInit = useMemo(() => (JSON.parse(localStorage.getItem(LATEST_SESSION) || '{}') || DEFAULT_SESSION_VALUE) as SessionStorage
+    , []);
+
+  const [sessionLatest] = useLocalStorage<SessionStorage>(LATEST_SESSION, sessionLatestInit);
 
   const onOpenGlobalSearchToken = useCallback(() => {
     activeModal(GlobalSearchTokenModalId);
@@ -66,14 +69,18 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
     if (firstBanner && !sessionLatestInit.remind) {
       activeModal(HOME_CAMPAIGN_BANNER_MODAL);
     }
-  }, [activeModal, firstBanner, sessionLatestInit]);
+  }, [activeModal, firstBanner, sessionLatestInit.remind, inactiveModal]);
 
   useEffect(() => {
     if (isConfirmedTermGeneral.includes('nonConfirmed')) {
       activeModal(GENERAL_TERM_AND_CONDITION_MODAL);
     }
   }, [activeModal, isConfirmedTermGeneral, setIsConfirmedTermGeneral]);
 
+  useEffect(() => {
+    sessionLatest.remind && inactiveModal(HOME_CAMPAIGN_BANNER_MODAL);
+  }, [inactiveModal, sessionLatest.remind]);
+
   return (
     <>
       <HomeContext.Provider value={{

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

@@ -50,8 +50,9 @@ const allowImportAccountUrls = allowImportAccountPaths.map((path) => `${baseAcco
 const timeBackup = 300000;
 const DEFAULT_SESSION_VALUE: SessionStorage = {
   remind: false,
+  timeBackup,
   timeCalculate: Date.now(),
-  timeBackup
+  finishStep: true
 };
 
 export const MainWrapper = styled('div')<ThemeProps>(({ theme: { token } }: ThemeProps) => ({
@@ -247,7 +248,11 @@ function DefaultRoute ({ children }: { children: React.ReactNode }): React.React
   }, [currentAccount, initAccount]);
 
   useEffect(() => {
-    if (sessionLatest.remind &&
+    const infoSession = Date.now();
+
+    const latestSession = (JSON.parse(localStorage.getItem(LATEST_SESSION) || JSON.stringify(DEFAULT_SESSION_VALUE))) as SessionStorage;
+
+    if (infoSession - latestSession.timeCalculate > latestSession.timeBackup && sessionLatest.remind &&
       !needUnlock &&
       ![createPasswordUrl, welcomeUrl, loginUrl, accountNewSeedPhrase, createDoneUrl].includes(location.pathname)) {
       activeModal(REMIND_BACKUP_SEED_PHRASE_MODAL);

packages/extension-koni-ui/src/Popup/Transaction/variants/Earn.tsx

@@ -46,7 +46,8 @@ export const insufficientXCMMessages = ['You can only enter a maximum'];
 const DEFAULT_SESSION_VALUE: SessionStorage = {
   remind: false,
   timeCalculate: Date.now(),
-  timeBackup: 300000
+  timeBackup: 300000,
+  finishStep: true
 };
 const AccountSelectorModalId = SELECT_ACCOUNT_MODAL;
 
@@ -846,11 +847,11 @@ const Component = () => {
   }, [chainState?.active, forceFetchValidator, slug, chainValue, fromValue]);
 
   useEffect(() => {
-    if (!compound && !screenLoading && !sessionLatest.remind && !checkActive(AccountSelectorModalId)) {
+    if (!compound && !screenLoading && !sessionLatest.finishStep && !checkActive(AccountSelectorModalId)) {
       isClickInfoButtonRef.current = false;
       activeModal(instructionModalId);
     }
-  }, [activeModal, checkActive, compound, screenLoading, sessionLatest.remind]);
+  }, [activeModal, checkActive, compound, screenLoading, sessionLatest.finishStep]);
 
   const subHeaderButtons: ButtonProps[] = useMemo(() => {
     return [
@@ -863,11 +864,11 @@ const Component = () => {
           }
 
           isClickInfoButtonRef.current = true;
-          !sessionLatest.remind && checkActive(AccountSelectorModalId) && activeModal(instructionModalId);
+          !sessionLatest.finishStep && checkActive(AccountSelectorModalId) && activeModal(instructionModalId);
         }
       }
     ];
-  }, [activeModal, checkActive, screenLoading, sessionLatest.remind, submitLoading]);
+  }, [activeModal, checkActive, screenLoading, sessionLatest.finishStep, submitLoading]);
 
   useEffect(() => {
     setSubHeaderRightButtons(subHeaderButtons);

packages/extension-koni-ui/src/Popup/Transaction/variants/Swap.tsx

@@ -75,7 +75,8 @@ const numberMetadata = { maxNumberFormat: 8 };
 const DEFAULT_SESSION_VALUE: SessionStorage = {
   remind: false,
   timeCalculate: Date.now(),
-  timeBackup: 300000
+  timeBackup: 300000,
+  finishStep: true
 };
 const AccountSelectorModalId = SELECT_ACCOUNT_MODAL;
 
@@ -1084,12 +1085,12 @@ const Component = () => {
   }, [currentQuoteRequest, hasInternalConfirmations, quoteAliveUntil, requestUserInteractToContinue]);
 
   useEffect(() => {
-    if (!confirmedTerm && !sessionLatest.remind && !checkActive(AccountSelectorModalId)) {
+    if (!confirmedTerm && sessionLatest.finishStep && !checkActive(AccountSelectorModalId)) {
       activeModal(SWAP_TERMS_OF_SERVICE_MODAL);
     } else if (confirmedTerm) {
       inactiveModal(SWAP_TERMS_OF_SERVICE_MODAL);
     }
-  }, [sessionLatest.remind, activeModal, confirmedTerm, checkActive, inactiveModal]);
+  }, [sessionLatest.finishStep, activeModal, confirmedTerm, checkActive, inactiveModal]);
 
   useEffect(() => {
     if (requestUserInteractToContinue) {

packages/extension-koni-ui/src/components/Layout/parts/SelectAccount/index.tsx

@@ -4,12 +4,12 @@
 import { AccountJson, CurrentAccountInfo } from '@subwallet/extension-base/background/types';
 import ExportAllSelector from '@subwallet/extension-koni-ui/components/Layout/parts/SelectAccount/ExportAllSelector';
 import { SimpleQrModal } from '@subwallet/extension-koni-ui/components/Modal';
-import { DISCONNECT_EXTENSION_MODAL, SELECT_ACCOUNT_MODAL } from '@subwallet/extension-koni-ui/constants';
+import { DISCONNECT_EXTENSION_MODAL, LATEST_SESSION, SELECT_ACCOUNT_MODAL } from '@subwallet/extension-koni-ui/constants';
 import { useDefaultNavigate, useGetCurrentAuth, useGetCurrentTab, useGoBackSelectAccount, useIsPopup, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { saveCurrentAccountAddress } from '@subwallet/extension-koni-ui/messaging';
 import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { Theme } from '@subwallet/extension-koni-ui/themes';
-import { ThemeProps } from '@subwallet/extension-koni-ui/types';
+import { SessionStorage, ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { findAccountByAddress, funcSortByName, isAccountAll, searchAccountFunction } from '@subwallet/extension-koni-ui/utils';
 import { BackgroundIcon, ButtonProps, Icon, ModalContext, SelectModal, Tooltip } from '@subwallet/react-ui';
 import CN from 'classnames';
@@ -18,6 +18,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're
 import { useSelector } from 'react-redux';
 import { useLocation, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
+import { useLocalStorage } from 'usehooks-ts';
 
 import { isEthereumAddress } from '@polkadot/util-crypto';
 
@@ -44,6 +45,13 @@ const iconMap = {
   [ConnectionStatement.BLOCKED]: Plugs
 };
 
+const DEFAULT_SESSION_VALUE: SessionStorage = {
+  remind: false,
+  timeCalculate: Date.now(),
+  timeBackup: 300000,
+  finishStep: true
+};
+
 const ConnectWebsiteId = 'connectWebsiteId';
 
 const renderEmpty = () => <GeneralEmptyList />;
@@ -69,6 +77,7 @@ function Component ({ className }: Props): React.ReactElement<Props> {
   const currentAuth = useGetCurrentAuth();
   const isPopup = useIsPopup();
   const [selectedQrAddress, setSelectedQrAddress] = useState<string | undefined>();
+  const [, setSessionLatest] = useLocalStorage<SessionStorage>(LATEST_SESSION, DEFAULT_SESSION_VALUE);
 
   const accounts = useMemo((): AccountJson[] => {
     const result = [..._accounts].sort(funcSortByName);
@@ -107,6 +116,7 @@ function Component ({ className }: Props): React.ReactElement<Props> {
 
   const _onSelect = useCallback((address: string) => {
     if (address) {
+      setSessionLatest((prevState) => ({ ...prevState, finishStep: true }));
       const accountByAddress = findAccountByAddress(accounts, address);
 
       if (accountByAddress) {
@@ -140,20 +150,22 @@ function Component ({ className }: Props): React.ReactElement<Props> {
         console.error('Failed to switch account');
       }
     }
-  }, [accounts, location.pathname, navigate, goHome]);
+  }, [setSessionLatest, accounts, location.pathname, navigate, goHome]);
 
   const onClickDetailAccount = useCallback((address: string) => {
     return () => {
+      setSessionLatest((prevState) => ({ ...prevState, finishStep: true }));
       inactiveModal(modalId);
       setTimeout(() => {
         navigate(`/accounts/detail/${address}`);
       }, 100);
     };
-  }, [navigate, inactiveModal]);
+  }, [setSessionLatest, inactiveModal, navigate]);
 
   const openDisconnectExtensionModal = useCallback(() => {
     activeModal(DISCONNECT_EXTENSION_MODAL);
-  }, [activeModal]);
+    setSessionLatest((prevState) => ({ ...prevState, finishStep: true }));
+  }, [activeModal, setSessionLatest]);
 
   const onClickItemQrButton = useCallback((address: string) => {
     setSelectedQrAddress(address);
@@ -197,7 +209,9 @@ function Component ({ className }: Props): React.ReactElement<Props> {
 
   const renderSelectedItem = useCallback((item: AccountJson): React.ReactNode => {
     return (
-      <div className='selected-account'>
+      <div
+        className='selected-account'
+      >
         <AccountBriefInfo account={item} />
       </div>
     );
@@ -296,8 +310,9 @@ function Component ({ className }: Props): React.ReactElement<Props> {
   const onOpenConnectWebsiteModal = useCallback(() => {
     if (isCurrentTabFetched) {
       activeModal(ConnectWebsiteId);
+      setSessionLatest((prevState) => ({ ...prevState, finishStep: true }));
     }
-  }, [activeModal, isCurrentTabFetched]);
+  }, [activeModal, isCurrentTabFetched, setSessionLatest]);
 
   const onCloseConnectWebsiteModal = useCallback(() => {
     inactiveModal(ConnectWebsiteId);

packages/extension-koni-ui/src/components/Modal/Account/AccountExportPasswordModal.tsx

@@ -1,10 +1,10 @@
 // Copyright 2019-2022 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { EXPORT_ACCOUNTS_PASSWORD_MODAL, SELECT_ACCOUNT_MODAL } from '@subwallet/extension-koni-ui/constants';
+import { EXPORT_ACCOUNTS_PASSWORD_MODAL, LATEST_SESSION, SELECT_ACCOUNT_MODAL } from '@subwallet/extension-koni-ui/constants';
 import { useFocusById, useTranslation } from '@subwallet/extension-koni-ui/hooks';
 import { exportAccountsV2 } from '@subwallet/extension-koni-ui/messaging';
-import { FormCallbacks, FormFieldData, ThemeProps } from '@subwallet/extension-koni-ui/types';
+import { FormCallbacks, FormFieldData, SessionStorage, ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { simpleCheckForm } from '@subwallet/extension-koni-ui/utils';
 import { Button, Form, Icon, Input, ModalContext, SwModal } from '@subwallet/react-ui';
 import { KeyringPairs$Json } from '@subwallet/ui-keyring/types';
@@ -13,6 +13,7 @@ import { CaretLeft, CheckCircle, XCircle } from 'phosphor-react';
 import React, { useCallback, useContext, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
+import { useLocalStorage } from 'usehooks-ts';
 
 type Props = ThemeProps & {
   addresses?: string[]
@@ -39,10 +40,17 @@ const onExportJson = (jsonData: KeyringPairs$Json): (() => void) => {
   };
 };
 
+const DEFAULT_SESSION_VALUE: SessionStorage = {
+  remind: false,
+  timeCalculate: Date.now(),
+  timeBackup: 300000,
+  finishStep: true
+};
+
 function Component ({ addresses, className = '' }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const navigate = useNavigate();
-
+  const [, setSessionLatest] = useLocalStorage<SessionStorage>(LATEST_SESSION, DEFAULT_SESSION_VALUE);
   const { inactiveModal } = useContext(ModalContext);
 
   const [form] = Form.useForm<LoginFormState>();
@@ -86,10 +94,11 @@ function Component ({ addresses, className = '' }: Props): React.ReactElement<Pr
           onError(e.message);
         })
         .finally(() => {
+          setSessionLatest((prevState) => ({ ...prevState, finishStep: true }));
           setLoading(false);
         });
     }, 500);
-  }, [addresses, closeModal, inactiveModal, navigate, onError]);
+  }, [addresses, closeModal, inactiveModal, navigate, onError, setSessionLatest]);
 
   useFocusById(passwordInputId);
 

packages/extension-koni-ui/src/components/Modal/RemindBackupSeedPhraseModal.tsx

@@ -23,7 +23,8 @@ const AccountSelectorModalId = SELECT_ACCOUNT_MODAL;
 const DEFAULT_SESSION_VALUE: SessionStorage = {
   remind: false,
   timeCalculate: Date.now(),
-  timeBackup: 300000
+  timeBackup: 300000,
+  finishStep: true
 };
 const DomainUserGuide = '/account-management/export-and-backup-accounts';
 
@@ -39,20 +40,20 @@ function Component ({ className }: Props): React.ReactElement<Props> {
 
   const onCancel = useCallback(() => {
     inactiveModal(RemindBackupSeedPhraseModalId);
-    setSessionLatest({ ...sessionLatest, timeCalculate: Date.now(), remind: false });
-  }, [inactiveModal, sessionLatest, setSessionLatest]);
+    setSessionLatest((prevState) => ({ ...prevState, timeCalculate: Date.now(), remind: false, finishStep: true }));
+  }, [inactiveModal, setSessionLatest]);
 
   const onExport = useCallback(() => {
     inactiveModal(RemindBackupSeedPhraseModalId);
 
     if (isAllAccount || !!currentAccount?.isExternal) {
       activeModal(AccountSelectorModalId);
       setOpenAccountSelector(true);
+      setSessionLatest({ ...sessionLatest, timeCalculate: Date.now(), remind: false, finishStep: false });
     } else if (currentAccount?.address) {
       navigate(`/accounts/export/${currentAccount?.address}`, { state: { from: location.pathname } });
+      setSessionLatest({ ...sessionLatest, timeCalculate: Date.now(), remind: false });
     }
-
-    setSessionLatest({ ...sessionLatest, timeCalculate: Date.now(), remind: false });
   }, [activeModal, currentAccount, inactiveModal, isAllAccount, location.pathname, navigate, sessionLatest, setSessionLatest]);
 
   useEffect(() => {

packages/extension-koni-ui/src/contexts/WalletModalContext.tsx

@@ -25,7 +25,8 @@ const timeBackup = 1000 * 60 * 60 * 24 * 15;
 const DEFAULT_SESSION_VALUE: SessionStorage = {
   remind: false,
   timeBackup,
-  timeCalculate: Date.now()
+  timeCalculate: Date.now(),
+  finishStep: true
 };
 
 export const PREDEFINED_MODAL_NAMES = ['debugger', 'transaction', 'confirmations'];
@@ -106,12 +107,12 @@ export const WalletModalContext = ({ children }: Props) => {
     getConfig()
       .then((timeBackup) => {
         if (infoSession - latestSession.timeCalculate >= timeBackup) {
-          setSessionLatest({ ...latestSession, timeCalculate: infoSession, remind: true });
-        } else if (!latestSession.remind && infoSession - latestSession.timeCalculate < timeBackup) {
-          setSessionLatest({ timeBackup, timeCalculate: infoSession, remind: false });
+          setSessionLatest({ ...latestSession, remind: true, finishStep: false });
+        } else if (infoSession - latestSession.timeCalculate < timeBackup) {
+          setSessionLatest({ timeBackup, timeCalculate: infoSession, remind: false, finishStep: true });
         } else if (location.pathname) {
-          setSessionLatest(({ remind, timeBackup, timeCalculate }) =>
-            ({ timeBackup, remind, timeCalculate: remind ? timeCalculate : infoSession }));
+          setSessionLatest(({ finishStep, remind, timeBackup, timeCalculate }) =>
+            ({ timeBackup, remind, timeCalculate: remind ? timeCalculate : infoSession, finishStep }));
         }
       }).catch(console.error);
   }, [activeModal, getConfig, location.pathname, setSessionLatest]);

packages/extension-koni-ui/src/hooks/staticContent/useGetConfig.ts

@@ -10,7 +10,8 @@ const timeBackup = 1000 * 60 * 60 * 24 * 15;
 const DEFAULT_SESSION_VALUE: SessionStorage = {
   remind: false,
   timeBackup,
-  timeCalculate: Date.now()
+  timeCalculate: Date.now(),
+  finishStep: true
 };
 
 interface BackupTimeOutData {

packages/extension-koni-ui/src/types/localStorage.ts

@@ -5,4 +5,5 @@ export interface SessionStorage {
   timeCalculate: number;
   remind: boolean;
   timeBackup: number;
+  finishStep: boolean;
 }

packages/extension-koni/src/background.ts

@@ -23,7 +23,7 @@ let waitingToStop = false;
 let openCount = 0;
 const keyLatestSession = 'general.latest-session';
 const timeBackup = 300000;
-const DEFAULT_LATEST_SESSION = { remind: false, timeCalculate: Date.now(), timeBackup };
+const DEFAULT_LATEST_SESSION = { remind: false, timeCalculate: Date.now(), timeBackup, finishStep: true };
 
 // setup the notification (same a FF default background, white text)
 withErrorLog(() => chrome.browserAction.setBadgeBackgroundColor({ color: '#d90000' }));
@@ -61,7 +61,7 @@ chrome.runtime.onConnect.addListener((port): void => {
 
     const latestSession = latestSessionRaw ? JSON.parse(latestSessionRaw) as { remind: boolean, timeCalculate: number } : DEFAULT_LATEST_SESSION;
 
-    localStorage.setItem(keyLatestSession, JSON.stringify({ ...latestSession, remind: true }));
+    localStorage.setItem(keyLatestSession, JSON.stringify({ ...latestSession, remind: true, finishStep: false }));
 
     if (PORT_EXTENSION === port.name) {
       openCount -= 1;