Merge remote-tracking branch 'origin/upgrade-ui' into issue-1799

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 1.1.80 (432)
+
+
+## 1.1.80 (431)
+
+
 ## 1.1.79 (430)
 
 

android/app/build.gradle

@@ -76,8 +76,8 @@ android {
         applicationId "app.subwallet.mobile"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 430
-        versionName "1.1.79"
+        versionCode 432
+        versionName "1.1.80"
         missingDimensionStrategy 'react-native-camera', 'general'
     }
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "SubWalletMobile",
-  "version": "1.1.79",
-  "build": "430",
+  "version": "1.1.80",
+  "build": "432",
   "bundleVersion": "a(v11)-i(v7)",
   "bundleVersionStaging": "a(v11)-i(v16)",
   "private": true,

src/App.tsx

@@ -111,7 +111,6 @@ const imageBackgroundStyle: StyleProp<any> = {
 let lockWhenActive = false;
 AppState.addEventListener('change', (state: string) => {
   const { isUseBiometric, timeAutoLock, lock, isMasterPasswordLocked } = autoLockParams;
-  const lastTimeLogin = mmkvStore.getNumber('lastTimeLogin');
   if (timeAutoLock === undefined) {
     return;
   }
@@ -143,15 +142,6 @@ AppState.addEventListener('change', (state: string) => {
       }
       lockWhenActive = false;
     }
-
-    if (lastTimeLogin) {
-      // check if timeToLockApp greater than timeAutoLock, lock app
-      const timeToLockApp = Date.now() - lastTimeLogin;
-      if (timeToLockApp > timeAutoLock * 60 * 1000) {
-        setIsShowRemindBackupModal(false);
-        lock();
-      }
-    }
   }
 });
 

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.openURL('App-Prefs:General&path=SOFTWARE_UPDATE_LINK');
+  };
+
+  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>
+  );
+};

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>
   );

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 =

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} />
+      )}
     </>
   );
 };

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