fix: fixed missing max and custom button disabling when conversion is pending in money hub

Author: Matt561

app/components/UI/Money/components/MoneyConvertStablecoins/MoneyConvertStablecoins.test.tsx

@@ -1,10 +1,23 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react-native';
+import { useSelector } from 'react-redux';
 import MoneyConvertStablecoins from './MoneyConvertStablecoins';
 import { MoneyConvertStablecoinsTestIds } from './MoneyConvertStablecoins.testIds';
 import { strings } from '../../../../../../locales/i18n';
 import { AssetType } from '../../../../Views/confirmations/types/token';
 import { ConvertTokenRowTestIds } from '../../../Earn/components/Musd/ConvertTokenRow';
+import {
+  selectHasUnapprovedMusdConversion,
+  selectHasInFlightMusdConversion,
+  selectMusdConversionStatuses,
+} from '../../../Earn/selectors/musdConversionStatus';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
+const mockUseSelector = useSelector as jest.Mock;
 
 jest.mock('../../../../../component-library/base-components/TagBase', () => ({
   __esModule: true,
@@ -100,6 +113,12 @@ const defaultProps = {
 describe('MoneyConvertStablecoins', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockUseSelector.mockImplementation((selector) => {
+      if (selector === selectHasUnapprovedMusdConversion) return false;
+      if (selector === selectHasInFlightMusdConversion) return false;
+      if (selector === selectMusdConversionStatuses) return {};
+      return undefined;
+    });
   });
 
   describe('with eligible tokens', () => {

app/components/UI/Money/components/MoneyConvertStablecoins/MoneyConvertStablecoins.tsx

@@ -30,6 +30,13 @@ import ConvertTokenRow from '../../../Earn/components/Musd/ConvertTokenRow';
 import { AssetType } from '../../../../Views/confirmations/types/token';
 import { MoneyConvertStablecoinsTestIds } from './MoneyConvertStablecoins.testIds';
 import { CaipChainId } from '@metamask/utils';
+import { useSelector } from 'react-redux';
+import {
+  createTokenChainKey,
+  selectHasInFlightMusdConversion,
+  selectHasUnapprovedMusdConversion,
+  selectMusdConversionStatuses,
+} from '../../../Earn/selectors/musdConversionStatus';
 
 interface MoneyConvertStablecoinsProps {
   tokens: AssetType[];
@@ -134,6 +141,33 @@ const MoneyConvertStablecoins = ({
 }: MoneyConvertStablecoinsProps) => {
   const hasTokens = tokens.length > 0;
 
+  const hasUnapprovedMusdConversion = useSelector(
+    selectHasUnapprovedMusdConversion,
+  );
+  const hasInFlightMusdConversion = useSelector(
+    selectHasInFlightMusdConversion,
+  );
+
+  const conversionStatusesByTokenChainKey = useSelector(
+    selectMusdConversionStatuses,
+  );
+
+  const isConversionPending = (token: AssetType) => {
+    const tokenAddress = token.address;
+    const tokenChainId = token.chainId;
+
+    const tokenChainKey =
+      tokenAddress && tokenChainId
+        ? createTokenChainKey(tokenAddress, tokenChainId)
+        : undefined;
+
+    const txStatusInfo = tokenChainKey
+      ? conversionStatusesByTokenChainKey[tokenChainKey]
+      : undefined;
+
+    return Boolean(txStatusInfo?.isPending);
+  };
+
   return (
     <Box testID={MoneyConvertStablecoinsTestIds.CONTAINER}>
       <Box twClassName="px-4 pt-3">
@@ -164,6 +198,10 @@ const MoneyConvertStablecoins = ({
                 token={token}
                 onMaxPress={onMaxPress}
                 onEditPress={onEditPress}
+                areActionsDisabled={
+                  hasUnapprovedMusdConversion || hasInFlightMusdConversion
+                }
+                isConversionPending={isConversionPending(token)}
               />
             </Box>
           ))}