TabBar.tsx

/* eslint-disable react/prop-types */

// Third party dependencies.
import React, { useCallback, useRef } from 'react';
import { View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useSelector } from 'react-redux';
// External dependencies.
import TabBarItem from '../TabBarItem';
import { useTailwind } from '@metamask/design-system-twrnc-preset';
import {
  Box,
  BoxFlexDirection,
  BoxAlignItems,
} from '@metamask/design-system-react-native';
import Routes from '../../../../constants/navigation/Routes';
import { IconName } from '../../Icons/Icon';

import { MetaMetricsEvents } from '../../../../core/Analytics';
import { getDecimalChainId } from '../../../../util/networks';
import { useAnalytics } from '../../../../components/hooks/useAnalytics/useAnalytics';
import { strings } from '../../../../../locales/i18n';

// Internal dependencies.
import { TabBarProps, TabBarIconKey } from './TabBar.types';
import {
  ICON_BY_TAB_BAR_ICON_KEY,
  LABEL_BY_TAB_BAR_ICON_KEY,
} from './TabBar.constants';
import { selectChainId } from '../../../../selectors/networkController';

const FILLED_ICONS: Partial<Record<TabBarIconKey, IconName>> = {
  [TabBarIconKey.Wallet]: IconName.HomeFilled,
  [TabBarIconKey.Activity]: IconName.ClockFilled,
  [TabBarIconKey.Trending]: IconName.Search,
  [TabBarIconKey.Rewards]: IconName.MetamaskFoxFilled,
  [TabBarIconKey.Money]: IconName.MusdFilled,
};

const TabBar = ({ state, descriptors, navigation }: TabBarProps) => {
  const { trackEvent, createEventBuilder } = useAnalytics();
  const { bottom: bottomInset } = useSafeAreaInsets();
  const chainId = useSelector(selectChainId);
  const tabBarRef = useRef(null);
  const previousTabIndexRef = useRef<number>(state.index);
  const tw = useTailwind();

  const renderTabBarItem = useCallback(
    (route: { name: string; key: string }, index: number) => {
      const descriptor = descriptors[route.key];
      if (!descriptor) return null;
      const { options } = descriptor;
      const tabBarIconKey = options.tabBarIconKey;
      //TODO: use another option on add it to the prop interface
      const callback = options.callback;
      const rootScreenName = options.rootScreenName;
      const key = `tab-bar-item-${tabBarIconKey}`; // this key is also used to identify elements for e2e testing
      const isSelected = options?.isSelected
        ? options.isSelected(state.routeNames[state.index])
        : state.index === index;
      const baseIcon = ICON_BY_TAB_BAR_ICON_KEY[tabBarIconKey];
      const icon = isSelected
        ? (FILLED_ICONS[tabBarIconKey] ?? baseIcon)
        : baseIcon;
      const labelKey = LABEL_BY_TAB_BAR_ICON_KEY[tabBarIconKey];
      const labelText = labelKey ? strings(labelKey) : '';
      const onPress = () => {
        // Call onLeave callback for the previous tab before switching
        if (previousTabIndexRef.current !== index) {
          const previousRoute = state.routes[previousTabIndexRef.current];
          const previousOptions = descriptors[previousRoute?.key]?.options;
          previousOptions?.onLeave?.();
          previousTabIndexRef.current = index;
        }
        callback?.();
        switch (rootScreenName) {
          case Routes.WALLET_VIEW:
            navigation.navigate(Routes.WALLET.HOME, {
              screen: Routes.WALLET_VIEW,
            });
            break;
          case Routes.MODAL.WALLET_ACTIONS:
            navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
              screen: Routes.MODAL.WALLET_ACTIONS,
            });
            trackEvent(
              createEventBuilder(MetaMetricsEvents.ACTIONS_BUTTON_CLICKED)
                .addProperties({
                  text: '',
                  chain_id: getDecimalChainId(chainId),
                })
                .build(),
            );
            break;
          case Routes.BROWSER.VIEW:
            navigation.navigate(Routes.BROWSER.HOME, {
              screen: Routes.BROWSER.VIEW,
            });
            break;
          case Routes.TRANSACTIONS_VIEW:
            navigation.navigate(Routes.TRANSACTIONS_VIEW);
            break;
          case Routes.REWARDS_VIEW:
            navigation.navigate(Routes.REWARDS_VIEW);
            break;
          case Routes.SETTINGS_VIEW:
            navigation.navigate(Routes.SETTINGS_VIEW, {
              screen: Routes.ACCOUNTS_MENU_VIEW,
            });
            break;
          case Routes.TRENDING_VIEW:
            navigation.navigate(Routes.TRENDING_VIEW);
            break;
          case Routes.MONEY.HOME:
            navigation.navigate(Routes.MONEY.ROOT, {
              screen: Routes.MONEY.HOME,
            });
            break;
        }
      };

      const isWalletAction =
        rootScreenName === Routes.MODAL.TRADE_WALLET_ACTIONS;

      if (options?.isHidden) {
        return null;
      }

      return (
        <View key={key} style={tw.style('flex-1 w-full')}>
          <TabBarItem
            label={labelText}
            iconName={icon}
            onPress={onPress}
            isActive={isSelected}
            isTradeButton={isWalletAction}
            testID={key}
          />
        </View>
      );
    },
    [
      state,
      descriptors,
      navigation,
      chainId,
      trackEvent,
      createEventBuilder,
      tw,
    ],
  );

  const renderTabBarItems = useCallback(
    () => state.routes.map(renderTabBarItem),
    [state, renderTabBarItem],
  );

  return (
    <View ref={tabBarRef}>
      <Box
        flexDirection={BoxFlexDirection.Row}
        alignItems={BoxAlignItems.End}
        twClassName="w-full pt-3 mb-1 px-2 bg-default border-t border-muted"
        style={[tw.style(`pb-[${bottomInset}px]`)]}
      >
        {renderTabBarItems()}
      </Box>
    </View>
  );
};

export default TabBar;