From a44dcd6dec1eb47250f2481a102c4b7c3a28123f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Thu, 16 Mar 2023 13:39:25 +0000 Subject: [PATCH] remove all the Buy, Swap etc. buttons, replace remaining Send with text only --- .../app/wallet-overview/eth-overview.js | 111 +------------- ui/components/app/wallet-overview/index.scss | 8 +- .../app/wallet-overview/token-overview.js | 139 +----------------- ui/components/ui/icon-button/icon-button.js | 4 +- 4 files changed, 9 insertions(+), 253 deletions(-) diff --git a/ui/components/app/wallet-overview/eth-overview.js b/ui/components/app/wallet-overview/eth-overview.js index a02c8459d..38c661df8 100644 --- a/ui/components/app/wallet-overview/eth-overview.js +++ b/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 { - SEND_ROUTE, - BUILD_QUOTE_ROUTE, -} from '../../../helpers/constants/routes'; +import { SEND_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 ( { } buttons={ <> - - } - 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', - }, - }); - }} - /> - } label={t('send')} onClick={() => { trackEvent({ @@ -188,71 +144,6 @@ const EthOverview = ({ className }) => { }); }} /> - - } - 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) => ( - - {contents} - - ) - } - /> - - } - 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} diff --git a/ui/components/app/wallet-overview/index.scss b/ui/components/app/wallet-overview/index.scss index ae90cfad2..84725e751 100644 --- a/ui/components/app/wallet-overview/index.scss +++ b/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: 24px; + margin-bottom: 18px; } } @@ -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%; } diff --git a/ui/components/app/wallet-overview/token-overview.js b/ui/components/app/wallet-overview/token-overview.js index 4c7fc481d..cc39beda6 100644 --- a/ui/components/app/wallet-overview/token-overview.js +++ b/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, - BUILD_QUOTE_ROUTE, -} from '../../../helpers/constants/routes'; +import { SEND_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 { - EVENT, - EVENT_NAMES, - CONTEXT_PROPS, -} from '../../../../shared/constants/metametrics'; +import { EVENT, EVENT_NAMES } 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={ <> - - } - 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} - /> { @@ -136,96 +89,10 @@ const TokenOverview = ({ className, token }) => { } } }} - Icon={ - - } label={t('send')} data-testid="eth-overview-send" disabled={token.isERC721} /> - - } - 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) => ( - - {contents} - - ) - } - /> - - } - 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} diff --git a/ui/components/ui/icon-button/icon-button.js b/ui/components/ui/icon-button/icon-button.js index b0a5b1b25..64ac2ff07 100644 --- a/ui/components/ui/icon-button/icon-button.js +++ b/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( <> -
{Icon}
+ {/*
{Icon}
*/} {label} , )}