-
-
- {t('depositCrypto', [symbol])}
-
-
- {t('needCryptoInWallet', [symbol])}
-
-
{
- this.props.hideWarning();
- this.props.hideModal();
- }}
- />
-
-
-
- {this.renderRow({
- logo: ,
- title: t('buyCryptoWithCoinbasePay', [symbol]),
- text: t('buyCryptoWithCoinbasePayDescription', [symbol]),
- buttonLabel: t('continueToCoinbasePay'),
- onButtonClick: () => {
- this.context.trackEvent({
- category: EVENT.CATEGORIES.ACCOUNTS,
- event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
- properties: {
- onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.COINBASE,
- },
- });
- toCoinbasePay(address, chainId);
- },
- hide: !isBuyableCoinbasePayChain,
- })}
- {this.renderRow({
- logo: ,
- title: t('buyCryptoWithTransak', [symbol]),
- text: t('buyCryptoWithTransakDescription', [symbol]),
- buttonLabel: t('continueToTransak'),
- onButtonClick: () => {
- this.context.trackEvent({
- category: EVENT.CATEGORIES.ACCOUNTS,
- event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
- properties: {
- onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.TRANSAK,
- },
- });
- toTransak(address, chainId);
- },
- hide: !isBuyableTransakChain,
- })}
- {this.renderRow({
- logo: ,
- title: t('buyCryptoWithMoonPay', [symbol]),
- text: t('buyCryptoWithMoonPayDescription', [symbol]),
- buttonLabel: t('continueToMoonPay'),
- onButtonClick: () => {
- this.context.trackEvent({
- category: EVENT.CATEGORIES.ACCOUNTS,
- event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
- properties: {
- onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.MOONPAY,
- },
- });
- toMoonPay(address, chainId);
- },
- hide: !isBuyableMoonPayChain,
- })}
- {this.renderRow({
- logo: ,
- title: t('buyWithWyre', [symbol]),
- text: t('buyWithWyreDescription', [symbol]),
- buttonLabel: t('continueToWyre'),
- onButtonClick: () => {
- this.context.trackEvent({
- category: EVENT.CATEGORIES.ACCOUNTS,
- event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
- properties: {
- onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.WYRE,
- },
- });
- toWyre(address, chainId);
- },
- hide: !isBuyableWyreChain,
- })}
- {this.renderRow({
- logo: (
-
- ),
- title: t('directDepositCrypto', [symbol]),
- text: t('directDepositCryptoExplainer', [symbol]),
- buttonLabel: t('viewAccount'),
- onButtonClick: () => {
- this.context.trackEvent({
- category: EVENT.CATEGORIES.ACCOUNTS,
- event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED,
- properties: {
- onramp_provider_type:
- EVENT.ONRAMP_PROVIDER_TYPES.SELF_DEPOSIT,
- },
- });
- this.goToAccountDetailsModal();
- },
- })}
- {networkName &&
- this.renderRow({
- logo: ,
- title: t('testFaucet'),
- text: t('getEtherFromFaucet', [networkName]),
- buttonLabel: t('getEther'),
- onButtonClick: () => toFaucet(chainId),
- hide: !isTestnet,
- })}
-
-
-
- );
- }
-}
diff --git a/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.container.js b/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.container.js
deleted file mode 100644
index 3b71d5740..000000000
--- a/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.container.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import { connect } from 'react-redux';
-import {
- buyEth,
- hideModal,
- showModal,
- hideWarning,
-} from '../../../../store/actions';
-import {
- getIsTestnet,
- getIsMainnet,
- getCurrentChainId,
- getSelectedAddress,
- getIsBuyableTransakChain,
- getIsBuyableMoonPayChain,
- getIsBuyableWyreChain,
- getIsBuyableCoinbasePayChain,
-} from '../../../../selectors/selectors';
-import DepositEtherModal from './deposit-ether-modal.component';
-
-function mapStateToProps(state) {
- return {
- chainId: getCurrentChainId(state),
- isTestnet: getIsTestnet(state),
- isMainnet: getIsMainnet(state),
- address: getSelectedAddress(state),
- isBuyableTransakChain: getIsBuyableTransakChain(state),
- isBuyableMoonPayChain: getIsBuyableMoonPayChain(state),
- isBuyableWyreChain: getIsBuyableWyreChain(state),
- isBuyableCoinbasePayChain: getIsBuyableCoinbasePayChain(state),
- };
-}
-
-function mapDispatchToProps(dispatch) {
- return {
- toWyre: (address, chainId) => {
- dispatch(buyEth({ service: 'wyre', address, chainId }));
- },
- toTransak: (address, chainId) => {
- dispatch(buyEth({ service: 'transak', address, chainId }));
- },
- toMoonPay: (address, chainId) => {
- dispatch(buyEth({ service: 'moonpay', address, chainId }));
- },
- toCoinbasePay: (address, chainId) => {
- dispatch(buyEth({ service: 'coinbase', address, chainId }));
- },
- hideModal: () => {
- dispatch(hideModal());
- },
- hideWarning: () => {
- dispatch(hideWarning());
- },
- showAccountDetailModal: () => {
- dispatch(showModal({ name: 'ACCOUNT_DETAILS' }));
- },
- toFaucet: (chainId) => dispatch(buyEth({ chainId })),
- };
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(DepositEtherModal);
diff --git a/ui/components/app/modals/deposit-ether-modal/index.js b/ui/components/app/modals/deposit-ether-modal/index.js
deleted file mode 100644
index 02f355cb0..000000000
--- a/ui/components/app/modals/deposit-ether-modal/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './deposit-ether-modal.container';
diff --git a/ui/components/app/modals/deposit-ether-modal/index.scss b/ui/components/app/modals/deposit-ether-modal/index.scss
deleted file mode 100644
index 9c366d0b8..000000000
--- a/ui/components/app/modals/deposit-ether-modal/index.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-.deposit-ether-modal {
- border-radius: 8px;
- display: flex;
- flex-flow: column;
- height: 100%;
-
- &__buy-rows {
- width: 100%;
- padding: 0 30px;
- display: flex;
- flex-flow: column nowrap;
- flex: 1;
- align-items: center;
-
- @include screen-sm-max {
- height: 0;
- }
- }
-
- &__logo {
- max-height: 40px;
- background-repeat: no-repeat;
- background-size: contain;
- background-position: center;
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
-
- &--lg {
- max-height: 60px;
- }
-
- @include screen-sm-min {
- height: 60px;
- }
- }
-
- &__buy-row {
- border-bottom: 1px solid var(--color-border-default);
- display: flex;
- justify-content: space-between;
- align-items: center;
- flex: 1 0 auto;
- padding: 30px 0 20px;
- min-height: 170px;
-
- @include screen-sm-max {
- min-height: 270px;
- flex-flow: column;
- justify-content: flex-start;
- }
-
- &__back {
- position: absolute;
- top: 10px;
- left: 0;
- }
-
- &__logo-container {
- display: flex;
- justify-content: center;
- flex: 0 0 auto;
- padding: 0 20px;
-
- @include screen-sm-min {
- width: 12rem;
- }
-
- @include screen-sm-max {
- width: 100%;
- max-height: 6rem;
- padding-bottom: 20px;
- }
- }
-
- &__right {
- display: flex;
- }
-
- &__description {
- color: var(--color-text-alternative);
- padding-bottom: 20px;
- align-self: flex-start;
-
- @include screen-sm-min {
- width: 15rem;
- }
-
- &__title {
- @include H4;
- }
-
- &__text {
- @include H6;
-
- margin-top: 7px;
- }
- }
-
- &__button {
- display: flex;
- justify-content: flex-end;
-
- @include screen-sm-min {
- min-width: 300px;
- }
- }
- }
-
- &__buy-row:last-of-type {
- border-bottom: 0;
- }
-
- &__deposit-button {
- width: 257px !important;
- }
-}
diff --git a/ui/components/app/modals/index.scss b/ui/components/app/modals/index.scss
index 49e0063ab..f4467b153 100644
--- a/ui/components/app/modals/index.scss
+++ b/ui/components/app/modals/index.scss
@@ -2,7 +2,6 @@
@import 'account-modal-container/index';
@import 'cancel-transaction/index';
@import 'confirm-remove-account/index';
-@import 'deposit-ether-modal/index';
@import 'edit-approval-permission/index';
@import 'export-private-key-modal/index';
@import 'hide-token-confirmation-modal/index';
diff --git a/ui/components/app/modals/modal.js b/ui/components/app/modals/modal.js
index 4df937f2d..f8442e2f7 100644
--- a/ui/components/app/modals/modal.js
+++ b/ui/components/app/modals/modal.js
@@ -10,7 +10,6 @@ import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
// Modal Components
import ConfirmCustomizeGasModal from '../gas-customization/gas-modal-page-container';
-import DepositEtherModal from './deposit-ether-modal';
import AccountDetailsModal from './account-details-modal';
import ExportPrivateKeyModal from './export-private-key-modal';
import HideTokenConfirmationModal from './hide-token-confirmation-modal';
@@ -79,39 +78,6 @@ const accountModalStyle = {
};
const MODALS = {
- DEPOSIT_ETHER: {
- contents:
,
- onHide: (props) => props.hideWarning(),
- mobileModalStyle: {
- width: '100%',
- height: '100%',
- transform: 'none',
- left: '0',
- right: '0',
- margin: '0 auto',
- boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
- top: '0',
- display: 'flex',
- },
- laptopModalStyle: {
- width: 'initial',
- maxWidth: '850px',
- top: 'calc(10% + 10px)',
- left: '0',
- right: '0',
- margin: '0 auto',
- boxShadow: 'var(--shadow-size-sm) var(--color-shadow-default)',
- borderRadius: '7px',
- transform: 'none',
- height: 'calc(80% - 20px)',
- overflowY: 'hidden',
- },
- contentStyle: {
- borderRadius: '7px',
- height: '100%',
- },
- },
-
NEW_ACCOUNT: {
contents:
,
mobileModalStyle: {
diff --git a/ui/components/app/wallet-overview/eth-overview.js b/ui/components/app/wallet-overview/eth-overview.js
index 1c389cea4..5a8775720 100644
--- a/ui/components/app/wallet-overview/eth-overview.js
+++ b/ui/components/app/wallet-overview/eth-overview.js
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import classnames from 'classnames';
@@ -13,7 +13,6 @@ import {
import Tooltip from '../../ui/tooltip';
import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display';
import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
-import { showModal } from '../../../store/actions';
import {
isBalanceCached,
getShouldShowFiat,
@@ -35,6 +34,7 @@ import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
import Spinner from '../../ui/spinner';
import { startNewDraftTransaction } from '../../../ducks/send';
import { ASSET_TYPES } from '../../../../shared/constants/transaction';
+import DepositPopover from '../deposit-popover';
import WalletOverview from './wallet-overview';
const EthOverview = ({ className }) => {
@@ -42,6 +42,7 @@ const EthOverview = ({ className }) => {
const t = useContext(I18nContext);
const trackEvent = useContext(MetaMetricsContext);
const history = useHistory();
+ const [showDepositPopover, setShowDepositPopover] = useState(false);
const keyring = useSelector(getCurrentKeyring);
const usingHardwareWallet = isHardwareKeyring(keyring?.type);
const balanceIsCached = useSelector(isBalanceCached);
@@ -53,136 +54,141 @@ const EthOverview = ({ className }) => {
const defaultSwapsToken = useSelector(getSwapsDefaultToken);
return (
-
-
-
- {balance ? (
+ <>
+ {showDepositPopover && (
+
setShowDepositPopover(false)} />
+ )}
+
+
+
+ {balance ? (
+
+ ) : (
+
+ )}
+ {balanceIsCached ? (
+ *
+ ) : null}
+
+ {showFiat && balance && (
- ) : (
-
)}
- {balanceIsCached ? (
-
*
- ) : null}
-
- }
- buttons={
- <>
-
{
- trackEvent({
- event: EVENT_NAMES.NAV_BUY_BUTTON_CLICKED,
- category: EVENT.CATEGORIES.NAVIGATION,
- properties: {
- location: 'Home',
- text: 'Buy',
- },
- });
- dispatch(showModal({ name: 'DEPOSIT_ETHER' }));
- }}
- />
- {
- trackEvent({
- event: EVENT_NAMES.NAV_SEND_BUTTON_CLICKED,
- category: EVENT.CATEGORIES.NAVIGATION,
- properties: {
- token_symbol: 'ETH',
- location: 'Home',
- text: 'Send',
- },
- });
- dispatch(
- startNewDraftTransaction({ type: ASSET_TYPES.NATIVE }),
- ).then(() => {
- history.push(SEND_ROUTE);
- });
- }}
- />
- {
- if (isSwapsChain) {
+
+ }
+ buttons={
+ <>
+ {
+ trackEvent({
+ event: EVENT_NAMES.NAV_BUY_BUTTON_CLICKED,
+ category: EVENT.CATEGORIES.NAVIGATION,
+ properties: {
+ location: 'Home',
+ text: 'Buy',
+ },
+ });
+ setShowDepositPopover(true);
+ }}
+ />
+ {
trackEvent({
- event: EVENT_NAMES.NAV_SWAP_BUTTON_CLICKED,
- category: EVENT.CATEGORIES.SWAPS,
+ event: EVENT_NAMES.NAV_SEND_BUTTON_CLICKED,
+ category: EVENT.CATEGORIES.NAVIGATION,
properties: {
token_symbol: 'ETH',
- location: EVENT.SOURCE.SWAPS.MAIN_VIEW,
- text: 'Swap',
+ location: 'Home',
+ text: 'Send',
},
});
- dispatch(setSwapsFromToken(defaultSwapsToken));
- if (usingHardwareWallet) {
- global.platform.openExtensionInBrowser(BUILD_QUOTE_ROUTE);
- } else {
- history.push(BUILD_QUOTE_ROUTE);
+ dispatch(
+ startNewDraftTransaction({ type: ASSET_TYPES.NATIVE }),
+ ).then(() => {
+ history.push(SEND_ROUTE);
+ });
+ }}
+ />
+ {
+ 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('swap')}
- tooltipRender={
- isSwapsChain
- ? null
- : (contents) => (
-
- {contents}
-
- )
- }
- />
-
- }
- className={className}
- icon={}
- />
+ />
+
+ }
+ className={className}
+ icon={}
+ />
+
);
};
diff --git a/ui/components/app/wallet-overview/token-overview.js b/ui/components/app/wallet-overview/token-overview.js
index 3bb6dda96..5142c5e8c 100644
--- a/ui/components/app/wallet-overview/token-overview.js
+++ b/ui/components/app/wallet-overview/token-overview.js
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
@@ -19,8 +19,11 @@ import { setSwapsFromToken } from '../../../ducks/swaps/swaps';
import {
getCurrentKeyring,
getIsSwapsChain,
+ getIsBuyableCoinbasePayToken,
+ getIsBuyableTransakToken,
} from '../../../selectors/selectors';
+import BuyIcon from '../../ui/icon/overview-buy-icon.component';
import SwapIcon from '../../ui/icon/swap-icon.component';
import SendIcon from '../../ui/icon/overview-send-icon.component';
@@ -30,6 +33,7 @@ import { showModal } from '../../../store/actions';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
import { ASSET_TYPES } from '../../../../shared/constants/transaction';
+import DepositPopover from '../deposit-popover';
import WalletOverview from './wallet-overview';
const TokenOverview = ({ className, token }) => {
@@ -37,6 +41,7 @@ const TokenOverview = ({ className, token }) => {
const t = useContext(I18nContext);
const trackEvent = useContext(MetaMetricsContext);
const history = useHistory();
+ const [showDepositPopover, setShowDepositPopover] = useState(false);
const keyring = useSelector(getCurrentKeyring);
const usingHardwareWallet = isHardwareKeyring(keyring.type);
const { tokensWithBalances } = useTokenTracker([token]);
@@ -48,6 +53,13 @@ const TokenOverview = ({ className, token }) => {
token.symbol,
);
const isSwapsChain = useSelector(getIsSwapsChain);
+ const isTokenBuyableCoinbasePay = useSelector((state) =>
+ getIsBuyableCoinbasePayToken(state, token.symbol),
+ );
+ const isTokenBuyableTransak = useSelector((state) =>
+ getIsBuyableTransakToken(state, token.symbol),
+ );
+ const isBuyable = isTokenBuyableCoinbasePay || isTokenBuyableTransak;
useEffect(() => {
if (token.isERC721 && process.env.COLLECTIBLES_V1) {
@@ -61,109 +73,140 @@ const TokenOverview = ({ className, token }) => {
}, [token.isERC721, token.address, dispatch]);
return (
-
-
- {formattedFiatBalance ? (
+ <>
+ {showDepositPopover && (
+ setShowDepositPopover(false)}
+ token={token}
+ />
+ )}
+
- ) : null}
-