remove all the Buy, Swap etc. buttons, replace remaining Send with text only

ui/components/app/wallet-overview/eth-overview.js

@@ -6,26 +6,17 @@ import { useHistory } from 'react-router-dom';
 
 import Identicon from '../../ui/identicon';
 import { I18nContext } from '../../../contexts/i18n';
-import {
+import { SEND_ROUTE } from '../../../helpers/constants/routes';
-  SEND_ROUTE,
-  BUILD_QUOTE_ROUTE,
-} from '../../../helpers/constants/routes';
 import Tooltip from '../../ui/tooltip';
 import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display';
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
 import {
   isBalanceCached,
   getShouldShowFiat,
-  getCurrentKeyring,
-  getSwapsDefaultToken,
-  getIsSwapsChain,
-  getIsBuyableChain,
   getNativeCurrencyImage,
   getSelectedAccountCachedBalance,
 } from '../../../selectors';
-import { setSwapsFromToken } from '../../../ducks/swaps/swaps';
 import IconButton from '../../ui/icon-button';
-import { isHardwareKeyring } from '../../../helpers/utils/hardware';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
   EVENT,
@@ -38,11 +29,9 @@ import { AssetType } from '../../../../shared/constants/transaction';
 import {
   ButtonIcon,
   BUTTON_ICON_SIZES,
-  Icon,
   ICON_NAMES,
 } from '../../component-library';
 import { IconColor } from '../../../helpers/constants/design-system';
-import useRamps from '../../../hooks/experiences/useRamps';
 import WalletOverview from './wallet-overview';
 
 const EthOverview = ({ className }) => {
@@ -50,17 +39,10 @@ const EthOverview = ({ className }) => {
   const t = useContext(I18nContext);
   const trackEvent = useContext(MetaMetricsContext);
   const history = useHistory();
-  const keyring = useSelector(getCurrentKeyring);
-  const usingHardwareWallet = isHardwareKeyring(keyring?.type);
   const balanceIsCached = useSelector(isBalanceCached);
   const showFiat = useSelector(getShouldShowFiat);
   const balance = useSelector(getSelectedAccountCachedBalance);
-  const isSwapsChain = useSelector(getIsSwapsChain);
-  const isBuyableChain = useSelector(getIsBuyableChain);
   const primaryTokenImage = useSelector(getNativeCurrencyImage);
-  const defaultSwapsToken = useSelector(getSwapsDefaultToken);
-
-  const { openBuyCryptoInPdapp } = useRamps();
 
   return (
     <WalletOverview
@@ -141,35 +123,9 @@ const EthOverview = ({ className }) => {
       }
       buttons={
         <>
-          <IconButton
-            className="eth-overview__button"
-            Icon={
-              <Icon name={ICON_NAMES.ADD} color={IconColor.primaryInverse} />
-            }
-            disabled={!isBuyableChain}
-            data-testid="eth-overview-buy"
-            label={t('buy')}
-            onClick={() => {
-              openBuyCryptoInPdapp();
-              trackEvent({
-                event: EVENT_NAMES.NAV_BUY_BUTTON_CLICKED,
-                category: EVENT.CATEGORIES.NAVIGATION,
-                properties: {
-                  location: 'Home',
-                  text: 'Buy',
-                },
-              });
-            }}
-          />
           <IconButton
             className="eth-overview__button"
             data-testid="eth-overview-send"
-            Icon={
-              <Icon
-                name={ICON_NAMES.ARROW_2_RIGHT}
-                color={IconColor.primaryInverse}
-              />
-            }
             label={t('send')}
             onClick={() => {
               trackEvent({
@@ -188,71 +144,6 @@ const EthOverview = ({ className }) => {
               });
             }}
           />
-          <IconButton
-            className="eth-overview__button"
-            disabled={!isSwapsChain}
-            Icon={
-              <Icon
-                name={ICON_NAMES.SWAP_HORIZONTAL}
-                color={IconColor.primaryInverse}
-              />
-            }
-            onClick={() => {
-              if (isSwapsChain) {
-                trackEvent({
-                  event: EVENT_NAMES.NAV_SWAP_BUTTON_CLICKED,
-                  category: EVENT.CATEGORIES.SWAPS,
-                  properties: {
-                    token_symbol: 'ETH',
-                    location: EVENT.SOURCE.SWAPS.MAIN_VIEW,
-                    text: 'Swap',
-                  },
-                });
-                dispatch(setSwapsFromToken(defaultSwapsToken));
-                if (usingHardwareWallet) {
-                  global.platform.openExtensionInBrowser(BUILD_QUOTE_ROUTE);
-                } else {
-                  history.push(BUILD_QUOTE_ROUTE);
-                }
-              }
-            }}
-            label={t('swap')}
-            tooltipRender={
-              isSwapsChain
-                ? null
-                : (contents) => (
-                    <Tooltip
-                      title={t('currentlyUnavailable')}
-                      position="bottom"
-                    >
-                      {contents}
-                    </Tooltip>
-                  )
-            }
-          />
-          <IconButton
-            className="eth-overview__button"
-            data-testid="eth-overview-bridge"
-            Icon={
-              <Icon name={ICON_NAMES.BRIDGE} color={IconColor.primaryInverse} />
-            }
-            label={t('bridge')}
-            onClick={() => {
-              const portfolioUrl = process.env.PORTFOLIO_URL;
-              const bridgeUrl = `${portfolioUrl}/bridge`;
-              global.platform.openTab({
-                url: `${bridgeUrl}?metamaskEntry=ext`,
-              });
-              trackEvent({
-                category: EVENT.CATEGORIES.NAVIGATION,
-                event: EVENT_NAMES.BRIDGE_LINK_CLICKED,
-                properties: {
-                  location: 'Home',
-                  text: 'Bridge',
-                },
-              });
-            }}
-          />
         </>
       }
       className={className}

ui/components/app/wallet-overview/index.scss

@@ -3,7 +3,6 @@
   justify-content: space-between;
   align-items: center;
   flex: 1;
-  min-height: 209px;
   min-width: 0;
   padding-top: 10px;
   flex-direction: column;
@@ -20,8 +19,7 @@
   &__buttons {
     display: flex;
     flex-direction: row;
-    height: 68px;
+    margin-bottom: 18px;
-    margin-bottom: 24px;
   }
 }
 
@@ -44,7 +42,7 @@
     min-width: 0;
     position: relative;
     align-items: center;
-    margin: 16px 0;
+    margin: 16px 0 4px 0;
     padding: 0 16px;
     max-width: 326px;
   }
@@ -112,7 +110,7 @@
     min-width: 0;
     position: relative;
     align-items: center;
-    margin: 16px 0;
+    margin: 16px 0 4px 0;
     padding: 0 16px;
     max-width: 100%;
   }

ui/components/app/wallet-overview/token-overview.js

@@ -1,41 +1,22 @@
 import React, { useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
 import Identicon from '../../ui/identicon';
-import Tooltip from '../../ui/tooltip';
 import CurrencyDisplay from '../../ui/currency-display';
 import { I18nContext } from '../../../contexts/i18n';
-import { isHardwareKeyring } from '../../../helpers/utils/hardware';
+import { SEND_ROUTE } from '../../../helpers/constants/routes';
-import {
-  SEND_ROUTE,
-  BUILD_QUOTE_ROUTE,
-} from '../../../helpers/constants/routes';
 import { useTokenTracker } from '../../../hooks/useTokenTracker';
 import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount';
 import { startNewDraftTransaction } from '../../../ducks/send';
-import { setSwapsFromToken } from '../../../ducks/swaps/swaps';
-import {
-  getCurrentKeyring,
-  getIsSwapsChain,
-  getIsBuyableChain,
-} from '../../../selectors';
 
 import IconButton from '../../ui/icon-button';
 import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys';
 import { showModal } from '../../../store/actions';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
-import {
+import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
-  EVENT,
-  EVENT_NAMES,
-  CONTEXT_PROPS,
-} from '../../../../shared/constants/metametrics';
 import { AssetType } from '../../../../shared/constants/transaction';
-import useRamps from '../../../hooks/experiences/useRamps';
-
-import { Icon, ICON_NAMES } from '../../component-library';
-import { IconColor } from '../../../helpers/constants/design-system';
 import WalletOverview from './wallet-overview';
 
 const TokenOverview = ({ className, token }) => {
@@ -43,21 +24,13 @@ const TokenOverview = ({ className, token }) => {
   const t = useContext(I18nContext);
   const trackEvent = useContext(MetaMetricsContext);
   const history = useHistory();
-  const keyring = useSelector(getCurrentKeyring);
-  const usingHardwareWallet = isHardwareKeyring(keyring.type);
   const { tokensWithBalances } = useTokenTracker([token]);
   const balanceToRender = tokensWithBalances[0]?.string;
-  const balance = tokensWithBalances[0]?.balance;
   const formattedFiatBalance = useTokenFiatAmount(
     token.address,
     balanceToRender,
     token.symbol,
   );
-  const isSwapsChain = useSelector(getIsSwapsChain);
-
-  const isBuyableChain = useSelector(getIsBuyableChain);
-
-  const { openBuyCryptoInPdapp } = useRamps();
 
   useEffect(() => {
     if (token.isERC721) {
@@ -90,26 +63,6 @@ const TokenOverview = ({ className, token }) => {
       }
       buttons={
         <>
-          <IconButton
-            className="token-overview__button"
-            Icon={
-              <Icon name={ICON_NAMES.ADD} color={IconColor.primaryInverse} />
-            }
-            label={t('buy')}
-            data-testid="token-overview-buy"
-            onClick={() => {
-              openBuyCryptoInPdapp();
-              trackEvent({
-                event: EVENT_NAMES.NAV_BUY_BUTTON_CLICKED,
-                category: EVENT.CATEGORIES.NAVIGATION,
-                properties: {
-                  location: 'Token Overview',
-                  text: 'Buy',
-                },
-              });
-            }}
-            disabled={token.isERC721 || !isBuyableChain}
-          />
           <IconButton
             className="token-overview__button"
             onClick={async () => {
@@ -136,96 +89,10 @@ const TokenOverview = ({ className, token }) => {
                 }
               }
             }}
-            Icon={
-              <Icon
-                name={ICON_NAMES.ARROW_2_RIGHT}
-                color={IconColor.primaryInverse}
-              />
-            }
             label={t('send')}
             data-testid="eth-overview-send"
             disabled={token.isERC721}
           />
-          <IconButton
-            className="token-overview__button"
-            disabled={!isSwapsChain}
-            Icon={
-              <Icon
-                name={ICON_NAMES.SWAP_HORIZONTAL}
-                color={IconColor.primaryInverse}
-              />
-            }
-            onClick={() => {
-              if (isSwapsChain) {
-                trackEvent({
-                  event: EVENT_NAMES.NAV_SWAP_BUTTON_CLICKED,
-                  category: EVENT.CATEGORIES.SWAPS,
-                  properties: {
-                    token_symbol: token.symbol,
-                    location: EVENT.SOURCE.SWAPS.TOKEN_VIEW,
-                    text: 'Swap',
-                  },
-                });
-                dispatch(
-                  setSwapsFromToken({
-                    ...token,
-                    address: token.address.toLowerCase(),
-                    iconUrl: token.image,
-                    balance,
-                    string: balanceToRender,
-                  }),
-                );
-                if (usingHardwareWallet) {
-                  global.platform.openExtensionInBrowser(BUILD_QUOTE_ROUTE);
-                } else {
-                  history.push(BUILD_QUOTE_ROUTE);
-                }
-              }
-            }}
-            label={t('swap')}
-            tooltipRender={
-              isSwapsChain
-                ? null
-                : (contents) => (
-                    <Tooltip
-                      title={t('currentlyUnavailable')}
-                      position="bottom"
-                      disabled={isSwapsChain}
-                    >
-                      {contents}
-                    </Tooltip>
-                  )
-            }
-          />
-          <IconButton
-            className="eth-overview__button"
-            Icon={
-              <Icon
-                name={ICON_NAMES.DIAGRAM}
-                color={IconColor.primaryInverse}
-              />
-            }
-            label={t('portfolio')}
-            data-testid="home__portfolio-site"
-            onClick={() => {
-              const portfolioUrl = process.env.PORTFOLIO_URL;
-              global.platform.openTab({
-                url: `${portfolioUrl}?metamaskEntry=ext`,
-              });
-              trackEvent(
-                {
-                  category: EVENT.CATEGORIES.HOME,
-                  event: EVENT_NAMES.PORTFOLIO_LINK_CLICKED,
-                  properties: {
-                    url: portfolioUrl,
-                  },
-                },
-                {
-                  contextPropsIntoEventProperties: [CONTEXT_PROPS.PAGE_TITLE],
-                },
-              );
-            }}
-          />
         </>
       }
       className={className}

ui/components/ui/icon-button/icon-button.js

@@ -6,7 +6,7 @@ const defaultRender = (inner) => inner;
 
 export default function IconButton({
   onClick,
-  Icon,
+  // Icon,
   disabled,
   label,
   tooltipRender,
@@ -25,7 +25,7 @@ export default function IconButton({
     >
       {renderWrapper(
         <>
-          <div className="icon-button__circle">{Icon}</div>
+          {/* <div className="icon-button__circle">{Icon}</div> */}
           <span>{label}</span>
         </>,
       )}