[5.3] [IMPROVEMENT] Update SelectQRAccounts UI

app/components/UI/QRHardware/withQRHardwareAwareness.tsx

@@ -1,4 +1,4 @@
-import React, { Component, ComponentClass } from 'react';
+import React, { useState, useEffect, useRef, ComponentClass } from 'react';
 import Engine from '../../../core/Engine';
 import { IQRState } from './types';
 
@@ -9,51 +9,42 @@ const withQRHardwareAwareness = (
 		isSyncingQRHardware?: boolean;
 	}>
 ) => {
-	class QRHardwareAwareness extends Component<any, any> {
-		state: {
-			QRState: IQRState;
-		} = {
-			QRState: {
-				sync: {
-					reading: false,
-				},
-				sign: {},
+	const QRHardwareAwareness = (props: any) => {
+		const keyringState: any = useRef();
+		const [QRState, SetQRState] = useState<IQRState>({
+			sync: {
+				reading: false,
 			},
-		};
-
-		keyringState: any;
+			sign: {},
+		});
 
-		subscribeKeyringState = (value: any) => {
-			this.setState({
-				QRState: value,
-			});
+		const subscribeKeyringState = (value: any) => {
+			SetQRState(value);
 		};
 
-		componentDidMount() {
+		useEffect(() => {
 			const { KeyringController } = Engine.context as any;
 			KeyringController.getQRKeyringState().then((store: any) => {
-				this.keyringState = store;
-				this.keyringState.subscribe(this.subscribeKeyringState);
+				keyringState.current = store;
+				keyringState.current.subscribe(subscribeKeyringState);
 			});
-		}
+			return () => {
+				if (keyringState) {
+					keyringState.unsubscribe(subscribeKeyringState);
+				}
+			};
+		}, []);
 
-		componentWillUnmount() {
-			if (this.keyringState) {
-				this.keyringState.unsubscribe(this.subscribeKeyringState);
-			}
-		}
+		return (
+			<Children
+				{...props}
+				isSigningQRObject={!!QRState.sign?.request}
+				isSyncingQRHardware={QRState.sync.reading}
+				QRState={QRState}
+			/>
+		);
+	};
 
-		render() {
-			return (
-				<Children
-					{...this.props}
-					isSigningQRObject={!!this.state.QRState.sign?.request}
-					isSyncingQRHardware={this.state.QRState.sync.reading}
-					QRState={this.state.QRState}
-				/>
-			);
-		}
-	}
 	return QRHardwareAwareness;
 };
 

app/components/Views/ConnectQRHardware/AccountDetails/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import Icon from 'react-native-vector-icons/EvilIcons';
+import Device from '../../../../util/device';
+import { getEtherscanAddressUrl } from '../../../../util/etherscan';
+import { renderFromWei } from '../../../../util/number';
+import { mockTheme, useAppThemeFromContext } from '../../../../util/theme';
+import EthereumAddress from '../../../UI/EthereumAddress';
+
+interface IAccountDetailsProps {
+	item: any;
+	network: string;
+}
+
+const createStyle = (colors: any) =>
+	StyleSheet.create({
+		rowContainer: {
+			flex: 1,
+			height: 65,
+			flexDirection: 'row',
+			justifyContent: 'space-between',
+			paddingLeft: Device.isIphoneX() ? 20 : 10,
+		},
+		accountDetails: {
+			justifyContent: 'flex-start',
+		},
+		linkIcon: {
+			height: '100%',
+			fontSize: 36,
+			textAlignVertical: 'center',
+		},
+		index: {
+			fontSize: 22,
+			color: colors.text.default,
+		},
+		information: {
+			color: colors.text.muted,
+		},
+	});
+
+const AccountDetails = (props: IAccountDetailsProps) => {
+	const { colors } = useAppThemeFromContext() || mockTheme;
+	const styles = createStyle(colors);
+	const navigation = useNavigation();
+	const { item } = props;
+
+	const toEtherscan = (address: string) => {
+		const { network } = props;
+		const accountLink = getEtherscanAddressUrl(network, address);
+		navigation.navigate('Webview', {
+			screen: 'SimpleWebview',
+			params: {
+				url: accountLink,
+			},
+		});
+	};
+
+	return (
+		<View style={styles.rowContainer}>
+			<View style={styles.accountDetails}>
+				<Text style={styles.index}>{item.index}</Text>
+				<EthereumAddress style={styles.information} address={item.address} type={'short'} />
+				<Text style={styles.information}>{renderFromWei(item.balance)} ETH</Text>
+			</View>
+			<Icon
+				size={18}
+				name={'external-link'}
+				onPress={() => toEtherscan(item.address)}
+				style={styles.linkIcon}
+				color={colors.text.default}
+			/>
+		</View>
+	);
+};
+
+export default AccountDetails;

app/components/Views/ConnectQRHardware/SelectQRAccounts/index.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
 import { View, Text, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
-import { strings } from '../../../../../locales/i18n';
 import Icon from 'react-native-vector-icons/FontAwesome';
-import { fontStyles } from '../../../../styles/common';
 import CheckBox from '@react-native-community/checkbox';
-import { IAccount } from '../types';
-import { renderFromWei } from '../../../../util/number';
 import { useSelector } from 'react-redux';
-import { useNavigation } from '@react-navigation/native';
-import { getEtherscanAddressUrl } from '../../../../util/etherscan';
+import { fontStyles } from '../../../../styles/common';
+import { strings } from '../../../../../locales/i18n';
+import { IAccount } from '../types';
+import Device from '../../../../util/device';
 import { mockTheme, useAppThemeFromContext } from '../../../../util/theme';
-import EthereumAddress from '../../../UI/EthereumAddress';
+import AccountDetails from '../AccountDetails';
 import StyledButton from '../../../UI/StyledButton';
 
 interface ISelectQRAccountsProps {
@@ -26,6 +24,7 @@ interface ISelectQRAccountsProps {
 const createStyle = (colors: any) =>
 	StyleSheet.create({
 		container: {
+			flex: 1,
 			width: '100%',
 			paddingHorizontal: 32,
 		},
@@ -38,19 +37,11 @@ const createStyle = (colors: any) =>
 		},
 		account: {
 			flexDirection: 'row',
-			alignItems: 'center',
-			height: 36,
-			width: '100%',
-			paddingVertical: 4,
+			paddingHorizontal: 12,
+			paddingVertical: 5,
 		},
 		checkBox: {
-			marginRight: 8,
-		},
-		accountUnchecked: {
-			backgroundColor: colors.primary.muted,
-		},
-		accountChecked: {
-			backgroundColor: colors.primary.disabled,
+			backgroundColor: colors.background.default,
 		},
 		number: {
 			...fontStyles.normal,
@@ -64,7 +55,6 @@ const createStyle = (colors: any) =>
 			color: colors.text.default,
 		},
 		pagination: {
-			marginTop: 16,
 			alignSelf: 'flex-end',
 			flexDirection: 'row',
 			alignItems: 'center',
@@ -81,33 +71,22 @@ const createStyle = (colors: any) =>
 		},
 		bottom: {
 			alignItems: 'center',
-			marginTop: 150,
-			height: 100,
 			justifyContent: 'space-between',
+			paddingTop: 75,
+			paddingBottom: Device.isIphoneX() ? 20 : 10,
 		},
 		button: {
 			width: '100%',
-			padding: 12,
+			justifyContent: 'flex-end',
 		},
 	});
 
 const SelectQRAccounts = (props: ISelectQRAccountsProps) => {
 	const { accounts, prevPage, nextPage, toggleAccount, onForget, onUnlock, canUnlock } = props;
 	const { colors } = useAppThemeFromContext() || mockTheme;
 	const styles = createStyle(colors);
-	const navigation = useNavigation();
 	const provider = useSelector((state: any) => state.engine.backgroundState.NetworkController.provider);
 
-	const toEtherscan = (address: string) => {
-		const accountLink = getEtherscanAddressUrl(provider.type, address);
-		navigation.navigate('Webview', {
-			screen: 'SimpleWebview',
-			params: {
-				url: accountLink,
-			},
-		});
-	};
-
 	return (
 		<View style={styles.container}>
 			<Text style={styles.title}>{strings('connect_qr_hardware.select_accounts')}</Text>
@@ -123,17 +102,12 @@ const SelectQRAccounts = (props: ISelectQRAccountsProps) => {
 							onValueChange={() => toggleAccount(item.index)}
 							boxType={'square'}
 							tintColors={{ true: colors.primary.default, false: colors.border.default }}
+							onCheckColor={colors.background.default}
+							onFillColor={colors.primary.default}
+							onTintColor={colors.primary.default}
 							testID={'skip-backup-check'}
 						/>
-						<Text style={styles.number}>{item.index}</Text>
-						<EthereumAddress address={item.address} style={styles.address} type={'short'} />
-						<Text style={styles.address}>{renderFromWei(item.balance)} ETH</Text>
-						<Icon
-							size={18}
-							name={'external-link'}
-							onPress={() => toEtherscan(item.address)}
-							color={colors.text.default}
-						/>
+						<AccountDetails item={item} network={provider.type} />
 					</View>
 				)}
 			/>
@@ -147,7 +121,6 @@ const SelectQRAccounts = (props: ISelectQRAccountsProps) => {
 					<Icon name={'chevron-right'} color={colors.primary.default} />
 				</TouchableOpacity>
 			</View>
-
 			<View style={styles.bottom}>
 				<StyledButton
 					type={'confirm'}

app/components/Views/ConnectQRHardware/index.tsx

@@ -28,31 +28,28 @@ const createStyles = (colors: any) =>
 			flexDirection: 'column',
 			alignItems: 'center',
 		},
-		navbarRightButton: {
-			alignSelf: 'flex-end',
-			paddingTop: 20,
-			paddingBottom: 10,
-			marginTop: Device.isIphoneX() ? 40 : 20,
-		},
-		closeIcon: {
-			fontSize: 28,
-			color: colors.text.default,
-		},
 		header: {
+			marginTop: Device.isIphoneX() ? 50 : 20,
+			flexDirection: 'row',
 			width: '100%',
 			paddingHorizontal: 32,
-			flexDirection: 'column',
 			alignItems: 'center',
 		},
-		close: {
-			alignSelf: 'flex-end',
-			width: 48,
+		navbarRightButton: {
+			flexDirection: 'row',
+			justifyContent: 'flex-end',
 			height: 48,
-			alignItems: 'center',
-			justifyContent: 'center',
+			width: 48,
+			flex: 1,
+		},
+		closeIcon: {
+			fontSize: 28,
+			color: colors.text.default,
 		},
 		qrcode: {
-			alignSelf: 'flex-start',
+			flex: 1,
+			flexDirection: 'row',
+			justifyContent: 'flex-start',
 		},
 		error: {
 			...fontStyles.normal,
@@ -255,10 +252,10 @@ const ConnectQRHardware = ({ navigation }: IConnectQRHardwareProps) => {
 		<Fragment>
 			<View style={styles.container}>
 				<View style={styles.header}>
+					<Icon name="qrcode" size={42} style={styles.qrcode} color={colors.text.default} />
 					<TouchableOpacity onPress={navigation.goBack} style={styles.navbarRightButton}>
 						<MaterialIcon name="close" size={15} style={styles.closeIcon} />
 					</TouchableOpacity>
-					<Icon name="qrcode" size={42} style={styles.qrcode} color={colors.text.default} />
 				</View>
 				{accounts.length <= 0 ? (
 					<ConnectQRInstruction