ADD: Tooltip for header buttons for accessbility

components/AddWalletButton.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { StyleSheet, TouchableOpacity, GestureResponderEvent } from 'react-native';
+import { Icon } from '@rneui/themed';
+import { useTheme } from './themes';
+import ToolTipMenu from './TooltipMenu';
+import { CommonToolTipActions } from '../typings/CommonToolTipActions';
+import loc from '../loc';
+import { navigationRef } from '../NavigationService';
+
+type AddWalletButtonProps = {
+  onPress?: (event: GestureResponderEvent) => void;
+};
+
+const styles = StyleSheet.create({
+  ball: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    justifyContent: 'center',
+    alignContent: 'center',
+  },
+});
+
+const AddWalletButton: React.FC<AddWalletButtonProps> = ({ onPress }) => {
+  const { colors } = useTheme();
+  const stylesHook = StyleSheet.create({
+    ball: {
+      backgroundColor: colors.buttonBackgroundColor,
+    },
+  });
+
+  const onPressMenuItem = (action: string) => {
+    switch (action) {
+      case CommonToolTipActions.ImportWallet.id:
+        console.log('Import Wallet');
+        navigationRef.current?.navigate('AddWalletRoot', { screen: 'ImportWallet' });
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <ToolTipMenu
+      accessibilityRole="button"
+      accessibilityLabel={loc.wallets.add_title}
+      onPressMenuItem={onPressMenuItem}
+      actions={[CommonToolTipActions.ImportWallet]}
+    >
+      <TouchableOpacity style={[styles.ball, stylesHook.ball]} onPress={onPress}>
+        <Icon name="add" size={22} type="ionicons" color={colors.foregroundColor} />
+      </TouchableOpacity>
+    </ToolTipMenu>
+  );
+};
+
+export default AddWalletButton;

components/Header.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-
-import loc from '../loc';
-import PlusIcon from './icons/PlusIcon';
 import { useTheme } from './themes';
+import AddWalletButton from './AddWalletButton';
 
 interface HeaderProps {
   leftText: string;
@@ -27,7 +25,7 @@ export const Header: React.FC<HeaderProps> = ({ leftText, isDrawerList, onNewWal
   return (
     <View style={[styles.root, styleWithProps.root]}>
       <Text style={[styles.text, styleWithProps.text]}>{leftText}</Text>
-      {onNewWalletPress && <PlusIcon accessibilityRole="button" accessibilityLabel={loc.wallets.add_title} onPress={onNewWalletPress} />}
+      {onNewWalletPress && <AddWalletButton onPress={onNewWalletPress} />}
     </View>
   );
 };

components/icons/PlusIcon.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import { StyleSheet, TouchableOpacity } from 'react-native';
-import { Icon } from '@rneui/themed';
-
-import { useTheme } from '../themes';
-
-const styles = StyleSheet.create({
-  ball: {
-    width: 30,
-    height: 30,
-    borderRadius: 15,
-    justifyContent: 'center',
-    alignContent: 'center',
-  },
-});
-
-const PlusIcon = props => {
-  const { colors } = useTheme();
-  const stylesHook = StyleSheet.create({
-    ball: {
-      backgroundColor: colors.buttonBackgroundColor,
-    },
-  });
-
-  return (
-    <TouchableOpacity style={[styles.ball, stylesHook.ball]} onPress={props.onPress}>
-      <Icon name="add" size={22} type="ionicons" color={colors.foregroundColor} />
-    </TouchableOpacity>
-  );
-};
-
-export default PlusIcon;

components/icons/SettingsButton.tsx

@@ -4,6 +4,8 @@ import { Icon } from '@rneui/themed';
 import { useTheme } from '../themes';
 import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
 import loc from '../../loc';
+import ToolTipMenu from '../TooltipMenu';
+import { CommonToolTipActions } from '../../typings/CommonToolTipActions';
 
 const SettingsButton = () => {
   const { colors } = useTheme();
@@ -12,16 +14,28 @@ const SettingsButton = () => {
     navigate('Settings');
   };
 
+  const onPressMenuItem = (menuItem: string) => {
+    switch (menuItem) {
+      case CommonToolTipActions.ManageWallet.id:
+        navigate('ManageWallets');
+        break;
+      default:
+        break;
+    }
+  };
+
   return (
-    <TouchableOpacity
-      accessibilityRole="button"
-      accessibilityLabel={loc.settings.default_title}
-      testID="SettingsButton"
-      style={[style.buttonStyle, { backgroundColor: colors.lightButton }]}
-      onPress={onPress}
-    >
-      <Icon size={22} name="more-horiz" type="material" color={colors.foregroundColor} />
-    </TouchableOpacity>
+    <ToolTipMenu onPressMenuItem={onPressMenuItem} actions={[CommonToolTipActions.ManageWallet]}>
+      <TouchableOpacity
+        accessibilityRole="button"
+        accessibilityLabel={loc.settings.default_title}
+        testID="SettingsButton"
+        style={[style.buttonStyle, { backgroundColor: colors.lightButton }]}
+        onPress={onPress}
+      >
+        <Icon size={22} name="more-horiz" type="material" color={colors.foregroundColor} />
+      </TouchableOpacity>
+    </ToolTipMenu>
   );
 };
 

navigation/DetailViewScreensStack.tsx

@@ -59,13 +59,13 @@ import SignVerifyStackRoot from './SignVerifyStack';
 import ViewEditMultisigCosignersStackRoot from './ViewEditMultisigCosignersStack';
 import WalletExportStack from './WalletExportStack';
 import WalletXpubStackRoot from './WalletXpubStack';
-import PlusIcon from '../components/icons/PlusIcon';
 import SettingsButton from '../components/icons/SettingsButton';
 import ExportMultisigCoordinationSetupStack from './ExportMultisigCoordinationSetupStack';
 import ManageWallets from '../screen/wallets/ManageWallets';
 import getWalletTransactionsOptions from './helpers/getWalletTransactionsOptions';
 import { RouteProp } from '@react-navigation/native';
 import { DetailViewStackParamList } from './DetailViewStackParamList';
+import AddWalletButton from '../components/AddWalletButton';
 
 type walletTransactionsRouteProp = RouteProp<DetailViewStackParamList, 'WalletTransactions'>;
 
@@ -85,7 +85,7 @@ const DetailViewStackScreensStack = () => {
   const RightBarButtons = useMemo(
     () => (
       <>
-        <PlusIcon accessibilityRole="button" accessibilityLabel={loc.wallets.add_title} onPress={navigateToAddWallet} />
+        <AddWalletButton onPress={navigateToAddWallet} />
         <View style={styles.width24} />
         <SettingsButton />
       </>

typings/CommonToolTipActions.ts

@@ -7,6 +7,8 @@ const keys = {
   OpenInBlockExplorer: 'open_in_blockExplorer',
   CopyAmount: 'copyAmount',
   CopyNote: 'copyNote',
+  ManageWallets: 'manageWallets',
+  ImportWallet: 'importWallet',
 };
 
 const icons = {
@@ -25,6 +27,12 @@ const icons = {
   Note: {
     iconValue: 'note.text',
   },
+  ManageWallets: {
+    iconValue: 'slider.horizontal.3',
+  },
+  ImportWallet: {
+    iconValue: 'square.and.arrow.down.on.square',
+  },
 };
 
 export const CommonToolTipActions = {
@@ -58,4 +66,14 @@ export const CommonToolTipActions = {
     text: loc.transactions.details_copy_note,
     icon: icons.Clipboard,
   },
+  ManageWallet: {
+    id: keys.ManageWallets,
+    text: loc.wallets.manage_title,
+    icon: icons.ManageWallets,
+  },
+  ImportWallet: {
+    id: keys.ImportWallet,
+    text: loc.wallets.add_import_wallet,
+    icon: icons.ImportWallet,
+  },
 };