[Issue-815]: Update UI for Polkadot Vault transaction

Koniverse · Aug 11, 2023 · ac87a1d · ac87a1d
1 parent 8eecf76
commit ac87a1d
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 43 deletions.
diff --git a/src/components/ContainerWithSubHeader.tsx b/src/components/ContainerWithSubHeader.tsx
@@ -21,7 +21,7 @@ const getContainerStyle: (insetTop: number, backgroundColor?: string) => StylePr
   return {
     flex: 1,
     backgroundColor: backgroundColor || '#0C0C0C',
-    paddingTop: insetTop + (DeviceInfo.hasNotch() ? 0 : 8),
+    paddingTop: insetTop + (Platform.OS === 'ios' && DeviceInfo.hasNotch() ? 0 : 8),
   };
 };
 

diff --git a/src/components/Modal/style/ConnectWebsiteModal.ts b/src/components/Modal/style/ConnectWebsiteModal.ts
@@ -28,7 +28,7 @@ export default (theme: ThemeTypes) => {
     },
     footer: {
       flexDirection: 'row',
-      paddingVertical: theme.padding,
+      paddingTop: theme.padding,
       gap: theme.sizeSM,
     },
     scrollView: {

diff --git a/src/components/Scanner/QrAddressScanner.tsx b/src/components/Scanner/QrAddressScanner.tsx
@@ -119,10 +119,8 @@ const QrAddressScanner = ({ visible, onHideModal, onSuccess, type }: Props) => {
         customMarker={
           <View style={ScannerStyles.RectangleContainerStyle}>
             <View style={ScannerStyles.TopOverlayStyle}>
-              <View style={ScannerStyles.HeaderStyle}>
-                <Text style={[ScannerStyles.HeaderTitleTextStyle, { backgroundColor: theme.colorBgSecondary }]}>
-                  {i18n.header.scanQR}
-                </Text>
+              <View style={[ScannerStyles.HeaderStyle, { backgroundColor: theme.colorBgSecondary }]}>
+                <Text style={ScannerStyles.HeaderTitleTextStyle}>{i18n.title.scanQrCode}</Text>
                 <IconButton icon={CaretLeft} style={CancelButtonStyle} onPress={onHideModal} />
                 <IconButton icon={ImageSquare} style={LibraryButtonStyle} onPress={onPressLibraryBtn} />
               </View>

diff --git a/src/components/Scanner/SignatureScanner.tsx b/src/components/Scanner/SignatureScanner.tsx
@@ -1,13 +1,12 @@
 import { isHex } from '@polkadot/util';
 import Text from 'components/Text';
 import { Warning } from 'components/Warning';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { StatusBar, StyleProp, View, ViewStyle } from 'react-native';
+import React, { useCallback, useEffect, useState } from 'react';
+import { StatusBar, StyleProp, View, ViewStyle, SafeAreaView } from 'react-native';
 import QRCodeScanner from 'react-native-qrcode-scanner';
 import { BarcodeFinder } from 'screens/Shared/BarcodeFinder';
 import { ColorMap } from 'styles/color';
 import { ScannerStyles } from 'styles/scanner';
-import { STATUS_BAR_LIGHT_CONTENT } from 'styles/sharedStyles';
 import { SigData } from 'types/signer';
 import { convertHexColorToRGBA } from 'utils/color';
 import i18n from 'utils/i18n/i18n';
@@ -16,9 +15,8 @@ import { BarCodeReadEvent } from 'react-native-camera';
 import { X } from 'phosphor-react-native';
 import { IconButton } from 'components/IconButton';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
-import { SwFullSizeModal } from 'components/design-system-ui';
-import { SWModalRefProps } from 'components/design-system-ui/modal/ModalBaseV2';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { STATUS_BAR_LIGHT_CONTENT } from 'styles/sharedStyles';
+import ModalBase from 'components/Modal/Base/ModalBase';
 
 interface Props {
   visible: boolean;
@@ -52,9 +50,8 @@ const BottomContentStyle: StyleProp<ViewStyle> = {
 const QrAddressScanner = ({ visible, onSuccess, setVisible }: Props) => {
   const theme = useSubWalletTheme().swThemes;
   const [error, setError] = useState<string>('');
-  const modalBaseV2Ref = useRef<SWModalRefProps>(null);
 
-  const onHideModal = () => modalBaseV2Ref?.current?.close();
+  const onHideModal = () => setVisible(false);
 
   const handleRead = useCallback(
     (event: BarCodeReadEvent) => {
@@ -86,13 +83,12 @@ const QrAddressScanner = ({ visible, onSuccess, setVisible }: Props) => {
   }, [visible]);
 
   return (
-    <SwFullSizeModal
-      modalVisible={visible}
-      setVisible={setVisible}
-      modalBaseV2Ref={modalBaseV2Ref}
-      isUseModalV2
+    <ModalBase
+      isVisible={visible}
+      style={{ flex: 1, width: '100%', margin: 0 }}
+      isUseForceHidden={false}
       onBackButtonPress={onHideModal}>
-      <SafeAreaView edges={['top']} />
+      <SafeAreaView style={[ScannerStyles.SafeAreaStyle, { backgroundColor: theme.colorBgSecondary }]} />
       <StatusBar barStyle={STATUS_BAR_LIGHT_CONTENT} backgroundColor={theme.colorBgSecondary} translucent={true} />
       <QRCodeScanner
         reactivate={true}
@@ -109,9 +105,6 @@ const QrAddressScanner = ({ visible, onSuccess, setVisible }: Props) => {
                 <Text style={ScannerStyles.HeaderTitleTextStyle}>{i18n.title.approveRequest}</Text>
                 <IconButton icon={X} style={CancelButtonStyle} onPress={onHideModal} />
               </View>
-              <View style={ScannerStyles.HeaderSubTitleStyle}>
-                <Text style={ScannerStyles.HeaderSubTitleTextStyle}>{i18n.common.scanForApprove}</Text>
-              </View>
             </View>
             <View style={ScannerStyles.CenterOverlayStyle}>
               <View style={[ScannerStyles.LeftAndRightOverlayStyle]} />
@@ -135,7 +128,7 @@ const QrAddressScanner = ({ visible, onSuccess, setVisible }: Props) => {
           </View>
         }
       />
-    </SwFullSizeModal>
+    </ModalBase>
   );
 };
 

diff --git a/src/components/design-system-ui/modal/SwFullSizeModal.tsx b/src/components/design-system-ui/modal/SwFullSizeModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleProp, View } from 'react-native';
+import { Platform, StyleProp, View } from 'react-native';
 import { ColorMap } from 'styles/color';
 import { ModalProps } from 'react-native-modal/dist/modal';
 import ModalBase from 'components/design-system-ui/modal/ModalBase';
@@ -53,6 +53,7 @@ const SwFullSizeModal = ({
             isVisible={modalVisible}
             setVisible={setVisible}
             height={deviceHeight}
+            isUseForceHidden={Platform.OS === 'android'}
             isFullHeight>
             <View style={[subWalletModalContainer, modalStyle]}>{children}</View>
           </ModalBaseV2>

diff --git a/src/screens/Confirmations/parts/Qr/DisplayPayload/DisplayPayloadModal.tsx b/src/screens/Confirmations/parts/Qr/DisplayPayload/DisplayPayloadModal.tsx
@@ -7,12 +7,13 @@ import useCheckCamera from 'hooks/common/useCheckCamera';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import { QrCode } from 'phosphor-react-native';
 import React, { useMemo, useRef } from 'react';
-import { View } from 'react-native';
+import { Platform, View } from 'react-native';
 import i18n from 'utils/i18n/i18n';
 
 import createStyle from './styles';
 import { SWModalRefProps } from 'components/design-system-ui/modal/ModalBaseV2';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import DeviceInfo from 'react-native-device-info';
 
 interface Props {
   children: JSX.Element;
@@ -25,21 +26,25 @@ const DisplayPayloadModal: React.FC<Props> = (props: Props) => {
   const { children, onOpenScan, visible, setVisible } = props;
   const modalBaseV2Ref = useRef<SWModalRefProps>(null);
   const onClose = () => setVisible(false);
-
+  const insets = useSafeAreaInsets();
   const theme = useSubWalletTheme().swThemes;
-
   const styles = useMemo(() => createStyle(theme), [theme]);
-
   const checkCamera = useCheckCamera();
 
   return (
     <SwFullSizeModal
       modalBaseV2Ref={modalBaseV2Ref}
       setVisible={setVisible}
       modalVisible={visible}
-      isUseModalV2
+      isUseForceHidden={false}
       onBackButtonPress={onClose}>
-      <SafeAreaView style={{ flex: 1, width: '100%' }}>
+      <SafeAreaView
+        style={{
+          flex: 1,
+          width: '100%',
+          paddingTop: insets.top + (Platform.OS === 'ios' && DeviceInfo.hasNotch() ? 0 : 8),
+          paddingBottom: insets.bottom + theme.padding,
+        }}>
         <View style={styles.container}>
           <SubHeader title={i18n.common.confirm} onPressBack={onClose} />
           <View style={styles.body}>{children}</View>

diff --git a/src/screens/Confirmations/parts/Qr/DisplayPayload/styles/index.ts b/src/screens/Confirmations/parts/Qr/DisplayPayload/styles/index.ts
@@ -1,4 +1,4 @@
-import { Platform, StyleSheet, ViewStyle } from 'react-native';
+import { StyleSheet, ViewStyle } from 'react-native';
 import { ThemeTypes } from 'styles/themes';
 
 export interface ComponentStyle {
@@ -13,7 +13,6 @@ export default (theme: ThemeTypes) => {
       display: 'flex',
       width: '100%',
       flex: 1,
-      marginTop: Platform.OS === 'ios' ? 0 : 8,
     },
     body: {
       flex: 1,
@@ -24,7 +23,6 @@ export default (theme: ThemeTypes) => {
     },
     footer: {
       marginTop: theme.margin,
-      marginBottom: theme.margin,
       marginHorizontal: theme.margin,
     },
   });

diff --git a/src/screens/Confirmations/parts/Sign/Evm.tsx b/src/screens/Confirmations/parts/Sign/Evm.tsx
@@ -115,6 +115,7 @@ export const EvmSignArea = (props: Props) => {
 
   const onSuccess = useCallback(
     (sig: SigData) => {
+      setIsShowQr(false);
       setIsScanning(false);
       onApproveSignature && onApproveSignature(sig);
     },
@@ -137,8 +138,7 @@ export const EvmSignArea = (props: Props) => {
   }, [onApprovePassword, onConfirmPassword, onConfirmQr, signMode]);
 
   const openScanning = useCallback(() => {
-    setIsShowQr(false);
-    setTimeout(() => setIsScanning(true), 300);
+    setIsScanning(true);
   }, []);
 
   return (
@@ -157,9 +157,11 @@ export const EvmSignArea = (props: Props) => {
       {signMode === AccountSignMode.QR && (
         <>
           <DisplayPayloadModal visible={isShowQr} setVisible={setIsShowQr} onOpenScan={openScanning}>
-            <EvmQr address={account.address} hashPayload={hashPayload} isMessage={isEvmMessage(payload)} />
+            <>
+              <EvmQr address={account.address} hashPayload={hashPayload} isMessage={isEvmMessage(payload)} />
+              <SignatureScanner visible={isScanning} setVisible={setIsScanning} onSuccess={onSuccess} />
+            </>
           </DisplayPayloadModal>
-          <SignatureScanner visible={isScanning} setVisible={setIsScanning} onSuccess={onSuccess} />
         </>
       )}
     </ConfirmationFooter>

diff --git a/src/screens/Confirmations/parts/Sign/Substrate.tsx b/src/screens/Confirmations/parts/Sign/Substrate.tsx
@@ -121,15 +121,16 @@ export const SubstrateSignArea = (props: Props) => {
 
   const onSuccess = useCallback(
     (sig: SigData) => {
+      setIsShowQr(false);
       setIsScanning(false);
       onApproveSignature && onApproveSignature(sig);
     },
     [onApproveSignature],
   );
 
   const openScanning = useCallback(() => {
-    setIsShowQr(false);
-    setTimeout(() => setIsScanning(true), 300);
+    // setIsShowQr(false);
+    setIsScanning(true);
   }, []);
 
   return (
@@ -148,9 +149,11 @@ export const SubstrateSignArea = (props: Props) => {
       {signMode === AccountSignMode.QR && (
         <>
           <DisplayPayloadModal visible={isShowQr} onOpenScan={openScanning} setVisible={setIsShowQr}>
-            <SubstrateQr address={account.address} genesisHash={genesisHash} payload={payload || ''} />
+            <>
+              <SubstrateQr address={account.address} genesisHash={genesisHash} payload={payload || ''} />
+              <SignatureScanner visible={isScanning} onSuccess={onSuccess} setVisible={setIsScanning} />
+            </>
           </DisplayPayloadModal>
-          <SignatureScanner visible={isScanning} onSuccess={onSuccess} setVisible={setIsScanning} />
         </>
       )}
     </ConfirmationFooter>