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

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

Hide file tree

Showing 18 changed files with 78 additions and 66 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/FlatListScreen.tsx b/src/components/FlatListScreen.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { IconProps } from 'phosphor-react-native';
-import { ListRenderItemInfo, RefreshControlProps, StyleProp, TextInput, View, ViewStyle } from 'react-native';
+import { Keyboard, ListRenderItemInfo, RefreshControlProps, StyleProp, TextInput, View, ViewStyle } from 'react-native';
 import { ContainerWithSubHeader } from 'components/ContainerWithSubHeader';
 import { Search } from 'components/Search';
 import { SortFunctionInterface } from 'types/ui-types';
@@ -209,7 +209,10 @@ export function FlatListScreen<T>({
       style={[{ width: '100%' }, style]}
       showRightBtn={!!rightIconOption?.icon}
       rightIcon={rightIconOption?.icon}
-      onPressRightIcon={rightIconOption?.onPress}
+      onPressRightIcon={() => {
+        Keyboard.dismiss();
+        setTimeout(() => rightIconOption?.onPress(), 100);
+      }}
       rightButtonTitle={rightIconOption?.title}
       disableRightButton={rightIconOption?.disabled}
       rightIconColor={rightIconOption?.color}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,6 +1,6 @@
 import { QrCode } from 'phosphor-react-native';
 import React, { useCallback, useState } from 'react';
-import { StyleProp, View } from 'react-native';
+import { Keyboard, StyleProp, View } from 'react-native';
 import { RESULTS } from 'react-native-permissions';
 import { SpaceStyle } from 'styles/space';
 import { requestCameraPermission } from 'utils/permission/camera';
@@ -87,6 +87,7 @@ export const Header = ({ rightComponent, disabled }: HeaderProps) => {
           size={'xs'}
           icon={<SVGImages.MenuBarLogo />}
           onPress={() => {
+            Keyboard.dismiss();
             drawerNavigation.openDrawer();
           }}
         />

diff --git a/src/components/Modal/AddressBook/AddContactModal.tsx b/src/components/Modal/AddressBook/AddContactModal.tsx
@@ -1,5 +1,5 @@
 import { Button, Icon, SwModal } from 'components/design-system-ui';
-import { Platform, View } from 'react-native';
+import { View } from 'react-native';
 import i18n from 'utils/i18n/i18n';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
@@ -200,11 +200,7 @@ export const AddContactModal = ({ modalVisible, setModalVisible }: Props) => {
           name={FormFieldName.ADDRESS}
         />
 
-        <Button
-          style={{ marginBottom: Platform.OS === 'ios' ? 16 : 0 }}
-          icon={ButtonIcon}
-          disabled={isButtonDisabled}
-          onPress={handleSubmit(onSubmit)}>
+        <Button icon={ButtonIcon} disabled={isButtonDisabled} onPress={handleSubmit(onSubmit)}>
           {i18n.buttonTitles.addContact}
         </Button>
       </View>

diff --git a/src/components/Modal/AddressBook/style/EditContactModal.ts b/src/components/Modal/AddressBook/style/EditContactModal.ts
@@ -1,5 +1,5 @@
 import { ThemeTypes } from 'styles/themes';
-import { Platform, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 export default (theme: ThemeTypes) =>
   StyleSheet.create({
@@ -10,7 +10,6 @@ export default (theme: ThemeTypes) =>
     buttonGroupContainer: {
       flexDirection: 'row',
       gap: theme.sizeSM,
-      marginBottom: Platform.OS === 'ios' ? theme.margin : 0,
     },
     button: {
       flex: 1,

diff --git a/src/components/Modal/common/PoolSelector.tsx b/src/components/Modal/common/PoolSelector.tsx
@@ -3,7 +3,7 @@ import { Button, Icon, SelectItem } from 'components/design-system-ui';
 import i18n from 'utils/i18n/i18n';
 import { NominationPoolInfo, StakingType } from '@subwallet/extension-base/background/KoniTypes';
 import useGetValidatorList, { NominationPoolDataType } from 'hooks/screen/Staking/useGetValidatorList';
-import { ListRenderItemInfo } from 'react-native';
+import { Keyboard, ListRenderItemInfo } from 'react-native';
 import { StakingPoolItem } from 'components/common/StakingPoolItem';
 import useGetNominatorInfo from 'hooks/screen/Staking/useGetNominatorInfo';
 import { PREDEFINED_STAKING_POOL } from '@subwallet/extension-base/constants';
@@ -183,8 +183,11 @@ export const PoolSelector = ({ chain, onSelectItem, from, poolLoading, selectedP
             poolSelectorRef && poolSelectorRef.current?.onCloseModal();
           }}
           onPressRightButton={() => {
+            Keyboard.dismiss();
             setSelectedItem(item);
-            setDetailModalVisible(true);
+            setTimeout(() => {
+              setDetailModalVisible(true);
+            }, 100);
           }}
         />
       );

diff --git a/src/components/Modal/common/ValidatorSelector.tsx b/src/components/Modal/common/ValidatorSelector.tsx
@@ -4,7 +4,7 @@ import { StakingType } from '@subwallet/extension-base/background/KoniTypes';
 import { STATUS_BAR_HEIGHT } from 'styles/sharedStyles';
 import i18n from 'utils/i18n/i18n';
 import { Button, Icon, SelectItem } from 'components/design-system-ui';
-import { ListRenderItemInfo } from 'react-native';
+import { Keyboard, ListRenderItemInfo } from 'react-native';
 import { StakingValidatorItem } from 'components/common/StakingValidatorItem';
 import { getValidatorKey } from 'utils/transaction/stake';
 import useGetNominatorInfo from 'hooks/screen/Staking/useGetNominatorInfo';
@@ -197,8 +197,11 @@ export const ValidatorSelector = ({
           validatorInfo={item}
           onPress={onChangeSelectedValidator}
           onPressRightButton={() => {
+            Keyboard.dismiss();
             setDetailItem(item);
-            setDetailModalVisible(true);
+            setTimeout(() => {
+              setDetailModalVisible(true);
+            }, 100);
           }}
           isNominated={nominated}
           isSelected={selected}

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/hooks/modal/useUnlockModal.ts b/src/hooks/modal/useUnlockModal.ts
@@ -13,7 +13,10 @@ interface Result {
   onHideModal: VoidFunction;
 }
 
-const useUnlockModal = (navigation: NativeStackNavigationProp<RootStackParamList>): Result => {
+const useUnlockModal = (
+  navigation: NativeStackNavigationProp<RootStackParamList>,
+  setLoading?: (arg: boolean) => void,
+): Result => {
   const { isLocked, hasMasterPassword } = useSelector((state: RootState) => state.accountState);
   const onCompleteRef = useRef<VoidFunction>(noop);
   const promiseRef = useRef<Promise<boolean> | undefined>();
@@ -74,10 +77,11 @@ const useUnlockModal = (navigation: NativeStackNavigationProp<RootStackParamList
   }, []);
 
   const onHideModal = useCallback(() => {
+    setLoading && setLoading(false);
     rejectRef.current?.(new Error('User cancel request'));
     promiseRef.current = undefined;
     onCompleteRef.current = noop;
-  }, []);
+  }, [setLoading]);
 
   return {
     onPress,

diff --git a/src/hooks/useFilterModal.ts b/src/hooks/useFilterModal.ts
@@ -1,13 +1,15 @@
 import { useCallback, useRef, useState } from 'react';
 import { ModalRef } from 'types/modalRef';
+import { Keyboard } from 'react-native';
 
 export function useFilterModal() {
   const filterModalRef = useRef<ModalRef>();
   const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
   const [filterSelectionMap, setFilterSelectionMap] = useState<Record<string, boolean>>({});
 
   const openFilterModal = useCallback(() => {
-    filterModalRef && filterModalRef.current?.onOpenModal();
+    Keyboard.dismiss();
+    setTimeout(() => filterModalRef && filterModalRef.current?.onOpenModal(), 100);
   }, []);
 
   const onCloseFilterModal = useCallback(() => {

diff --git a/src/screens/Confirmations/parts/Qr/DisplayPayload/DisplayPayloadModal.tsx b/src/screens/Confirmations/parts/Qr/DisplayPayload/DisplayPayloadModal.tsx
@@ -7,12 +7,12 @@ 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';
 
 interface Props {
   children: JSX.Element;
@@ -25,21 +25,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: Platform.OS === 'ios' ? insets.top + 8 : 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,13 +115,14 @@ export const EvmSignArea = (props: Props) => {
 
   const onSuccess = useCallback(
     (sig: SigData) => {
+      setIsShowQr(false);
       setIsScanning(false);
       onApproveSignature && onApproveSignature(sig);
     },
     [onApproveSignature],
   );
 
-  const { onPress: onConfirmPassword } = useUnlockModal(navigation);
+  const { onPress: onConfirmPassword } = useUnlockModal(navigation, setLoading);
 
   const onConfirm = useCallback(() => {
     switch (signMode) {
@@ -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>