[5.3] [IMPROVEMENT] Update SelectQRAccounts UI (#4070)

MetaMask · May 26, 2022 · 66ed569 · 66ed569
1 parent 331814f
commit 66ed569
Show file tree

Hide file tree

Showing 4 changed files with 174 additions and 112 deletions.
diff --git a/app/components/UI/QRHardware/withQRHardwareAwareness.tsx b/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.current) {
+          keyringState.current.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;
 };
 

diff --git a/app/components/Views/ConnectQRHardware/AccountDetails/index.tsx b/app/components/Views/ConnectQRHardware/AccountDetails/index.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import Icon from 'react-native-vector-icons/EvilIcons';
+import Device from '../../../../util/device';
+import { renderFromWei } from '../../../../util/number';
+import { mockTheme, useAppThemeFromContext } from '../../../../util/theme';
+import { fontStyles } from '../../../../styles/common';
+import EthereumAddress from '../../../UI/EthereumAddress';
+
+interface IAccountDetailsProps {
+  index: number;
+  address: string;
+  balance: string;
+  ticker: string;
+  toBlockExplorer: (address: string) => void;
+}
+
+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: 20,
+      color: colors.text.default,
+      ...fontStyles.normal,
+    },
+    information: {
+      color: colors.text.alternative,
+      ...fontStyles.normal,
+    },
+  });
+
+const AccountDetails = (props: IAccountDetailsProps) => {
+  const { colors } = useAppThemeFromContext() || mockTheme;
+  const styles = createStyle(colors);
+  const { index, address, balance, ticker, toBlockExplorer } = props;
+  const defaultTicker = 'ETH';
+
+  return (
+    <View style={styles.rowContainer}>
+      <View style={styles.accountDetails}>
+        <Text style={styles.index}>{index}</Text>
+        <EthereumAddress
+          style={styles.information}
+          address={address}
+          type={'short'}
+        />
+        <Text style={styles.information}>
+          {renderFromWei(balance)} {ticker || defaultTicker}
+        </Text>
+      </View>
+      <Icon
+        size={18}
+        name={'external-link'}
+        onPress={() => toBlockExplorer(address)}
+        style={styles.linkIcon}
+        color={colors.text.default}
+      />
+    </View>
+  );
+};
+
+export default React.memo(AccountDetails);
diff --git a/app/components/Views/ConnectQRHardware/SelectQRAccounts/index.tsx b/app/components/Views/ConnectQRHardware/SelectQRAccounts/index.tsx
@@ -1,22 +1,24 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import {
   View,
   Text,
   FlatList,
   StyleSheet,
   TouchableOpacity,
 } from 'react-native';
+import Icon from 'react-native-vector-icons/FontAwesome';
+import CheckBox from '@react-native-community/checkbox';
 import { useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
-import CheckBox from '@react-native-community/checkbox';
-import { strings } from '../../../../../locales/i18n';
-import Icon from 'react-native-vector-icons/FontAwesome';
 import { fontStyles } from '../../../../styles/common';
+import { strings } from '../../../../../locales/i18n';
 import { IAccount } from '../types';
-import { renderFromWei } from '../../../../util/number';
+import { RPC, NO_RPC_BLOCK_EXPLORER } from '../../../../constants/network';
 import { getEtherscanAddressUrl } from '../../../../util/etherscan';
+import { findBlockExplorerForRpc } from '../../../../util/networks';
+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 {
@@ -32,6 +34,7 @@ interface ISelectQRAccountsProps {
 const createStyle = (colors: any) =>
   StyleSheet.create({
     container: {
+      flex: 1,
       width: '100%',
       paddingHorizontal: 32,
     },
@@ -44,33 +47,17 @@ const createStyle = (colors: any) =>
     },
     account: {
       flexDirection: 'row',
-      alignItems: 'center',
-      height: 36,
-      width: '100%',
-      paddingVertical: 4,
+      paddingHorizontal: 10,
+      paddingVertical: 5,
     },
     checkBox: {
-      marginRight: 8,
-    },
-    accountUnchecked: {
-      backgroundColor: colors.primary.muted,
-    },
-    accountChecked: {
-      backgroundColor: colors.primary.disabled,
+      backgroundColor: colors.background.default,
     },
     number: {
       ...fontStyles.normal,
       color: colors.text.default,
     },
-    address: {
-      marginLeft: 8,
-      fontSize: 15,
-      flexGrow: 1,
-      ...fontStyles.normal,
-      color: colors.text.default,
-    },
     pagination: {
-      marginTop: 16,
       alignSelf: 'flex-end',
       flexDirection: 'row',
       alignItems: 'center',
@@ -79,6 +66,7 @@ const createStyle = (colors: any) =>
       ...fontStyles.normal,
       fontSize: 18,
       color: colors.primary.default,
+      paddingHorizontal: 10,
     },
     paginationItem: {
       flexDirection: 'row',
@@ -87,13 +75,14 @@ const createStyle = (colors: any) =>
     },
     bottom: {
       alignItems: 'center',
-      marginTop: 150,
-      height: 100,
       justifyContent: 'space-between',
+      paddingTop: 70,
+      paddingBottom: Device.isIphoneX() ? 20 : 10,
     },
     button: {
       width: '100%',
-      padding: 12,
+      justifyContent: 'flex-end',
+      paddingTop: 15,
     },
   });
 
@@ -113,17 +102,32 @@ const SelectQRAccounts = (props: ISelectQRAccountsProps) => {
   const provider = useSelector(
     (state: any) => state.engine.backgroundState.NetworkController.provider,
   );
-  const defaultTicker = 'ETH';
+  const frequentRpcList = useSelector(
+    (state: any) =>
+      state.engine.backgroundState.PreferencesController.frequentRpcList,
+  );
 
-  const toEtherscan = (address: string) => {
-    const accountLink = getEtherscanAddressUrl(provider.type, address);
-    navigation.navigate('Webview', {
-      screen: 'SimpleWebview',
-      params: {
-        url: accountLink,
-      },
-    });
-  };
+  const toBlockExplorer = useCallback(
+    (address: string) => {
+      const { type, rpcTarget } = provider;
+      let accountLink: string;
+      if (type === RPC) {
+        const blockExplorer =
+          findBlockExplorerForRpc(rpcTarget, frequentRpcList) ||
+          NO_RPC_BLOCK_EXPLORER;
+        accountLink = `${blockExplorer}/address/${address}`;
+      } else {
+        accountLink = getEtherscanAddressUrl(type, address);
+      }
+      navigation.navigate('Webview', {
+        screen: 'SimpleWebview',
+        params: {
+          url: accountLink,
+        },
+      });
+    },
+    [frequentRpcList, navigation, provider],
+  );
 
   return (
     <View style={styles.container}>
@@ -145,22 +149,17 @@ const SelectQRAccounts = (props: ISelectQRAccountsProps) => {
                 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
+            <AccountDetails
+              index={item.index}
               address={item.address}
-              style={styles.address}
-              type={'short'}
-            />
-            <Text style={styles.address}>
-              {renderFromWei(item.balance)} {provider.ticker || defaultTicker}
-            </Text>
-            <Icon
-              size={18}
-              name={'external-link'}
-              onPress={() => toEtherscan(item.address)}
-              color={colors.text.default}
+              balance={item.balance}
+              ticker={provider.ticker}
+              toBlockExplorer={toBlockExplorer}
             />
           </View>
         )}
@@ -179,7 +178,6 @@ const SelectQRAccounts = (props: ISelectQRAccountsProps) => {
           <Icon name={'chevron-right'} color={colors.primary.default} />
         </TouchableOpacity>
       </View>
-
       <View style={styles.bottom}>
         <StyledButton
           type={'confirm'}