feat: funding method modal

ui/components/app/assets/asset-list/asset-list.js

@@ -35,14 +35,17 @@ import {
   DetectedTokensBanner,
   TokenListItem,
   ImportTokenLink,
+  ReceiveModal,
 } from '../../../multichain';
 import { useAccountTotalFiatBalance } from '../../../../hooks/useAccountTotalFiatBalance';
 import { useIsOriginalNativeTokenSymbol } from '../../../../hooks/useIsOriginalNativeTokenSymbol';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
 import {
   showPrimaryCurrency,
   showSecondaryCurrency,
 } from '../../../../../shared/modules/currency-display.utils';
 import { roundToDecimalPlacesRemovingExtraZeroes } from '../../../../helpers/utils/util';
+import { FundingMethodModal } from '../../../multichain/funding-method-modal/funding-method-modal';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
 import {
   RAMPS_CARD_VARIANT_TYPES,
@@ -66,6 +69,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
     type,
     rpcUrl,
   );
+  const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
   const balance = useSelector(getMultichainSelectedAccountCachedBalance);
   const balanceIsLoading = !balance;
@@ -101,6 +105,14 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
     getIstokenDetectionInactiveOnNonMainnetSupportedNetwork,
   );
 
+  const [showFundingMethodModal, setShowFundingMethodModal] = useState(false);
+  const [showReceiveModal, setShowReceiveModal] = useState(false);
+
+  const onClickReceive = () => {
+    setShowFundingMethodModal(false);
+    setShowReceiveModal(true);
+  };
+
   const { tokensWithBalances, loading } = useAccountTotalFiatBalance(
     selectedAccount,
     shouldHideZeroBalanceTokens,
@@ -151,6 +163,9 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
                 ? RAMPS_CARD_VARIANT_TYPES.BTC
                 : RAMPS_CARD_VARIANT_TYPES.TOKEN
             }
+            handleOnClick={
+              isBtc ? undefined : () => setShowFundingMethodModal(true)
+            }
           />
         ) : null
         ///: END:ONLY_INCLUDE_IF
@@ -213,6 +228,20 @@ const AssetList = ({ onClickAsset, showTokensLinks }) => {
       {showDetectedTokens && (
         <DetectedToken setShowDetectedTokens={setShowDetectedTokens} />
       )}
+      {showReceiveModal && selectedAccount?.address && (
+        <ReceiveModal
+          address={selectedAccount.address}
+          onClose={() => setShowReceiveModal(false)}
+        />
+      )}
+      {showFundingMethodModal && (
+        <FundingMethodModal
+          isOpen={showFundingMethodModal}
+          onClose={() => setShowFundingMethodModal(false)}
+          title={t('selectFundingMethod')}
+          onClickReceive={onClickReceive}
+        />
+      )}
     </>
   );
 };

ui/components/multichain/funding-method-modal/funding-method-item.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Box, Text, Icon, IconName } from '../../component-library';
+import {
+  Display,
+  FlexDirection,
+  TextVariant,
+  TextColor,
+  AlignItems,
+} from '../../../helpers/constants/design-system';
+
+type FundingMethodItemProps = {
+  icon: IconName;
+  title: string;
+  description: string;
+  onClick: () => void;
+};
+
+const FundingMethodItem: React.FC<FundingMethodItemProps> = ({
+  icon,
+  title,
+  description,
+  onClick,
+}) => (
+  <Box
+    display={[Display.Flex]}
+    gap={2}
+    alignItems={AlignItems.center}
+    onClick={onClick}
+    className="funding-method-item"
+    padding={4}
+  >
+    <Icon name={icon} />
+    <Box display={[Display.Flex]} flexDirection={FlexDirection.Column}>
+      <Text variant={TextVariant.bodyMdMedium}>{title}</Text>
+      <Text variant={TextVariant.bodySm} color={TextColor.textAlternative}>
+        {description}
+      </Text>
+    </Box>
+  </Box>
+);
+
+export default FundingMethodItem;

ui/components/multichain/funding-method-modal/funding-method-modal.test.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { renderWithProvider } from '../../../../test/jest/rendering';
+import mockState from '../../../../test/data/mock-state.json';
+import useRamps from '../../../hooks/ramps/useRamps/useRamps';
+import { FundingMethodModal } from './funding-method-modal';
+
+jest.mock('../../../hooks/ramps/useRamps/useRamps', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const mockStore = configureMockStore([thunk]);
+
+describe('FundingMethodModal', () => {
+  let store = configureMockStore([thunk])(mockState);
+  let openBuyCryptoInPdapp: jest.Mock<() => void>;
+
+  beforeEach(() => {
+    store = mockStore(mockState);
+    openBuyCryptoInPdapp = jest.fn();
+    (useRamps as jest.Mock).mockReturnValue({ openBuyCryptoInPdapp });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the modal when isOpen is true', () => {
+    const { getByTestId, getByText } = renderWithProvider(
+      <FundingMethodModal
+        isOpen={true}
+        onClose={jest.fn()}
+        title="Test Modal"
+        onClickReceive={jest.fn()}
+      />,
+      store,
+    );
+
+    expect(getByTestId('funding-method-modal')).toBeInTheDocument();
+    expect(getByText('Test Modal')).toBeInTheDocument();
+  });
+
+  it('should not render the modal when isOpen is false', () => {
+    const { queryByTestId } = renderWithProvider(
+      <FundingMethodModal
+        isOpen={false}
+        onClose={jest.fn()}
+        title="Test Modal"
+        onClickReceive={jest.fn()}
+      />,
+      store,
+    );
+
+    expect(queryByTestId('funding-method-modal')).toBeNull();
+  });
+
+  it('should call openBuyCryptoInPdapp when the Buy Crypto item is clicked', () => {
+    const { getByText } = renderWithProvider(
+      <FundingMethodModal
+        isOpen={true}
+        onClose={jest.fn()}
+        title="Test Modal"
+        onClickReceive={jest.fn()}
+      />,
+      store,
+    );
+
+    fireEvent.click(getByText('Buy crypto'));
+    expect(openBuyCryptoInPdapp).toHaveBeenCalled();
+  });
+
+  it('should call onClickReceive when the Receive Crypto item is clicked', () => {
+    const onClickReceive = jest.fn();
+    const { getByText } = renderWithProvider(
+      <FundingMethodModal
+        isOpen={true}
+        onClose={jest.fn()}
+        title="Test Modal"
+        onClickReceive={onClickReceive}
+      />,
+      store,
+    );
+
+    fireEvent.click(getByText('Receive crypto'));
+    expect(onClickReceive).toHaveBeenCalled();
+  });
+
+  it('should open a new tab with the correct URL when Transfer Crypto item is clicked', () => {
+    global.platform.openTab = jest.fn();
+
+    const { getByText } = renderWithProvider(
+      <FundingMethodModal
+        isOpen={true}
+        onClose={jest.fn()}
+        title="Test Modal"
+        onClickReceive={jest.fn()}
+      />,
+      store,
+    );
+
+    fireEvent.click(getByText('Transfer crypto'));
+    expect(global.platform.openTab).toHaveBeenCalledWith({
+      url: expect.stringContaining('transfer'),
+    });
+  });
+});