From 786ba8c43f81719e7573d89c12a3d4e78dfcfbb9 Mon Sep 17 00:00:00 2001
From: Quangdm-cdm <85857151+Quangdm-cdm@users.noreply.github.com>
Date: Fri, 10 Jan 2025 18:10:06 +0700
Subject: [PATCH] Add Duplicate account name warning when update version

---
 .../RemindDuplicateAccountNameModal/index.tsx | 66 +++++++++++++++++++
 .../common/Modal/ConfirmModal/index.tsx       | 18 +++--
 src/messaging/database/index.ts               | 26 ++++++++
 src/messaging/index.ts                        |  1 +
 src/providers/AppModalContext.tsx             |  2 +
 src/screens/Account/RestoreJson/index.tsx     |  1 +
 src/screens/Home/index.tsx                    | 42 ++++++++----
 7 files changed, 137 insertions(+), 19 deletions(-)
 create mode 100644 src/components/Modal/RemindDuplicateAccountNameModal/index.tsx
 create mode 100644 src/messaging/database/index.ts

diff --git a/src/components/Modal/RemindDuplicateAccountNameModal/index.tsx b/src/components/Modal/RemindDuplicateAccountNameModal/index.tsx
new file mode 100644
index 000000000..54ff26a70
--- /dev/null
+++ b/src/components/Modal/RemindDuplicateAccountNameModal/index.tsx
@@ -0,0 +1,66 @@
+import React, { useCallback } from 'react';
+import { Button, PageIcon, SwModal, Typography } from 'components/design-system-ui';
+import { Linking, View } from 'react-native';
+import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
+import { Warning } from 'phosphor-react-native';
+import { FontMedium } from 'styles/sharedStyles';
+import { BACKUP_SEED_PHRASE_CODE_URL } from 'constants/index';
+import i18n from 'utils/i18n/i18n';
+import { UPGRADE_DUPLICATE_ACCOUNT_NAME } from '@subwallet/extension-base/constants';
+import { noop } from 'utils/function';
+import { setValueLocalStorageWS } from 'messaging/database';
+interface Props {
+  modalVisible: boolean;
+  setVisible: (value: boolean) => void;
+}
+
+export const RemindDuplicateAccountNameModal = ({ modalVisible, setVisible }: Props) => {
+  const theme = useSubWalletTheme().swThemes;
+
+  const onCancel = useCallback(() => {
+    setVisible(false);
+    setValueLocalStorageWS({ key: UPGRADE_DUPLICATE_ACCOUNT_NAME, value: 'false' }).catch(noop);
+  }, [setVisible]);
+
+  return (
+    <SwModal
+      isUseModalV2
+      modalVisible={modalVisible}
+      setVisible={setVisible}
+      disabledOnPressBackDrop={true}
+      isAllowSwipeDown={false}
+      titleTextAlign={'center'}
+      hideWhenCloseApp={false}
+      modalTitle={'Duplicate account name'}>
+      <View style={{ position: 'relative' }}>
+        <View style={{ alignItems: 'center' }}>
+          <PageIcon icon={Warning} color={theme['colorWarning-5']} />
+
+          <Typography.Text
+            style={{
+              fontSize: theme.fontSizeHeading6,
+              lineHeight: theme.fontSizeHeading6 * theme.lineHeightHeading6,
+              color: theme.colorTextLight4,
+              textAlign: 'center',
+              ...FontMedium,
+              marginTop: theme.paddingMD,
+            }}>
+            <Typography.Text>
+              {
+                'You have accounts with the same name. We have added characters to these account names to differentiate them. You can change account names later using '
+              }
+            </Typography.Text>
+            <Typography.Text
+              onPress={() => Linking.openURL(BACKUP_SEED_PHRASE_CODE_URL)}
+              style={{ color: theme.colorLink, textDecorationLine: 'underline' }}>
+              {'this guide'}
+            </Typography.Text>
+          </Typography.Text>
+        </View>
+        <Button style={{ marginTop: theme.margin }} onPress={onCancel}>
+          {i18n.buttonTitles.iUnderstand}
+        </Button>
+      </View>
+    </SwModal>
+  );
+};
diff --git a/src/components/common/Modal/ConfirmModal/index.tsx b/src/components/common/Modal/ConfirmModal/index.tsx
index ddfe5c5e0..0f68af161 100644
--- a/src/components/common/Modal/ConfirmModal/index.tsx
+++ b/src/components/common/Modal/ConfirmModal/index.tsx
@@ -20,6 +20,7 @@ interface Props {
   cancelBtnTitle?: string;
   disabledOnPressBackDrop?: boolean;
   isAllowSwipeDown?: boolean;
+  isShowCancelButton?: boolean;
 }
 
 const ConfirmModal: React.FC<Props> = ({
@@ -34,6 +35,7 @@ const ConfirmModal: React.FC<Props> = ({
   cancelBtnTitle,
   isAllowSwipeDown,
   disabledOnPressBackDrop,
+  isShowCancelButton = true,
 }: Props) => {
   const theme = useSubWalletTheme().swThemes;
   const styles = useMemo(() => createStyle(theme), [theme]);
@@ -50,13 +52,15 @@ const ConfirmModal: React.FC<Props> = ({
       footer={
         <>
           <View style={styles.footerModalStyle}>
-            <Button
-              type="secondary"
-              style={{ flex: 1, marginRight: 12 }}
-              onPress={onCancelModal}
-              icon={<Icon phosphorIcon={XCircle} size={'lg'} weight={'fill'} />}>
-              {cancelBtnTitle || i18n.common.cancel}
-            </Button>
+            {!!isShowCancelButton && (
+              <Button
+                type="secondary"
+                style={{ flex: 1, marginRight: 12 }}
+                onPress={onCancelModal}
+                icon={<Icon phosphorIcon={XCircle} size={'lg'} weight={'fill'} />}>
+                {cancelBtnTitle || i18n.common.cancel}
+              </Button>
+            )}
             <Button
               externalTextStyle={{ flexShrink: 1 }}
               style={{ flex: 1 }}
diff --git a/src/messaging/database/index.ts b/src/messaging/database/index.ts
new file mode 100644
index 000000000..dbfde4119
--- /dev/null
+++ b/src/messaging/database/index.ts
@@ -0,0 +1,26 @@
+import { sendMessage } from '..';
+import { StorageDataInterface } from '@subwallet/extension-base/types';
+
+export async function exportIndexedDB(): Promise<string> {
+  return sendMessage('pri(database.export)', null);
+}
+
+export async function importIndexedDB(request: string): Promise<boolean> {
+  return sendMessage('pri(database.import)', request);
+}
+
+export async function getIndexedDBJson(): Promise<object> {
+  return sendMessage('pri(database.exportJson)', null);
+}
+
+export async function migrateLocalStorage(request: string): Promise<boolean> {
+  return sendMessage('pri(database.migrateLocalStorage)', request);
+}
+
+export async function setValueLocalStorageWS(request: StorageDataInterface): Promise<boolean> {
+  return sendMessage('pri(database.setLocalStorage)', request);
+}
+
+export async function getValueLocalStorageWS(request: string): Promise<string | null> {
+  return sendMessage('pri(database.getLocalStorage)', request);
+}
diff --git a/src/messaging/index.ts b/src/messaging/index.ts
index 6079d57ae..69019a6f0 100644
--- a/src/messaging/index.ts
+++ b/src/messaging/index.ts
@@ -61,3 +61,4 @@ export * from './manta-pay';
 export * from './domain';
 export * from './metadata';
 export * from './campaigns';
+export * from './database';
diff --git a/src/providers/AppModalContext.tsx b/src/providers/AppModalContext.tsx
index ccaa5d507..5c276d32b 100644
--- a/src/providers/AppModalContext.tsx
+++ b/src/providers/AppModalContext.tsx
@@ -23,6 +23,7 @@ export type ConfirmModalInfo = {
   onCompleteModal?: () => void | undefined;
   disabledOnPressBackDrop?: boolean;
   isAllowSwipeDown?: boolean;
+  isShowCancelButton?: boolean;
 };
 
 export type AddressQrModalInfo = {
@@ -144,6 +145,7 @@ export const AppModalContextProvider = ({ children }: AppModalContextProviderPro
         cancelBtnTitle={confirmModal.cancelBtnTitle}
         isAllowSwipeDown={confirmModal.isAllowSwipeDown}
         disabledOnPressBackDrop={confirmModal.disabledOnPressBackDrop}
+        isShowCancelButton={confirmModal.isShowCancelButton}
       />
 
       {addressQrModalState.visible && (
diff --git a/src/screens/Account/RestoreJson/index.tsx b/src/screens/Account/RestoreJson/index.tsx
index c8f97d1b1..e19d919e8 100644
--- a/src/screens/Account/RestoreJson/index.tsx
+++ b/src/screens/Account/RestoreJson/index.tsx
@@ -305,6 +305,7 @@ export const RestoreJson = () => {
         onCancelModal: confirmModal.hideConfirmModal,
         completeBtnTitle: 'I understand',
         cancelBtnTitle: 'Cancel',
+        isShowCancelButton: false,
       });
     },
     [confirmModal, onImportFinal, theme.colorPrimary, theme.colorWarning],
diff --git a/src/screens/Home/index.tsx b/src/screens/Home/index.tsx
index b01c0a6f7..11a8be8e6 100644
--- a/src/screens/Home/index.tsx
+++ b/src/screens/Home/index.tsx
@@ -32,7 +32,7 @@ import { mmkvStore } from 'utils/storage';
 import { GeneralTermModal } from 'components/Modal/GeneralTermModal';
 import { TermAndCondition } from 'constants/termAndCondition';
 import { RemindBackupModal } from 'components/Modal/RemindBackupModal';
-import { ALL_ACCOUNT_KEY } from '@subwallet/extension-base/constants';
+import { ALL_ACCOUNT_KEY, UPGRADE_DUPLICATE_ACCOUNT_NAME } from '@subwallet/extension-base/constants';
 import { useIsFocused } from '@react-navigation/native';
 import { updateMktCampaignStatus } from 'stores/AppState';
 import { MissionPoolsByTabview } from 'screens/Home/Browser/MissionPool';
@@ -40,6 +40,9 @@ import { computeStatus } from 'utils/missionPools';
 import { MissionPoolType } from 'screens/Home/Browser/MissionPool/predefined';
 import withPageWrapper from 'components/pageWrapper';
 import { NoticeModal } from 'components/Modal/NoticeModal';
+import { RemindDuplicateAccountNameModal } from 'components/Modal/RemindDuplicateAccountNameModal';
+import { getValueLocalStorageWS } from 'messaging/database';
+import { noop } from 'utils/function';
 
 interface tabbarIconColor {
   color: string;
@@ -274,6 +277,7 @@ export const Home = ({ navigation }: Props) => {
   const lastTimeLogin = mmkvStore.getNumber('lastTimeLogin');
   const [modalVisible, setModalVisible] = useState<boolean>(false);
   const [noticeModalVisible, setNoticeModalVisible] = useState<boolean>(false);
+  const [duplicateModalVisible, setDuplicateModalVisible] = useState<boolean>(false);
   const isOpenedNoticeModal = mmkvStore.getBoolean('isOpenedNoticeModal');
   const isFocused = useIsFocused();
   const dispatch = useDispatch();
@@ -318,16 +322,26 @@ export const Home = ({ navigation }: Props) => {
 
   useEffect(() => {
     const isNeedShowNoticeModal = Platform.OS === 'ios' && parseFloat(Platform.Version) < 16.4;
-    if (!isLocked && lastTimeLogin && storedRemindBackupTimeout) {
-      if (Date.now() - lastTimeLogin > storedRemindBackupTimeout) {
-        setModalVisible(true);
-        dispatch(updateMktCampaignStatus(false));
-      } else if (isNeedShowNoticeModal) {
-        setNoticeModalVisible(true);
-        dispatch(updateMktCampaignStatus(false));
-      } else {
-        dispatch(updateMktCampaignStatus(true));
-      }
+    if (!isLocked) {
+      getValueLocalStorageWS(UPGRADE_DUPLICATE_ACCOUNT_NAME)
+        .then(value => {
+          if (value === 'true') {
+            setDuplicateModalVisible(true);
+          } else {
+            if (lastTimeLogin && storedRemindBackupTimeout) {
+              if (Date.now() - lastTimeLogin > storedRemindBackupTimeout) {
+                setModalVisible(true);
+                dispatch(updateMktCampaignStatus(false));
+              } else if (isNeedShowNoticeModal) {
+                setNoticeModalVisible(true);
+                dispatch(updateMktCampaignStatus(false));
+              } else {
+                dispatch(updateMktCampaignStatus(true));
+              }
+            }
+          }
+        })
+        .catch(noop);
     }
   }, [dispatch, isLocked, lastTimeLogin, storedRemindBackupTimeout]);
 
@@ -357,12 +371,16 @@ export const Home = ({ navigation }: Props) => {
           disabledOnPressBackDrop={true}
         />
       )}
+      {!isEmptyAccounts && !needMigrate && isFocused && (
+        <RemindDuplicateAccountNameModal modalVisible={duplicateModalVisible} setVisible={setDuplicateModalVisible} />
+      )}
+
       {!isEmptyAccounts && !needMigrate && isFocused && (
         <RemindBackupModal modalVisible={modalVisible} setVisible={setModalVisible} />
       )}
 
       {!isEmptyAccounts && !isOpenedNoticeModal && !needMigrate && isFocused && !isShowRemindBackupModal.current && (
-        <NoticeModal modalVisible={noticeModalVisible} setVisible={setNoticeModalVisible} />
+        <NoticeModal modalVisible={noticeModalVisible} setVisible={setNoticeModalVisible} /> // Consider deleting this modal
       )}
     </>
   );