ADD: Tooltip for address list

components/addresses/AddressItem.js

@@ -1,15 +1,20 @@
-import React from 'react';
-import { StyleSheet, Text } from 'react-native';
+import React, { useRef } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
 import { useTheme } from '@react-navigation/native';
 import { ListItem } from 'react-native-elements';
 import PropTypes from 'prop-types';
 import { AddressTypeBadge } from './AddressTypeBadge';
-import { formatBalance } from '../../loc';
+import loc, { formatBalance } from '../../loc';
+import TooltipMenu from '../TooltipMenu';
+import Clipboard from '@react-native-clipboard/clipboard';
+import Share from 'react-native-share';
 
 const AddressItem = ({ item, balanceUnit, onPress }) => {
   const { colors } = useTheme();
+  const tooltip = useRef();
+  const listItem = useRef();
 
-  const styles = StyleSheet.create({
+  const stylesHook = StyleSheet.create({
     container: {
       borderBottomColor: colors.lightBorder,
       backgroundColor: colors.elevated,
@@ -17,40 +22,85 @@ const AddressItem = ({ item, balanceUnit, onPress }) => {
     list: {
       color: colors.buttonTextColor,
     },
-    address: {
-      fontWeight: '600',
-      marginHorizontal: 40,
-    },
     index: {
       color: colors.alternativeTextColor,
-      fontSize: 15,
     },
     balance: {
-      marginTop: 8,
-      marginLeft: 14,
       color: colors.alternativeTextColor,
     },
   });
 
+  const showToolTipMenu = () => {
+    tooltip.current.showMenu();
+  };
+
   const balance = formatBalance(item.balance, balanceUnit, true);
 
+  const handleCopyPress = () => {
+    Clipboard.setString(item.address);
+  };
+
+  const handleSharePress = () => {
+    Share.open({ message: item.address }).catch(error => console.log(error));
+  };
+
   const render = () => {
     return (
-      <ListItem key={`${item.key}`} button onPress={onPress} containerStyle={styles.container}>
-        <ListItem.Content style={styles.list}>
-          <ListItem.Title style={styles.list} numberOfLines={1} ellipsizeMode="middle">
-            <Text style={styles.index}>{item.index}</Text> <Text style={styles.address}>{item.address}</Text>
-          </ListItem.Title>
-          <ListItem.Subtitle style={[styles.list, styles.balance]}>{balance}</ListItem.Subtitle>
-        </ListItem.Content>
-        <AddressTypeBadge isInternal={item.isInternal} />
-      </ListItem>
+      <View>
+        <TooltipMenu
+          ref={tooltip}
+          anchorRef={listItem}
+          actions={[
+            {
+              id: 'copyToClipboard',
+              text: loc.transactions.details_copy,
+              onPress: handleCopyPress,
+            },
+            {
+              id: 'share',
+              text: loc.receive.details_share,
+              onPress: handleSharePress,
+            },
+          ]}
+        />
+        <ListItem
+          ref={listItem}
+          key={`${item.key}`}
+          button
+          onPress={onPress}
+          containerStyle={stylesHook.container}
+          onLongPress={showToolTipMenu}
+        >
+          <ListItem.Content style={stylesHook.list}>
+            <ListItem.Title style={stylesHook.list} numberOfLines={1} ellipsizeMode="middle">
+              <Text style={[styles.index, stylesHook.index]}>{item.index + 1}</Text>{' '}
+              <Text style={[stylesHook.address, styles.address]}>{item.address}</Text>
+            </ListItem.Title>
+            <ListItem.Subtitle style={[stylesHook.list, styles.balance, stylesHook.balance]}>{balance}</ListItem.Subtitle>
+          </ListItem.Content>
+          <AddressTypeBadge isInternal={item.isInternal} />
+        </ListItem>
+      </View>
     );
   };
 
   return render();
 };
 
+const styles = StyleSheet.create({
+  address: {
+    fontWeight: '600',
+    marginHorizontal: 40,
+  },
+  index: {
+    fontSize: 15,
+  },
+  balance: {
+    marginTop: 8,
+    marginLeft: 14,
+  },
+});
+
 AddressItem.propTypes = {
   item: PropTypes.shape({
     key: PropTypes.string,

screen/wallets/addresses.js

@@ -104,6 +104,10 @@ const WalletAddresses = () => {
     });
   };
 
+  const renderRow = item => {
+    return <AddressItem {...item} balanceUnit={balanceUnit} onPress={() => navigateToReceive(item)} />;
+  };
+
   const render = () => {
     if (showAddresses) {
       return (
@@ -112,7 +116,9 @@ const WalletAddresses = () => {
           <FlatList
             style={stylesHook.root}
             data={addresses}
-            renderItem={item => <AddressItem {...item} balanceUnit={balanceUnit} onPress={() => navigateToReceive(item)} />}
+            initialNumToRender={20}
+            contentInsetAdjustmentBehavior="automatic"
+            renderItem={renderRow}
           />
         </View>
       );

screen/wallets/signVerify.js

@@ -127,7 +127,7 @@ const SignVerify = () => {
     );
 
   return (
-    <SafeBlueArea>
+    <SafeBlueArea style={[styles.root, stylesHooks.root]}>
       <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
         <KeyboardAvoidingView style={[styles.root, stylesHooks.root]}>
           {!isKeyboardVisible && (

tests/setup.js

@@ -128,4 +128,10 @@ jest.mock('../blue_modules/analytics', () => {
   return ret;
 });
 
+jest.mock('react-native-share', () => {
+  return {
+    open: jest.fn(),
+  };
+});
+
 global.alert = () => {};