From 9b3098ad47de38f2623e3602e6381b26d9a921ae Mon Sep 17 00:00:00 2001
From: AnhMTV <maithachvietanh@gmail.com>
Date: Thu, 30 May 2024 12:22:14 +0700
Subject: [PATCH] Ensure remind backup show only onetime every open popup

---
 .../src/Popup/Home/index.tsx                  | 25 +++++++++++--------
 .../src/utils/handleRemindBackupTime.ts       |  7 +++---
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/packages/extension-koni-ui/src/Popup/Home/index.tsx b/packages/extension-koni-ui/src/Popup/Home/index.tsx
index eb787542c1..27e00e1490 100644
--- a/packages/extension-koni-ui/src/Popup/Home/index.tsx
+++ b/packages/extension-koni-ui/src/Popup/Home/index.tsx
@@ -11,7 +11,7 @@ import { useAccountBalance, useGetBannerByScreen, useGetChainSlugsByAccountType,
 import { RootState } from '@subwallet/extension-koni-ui/stores';
 import { RemindBackUpSeedPhraseParamState, SessionStorage, ThemeProps } from '@subwallet/extension-koni-ui/types';
 import { ModalContext } from '@subwallet/react-ui';
-import React, { useCallback, useContext, useEffect, useMemo } from 'react';
+import React, {useCallback, useContext, useEffect, useMemo, useRef} from 'react';
 import { useSelector } from 'react-redux';
 import { Outlet } from 'react-router';
 import { useLocation } from 'react-router-dom';
@@ -36,6 +36,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   const isZkModeSyncing = useSelector((state: RootState) => state.mantaPay.isSyncing);
   const handleMantaPaySync = useHandleMantaPaySync();
   const banners = useGetBannerByScreen('home');
+  const remindBackUpShowed = useRef<boolean>(false);
 
   const firstBanner = useMemo((): CampaignBanner | undefined => banners[0], [banners]);
 
@@ -69,15 +70,19 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
   }, [activeModal, firstBanner, location]);
 
   useEffect(() => {
-    const infoSession = Date.now();
-
-    const isFromIgnorePage = location.state as RemindBackUpSeedPhraseParamState;
-
-    if (infoSession - sessionLatest.timeCalculate > sessionLatest.timeBackup &&
-      sessionLatest.remind &&
-      (isFromIgnorePage?.from !== historyPageIgnoreRemind)) {
-      inactiveModal(HOME_CAMPAIGN_BANNER_MODAL);
-      activeModal(REMIND_BACKUP_SEED_PHRASE_MODAL);
+    // Run remind backup seed phrase one time
+    if (!remindBackUpShowed.current) {
+      const infoSession = Date.now();
+
+      const isFromIgnorePage = location.state as RemindBackUpSeedPhraseParamState;
+
+      if (infoSession - sessionLatest.timeCalculate > sessionLatest.timeBackup &&
+        sessionLatest.remind &&
+        (isFromIgnorePage?.from !== historyPageIgnoreRemind)) {
+        inactiveModal(HOME_CAMPAIGN_BANNER_MODAL);
+        activeModal(REMIND_BACKUP_SEED_PHRASE_MODAL);
+        remindBackUpShowed.current = true;
+      }
     }
   }, [activeModal, inactiveModal, location, sessionLatest]);
 
diff --git a/packages/extension-koni-ui/src/utils/handleRemindBackupTime.ts b/packages/extension-koni-ui/src/utils/handleRemindBackupTime.ts
index 5e036a5da0..ec83122111 100644
--- a/packages/extension-koni-ui/src/utils/handleRemindBackupTime.ts
+++ b/packages/extension-koni-ui/src/utils/handleRemindBackupTime.ts
@@ -1,14 +1,15 @@
 // Copyright 2019-2022 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import { LATEST_SESSION } from '@subwallet/extension-koni-ui/constants/localStorage';
+
 export function handleRemindBackupTime () {
   // Handle
-  const keyLatestSession = 'general.latest-session';
   const timeBackup = 1209600000;
   const DEFAULT_LATEST_SESSION = { remind: false, timeCalculate: Date.now(), timeBackup, isFinished: false };
 
   window.onbeforeunload = () => {
-    const latestSessionRaw = localStorage.getItem(keyLatestSession);
+    const latestSessionRaw = localStorage.getItem(LATEST_SESSION);
 
     const latestSession = latestSessionRaw
       ? JSON.parse(latestSessionRaw) as {
@@ -17,6 +18,6 @@ export function handleRemindBackupTime () {
       }
       : DEFAULT_LATEST_SESSION;
 
-    localStorage.setItem(keyLatestSession, JSON.stringify({ ...latestSession, remind: true }));
+    localStorage.setItem(LATEST_SESSION, JSON.stringify({ ...latestSession, remind: true }));
   };
 }