feat: add BalanceEmptyState component

ui/components/app/balance-empty-state/balance-empty-state.stories.tsx

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BalanceEmptyState } from './balance-empty-state';
+
+const meta: Meta<typeof BalanceEmptyState> = {
+  title: 'Components/App/BalanceEmptyState',
+  component: BalanceEmptyState,
+};
+
+export default meta;
+type Story = StoryObj<typeof BalanceEmptyState>;
+
+export const Default: Story = {};

ui/components/app/balance-empty-state/balance-empty-state.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { fireEvent, screen } from '@testing-library/react';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import mockState from '../../../../test/data/mock-state.json';
+import configureStore from '../../../store/store';
+import {
+  BalanceEmptyState,
+  BalanceEmptyStateProps,
+} from './balance-empty-state';
+
+// Mock useRamps hook
+const mockOpenBuyCryptoInPdapp = jest.fn();
+jest.mock('../../../hooks/ramps/useRamps/useRamps', () => ({
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  __esModule: true,
+  default: jest.fn(() => ({
+    openBuyCryptoInPdapp: mockOpenBuyCryptoInPdapp,
+  })),
+  RampsMetaMaskEntry: {
+    TokensBanner: 'tokens-banner',
+    ActivityBanner: 'activity-banner',
+    BtcBanner: 'btc-banner',
+  },
+}));
+
+const store = configureStore({
+  metamask: {
+    ...mockState.metamask,
+  },
+});
+
+const renderComponent = (props: Partial<BalanceEmptyStateProps> = {}) => {
+  return renderWithProvider(<BalanceEmptyState {...props} />, store);
+};
+
+describe('BalanceEmptyState', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render the component', () => {
+    renderComponent();
+    expect(screen.getByRole('button')).toBeInTheDocument();
+  });
+
+  it('should call openBuyCryptoInPdapp when button is clicked', () => {
+    renderComponent();
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(mockOpenBuyCryptoInPdapp).toHaveBeenCalledTimes(1);
+  });
+});

ui/components/app/balance-empty-state/balance-empty-state.tsx

@@ -0,0 +1,133 @@
+import React, { useCallback, useContext, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  Box,
+  Text,
+  Button,
+  BoxFlexDirection,
+  BoxAlignItems,
+  BoxJustifyContent,
+  BoxBackgroundColor,
+  TextVariant,
+  TextColor,
+  TextAlign,
+  FontWeight,
+  ButtonVariant,
+  ButtonSize,
+  twMerge,
+} from '@metamask/design-system-react';
+import { CaipChainId } from '@metamask/utils';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { getCurrentChainId } from '../../../../shared/modules/selectors/networks';
+import { getMultichainCurrentNetwork } from '../../../selectors/multichain';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventName,
+} from '../../../../shared/constants/metametrics';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
+import useRamps, {
+  RampsMetaMaskEntry,
+} from '../../../hooks/ramps/useRamps/useRamps';
+import { ORIGIN_METAMASK } from '../../../../shared/constants/app';
+import { getCurrentLocale } from '../../../ducks/locale/locale';
+import { ChainId } from '../../../../shared/constants/network';
+
+export type BalanceEmptyStateProps = {
+  /**
+   * Test ID for component testing
+   */
+  testID?: string;
+  /**
+   * Additional className to apply to the component
+   */
+  className?: string;
+};
+
+export const BalanceEmptyState: React.FC<BalanceEmptyStateProps> = (props) => {
+  const t = useI18nContext();
+  const trackEvent = useContext(MetaMetricsContext);
+  const currentLocale = useSelector(getCurrentLocale);
+  const chainId = useSelector(getCurrentChainId);
+  const { nickname } = useSelector(getMultichainCurrentNetwork);
+
+  const { openBuyCryptoInPdapp } = useRamps(RampsMetaMaskEntry.TokensBanner);
+
+  // Track when component is displayed
+  useEffect(() => {
+    trackEvent({
+      event: MetaMetricsEventName.EmptyBuyBannerDisplayed,
+      category: MetaMetricsEventCategory.Navigation,
+      properties: {
+        locale: currentLocale,
+        network: nickname,
+        referrer: ORIGIN_METAMASK,
+        location: 'balance_empty_state',
+      },
+    });
+  }, [currentLocale, chainId, nickname, trackEvent]);
+
+  // Handle action button click
+  const handleAction = useCallback(() => {
+    // Track button click events
+    trackEvent({
+      event: MetaMetricsEventName.NavBuyButtonClicked,
+      category: MetaMetricsEventCategory.Navigation,
+      properties: {
+        location: 'balance_empty_state',
+        text: 'Add funds',
+        chainId,
+      },
+    });
+
+    openBuyCryptoInPdapp(chainId as ChainId | CaipChainId);
+  }, [chainId, openBuyCryptoInPdapp, trackEvent]);
+
+  return (
+    <Box
+      flexDirection={BoxFlexDirection.Column}
+      alignItems={BoxAlignItems.Center}
+      justifyContent={BoxJustifyContent.Center}
+      padding={6}
+      margin={4}
+      backgroundColor={BoxBackgroundColor.BackgroundSection}
+      gap={4}
+      {...props}
+      className={twMerge('rounded-lg', props.className)}
+    >
+      <Box
+        alignItems={BoxAlignItems.Center}
+        justifyContent={BoxJustifyContent.Center}
+      >
+        <img
+          src="./images/bank-transfer.png"
+          alt={t('fundYourWallet')}
+          width="100"
+          height="100"
+        />
+      </Box>
+      <Text
+        variant={TextVariant.HeadingMd}
+        color={TextColor.TextDefault}
+        fontWeight={FontWeight.Bold}
+        textAlign={TextAlign.Center}
+      >
+        {t('fundYourWallet')}
+      </Text>
+      <Text
+        variant={TextVariant.BodyMd}
+        color={TextColor.TextAlternative}
+        textAlign={TextAlign.Center}
+      >
+        {t('getYourWalletReadyToUseWeb3')}
+      </Text>
+      <Button
+        variant={ButtonVariant.Primary}
+        size={ButtonSize.Lg}
+        onClick={handleAction}
+        isFullWidth
+      >
+        {t('addFunds')}
+      </Button>
+    </Box>
+  );
+};

ui/components/app/balance-empty-state/index.ts

@@ -0,0 +1,2 @@
+export { BalanceEmptyState } from './balance-empty-state';
+export type { BalanceEmptyStateProps } from './balance-empty-state';