[Android Only] Some buttons are not working (#5149)

* fix gas selector context menu on the droid

* fix edit wallet context menu

* fix transaction context menu

* rm commented out section

* rm console log

* fix ens intro sheet context menu

src/components/change-wallet/AddressRow.tsx

@@ -13,7 +13,6 @@ import { Icon } from '../icons';
 import { Centered, Column, ColumnWithMargins, Row } from '../layout';
 import { Text, TruncatedText } from '../text';
 import ContextMenuButton from '@/components/native-context-menu/contextMenu';
-import ContextMenuAndroid from '@/components/native-context-menu/contextMenu.android';
 import useExperimentalFlag, { NOTIFICATIONS } from '@/config/experimentalHooks';
 import {
   removeFirstEmojiFromString,
@@ -25,6 +24,7 @@ import { abbreviations, deviceUtils, profileUtils } from '@/utils';
 import { EditWalletContextMenuActions } from '@/screens/ChangeWalletSheet';
 import { toChecksumAddress } from '@/handlers/web3';
 import { IS_IOS, IS_ANDROID } from '@/env';
+import { ContextMenu } from '../context-menu';
 
 const maxAccountLabelWidth = deviceUtils.dimensions.width - 88;
 const NOOP = () => undefined;
@@ -219,6 +219,25 @@ export default function AddressRow({
     menuTitle: walletName,
   };
 
+  const handleSelectActionMenuItem = useCallback(
+    (buttonIndex: number) => {
+      switch (buttonIndex) {
+        case 0:
+          contextMenuActions?.edit(walletId, address);
+          break;
+        case 1:
+          contextMenuActions?.notifications(walletName, address);
+          break;
+        case 2:
+          contextMenuActions?.remove(walletId, address);
+          break;
+        default:
+          break;
+      }
+    },
+    [contextMenuActions, walletName, walletId, address]
+  );
+
   const handleSelectMenuItem = useCallback(
     // @ts-expect-error ContextMenu is an untyped JS component and can't type its onPress handler properly
     ({ nativeEvent: { actionKey } }) => {
@@ -316,14 +335,15 @@ export default function AddressRow({
                   <OptionsIcon onPress={NOOP} />
                 </ContextMenuButton>
               ) : (
-                // @ts-expect-error js component
-                <ContextMenuAndroid
-                  menuConfig={menuConfig}
+                <ContextMenu
+                  options={menuConfig.menuItems.map(item => item.actionTitle)}
                   isAnchoredToRight
-                  onPressMenuItem={handleSelectMenuItem}
+                  onPressActionSheet={handleSelectActionMenuItem}
                 >
-                  <OptionsIcon onPress={NOOP} />
-                </ContextMenuAndroid>
+                  <Centered>
+                    <OptionsIcon onPress={NOOP} />
+                  </Centered>
+                </ContextMenu>
               ))}
           </Column>
         </Row>

src/components/gas/GasSpeedButton.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 /* eslint-disable no-undef */
 import AnimateNumber from '@bankify/react-native-animate-number';
 import lang from 'i18n-js';
@@ -34,6 +35,8 @@ import styled from '@/styled-thing';
 import { fonts, fontWithWidth, margin, padding } from '@/styles';
 import { ethereumUtils, gasUtils } from '@/utils';
 import { getNetworkObj } from '@/networks';
+import { IS_ANDROID } from '@/env';
+import { ContextMenu } from '../context-menu';
 
 const {
   GAS_EMOJIS,
@@ -249,6 +252,7 @@ const GasSpeedButton = ({
     shouldOpenCustomGasSheet.focusTo,
     flashbotTransaction,
     speeds,
+    fallbackColor,
   ]);
 
   const openCustomOptions = useCallback(
@@ -377,6 +381,25 @@ const GasSpeedButton = ({
     [handlePressSpeedOption]
   );
 
+  const handlePressActionSheet = useCallback(
+    buttonIndex => {
+      switch (buttonIndex) {
+        case 0:
+          handlePressSpeedOption(NORMAL);
+          break;
+        case 1:
+          handlePressSpeedOption(FAST);
+          break;
+        case 2:
+          handlePressSpeedOption(URGENT);
+          break;
+        case 3:
+          handlePressSpeedOption(CUSTOM);
+      }
+    },
+    [handlePressSpeedOption]
+  );
+
   const nativeFeeCurrency = useMemo(() => {
     switch (currentNetwork) {
       case networkTypes.polygon:
@@ -399,6 +422,8 @@ const GasSpeedButton = ({
 
   const menuConfig = useMemo(() => {
     const menuOptions = speedOptions.map(gasOption => {
+      if (IS_ANDROID) return gasOption;
+
       const totalGwei = add(
         gasFeeParamsBySpeed[gasOption]?.maxBaseFee?.gwei,
         gasFeeParamsBySpeed[gasOption]?.maxPriorityFeePerGas?.gwei
@@ -441,6 +466,7 @@ const GasSpeedButton = ({
     gasFeeParamsBySpeed,
     selectedGasFeeOption,
     speedOptions,
+    isL2,
   ]);
 
   const gasOptionsAvailable = useMemo(() => speedOptions.length > 1, [
@@ -477,6 +503,24 @@ const GasSpeedButton = ({
       />
     );
     if (!gasOptionsAvailable || gasIsNotReady) return pager;
+
+    if (IS_ANDROID) {
+      return (
+        <ContextMenu
+          activeOpacity={0}
+          enableContextMenu
+          isAnchoredToRight
+          isMenuPrimaryAction
+          onPressActionSheet={handlePressActionSheet}
+          options={menuConfig.menuItems}
+          useActionSheetFallback={false}
+          wrapNativeComponent={false}
+        >
+          <Centered>{pager}</Centered>
+        </ContextMenu>
+      );
+    }
+
     return (
       <ContextMenuButton
         activeOpacity={0}
@@ -543,6 +587,7 @@ const GasSpeedButton = ({
           onPress={openGasHelper}
           scaleTo={0.9}
           testID="estimated-fee-label"
+          disallowInterruption={false}
         >
           <Row>
             <NativeCoinIconWrapper>

src/components/positions/PositionsCard.tsx

@@ -72,7 +72,7 @@ export const PositionCard = ({ position }: PositionCardProps) => {
   }, [navigate, position]);
 
   const depositTokens: CoinStackToken[] = useMemo(() => {
-    let tokens: CoinStackToken[] = [];
+    const tokens: CoinStackToken[] = [];
     position.deposits.forEach((deposit: RainbowDeposit) => {
       deposit.underlying.forEach(({ asset }) => {
         tokens.push({

src/screens/ENSIntroSheet.tsx

@@ -3,7 +3,7 @@ import { useRoute } from '@react-navigation/native';
 import { IS_TESTING } from 'react-native-dotenv';
 import lang from 'i18n-js';
 import React, { useCallback, useMemo } from 'react';
-import { InteractionManager } from 'react-native';
+import { InteractionManager, View } from 'react-native';
 import { MenuActionConfig } from 'react-native-ios-context-menu';
 import LinearGradient from 'react-native-linear-gradient';
 import ActivityIndicator from '../components/ActivityIndicator';
@@ -35,6 +35,8 @@ import {
 } from '@/hooks';
 import Routes from '@/navigation/routesNames';
 import { useTheme } from '@/theme';
+import { IS_ANDROID } from '@/env';
+import ContextMenu from '@/components/context-menu/ContextMenu.android';
 
 enum AnotherENSEnum {
   search = 'search',
@@ -45,6 +47,92 @@ const topPadding = android ? 29 : 19;
 
 const minHeight = 740;
 
+type ContextMenuRendererProps = {
+  children: React.ReactNode;
+  handleSelectExistingName: () => void;
+  handleNavigateToSearch: () => void;
+};
+
+const ContextMenuRenderer = ({
+  children,
+  handleSelectExistingName,
+  handleNavigateToSearch,
+}: ContextMenuRendererProps) => {
+  const menuConfig = useMemo(() => {
+    return {
+      menuItems: [
+        {
+          actionKey: AnotherENSEnum.my_ens,
+          actionTitle: lang.t('profiles.intro.my_ens_names'),
+          icon: {
+            iconType: 'SYSTEM',
+            iconValue: 'rectangle.stack.badge.person.crop',
+          },
+        },
+        {
+          actionKey: AnotherENSEnum.search,
+          actionTitle: lang.t('profiles.intro.search_new_ens'),
+          icon: {
+            iconType: 'SYSTEM',
+            iconValue: 'magnifyingglass',
+          },
+        },
+      ] as MenuActionConfig[],
+      menuTitle: '',
+    };
+  }, []);
+
+  const handlePressMenuItem = useCallback(
+    // @ts-expect-error ContextMenu is an untyped JS component and can't type its onPress handler properly
+    ({ nativeEvent: { actionKey } }) => {
+      if (actionKey === AnotherENSEnum.my_ens) {
+        handleSelectExistingName();
+      } else if (actionKey === AnotherENSEnum.search) {
+        handleNavigateToSearch();
+      }
+    },
+    [handleNavigateToSearch, handleSelectExistingName]
+  );
+
+  const handlePressActionSheet = useCallback(
+    (buttonIndex: number) => {
+      switch (buttonIndex) {
+        case 0:
+          handleSelectExistingName();
+          break;
+        case 1:
+          handleNavigateToSearch();
+          break;
+      }
+    },
+    [handleNavigateToSearch, handleSelectExistingName]
+  );
+
+  if (IS_ANDROID) {
+    return (
+      <ContextMenu
+        activeOpacity={0}
+        cancelButtonIndex={menuConfig.menuItems.length - 1}
+        dynamicOptions={undefined}
+        onPressActionSheet={handlePressActionSheet}
+        options={menuConfig.menuItems.map(i => i.actionTitle)}
+      >
+        <View>{children}</View>
+      </ContextMenu>
+    );
+  }
+
+  return (
+    <ContextMenuButton
+      menuConfig={menuConfig}
+      onPressMenuItem={handlePressMenuItem}
+      useActionSheetFallback={false}
+    >
+      {children}
+    </ContextMenuButton>
+  );
+};
+
 export default function ENSIntroSheet() {
   const { width: deviceWidth, height: deviceHeight } = useDimensions();
   const { colors } = useTheme();
@@ -64,6 +152,8 @@ export default function ENSIntroSheet() {
     enabled: Boolean(uniqueDomain?.name),
   });
 
+  console.log(nonPrimaryDomains.length);
+
   // We are not using `isSmallPhone` from `useDimensions` here as we
   // want to explicitly set a min height.
   const isSmallPhone = deviceHeight < minHeight;
@@ -121,42 +211,6 @@ export default function ENSIntroSheet() {
     });
   }, [navigate, navigateToAssignRecords]);
 
-  const menuConfig = useMemo(() => {
-    return {
-      menuItems: [
-        {
-          actionKey: AnotherENSEnum.my_ens,
-          actionTitle: lang.t('profiles.intro.my_ens_names'),
-          icon: {
-            iconType: 'SYSTEM',
-            iconValue: 'rectangle.stack.badge.person.crop',
-          },
-        },
-        {
-          actionKey: AnotherENSEnum.search,
-          actionTitle: lang.t('profiles.intro.search_new_ens'),
-          icon: {
-            iconType: 'SYSTEM',
-            iconValue: 'magnifyingglass',
-          },
-        },
-      ] as MenuActionConfig[],
-      menuTitle: '',
-    };
-  }, []);
-
-  const handlePressMenuItem = useCallback(
-    // @ts-expect-error ContextMenu is an untyped JS component and can't type its onPress handler properly
-    ({ nativeEvent: { actionKey } }) => {
-      if (actionKey === AnotherENSEnum.my_ens) {
-        handleSelectExistingName();
-      } else if (actionKey === AnotherENSEnum.search) {
-        handleNavigateToSearch();
-      }
-    },
-    [handleNavigateToSearch, handleSelectExistingName]
-  );
-
   return (
     <Box
       background="body (Deprecated)"
@@ -292,12 +346,11 @@ export default function ENSIntroSheet() {
                             />
                           )}
                           {nonPrimaryDomains?.length > 0 ? (
-                            <ContextMenuButton
-                              menuConfig={menuConfig}
-                              {...(android ? { handlePressMenuItem } : {})}
-                              isMenuPrimaryAction
-                              onPressMenuItem={handlePressMenuItem}
-                              useActionSheetFallback={false}
+                            <ContextMenuRenderer
+                              handleNavigateToSearch={handleNavigateToSearch}
+                              handleSelectExistingName={
+                                handleSelectExistingName
+                              }
                             >
                               <SheetActionButton
                                 color={colors.transparent}
@@ -309,7 +362,7 @@ export default function ENSIntroSheet() {
                                 textSize="lmedium"
                                 weight="bold"
                               />
-                            </ContextMenuButton>
+                            </ContextMenuRenderer>
                           ) : (
                             <SheetActionButton
                               color={colors.transparent}