From da0cebe8ba1cb34445aba99f90aa1a4338de33dc Mon Sep 17 00:00:00 2001
From: Marcos Rodriguez Velez <marcospr@pm.me>
Date: Wed, 21 Aug 2024 20:58:09 -0400
Subject: [PATCH 1/5] ADD: Tooltip for header buttons for accessbility

---
 components/AddWalletButton.tsx        | 57 +++++++++++++++++++++++++++
 components/Header.tsx                 |  6 +--
 components/icons/PlusIcon.js          | 32 ---------------
 components/icons/SettingsButton.tsx   | 32 ++++++++++-----
 navigation/DetailViewScreensStack.tsx |  4 +-
 typings/CommonToolTipActions.ts       | 18 +++++++++
 6 files changed, 102 insertions(+), 47 deletions(-)
 create mode 100644 components/AddWalletButton.tsx
 delete mode 100644 components/icons/PlusIcon.js

diff --git a/components/AddWalletButton.tsx b/components/AddWalletButton.tsx
new file mode 100644
index 000000000..956c4de9f
--- /dev/null
+++ b/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;
diff --git a/components/Header.tsx b/components/Header.tsx
index 1be637b97..eef8335e3 100644
--- a/components/Header.tsx
+++ b/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>
   );
 };
diff --git a/components/icons/PlusIcon.js b/components/icons/PlusIcon.js
deleted file mode 100644
index 461c35585..000000000
--- a/components/icons/PlusIcon.js
+++ /dev/null
@@ -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;
diff --git a/components/icons/SettingsButton.tsx b/components/icons/SettingsButton.tsx
index 77d5ae033..b11a9e052 100644
--- a/components/icons/SettingsButton.tsx
+++ b/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>
   );
 };
 
diff --git a/navigation/DetailViewScreensStack.tsx b/navigation/DetailViewScreensStack.tsx
index 8cf2fcc4d..b3d56d783 100644
--- a/navigation/DetailViewScreensStack.tsx
+++ b/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 />
       </>
diff --git a/typings/CommonToolTipActions.ts b/typings/CommonToolTipActions.ts
index d1f816ddc..b23393a19 100644
--- a/typings/CommonToolTipActions.ts
+++ b/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,
+  },
 };

From 9805e9a414196fafb79120434c364b329d0b0549 Mon Sep 17 00:00:00 2001
From: Marcos Rodriguez Velez <marcospr@pm.me>
Date: Wed, 21 Aug 2024 21:35:10 -0400
Subject: [PATCH 2/5] FIX: useMemo

---
 components/AddWalletButton.tsx      | 11 ++++-------
 components/icons/SettingsButton.tsx |  5 +++--
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/components/AddWalletButton.tsx b/components/AddWalletButton.tsx
index 956c4de9f..2700ecce0 100644
--- a/components/AddWalletButton.tsx
+++ b/components/AddWalletButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, TouchableOpacity, GestureResponderEvent } from 'react-native';
 import { Icon } from '@rneui/themed';
 import { useTheme } from './themes';
@@ -40,13 +40,10 @@ const AddWalletButton: React.FC<AddWalletButtonProps> = ({ onPress }) => {
     }
   };
 
+  const actions = useMemo(() => [CommonToolTipActions.ImportWallet], []);
+
   return (
-    <ToolTipMenu
-      accessibilityRole="button"
-      accessibilityLabel={loc.wallets.add_title}
-      onPressMenuItem={onPressMenuItem}
-      actions={[CommonToolTipActions.ImportWallet]}
-    >
+    <ToolTipMenu accessibilityRole="button" accessibilityLabel={loc.wallets.add_title} onPressMenuItem={onPressMenuItem} actions={actions}>
       <TouchableOpacity style={[styles.ball, stylesHook.ball]} onPress={onPress}>
         <Icon name="add" size={22} type="ionicons" color={colors.foregroundColor} />
       </TouchableOpacity>
diff --git a/components/icons/SettingsButton.tsx b/components/icons/SettingsButton.tsx
index b11a9e052..4be3fac0d 100644
--- a/components/icons/SettingsButton.tsx
+++ b/components/icons/SettingsButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { Icon } from '@rneui/themed';
 import { useTheme } from '../themes';
@@ -24,8 +24,9 @@ const SettingsButton = () => {
     }
   };
 
+  const actions = useMemo(() => [CommonToolTipActions.ManageWallet], []);
   return (
-    <ToolTipMenu onPressMenuItem={onPressMenuItem} actions={[CommonToolTipActions.ManageWallet]}>
+    <ToolTipMenu onPressMenuItem={onPressMenuItem} actions={actions}>
       <TouchableOpacity
         accessibilityRole="button"
         accessibilityLabel={loc.settings.default_title}

From fbcaeed96fee0d208e1b8020949bbaa597aeae29 Mon Sep 17 00:00:00 2001
From: Marcos Rodriguez Velez <marcospr@pm.me>
Date: Wed, 21 Aug 2024 23:10:16 -0400
Subject: [PATCH 3/5] wip

---
 components/AddWalletButton.tsx      | 6 +++---
 components/icons/SettingsButton.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/AddWalletButton.tsx b/components/AddWalletButton.tsx
index 2700ecce0..4ca4aa30f 100644
--- a/components/AddWalletButton.tsx
+++ b/components/AddWalletButton.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, TouchableOpacity, GestureResponderEvent } from 'react-native';
 import { Icon } from '@rneui/themed';
 import { useTheme } from './themes';
@@ -29,7 +29,7 @@ const AddWalletButton: React.FC<AddWalletButtonProps> = ({ onPress }) => {
     },
   });
 
-  const onPressMenuItem = (action: string) => {
+  const onPressMenuItem = useCallback((action: string) => {
     switch (action) {
       case CommonToolTipActions.ImportWallet.id:
         console.log('Import Wallet');
@@ -38,7 +38,7 @@ const AddWalletButton: React.FC<AddWalletButtonProps> = ({ onPress }) => {
       default:
         break;
     }
-  };
+  }, []);
 
   const actions = useMemo(() => [CommonToolTipActions.ImportWallet], []);
 
diff --git a/components/icons/SettingsButton.tsx b/components/icons/SettingsButton.tsx
index 4be3fac0d..8bc794cac 100644
--- a/components/icons/SettingsButton.tsx
+++ b/components/icons/SettingsButton.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { Icon } from '@rneui/themed';
 import { useTheme } from '../themes';
@@ -14,7 +14,7 @@ const SettingsButton = () => {
     navigate('Settings');
   };
 
-  const onPressMenuItem = (menuItem: string) => {
+  const onPressMenuItem = useCallback((menuItem: string) => {
     switch (menuItem) {
       case CommonToolTipActions.ManageWallet.id:
         navigate('ManageWallets');
@@ -22,7 +22,7 @@ const SettingsButton = () => {
       default:
         break;
     }
-  };
+  }, []);
 
   const actions = useMemo(() => [CommonToolTipActions.ManageWallet], []);
   return (

From 253e85432af38d553a7e7c37a30e89b9690e6407 Mon Sep 17 00:00:00 2001
From: Marcos Rodriguez Velez <marcospr@pm.me>
Date: Wed, 21 Aug 2024 23:37:21 -0400
Subject: [PATCH 4/5] wip

---
 components/AddWalletButton.tsx      | 3 +--
 components/icons/SettingsButton.tsx | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/components/AddWalletButton.tsx b/components/AddWalletButton.tsx
index 4ca4aa30f..8dc200bb1 100644
--- a/components/AddWalletButton.tsx
+++ b/components/AddWalletButton.tsx
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const AddWalletButton: React.FC<AddWalletButtonProps> = ({ onPress }) => {
+const AddWalletButton: React.FC<AddWalletButtonProps> = ({ onPress } : { onPress: () => void }) => {
   const { colors } = useTheme();
   const stylesHook = StyleSheet.create({
     ball: {
@@ -32,7 +32,6 @@ const AddWalletButton: React.FC<AddWalletButtonProps> = ({ onPress }) => {
   const onPressMenuItem = useCallback((action: string) => {
     switch (action) {
       case CommonToolTipActions.ImportWallet.id:
-        console.log('Import Wallet');
         navigationRef.current?.navigate('AddWalletRoot', { screen: 'ImportWallet' });
         break;
       default:
diff --git a/components/icons/SettingsButton.tsx b/components/icons/SettingsButton.tsx
index 8bc794cac..feb2a5014 100644
--- a/components/icons/SettingsButton.tsx
+++ b/components/icons/SettingsButton.tsx
@@ -22,7 +22,7 @@ const SettingsButton = () => {
       default:
         break;
     }
-  }, []);
+  }, [navigate]);
 
   const actions = useMemo(() => [CommonToolTipActions.ManageWallet], []);
   return (

From 3b373b475e97555dcebd31e2c003efc5c8480bde Mon Sep 17 00:00:00 2001
From: Marcos Rodriguez Velez <marcospr@pm.me>
Date: Thu, 22 Aug 2024 10:04:54 -0400
Subject: [PATCH 5/5] FIX: Lint

---
 components/AddWalletButton.tsx      |  2 +-
 components/icons/SettingsButton.tsx | 21 ++++++++++++---------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/AddWalletButton.tsx b/components/AddWalletButton.tsx
index 8dc200bb1..5ebdd178d 100644
--- a/components/AddWalletButton.tsx
+++ b/components/AddWalletButton.tsx
@@ -21,7 +21,7 @@ const styles = StyleSheet.create({
   },
 });
 
-const AddWalletButton: React.FC<AddWalletButtonProps> = ({ onPress } : { onPress: () => void }) => {
+const AddWalletButton: React.FC<AddWalletButtonProps> = ({ onPress }) => {
   const { colors } = useTheme();
   const stylesHook = StyleSheet.create({
     ball: {
diff --git a/components/icons/SettingsButton.tsx b/components/icons/SettingsButton.tsx
index feb2a5014..63ad9ab05 100644
--- a/components/icons/SettingsButton.tsx
+++ b/components/icons/SettingsButton.tsx
@@ -14,15 +14,18 @@ const SettingsButton = () => {
     navigate('Settings');
   };
 
-  const onPressMenuItem = useCallback((menuItem: string) => {
-    switch (menuItem) {
-      case CommonToolTipActions.ManageWallet.id:
-        navigate('ManageWallets');
-        break;
-      default:
-        break;
-    }
-  }, [navigate]);
+  const onPressMenuItem = useCallback(
+    (menuItem: string) => {
+      switch (menuItem) {
+        case CommonToolTipActions.ManageWallet.id:
+          navigate('ManageWallets');
+          break;
+        default:
+          break;
+      }
+    },
+    [navigate],
+  );
 
   const actions = useMemo(() => [CommonToolTipActions.ManageWallet], []);
   return (