[Issue-1801] Add warning not support IOS <16.4

Koniverse · Sep 17, 2024 · b6529f5 · b6529f5
1 parent 03e768c
commit b6529f5
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 2 deletions.
diff --git a/src/components/Modal/NoticeModal/index.tsx 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 (
+    <SwModal
+      isUseModalV2
+      modalVisible={modalVisible}
+      setVisible={setVisible}
+      disabledOnPressBackDrop={true}
+      isAllowSwipeDown={false}
+      titleTextAlign={'center'}
+      hideWhenCloseApp={false}
+      modalTitle={'Update your iOS now!'}>
+      <View style={{ position: 'relative' }}>
+        <View style={{ alignItems: 'center' }}>
+          <PageIcon icon={Warning} color={theme.colorWarning} weight={'regular'} />
+
+          <Typography.Text
+            style={{
+              fontSize: theme.fontSizeHeading6,
+              lineHeight: theme.fontSizeHeading6 * theme.lineHeightHeading6,
+              color: theme.colorTextLight4,
+              textAlign: 'center',
+              ...FontMedium,
+              marginTop: theme.paddingMD,
+            }}>
+            <Typography.Text>
+              {
+                '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'
+              }
+            </Typography.Text>
+            <Typography.Text
+              onPress={() => Linking.openURL(USER_GUIDE_URL)}
+              style={{ color: theme.colorLink, textDecorationLine: 'underline' }}>
+              {' this guide'}
+            </Typography.Text>
+          </Typography.Text>
+        </View>
+        <View style={{ flexDirection: 'row', gap: theme.paddingSM, marginTop: theme.margin }}>
+          <Button style={{ flex: 1 }} type={'secondary'} onPress={onCloseModal}>
+            Dismiss
+          </Button>
+
+          <Button style={{ flex: 1 }} onPress={onPressConfirm}>
+            Update now
+          </Button>
+        </View>
+      </View>
+    </SwModal>
+  );
+};
diff --git a/src/components/design-system-ui/page-icon/index.tsx b/src/components/design-system-ui/page-icon/index.tsx
@@ -2,16 +2,18 @@ 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<IconProps>;
   color: string;
   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 (
     <View
       style={{
@@ -25,7 +27,7 @@ const PageIcon = ({ icon, color, backgroundColor, customIcon, customSize }: Prop
       {customIcon ? (
         customIcon
       ) : (
-        <Icon phosphorIcon={icon} iconColor={color} weight={'fill'} customSize={customSize ? customSize / 2 : 64} />
+        <Icon phosphorIcon={icon} iconColor={color} weight={weight} customSize={customSize ? customSize / 2 : 64} />
       )}
     </View>
   );

diff --git 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
@@ -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<boolean>(false);
+  const [noticeModalVisible, setNoticeModalVisible] = useState<boolean>(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 && (
         <RemindBackupModal modalVisible={modalVisible} setVisible={setModalVisible} />
       )}
+
+      {!isEmptyAccounts && !isOpenedNoticeModal && !needMigrate && isFocused && !isShowRemindBackupModal.current && (
+        <NoticeModal modalVisible={noticeModalVisible} setVisible={setNoticeModalVisible} />
+      )}
     </>
   );
 };

diff --git 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({}));