feat(ramp): enable buy button in asset overview

app/components/UI/AssetOverview/AssetOverview.test.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
-import AssetOverview from './AssetOverview';
+import { fireEvent } from '@testing-library/react-native';
 import { zeroAddress } from 'ethereumjs-util';
+import { NetworkController } from '@metamask/network-controller';
+import AssetOverview from './AssetOverview';
 import renderWithProvider from '../../../util/test/renderWithProvider';
 import { backgroundState } from '../../../util/test/initial-root-state';
-import { NetworkController } from '@metamask/network-controller';
 import {
   MOCK_ACCOUNTS_CONTROLLER_STATE,
   MOCK_ADDRESS_2,
 } from '../../../util/test/accountsControllerTestUtils';
-import { fireEvent } from '@testing-library/react-native';
+import { createBuyNavigationDetails } from '../Ramp/routes/utils';
+import { getDecimalChainId } from '../../../util/networks';
+import { TokenOverviewSelectorsIDs } from '../../../../e2e/selectors/TokenOverview.selectors';
 
 const MOCK_CHAIN_ID = '0x1';
 
@@ -46,12 +49,14 @@ const mockInitialState = {
   },
 };
 
+const mockNavigate = jest.fn();
+const navigate = mockNavigate;
 jest.mock('@react-navigation/native', () => {
   const actualNav = jest.requireActual('@react-navigation/native');
   return {
     ...actualNav,
     useNavigation: () => ({
-      navigate: jest.fn(),
+      navigate: mockNavigate,
     }),
   };
 });
@@ -67,10 +72,6 @@ jest.mock('../../hooks/useStyles', () => ({
   }),
 }));
 
-// Mock the navigation object.
-const navigation = {
-  navigate: jest.fn(),
-};
 const asset = {
   balance: '400',
   balanceFiat: '1500',
@@ -88,49 +89,51 @@ const asset = {
 describe('AssetOverview', () => {
   it('should render correctly', async () => {
     const container = renderWithProvider(
-      <AssetOverview
-        asset={asset}
-        navigation={navigation}
-        displayBuyButton
-        displaySwapsButton
-      />,
+      <AssetOverview asset={asset} displayBuyButton displaySwapsButton />,
       { state: mockInitialState },
     );
     expect(container).toMatchSnapshot();
   });
 
+  it('should handle buy button press', async () => {
+    const { getByTestId } = renderWithProvider(
+      <AssetOverview asset={asset} displayBuyButton displaySwapsButton />,
+      { state: mockInitialState },
+    );
+
+    const buyButton = getByTestId(TokenOverviewSelectorsIDs.BUY_BUTTON);
+    fireEvent.press(buyButton);
+
+    expect(navigate).toHaveBeenCalledWith(
+      ...createBuyNavigationDetails({
+        address: asset.address,
+        chainId: getDecimalChainId(MOCK_CHAIN_ID),
+      }),
+    );
+  });
+
   it('should handle send button press', async () => {
     const { getByTestId } = renderWithProvider(
-      <AssetOverview
-        asset={asset}
-        navigation={navigation}
-        displayBuyButton
-        displaySwapsButton
-      />,
+      <AssetOverview asset={asset} displayBuyButton displaySwapsButton />,
       { state: mockInitialState },
     );
 
     const sendButton = getByTestId('token-send-button');
     fireEvent.press(sendButton);
 
-    expect(navigation.navigate).toHaveBeenCalledWith('SendFlowView', {});
+    expect(navigate).toHaveBeenCalledWith('SendFlowView', {});
   });
 
   it('should handle swap button press', async () => {
     const { getByTestId } = renderWithProvider(
-      <AssetOverview
-        asset={asset}
-        navigation={navigation}
-        displayBuyButton
-        displaySwapsButton
-      />,
+      <AssetOverview asset={asset} displayBuyButton displaySwapsButton />,
       { state: mockInitialState },
     );
 
     const swapButton = getByTestId('token-swap-button');
     fireEvent.press(swapButton);
 
-    expect(navigation.navigate).toHaveBeenCalledWith('Swaps', {
+    expect(navigate).toHaveBeenCalledWith('Swaps', {
       params: {
         sourcePage: 'MainView',
         sourceToken: asset.address,
@@ -143,7 +146,6 @@ describe('AssetOverview', () => {
     const { queryByTestId } = renderWithProvider(
       <AssetOverview
         asset={asset}
-        navigation={navigation}
         displayBuyButton
         displaySwapsButton={false}
       />,
@@ -153,4 +155,18 @@ describe('AssetOverview', () => {
     const swapButton = queryByTestId('token-swap-button');
     expect(swapButton).toBeNull();
   });
+
+  it('should not render buy button if displayBuyButton is false', async () => {
+    const { queryByTestId } = renderWithProvider(
+      <AssetOverview
+        asset={asset}
+        displayBuyButton={false}
+        displaySwapsButton
+      />,
+      { state: mockInitialState },
+    );
+
+    const buyButton = queryByTestId(TokenOverviewSelectorsIDs.BUY_BUTTON);
+    expect(buyButton).toBeNull();
+  });
 });

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -1,6 +1,7 @@
 import { zeroAddress } from 'ethereumjs-util';
 import React, { useCallback, useEffect } from 'react';
 import { TouchableOpacity, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 import { useDispatch, useSelector } from 'react-redux';
 import { strings } from '../../../../locales/i18n';
 import { TokenOverviewSelectorsIDs } from '../../../../e2e/selectors/TokenOverview.selectors';
@@ -54,20 +55,17 @@ import { TokenI } from '../Tokens/types';
 import AssetDetailsActions from '../../../components/Views/AssetDetails/AssetDetailsActions';
 
 interface AssetOverviewProps {
-  navigation: {
-    navigate: (route: string, params: Record<string, unknown>) => void;
-  };
   asset: TokenI;
   displayBuyButton?: boolean;
   displaySwapsButton?: boolean;
 }
 
 const AssetOverview: React.FC<AssetOverviewProps> = ({
-  navigation,
   asset,
   displayBuyButton,
   displaySwapsButton,
 }: AssetOverviewProps) => {
+  const navigation = useNavigation();
   const [timePeriod, setTimePeriod] = React.useState<TimePeriod>('1d');
   const currentCurrency = useSelector(selectCurrentCurrency);
   const conversionRate = useSelector(selectConversionRate);
@@ -146,8 +144,12 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
     });
   };
   const onBuy = () => {
-    const [route, params] = createBuyNavigationDetails();
-    navigation.navigate(route, params || {});
+    navigation.navigate(
+      ...createBuyNavigationDetails({
+        address: asset.address,
+        chainId: getDecimalChainId(chainId),
+      }),
+    );
     trackEvent(MetaMetricsEvents.BUY_BUTTON_CLICKED, {
       text: 'Buy',
       location: 'TokenDetails',

app/components/Views/Asset/index.js

@@ -41,7 +41,10 @@ import { getNetworkNavbarOptions } from '../../UI/Navbar';
 import { isSwapsAllowed } from '../../UI/Swaps/utils';
 import Transactions from '../../UI/Transactions';
 import ActivityHeader from './ActivityHeader';
-import { isNetworkRampNativeTokenSupported } from '../../UI/Ramp/utils';
+import {
+  isNetworkRampNativeTokenSupported,
+  isNetworkRampSupported,
+} from '../../UI/Ramp/utils';
 import { getRampNetworks } from '../../../reducers/fiatOrders';
 import Device from '../../../util/device';
 import {
@@ -153,6 +156,10 @@ class Asset extends PureComponent {
     route: PropTypes.object,
     rpcUrl: PropTypes.string,
     networkConfigurations: PropTypes.object,
+    /**
+     * Boolean that indicates if network is supported to buy
+     */
+    isNetworkRampSupported: PropTypes.bool,
     /**
      * Boolean that indicates if native token is supported to buy
      */
@@ -464,8 +471,9 @@ class Asset extends PureComponent {
       isAssetAllowed &&
       AppConstants.SWAPS.ACTIVE;
 
-    const displayBuyButton =
-      asset.isETH && this.props.isNetworkBuyNativeTokenSupported;
+    const displayBuyButton = asset.isETH
+      ? this.props.isNetworkBuyNativeTokenSupported
+      : this.props.isNetworkRampSupported;
 
     return (
       <View style={styles.wrapper}>
@@ -476,7 +484,6 @@ class Asset extends PureComponent {
             header={
               <>
                 <AssetOverview
-                  navigation={navigation}
                   asset={asset}
                   displayBuyButton={displayBuyButton}
                   displaySwapsButton={displaySwapsButton}
@@ -517,6 +524,10 @@ const mapStateToProps = (state) => ({
   transactions: state.engine.backgroundState.TransactionController.transactions,
   rpcUrl: selectRpcUrl(state),
   networkConfigurations: selectNetworkConfigurations(state),
+  isNetworkRampSupported: isNetworkRampSupported(
+    selectChainId(state),
+    getRampNetworks(state),
+  ),
   isNetworkBuyNativeTokenSupported: isNetworkRampNativeTokenSupported(
     selectChainId(state),
     getRampNetworks(state),