Merge pull request #2970 from BlueWallet/addressesfix

REF: Styling on Addresses list

components/addresses/AddressItem.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Text } from 'react-native';
 import { useTheme } from '@react-navigation/native';
 import { ListItem } from 'react-native-elements';
 import Clipboard from '@react-native-clipboard/clipboard';
 import PropTypes from 'prop-types';
 import { AddressTypeBadge } from './AddressTypeBadge';
 import { formatBalance } from '../../loc';
+import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 
 const AddressItem = ({ item, balanceUnit }) => {
   const { colors } = useTheme();
@@ -18,10 +19,24 @@ const AddressItem = ({ item, balanceUnit }) => {
     list: {
       color: colors.buttonTextColor,
     },
+    address: {
+      fontWeight: '600',
+      marginHorizontal: 40,
+    },
+    index: {
+      color: colors.alternativeTextColor,
+      fontSize: 15,
+    },
+    balance: {
+      marginTop: 8,
+      marginLeft: 14,
+      color: colors.alternativeTextColor,
+    },
   });
 
   const copyAddressToClipboard = () => {
     Clipboard.setString(item.address);
+    ReactNativeHapticFeedback.trigger('selection', { ignoreAndroidSystemSettings: false });
   };
 
   const balance = formatBalance(item.balance, balanceUnit, true);
@@ -31,9 +46,9 @@ const AddressItem = ({ item, balanceUnit }) => {
       <ListItem key={`${item.key}`} button onPress={copyAddressToClipboard} containerStyle={styles.container}>
         <ListItem.Content style={styles.list}>
           <ListItem.Title style={styles.list} numberOfLines={1} ellipsizeMode="middle">
-            {item.index}.{item.address}
+            <Text style={styles.index}>{item.index}</Text> <Text style={styles.address}>{item.address}</Text>
           </ListItem.Title>
-          <ListItem.Subtitle style={styles.list}>{balance}</ListItem.Subtitle>
+          <ListItem.Subtitle style={[styles.list, styles.balance]}>{balance}</ListItem.Subtitle>
         </ListItem.Content>
         <AddressTypeBadge isInternal={item.isInternal} />
       </ListItem>

components/addresses/AddressTypeBadge.js

@@ -6,10 +6,8 @@ import loc from '../../loc';
 
 const styles = StyleSheet.create({
   container: {
-    paddingTop: 2,
-    paddingBottom: 2,
-    paddingLeft: 8,
-    paddingRight: 8,
+    paddingVertical: 4,
+    paddingHorizontal: 10,
     borderRadius: 20,
   },
   badgeText: {

components/themes.js

@@ -112,6 +112,10 @@ export const BlueDarkTheme = {
     newBlue: '#007AFF',
     redBG: '#5A4E4E',
     redText: '#FC6D6D',
+    changeBackground: '#5A4E4E',
+    changeText: '#F38C47',
+    receiveBackground: 'rgba(210,248,214,.2)',
+    receiveText: '#37C0A1',
   },
 };
 

ios/Podfile.lock

@@ -355,7 +355,7 @@ PODS:
     - React-Core
   - RNDefaultPreference (1.4.3):
     - React
-  - RNDeviceInfo (8.0.6):
+  - RNDeviceInfo (8.0.7):
     - React-Core
   - RNFS (2.16.6):
     - React
@@ -726,7 +726,7 @@ SPEC CHECKSUMS:
   RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459
   RNCPushNotificationIOS: 5b1cf9ad2aaa107ecb92d5d2d7005ba521b2b97a
   RNDefaultPreference: 21816c0a6f61a2829ccc0cef034392e9b509ee5f
-  RNDeviceInfo: 53004a1aacaaddf9f290590e6a935eb1c698d079
+  RNDeviceInfo: 0550f15928f92d062238ea412b645d00548fd809
   RNFS: 2bd9eb49dc82fa9676382f0585b992c424cd59df
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNHandoff: d3b0754cca3a6bcd9b25f544f733f7f033ccf5fa

screen/lnd/lndViewInvoice.js

@@ -282,7 +282,7 @@ const LNDViewInvoice = () => {
   return (
     <SafeBlueArea onLayout={onLayout}>
       <StatusBar barStyle="default" />
-        {render()}
+      {render()}
     </SafeBlueArea>
   );
 };
@@ -290,7 +290,7 @@ const LNDViewInvoice = () => {
 const styles = StyleSheet.create({
   root: {
     flex: 1,
-    justifyContent: 'space-between', 
+    justifyContent: 'space-between',
   },
   justifyContentCenter: {
     justifyContent: 'center',

screen/wallets/addresses.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useState, useContext } from 'react';
-import { ActivityIndicator, FlatList, StyleSheet, View } from 'react-native';
+import { ActivityIndicator, FlatList, StyleSheet, View, StatusBar } from 'react-native';
 import { useFocusEffect, useRoute, useTheme } from '@react-navigation/native';
 import Privacy from '../../blue_modules/Privacy';
 import { BlueStorageContext } from '../../blue_modules/storage-context';
@@ -40,27 +40,6 @@ export const sortByIndexAndType = (a, b) => {
   if (a.index < b.index) return -1;
 };
 
-const styles = StyleSheet.create({
-  loading: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  loadMoreButton: {
-    borderRadius: 9,
-    minHeight: 49,
-    paddingHorizontal: 8,
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'row',
-    alignSelf: 'auto',
-    flexGrow: 1,
-    marginHorizontal: 16,
-  },
-  loadMoreText: {
-    fontSize: 16,
-  },
-});
-
 const WalletAddresses = () => {
   const [showAddresses, setShowAddresses] = useState(false);
 
@@ -115,7 +94,12 @@ const WalletAddresses = () => {
 
   const render = () => {
     if (showAddresses) {
-      return <FlatList style={stylesHook.root} data={addresses} renderItem={item => <AddressItem {...item} balanceUnit={balanceUnit} />} />;
+      return (
+        <View style={stylesHook.root}>
+          <StatusBar barStyle="light-content" />
+          <FlatList style={stylesHook.root} data={addresses} renderItem={item => <AddressItem {...item} balanceUnit={balanceUnit} />} />
+        </View>
+      );
     }
 
     return (
@@ -135,3 +119,27 @@ WalletAddresses.navigationOptions = navigationStyle({
 });
 
 export default WalletAddresses;
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  loading: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  loadMoreButton: {
+    borderRadius: 9,
+    minHeight: 49,
+    paddingHorizontal: 8,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+    alignSelf: 'auto',
+    flexGrow: 1,
+    marginHorizontal: 16,
+  },
+  loadMoreText: {
+    fontSize: 16,
+  },
+});

screen/wallets/details.js

@@ -16,7 +16,16 @@ import {
   StatusBar,
   PermissionsAndroid,
 } from 'react-native';
-import { BlueCard, BlueLoading, BlueSpacing10, BlueSpacing20, BlueText, SafeBlueArea, SecondButton } from '../../BlueComponents';
+import {
+  BlueCard,
+  BlueLoading,
+  BlueSpacing10,
+  BlueSpacing20,
+  BlueText,
+  SafeBlueArea,
+  SecondButton,
+  BlueListItem,
+} from '../../BlueComponents';
 import navigationStyle from '../../components/navigationStyle';
 import { LightningCustodianWallet } from '../../class/wallets/lightning-custodian-wallet';
 import { HDLegacyBreadwalletWallet } from '../../class/wallets/hd-legacy-breadwallet-wallet';
@@ -517,7 +526,13 @@ const WalletDetails = () => {
                   <BlueText>{wallet.getMasterFingerprintHex()}</BlueText>
                 </>
               )}
-
+            </View>
+          </BlueCard>
+          {(wallet instanceof AbstractHDElectrumWallet || (wallet.type === WatchOnlyWallet.type && wallet.isHd())) && (
+            <BlueListItem onPress={navigateToAddresses} title={loc.wallets.details_show_addresses} chevron />
+          )}
+          <BlueCard style={styles.address}>
+            <View>
               <BlueSpacing20 />
               <SecondButton onPress={navigateToWalletExport} testID="WalletExport" title={loc.wallets.details_export_backup} />
 
@@ -539,13 +554,6 @@ const WalletDetails = () => {
                 </>
               )}
 
-              {(wallet instanceof AbstractHDElectrumWallet || (wallet.type === WatchOnlyWallet.type && wallet.isHd())) && (
-                <>
-                  <BlueSpacing20 />
-                  <SecondButton onPress={navigateToAddresses} title={loc.wallets.details_show_addresses} />
-                </>
-              )}
-
               {(wallet.type === HDLegacyBreadwalletWallet.type ||
                 wallet.type === HDLegacyP2PKHWallet.type ||
                 wallet.type === HDSegwitBech32Wallet.type ||