From b6529f5a7f25df5eea1c2b6461485a6893c0a6af Mon Sep 17 00:00:00 2001 From: dominhquang Date: Tue, 17 Sep 2024 19:44:14 +0700 Subject: [PATCH] [Issue-1801] Add warning not support IOS <16.4 --- src/components/Modal/NoticeModal/index.tsx | 76 +++++++++++++++++++ .../design-system-ui/page-icon/index.tsx | 6 +- src/constants/index.ts | 2 + src/screens/Home/index.tsx | 11 +++ src/screens/WebViewDebugger.tsx | 1 + 5 files changed, 94 insertions(+), 2 deletions(-) create mode 100644 src/components/Modal/NoticeModal/index.tsx diff --git a/src/components/Modal/NoticeModal/index.tsx b/src/components/Modal/NoticeModal/index.tsx new file mode 100644 index 000000000..1ff179454 --- /dev/null +++ b/src/components/Modal/NoticeModal/index.tsx @@ -0,0 +1,76 @@ +import React 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 { USER_GUIDE_URL } from 'constants/index'; +import { mmkvStore } from 'utils/storage'; + +interface Props { + modalVisible: boolean; + setVisible: (value: boolean) => void; +} + +export const NoticeModal = ({ modalVisible, setVisible }: Props) => { + const theme = useSubWalletTheme().swThemes; + + const onCloseModal = () => { + mmkvStore.set('isOpenedNoticeModal', true); + setVisible(false); + }; + + const onPressConfirm = () => { + mmkvStore.set('isOpenedNoticeModal', true); + setVisible(false); + Linking.openSettings(); + }; + + return ( + + + + + + + + { + 'v1.1.80 is the last version available for devices running iOS 16.4 or older. Update iOS now to continue using SubWallet mobile app, or switch to browser extension by following' + } + + Linking.openURL(USER_GUIDE_URL)} + style={{ color: theme.colorLink, textDecorationLine: 'underline' }}> + {' this guide'} + + + + + + + + + + + ); +}; diff --git a/src/components/design-system-ui/page-icon/index.tsx b/src/components/design-system-ui/page-icon/index.tsx index 03f2a3c85..6d15c7b0f 100644 --- a/src/components/design-system-ui/page-icon/index.tsx +++ b/src/components/design-system-ui/page-icon/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { View } from 'react-native'; import Icon from '../icon'; import { IconProps } from 'phosphor-react-native'; +import { IconWeight } from 'phosphor-react-native/lib/typescript'; interface Props { icon?: React.ElementType; @@ -9,9 +10,10 @@ interface Props { backgroundColor?: string; customIcon?: React.ReactNode; customSize?: number; + weight?: IconWeight; } -const PageIcon = ({ icon, color, backgroundColor, customIcon, customSize }: Props) => { +const PageIcon = ({ icon, color, backgroundColor, customIcon, customSize, weight = 'fill' }: Props) => { return ( + )} ); diff --git a/src/constants/index.ts b/src/constants/index.ts index 7f39a8be4..6e530f879 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -23,6 +23,8 @@ export const IMPORT_QR_CODE_URL = 'https://docs.subwallet.app/main/mobile-app-user-guide/account-management/import-restore-an-account#import-by-qr-code'; export const BACKUP_SEED_PHRASE_CODE_URL = 'https://docs.subwallet.app/main/mobile-app-user-guide/account-management/export-and-backup-an-account'; +export const USER_GUIDE_URL = + 'https://docs.subwallet.app/main/mobile-app-user-guide/faqs#how-do-i-sync-my-account-on-the-mobile-app-to-the-extension-using-the-qr-code'; export const POLKADOT_VAULT_INSTRUCTION_URL = 'https://docs.subwallet.app/main/mobile-app-user-guide/account-management/attach-a-polkadot-vault-previously-parity-signer-account'; export const KEYSTONE_INSTRUCTION_URL = diff --git a/src/screens/Home/index.tsx b/src/screens/Home/index.tsx index 55f73db1b..b01c0a6f7 100644 --- a/src/screens/Home/index.tsx +++ b/src/screens/Home/index.tsx @@ -39,6 +39,7 @@ import { MissionPoolsByTabview } from 'screens/Home/Browser/MissionPool'; import { computeStatus } from 'utils/missionPools'; import { MissionPoolType } from 'screens/Home/Browser/MissionPool/predefined'; import withPageWrapper from 'components/pageWrapper'; +import { NoticeModal } from 'components/Modal/NoticeModal'; interface tabbarIconColor { color: string; @@ -272,6 +273,8 @@ export const Home = ({ navigation }: Props) => { const storedRemindBackupTimeout = mmkvStore.getNumber('storedRemindBackupTimeout'); const lastTimeLogin = mmkvStore.getNumber('lastTimeLogin'); const [modalVisible, setModalVisible] = useState(false); + const [noticeModalVisible, setNoticeModalVisible] = useState(false); + const isOpenedNoticeModal = mmkvStore.getBoolean('isOpenedNoticeModal'); const isFocused = useIsFocused(); const dispatch = useDispatch(); const needMigrate = useMemo( @@ -314,10 +317,14 @@ 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)); } @@ -353,6 +360,10 @@ export const Home = ({ navigation }: Props) => { {!isEmptyAccounts && !needMigrate && isFocused && ( )} + + {!isEmptyAccounts && !isOpenedNoticeModal && !needMigrate && isFocused && !isShowRemindBackupModal.current && ( + + )} ); }; diff --git a/src/screens/WebViewDebugger.tsx b/src/screens/WebViewDebugger.tsx index 09efdcac0..eae575d19 100644 --- a/src/screens/WebViewDebugger.tsx +++ b/src/screens/WebViewDebugger.tsx @@ -137,6 +137,7 @@ export const WebViewDebugger = () => { onPress={() => { mmkvStore.set('storedLiveMissionPools', '[]'); mmkvStore.set('isOpenedWarningPopup', false); + mmkvStore.set('isOpenedNoticeModal', false); dispatch(updatePopupHistoryData({})); dispatch(updateBannerHistoryData({})); dispatch(updateConfirmationHistoryData({}));