chore: Componetize Tokens screen

app/components/UI/Tokens/TokenList/PortfolioBalance/index.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+import { View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useSelector } from 'react-redux';
+import useIsOriginalNativeTokenSymbol from '../../../../hooks/useIsOriginalNativeTokenSymbol/useIsOriginalNativeTokenSymbol';
+import { useMetrics } from '../../../../hooks/useMetrics';
+import { useTheme } from '../../../../../util/theme';
+import AppConstants from '../../../../../core/AppConstants';
+import Engine from '../../../../../core/Engine';
+import Routes from '../../../../../constants/navigation/Routes';
+import { MetaMetricsEvents } from '../../../../../core/Analytics';
+import {
+  selectChainId,
+  selectProviderConfig,
+  selectTicker,
+} from '../../../../../selectors/networkController';
+import { selectCurrentCurrency } from '../../../../../selectors/currencyRateController';
+import { RootState } from '../../../../../reducers';
+import { renderFiat } from '../../../../../util/number';
+import { isTestNet } from '../../../../../util/networks';
+import { isPortfolioUrl } from '../../../../../util/url';
+import createStyles from '../../styles';
+import Button, {
+  ButtonVariants,
+  ButtonSize,
+  ButtonWidthTypes,
+} from '../../../../../component-library/components/Buttons/Button';
+import Text from '../../../../../component-library/components/Texts/Text';
+import AggregatedPercentage from '../../../../../component-library/components-temp/Price/AggregatedPercentage';
+import { IconName } from '../../../../../component-library/components/Icons/Icon';
+import { BrowserTab } from '../../types';
+import { WalletViewSelectorsIDs } from '../../../../../../e2e/selectors/wallet/WalletView.selectors';
+import { strings } from '../../../../../../locales/i18n';
+
+export const PortfolioBalance = () => {
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+  const balance = Engine.getTotalFiatAccountBalance();
+  const navigation = useNavigation();
+  const { trackEvent, isEnabled } = useMetrics();
+
+  const { type } = useSelector(selectProviderConfig);
+  const chainId = useSelector(selectChainId);
+  const ticker = useSelector(selectTicker);
+  const isDataCollectionForMarketingEnabled = useSelector(
+    (state: RootState) => state.security.dataCollectionForMarketing,
+  );
+  const currentCurrency = useSelector(selectCurrentCurrency);
+  const browserTabs = useSelector((state: RootState) => state.browser.tabs);
+
+  const isOriginalNativeTokenSymbol = useIsOriginalNativeTokenSymbol(
+    chainId,
+    ticker,
+    type,
+  );
+
+  let total;
+  if (isOriginalNativeTokenSymbol) {
+    const tokenFiatTotal = balance?.tokenFiat ?? 0;
+    const ethFiatTotal = balance?.ethFiat ?? 0;
+    total = tokenFiatTotal + ethFiatTotal;
+  } else {
+    total = balance?.tokenFiat ?? 0;
+  }
+
+  const fiatBalance = `${renderFiat(total, currentCurrency)}`;
+
+  const onOpenPortfolio = () => {
+    const existingPortfolioTab = browserTabs.find(({ url }: BrowserTab) =>
+      isPortfolioUrl(url),
+    );
+
+    let existingTabId;
+    let newTabUrl;
+    if (existingPortfolioTab) {
+      existingTabId = existingPortfolioTab.id;
+    } else {
+      const analyticsEnabled = isEnabled();
+      const portfolioUrl = new URL(AppConstants.PORTFOLIO.URL);
+
+      portfolioUrl.searchParams.append('metamaskEntry', 'mobile');
+
+      // Append user's privacy preferences for metrics + marketing on user navigation to Portfolio.
+      portfolioUrl.searchParams.append(
+        'metricsEnabled',
+        String(analyticsEnabled),
+      );
+      portfolioUrl.searchParams.append(
+        'marketingEnabled',
+        String(!!isDataCollectionForMarketingEnabled),
+      );
+
+      newTabUrl = portfolioUrl.href;
+    }
+    const params = {
+      ...(newTabUrl && { newTabUrl }),
+      ...(existingTabId && { existingTabId, newTabUrl: undefined }),
+      timestamp: Date.now(),
+    };
+    navigation.navigate(Routes.BROWSER.HOME, {
+      screen: Routes.BROWSER.VIEW,
+      params,
+    });
+    trackEvent(MetaMetricsEvents.PORTFOLIO_LINK_CLICKED, {
+      portfolioUrl: AppConstants.PORTFOLIO.URL,
+    });
+  };
+
+  return (
+    <View style={styles.portfolioBalance}>
+      <View>
+        <Text
+          style={styles.fiatBalance}
+          testID={WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT}
+        >
+          {fiatBalance}
+        </Text>
+
+        {!isTestNet(chainId) ? (
+          <AggregatedPercentage
+            ethFiat={balance?.ethFiat}
+            tokenFiat={balance?.tokenFiat}
+            tokenFiat1dAgo={balance?.tokenFiat1dAgo}
+            ethFiat1dAgo={balance?.ethFiat1dAgo}
+          />
+        ) : null}
+      </View>
+      <Button
+        variant={ButtonVariants.Secondary}
+        size={ButtonSize.Md}
+        width={ButtonWidthTypes.Full}
+        style={styles.buyButton}
+        onPress={onOpenPortfolio}
+        label={strings('asset_overview.portfolio_button')}
+        testID={WalletViewSelectorsIDs.PORTFOLIO_BUTTON}
+        endIconName={IconName.Export}
+      />
+    </View>
+  );
+};

app/components/UI/Tokens/TokenList/ScamWarningIcon/index.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { TokenI } from '../../types';
+import useIsOriginalNativeTokenSymbol from '../../../../hooks/useIsOriginalNativeTokenSymbol/useIsOriginalNativeTokenSymbol';
+import { useSelector } from 'react-redux';
+import {
+  selectChainId,
+  selectProviderConfig,
+  selectTicker,
+} from '../../../../../selectors/networkController';
+import ButtonIcon, {
+  ButtonIconSizes,
+} from '../../../../../../app/component-library/components/Buttons/ButtonIcon';
+import {
+  IconColor,
+  IconName,
+} from '../../../../../component-library/components/Icons/Icon';
+
+interface ScamWarningIconProps {
+  asset: TokenI;
+  setShowScamWarningModal: (arg: boolean) => void;
+}
+
+export const ScamWarningIcon = ({
+  asset,
+  setShowScamWarningModal,
+}: ScamWarningIconProps) => {
+  const { type } = useSelector(selectProviderConfig);
+  const chainId = useSelector(selectChainId);
+  const ticker = useSelector(selectTicker);
+  const isOriginalNativeTokenSymbol = useIsOriginalNativeTokenSymbol(
+    chainId,
+    ticker,
+    type,
+  );
+  if (!isOriginalNativeTokenSymbol && asset.isETH) {
+    return (
+      <ButtonIcon
+        iconName={IconName.Danger}
+        onPressIn={() => {
+          setShowScamWarningModal(true);
+        }}
+        iconColor={IconColor.Error}
+        size={ButtonIconSizes.Lg}
+      />
+    );
+  }
+  return null;
+};

app/components/UI/Tokens/TokenList/ScamWarningModal/index.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import Modal from 'react-native-modal';
+import { useTheme } from '../../../../../util/theme';
+import createStyles from '../../styles';
+import Box from '../../../../UI/Ramp/components/Box';
+import { View } from 'react-native';
+import SheetHeader from '../../../../../../app/component-library/components/Sheet/SheetHeader';
+import { strings } from '../../../../../../locales/i18n';
+import Text from '../../../../../component-library/components/Texts/Text';
+import Button, {
+  ButtonVariants,
+  ButtonSize,
+} from '../../../../../component-library/components/Buttons/Button';
+import {
+  selectTicker,
+  selectProviderConfig,
+} from '../../../../../selectors/networkController';
+import { useSelector } from 'react-redux';
+import { useNavigation } from '@react-navigation/native';
+import Routes from '../../../../../constants/navigation/Routes';
+
+interface ScamWarningModalProps {
+  showScamWarningModal: boolean;
+  setShowScamWarningModal: (arg: boolean) => void;
+}
+
+export const ScamWarningModal = ({
+  showScamWarningModal,
+  setShowScamWarningModal,
+}: ScamWarningModalProps) => {
+  const navigation = useNavigation();
+  const { colors } = useTheme();
+
+  const ticker = useSelector(selectTicker);
+  const { rpcUrl } = useSelector(selectProviderConfig);
+
+  const styles = createStyles(colors);
+
+  const goToNetworkEdit = () => {
+    navigation.navigate(Routes.ADD_NETWORK, {
+      network: rpcUrl,
+    });
+    setShowScamWarningModal(false);
+  };
+
+  return (
+    <Modal
+      isVisible={showScamWarningModal}
+      onBackdropPress={() => setShowScamWarningModal(false)}
+      onSwipeComplete={() => setShowScamWarningModal(false)}
+      swipeDirection="down"
+      propagateSwipe
+      avoidKeyboard
+      style={styles.bottomModal}
+      backdropColor={colors.overlay.default}
+      backdropOpacity={1}
+    >
+      <Box style={styles.box}>
+        <View style={styles.notch} />
+        <SheetHeader title={strings('wallet.potential_scam')} />
+
+        <Box style={styles.boxContent}>
+          <Text>
+            {strings('wallet.network_not_matching')}
+            {` ${ticker},`}
+            {strings('wallet.target_scam_network')}
+          </Text>
+        </Box>
+        <Box style={styles.boxContent}>
+          <Button
+            variant={ButtonVariants.Secondary}
+            label={strings('networks.edit_network_details')}
+            onPress={goToNetworkEdit}
+            style={styles.editNetworkButton}
+            size={ButtonSize.Lg}
+          />
+        </Box>
+      </Box>
+    </Modal>
+  );
+};

app/components/UI/Tokens/TokenList/StakeButton/index.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { TokenI, BrowserTab } from '../../types';
+import { useNavigation } from '@react-navigation/native';
+import { isPooledStakingFeatureEnabled } from '../../../Stake/constants';
+import Routes from '../../../../../constants/navigation/Routes';
+import { useSelector } from 'react-redux';
+import AppConstants from '../../../../../core/AppConstants';
+import {
+  MetaMetricsEvents,
+  useMetrics,
+} from '../../../../../components/hooks/useMetrics';
+import { getDecimalChainId } from '../../../../../util/networks';
+import { selectChainId } from '../../../../../selectors/networkController';
+import { Pressable } from 'react-native';
+import Text, {
+  TextColor,
+  TextVariant,
+} from '../../../../../component-library/components/Texts/Text';
+import { WalletViewSelectorsIDs } from '../../../../../../e2e/selectors/wallet/WalletView.selectors';
+import { useTheme } from '../../../../../util/theme';
+import createStyles from '../../styles';
+import Icon, {
+  IconColor,
+  IconName,
+  IconSize,
+} from '../../../../../component-library/components/Icons/Icon';
+import { strings } from '../../../../../../locales/i18n';
+import { RootState } from '../../../../../reducers';
+
+interface StakeButtonProps {
+  asset: TokenI;
+}
+
+export const StakeButton = ({ asset }: StakeButtonProps) => {
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+  const navigation = useNavigation();
+  const { trackEvent } = useMetrics();
+
+  const browserTabs = useSelector((state: RootState) => state.browser.tabs);
+  const chainId = useSelector(selectChainId);
+
+  const onStakeButtonPress = () => {
+    if (isPooledStakingFeatureEnabled()) {
+      navigation.navigate('StakeScreens', { screen: Routes.STAKING.STAKE });
+    } else {
+      const existingStakeTab = browserTabs.find((tab: BrowserTab) =>
+        tab.url.includes(AppConstants.STAKE.URL),
+      );
+      let existingTabId;
+      let newTabUrl;
+      if (existingStakeTab) {
+        existingTabId = existingStakeTab.id;
+      } else {
+        newTabUrl = `${AppConstants.STAKE.URL}?metamaskEntry=mobile`;
+      }
+      const params = {
+        ...(newTabUrl && { newTabUrl }),
+        ...(existingTabId && { existingTabId, newTabUrl: undefined }),
+        timestamp: Date.now(),
+      };
+      navigation.navigate(Routes.BROWSER.HOME, {
+        screen: Routes.BROWSER.VIEW,
+        params,
+      });
+    }
+    trackEvent(MetaMetricsEvents.STAKE_BUTTON_CLICKED, {
+      chain_id: getDecimalChainId(chainId),
+      location: 'Home Screen',
+      text: 'Stake',
+      token_symbol: asset.symbol,
+      url: AppConstants.STAKE.URL,
+    });
+  };
+
+  return (
+    <Pressable
+      onPress={onStakeButtonPress}
+      testID={WalletViewSelectorsIDs.STAKE_BUTTON}
+      style={styles.stakeButton}
+    >
+      <Text variant={TextVariant.BodyLGMedium}>
+        {' • '}
+        <Text color={TextColor.Primary} variant={TextVariant.BodyLGMedium}>
+          {`${strings('stake.stake')} `}
+        </Text>
+      </Text>
+      <Icon
+        name={IconName.Plant}
+        size={IconSize.Sm}
+        color={IconColor.Primary}
+      />
+    </Pressable>
+  );
+};