[issue-947] Error page in case touch back when buy token

Koniverse · Aug 25, 2023 · ea86d03 · ea86d03
1 parent 9e33ddb
commit ea86d03
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 37 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -536,7 +536,7 @@ PODS:
   - RNScreens (3.22.1):
     - React-Core
     - React-RCTImage
-  - RNSVG (13.10.0):
+  - RNSVG (13.12.0):
     - React-Core
   - RNVectorIcons (9.2.0):
     - React-Core
@@ -908,7 +908,7 @@ SPEC CHECKSUMS:
   RNQrGenerator: 90461ba3ca88c1d38ef73da50fade35d9648215d
   RNReanimated: f186e85d9f28c9383d05ca39e11dd194f59093ec
   RNScreens: 50ffe2fa2342eabb2d0afbe19f7c1af286bc7fb3
-  RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9
+  RNSVG: 6d07f8f8f246c85e3e16e0bcfc0d047db0c48496
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d

diff --git a/src/components/common/Confirmation/ConfirmationGeneralInfo/index.tsx b/src/components/common/Confirmation/ConfirmationGeneralInfo/index.tsx
@@ -3,7 +3,7 @@ import { getDomainFromUrl } from '@subwallet/extension-base/utils';
 import { Image } from 'components/design-system-ui';
 import DualLogo from 'components/Logo/DualLogo';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Text, View } from 'react-native';
 import createStyle from './styles';
 import { ImageLogosMap } from 'assets/logo';
@@ -18,18 +18,24 @@ interface Props {
 const ConfirmationGeneralInfo: React.FC<Props> = (props: Props) => {
   const { request, gap = 0 } = props;
   const domain = getDomainFromUrl(request.url);
-  const leftLogoUrl = `https://icons.duckduckgo.com/ip2/${domain}.ico`;
+  const [rightLogo, setRightLogo] = useState(`https://icons.duckduckgo.com/ip2/${domain}.ico`);
   const isWCRequest = useMemo(() => isWalletConnectRequest(request.id), [request.id]);
   const theme = useSubWalletTheme().swThemes;
-
   const styles = useMemo(() => createStyle(theme, gap), [theme, gap]);
 
+  const onLoadImageError = useCallback(() => {
+    if (rightLogo.includes('.ico')) {
+      setRightLogo(`https://icons.duckduckgo.com/ip2/${domain}.png`);
+      return;
+    }
+  }, [domain, rightLogo]);
+
   return (
     <View style={styles.container}>
       <DualLogo
         leftLogo={<Image shape={'squircle'} src={ImageLogosMap.subwallet} squircleSize={56} />}
         linkIcon={isWCRequest ? <SVGImages.WalletConnect width={24} height={24} color={theme.colorWhite} /> : undefined}
-        rightLogo={<Image shape="squircle" src={{ uri: leftLogoUrl }} squircleSize={56} />}
+        rightLogo={<Image shape="squircle" src={{ uri: rightLogo }} squircleSize={56} onError={onLoadImageError} />}
       />
       <Text style={styles.text}>{domain}</Text>
     </View>

diff --git a/src/screens/Home/Crypto/BuyToken.tsx b/src/screens/Home/Crypto/BuyToken.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { ContainerWithSubHeader } from 'components/ContainerWithSubHeader';
 import { Button, Icon, PageIcon, Typography } from 'components/design-system-ui';
 import { ShoppingCartSimple } from 'phosphor-react-native';
@@ -15,7 +15,7 @@ import { useNavigation } from '@react-navigation/native';
 import { RootNavigationProps } from 'routes/index';
 import { TokenSelectField } from 'components/Field/TokenSelect';
 import { PREDEFINED_TRANSAK_TOKEN_BY_SLUG } from '../../../predefined/transak';
-import { StyleSheet, View } from 'react-native';
+import { BackHandler, StyleSheet, View } from 'react-native';
 import { ServiceModal } from 'screens/Home/Crypto/ServiceModal';
 import { FontSemiBold, MarginBottomForSubmitButton } from 'styles/sharedStyles';
 import { ThemeTypes } from 'styles/themes';
@@ -47,6 +47,16 @@ export const BuyToken = ({
     serviceUrl,
   } = useBuyToken(tokenGroupSlug, groupSymbol);
 
+  useEffect(() => {
+    const onBackPress = () => {
+      navigation.navigate('Home');
+      return true;
+    };
+    const backHandler = BackHandler.addEventListener('hardwareBackPress', onBackPress);
+    return () => backHandler.remove();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const selectedAccount = useGetAccountByAddress(selectedBuyAccount);
   const symbol = useMemo(() => {
     return selectedBuyToken ? PREDEFINED_TRANSAK_TOKEN_BY_SLUG[selectedBuyToken].symbol : '';

diff --git a/src/utils/permission/camera.ts b/src/utils/permission/camera.ts
@@ -1,4 +1,4 @@
-import { check, PERMISSIONS, request, RESULTS } from 'react-native-permissions';
+import { PERMISSIONS, request, RESULTS } from 'react-native-permissions';
 import { Alert, Linking, Platform } from 'react-native';
 import { AutoLockState } from 'utils/autoLock';
 import i18n from 'utils/i18n/i18n';
@@ -8,35 +8,40 @@ const getCameraPermission = () => {
 };
 
 export const requestCameraPermission = async (onPressCancel?: () => void) => {
-  AutoLockState.isPreventAutoLock = true;
-  const result = await check(getCameraPermission());
-  AutoLockState.isPreventAutoLock = false;
+  try {
+    AutoLockState.isPreventAutoLock = true;
+    const result = await request(getCameraPermission());
+    AutoLockState.isPreventAutoLock = false;
 
-  switch (result) {
-    case RESULTS.UNAVAILABLE:
-      // Images: This feature is not available (on this device / in this context)
-      break;
-    case RESULTS.DENIED:
-      request(getCameraPermission()).then(() => onPressCancel && onPressCancel());
-      // Images: The permission has not been requested / is denied but requestable
-      break;
-    case RESULTS.GRANTED:
-      // Images: The permission is granted
-      return result;
-    case RESULTS.BLOCKED:
-      Alert.alert(i18n.common.notify, i18n.common.cannotScanQRCodeWithoutPermission, [
-        {
-          text: i18n.buttonTitles.cancel,
-          onPress: onPressCancel,
-        },
-        {
-          text: i18n.common.goToSetting,
-          onPress: () => {
-            onPressCancel && onPressCancel();
-            Linking.openSettings();
+    switch (result) {
+      case RESULTS.UNAVAILABLE:
+        // Images: This feature is not available (on this device / in this context)
+        break;
+      case RESULTS.DENIED:
+        request(getCameraPermission()).then(() => onPressCancel && onPressCancel());
+        // Images: The permission has not been requested / is denied but requestable
+        break;
+      case RESULTS.GRANTED:
+        // Images: The permission is granted
+        return result;
+      case RESULTS.BLOCKED:
+        Alert.alert(i18n.common.notify, i18n.common.cannotScanQRCodeWithoutPermission, [
+          {
+            text: i18n.buttonTitles.cancel,
+            onPress: onPressCancel,
           },
-        },
-      ]);
-      return;
+          {
+            text: i18n.common.goToSetting,
+            onPress: () => {
+              onPressCancel && onPressCancel();
+              Linking.openSettings();
+            },
+          },
+        ]);
+        return null;
+    }
+  } catch (e) {
+    console.log(e);
+    return null;
   }
 };
diff --git a/yarn.lock b/yarn.lock
@@ -15277,6 +15277,14 @@ react-native-svg@^12.1.1, react-native-svg@^12.5.1, react-native-svg@^13.6.0:
     css-select "^5.1.0"
     css-tree "^1.1.3"
 
+react-native-svg@^13.12.0:
+  version "13.12.0"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-13.12.0.tgz#fd4769205c64a5c93cb2da02c6fa5ccf315af862"
+  integrity sha512-R+HvWfeps9z87CiXXlqIqr9OGPRKvZ7fCfUkDzDVv8wLMBzwi62sjZfAeCS+FxbVBPJ+xlvA4qfGjQZ7xRTBYw==
+  dependencies:
+    css-select "^5.1.0"
+    css-tree "^1.1.3"
+
 react-native-tab-view@^3.5.2:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-3.5.2.tgz#2789b8af6148b16835869566bf13dc3b0e6c1b46"