Ability to buy tokens with Coinbase Pay and Transak (#15551)
Co-authored-by: Ariella Vu <20778143+digiwand@users.noreply.github.com> Co-authored-by: Brad Decker <git@braddecker.dev> Co-authored-by: Brad Decker <bhdecker84@gmail.com>feature/default_network_editable
Nicolas Ferro
2 years ago
committed by
GitHub
parent
075a6fb86a
commit
1b563188bf
@ -0,0 +1,221 @@ |
|||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import React, { useContext } from 'react'; |
||||||
|
import { useSelector, useDispatch } from 'react-redux'; |
||||||
|
|
||||||
|
import { I18nContext } from '../../../contexts/i18n'; |
||||||
|
import { MetaMetricsContext } from '../../../contexts/metametrics'; |
||||||
|
import { |
||||||
|
NETWORK_TO_NAME_MAP, |
||||||
|
BUYABLE_CHAINS_MAP, |
||||||
|
} from '../../../../shared/constants/network'; |
||||||
|
import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; |
||||||
|
|
||||||
|
import LogoMoonPay from '../../ui/logo/logo-moonpay'; |
||||||
|
import LogoWyre from '../../ui/logo/logo-wyre'; |
||||||
|
import LogoTransak from '../../ui/logo/logo-transak'; |
||||||
|
import LogoCoinbasePay from '../../ui/logo/logo-coinbasepay'; |
||||||
|
import LogoDepositEth from '../../ui/logo/logo-deposit-eth'; |
||||||
|
import Popover from '../../ui/popover'; |
||||||
|
|
||||||
|
import { buy, showModal, hideWarning } from '../../../store/actions'; |
||||||
|
import { |
||||||
|
getIsTestnet, |
||||||
|
getCurrentChainId, |
||||||
|
getSelectedAddress, |
||||||
|
getIsBuyableTransakChain, |
||||||
|
getIsBuyableMoonPayChain, |
||||||
|
getIsBuyableWyreChain, |
||||||
|
getIsBuyableCoinbasePayChain, |
||||||
|
getIsBuyableCoinbasePayToken, |
||||||
|
getIsBuyableTransakToken, |
||||||
|
} from '../../../selectors/selectors'; |
||||||
|
|
||||||
|
import OnRampItem from './on-ramp-item'; |
||||||
|
|
||||||
|
const DepositPopover = ({ onClose, token }) => { |
||||||
|
const isTokenDeposit = Boolean(token); |
||||||
|
|
||||||
|
const t = useContext(I18nContext); |
||||||
|
const trackEvent = useContext(MetaMetricsContext); |
||||||
|
const dispatch = useDispatch(); |
||||||
|
|
||||||
|
const chainId = useSelector(getCurrentChainId); |
||||||
|
const isTestnet = useSelector(getIsTestnet); |
||||||
|
const address = useSelector(getSelectedAddress); |
||||||
|
const isBuyableTransakChain = useSelector(getIsBuyableTransakChain); |
||||||
|
const isBuyableMoonPayChain = useSelector(getIsBuyableMoonPayChain); |
||||||
|
const isBuyableWyreChain = useSelector(getIsBuyableWyreChain); |
||||||
|
const isBuyableCoinbasePayChain = useSelector(getIsBuyableCoinbasePayChain); |
||||||
|
|
||||||
|
const isTokenBuyableCoinbasePay = useSelector((state) => |
||||||
|
getIsBuyableCoinbasePayToken(state, token?.symbol), |
||||||
|
); |
||||||
|
const isTokenBuyableTransak = useSelector((state) => |
||||||
|
getIsBuyableTransakToken(state, token?.symbol), |
||||||
|
); |
||||||
|
|
||||||
|
const networkName = NETWORK_TO_NAME_MAP[chainId]; |
||||||
|
const symbol = token |
||||||
|
? token.symbol |
||||||
|
: BUYABLE_CHAINS_MAP[chainId].nativeCurrency; |
||||||
|
|
||||||
|
const showAccountDetailModal = () => { |
||||||
|
dispatch(showModal({ name: 'ACCOUNT_DETAILS' })); |
||||||
|
}; |
||||||
|
const hideWarningMessage = () => { |
||||||
|
dispatch(hideWarning()); |
||||||
|
}; |
||||||
|
|
||||||
|
const toCoinbasePay = () => { |
||||||
|
dispatch( |
||||||
|
buy({ service: 'coinbase', address, chainId, symbol: token?.symbol }), |
||||||
|
); |
||||||
|
}; |
||||||
|
const toTransak = () => { |
||||||
|
dispatch( |
||||||
|
buy({ service: 'transak', address, chainId, symbol: token?.symbol }), |
||||||
|
); |
||||||
|
}; |
||||||
|
const toMoonPay = () => { |
||||||
|
dispatch(buy({ service: 'moonpay', address, chainId })); |
||||||
|
}; |
||||||
|
const toWyre = () => { |
||||||
|
dispatch(buy({ service: 'wyre', address, chainId })); |
||||||
|
}; |
||||||
|
const toFaucet = () => dispatch(buy({ chainId })); |
||||||
|
|
||||||
|
const goToAccountDetailsModal = () => { |
||||||
|
hideWarningMessage(); |
||||||
|
showAccountDetailModal(); |
||||||
|
onClose(); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Popover |
||||||
|
title={t('depositCrypto', [symbol])} |
||||||
|
subtitle={isTokenDeposit ? '' : t('needCryptoInWallet', [symbol])} |
||||||
|
onClose={onClose} |
||||||
|
> |
||||||
|
<OnRampItem |
||||||
|
logo={<LogoCoinbasePay />} |
||||||
|
title={t('buyCryptoWithCoinbasePay', [symbol])} |
||||||
|
text={t('buyCryptoWithCoinbasePayDescription', [symbol])} |
||||||
|
buttonLabel={t('continueToCoinbasePay')} |
||||||
|
onButtonClick={() => { |
||||||
|
trackEvent({ |
||||||
|
category: EVENT.CATEGORIES.ACCOUNTS, |
||||||
|
event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED, |
||||||
|
properties: { |
||||||
|
onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.COINBASE, |
||||||
|
}, |
||||||
|
}); |
||||||
|
toCoinbasePay(); |
||||||
|
}} |
||||||
|
hide={ |
||||||
|
isTokenDeposit |
||||||
|
? !isBuyableCoinbasePayChain || !isTokenBuyableCoinbasePay |
||||||
|
: !isBuyableCoinbasePayChain |
||||||
|
} |
||||||
|
/> |
||||||
|
<OnRampItem |
||||||
|
logo={<LogoTransak />} |
||||||
|
title={t('buyCryptoWithTransak', [symbol])} |
||||||
|
text={t('buyCryptoWithTransakDescription', [symbol])} |
||||||
|
buttonLabel={t('continueToTransak')} |
||||||
|
onButtonClick={() => { |
||||||
|
trackEvent({ |
||||||
|
category: EVENT.CATEGORIES.ACCOUNTS, |
||||||
|
event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED, |
||||||
|
properties: { |
||||||
|
onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.TRANSAK, |
||||||
|
}, |
||||||
|
}); |
||||||
|
toTransak(); |
||||||
|
}} |
||||||
|
hide={ |
||||||
|
isTokenDeposit |
||||||
|
? !isBuyableTransakChain || !isTokenBuyableTransak |
||||||
|
: !isBuyableTransakChain |
||||||
|
} |
||||||
|
/> |
||||||
|
<OnRampItem |
||||||
|
logo={<LogoMoonPay />} |
||||||
|
title={t('buyCryptoWithMoonPay', [symbol])} |
||||||
|
text={t('buyCryptoWithMoonPayDescription', [symbol])} |
||||||
|
buttonLabel={t('continueToMoonPay')} |
||||||
|
onButtonClick={() => { |
||||||
|
trackEvent({ |
||||||
|
category: EVENT.CATEGORIES.ACCOUNTS, |
||||||
|
event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED, |
||||||
|
properties: { |
||||||
|
onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.MOONPAY, |
||||||
|
}, |
||||||
|
}); |
||||||
|
toMoonPay(); |
||||||
|
}} |
||||||
|
hide={isTokenDeposit || !isBuyableMoonPayChain} |
||||||
|
/> |
||||||
|
|
||||||
|
<OnRampItem |
||||||
|
logo={<LogoWyre />} |
||||||
|
title={t('buyWithWyre', [symbol])} |
||||||
|
text={t('buyWithWyreDescription', [symbol])} |
||||||
|
buttonLabel={t('continueToWyre')} |
||||||
|
onButtonClick={() => { |
||||||
|
trackEvent({ |
||||||
|
category: EVENT.CATEGORIES.ACCOUNTS, |
||||||
|
event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED, |
||||||
|
properties: { |
||||||
|
onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.WYRE, |
||||||
|
}, |
||||||
|
}); |
||||||
|
toWyre(); |
||||||
|
}} |
||||||
|
hide={isTokenDeposit || !isBuyableWyreChain} |
||||||
|
/> |
||||||
|
|
||||||
|
<OnRampItem |
||||||
|
logo={<LogoDepositEth width="50px" />} |
||||||
|
title={t('directDepositCrypto', [symbol])} |
||||||
|
text={t('directDepositCryptoExplainer', [symbol])} |
||||||
|
buttonLabel={t('viewAccount')} |
||||||
|
onButtonClick={() => { |
||||||
|
trackEvent({ |
||||||
|
category: EVENT.CATEGORIES.ACCOUNTS, |
||||||
|
event: EVENT_NAMES.ONRAMP_PROVIDER_SELECTED, |
||||||
|
properties: { |
||||||
|
onramp_provider_type: EVENT.ONRAMP_PROVIDER_TYPES.SELF_DEPOSIT, |
||||||
|
}, |
||||||
|
}); |
||||||
|
goToAccountDetailsModal(); |
||||||
|
}} |
||||||
|
hide={isTokenDeposit || !isBuyableWyreChain} |
||||||
|
/> |
||||||
|
|
||||||
|
{networkName && ( |
||||||
|
<OnRampItem |
||||||
|
logo={<i className="fa fa-tint fa-2x" />} |
||||||
|
title={t('testFaucet')} |
||||||
|
text={t('getEtherFromFaucet', [networkName])} |
||||||
|
buttonLabel={t('getEther')} |
||||||
|
onButtonClick={() => toFaucet()} |
||||||
|
hide={!isTestnet} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</Popover> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
DepositPopover.propTypes = { |
||||||
|
onClose: PropTypes.func.isRequired, |
||||||
|
token: PropTypes.shape({ |
||||||
|
address: PropTypes.string.isRequired, |
||||||
|
decimals: PropTypes.number, |
||||||
|
symbol: PropTypes.string, |
||||||
|
image: PropTypes.string, |
||||||
|
aggregators: PropTypes.array, |
||||||
|
isERC721: PropTypes.bool, |
||||||
|
}), |
||||||
|
}; |
||||||
|
|
||||||
|
export default DepositPopover; |
||||||
@ -0,0 +1 @@ |
|||||||
|
export { default } from './deposit-popover'; |
||||||
@ -0,0 +1,67 @@ |
|||||||
|
import React from 'react'; |
||||||
|
import PropTypes from 'prop-types'; |
||||||
|
import Button from '../../ui/button'; |
||||||
|
import Box from '../../ui/box'; |
||||||
|
import Typography from '../../ui/typography'; |
||||||
|
import { COLORS, FRACTIONS } from '../../../helpers/constants/design-system'; |
||||||
|
|
||||||
|
const OnRampItem = ({ |
||||||
|
logo, |
||||||
|
title, |
||||||
|
text, |
||||||
|
buttonLabel, |
||||||
|
onButtonClick, |
||||||
|
hide = false, |
||||||
|
}) => { |
||||||
|
if (hide) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
return ( |
||||||
|
<Box paddingRight={6} paddingLeft={6}> |
||||||
|
<Box |
||||||
|
paddingTop={6} |
||||||
|
paddingBottom={6} |
||||||
|
style={{ |
||||||
|
borderBottomSize: '1px', |
||||||
|
borderBottomColor: COLORS.BORDER_MUTED, |
||||||
|
}} |
||||||
|
> |
||||||
|
<Box width={FRACTIONS.HALF}>{logo}</Box> |
||||||
|
<Typography |
||||||
|
variant="h6" |
||||||
|
fontWeight="bold" |
||||||
|
boxProps={{ |
||||||
|
paddingTop: 2, |
||||||
|
paddingBottom: 2, |
||||||
|
}} |
||||||
|
> |
||||||
|
{title} |
||||||
|
</Typography> |
||||||
|
<Typography |
||||||
|
boxProps={{ |
||||||
|
paddingTop: 2, |
||||||
|
paddingBottom: 2, |
||||||
|
}} |
||||||
|
> |
||||||
|
{text} |
||||||
|
</Typography> |
||||||
|
<Box marginTop={4}> |
||||||
|
<Button type="secondary" onClick={onButtonClick}> |
||||||
|
{buttonLabel} |
||||||
|
</Button> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
OnRampItem.propTypes = { |
||||||
|
logo: PropTypes.node.isRequired, |
||||||
|
title: PropTypes.string.isRequired, |
||||||
|
text: PropTypes.string.isRequired, |
||||||
|
buttonLabel: PropTypes.string.isRequired, |
||||||
|
onButtonClick: PropTypes.func.isRequired, |
||||||
|
hide: PropTypes.bool, |
||||||
|
}; |
||||||
|
|
||||||
|
export default OnRampItem; |
||||||
@ -1,243 +0,0 @@ |
|||||||
import PropTypes from 'prop-types'; |
|
||||||
import React, { Component } from 'react'; |
|
||||||
import { |
|
||||||
NETWORK_TO_NAME_MAP, |
|
||||||
BUYABLE_CHAINS_MAP, |
|
||||||
} from '../../../../../shared/constants/network'; |
|
||||||
import { |
|
||||||
EVENT, |
|
||||||
EVENT_NAMES, |
|
||||||
} from '../../../../../shared/constants/metametrics'; |
|
||||||
import Button from '../../../ui/button'; |
|
||||||
import LogoMoonPay from '../../../ui/logo/logo-moonpay'; |
|
||||||
import LogoWyre from '../../../ui/logo/logo-wyre'; |
|
||||||
import LogoTransak from '../../../ui/logo/logo-transak'; |
|
||||||
import LogoCoinbasePay from '../../../ui/logo/logo-coinbasepay'; |
|
||||||
import LogoDepositEth from '../../../ui/logo/logo-deposit-eth'; |
|
||||||
|
|
||||||
export default class DepositEtherModal extends Component { |
|
||||||
static contextTypes = { |
|
||||||
t: PropTypes.func, |
|
||||||
trackEvent: PropTypes.func.isRequired, |
|
||||||
}; |
|
||||||
|
|
||||||
static propTypes = { |
|
||||||
chainId: PropTypes.string.isRequired, |
|
||||||
isTestnet: PropTypes.bool.isRequired, |
|
||||||
isBuyableTransakChain: PropTypes.bool.isRequired, |
|
||||||
isBuyableMoonPayChain: PropTypes.bool.isRequired, |
|
||||||
isBuyableWyreChain: PropTypes.bool.isRequired, |
|
||||||
isBuyableCoinbasePayChain: PropTypes.bool.isRequired, |
|
||||||
toWyre: PropTypes.func.isRequired, |
|
||||||
toTransak: PropTypes.func.isRequired, |
|
||||||
toMoonPay: PropTypes.func.isRequired, |
|
||||||
toCoinbasePay: PropTypes.func.isRequired, |
|
||||||
address: PropTypes.string.isRequired, |
|
||||||
toFaucet: PropTypes.func.isRequired, |
|
||||||
hideWarning: PropTypes.func.isRequired, |
|
||||||
hideModal: PropTypes.func.isRequired, |
|
||||||
showAccountDetailModal: PropTypes.func.isRequired, |
|
||||||
}; |
|
||||||
|
|
||||||
goToAccountDetailsModal = () => { |
|
||||||
this.props.hideWarning(); |
|
||||||
this.props.hideModal(); |
|
||||||
this.props.showAccountDetailModal(); |
|
||||||
}; |
|
||||||
|
|
||||||
renderRow({ |
|
||||||
logo, |
|
||||||
title, |
|
||||||
text, |
|
||||||
buttonLabel, |
|
||||||
onButtonClick, |
|
||||||
hide, |
|
||||||
className, |
|
||||||
hideButton, |
|
||||||
hideTitle, |
|
||||||
onBackClick, |
|
||||||
showBackButton, |
|
||||||
}) { |
|
||||||
if (hide) { |
|
||||||
return null; |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className={className || 'deposit-ether-modal__buy-row'}> |
|
||||||
{onBackClick && showBackButton && ( |
|
||||||
<div |
|
||||||
className="deposit-ether-modal__buy-row__back" |
|
||||||
onClick={onBackClick} |
|
||||||
> |
|
||||||
<i className="fa fa-arrow-left cursor-pointer" /> |
|
||||||
</div> |
|
||||||
)} |
|
||||||
<div className="deposit-ether-modal__buy-row__logo-container"> |
|
||||||
{logo} |
|
||||||
</div> |
|
||||||
<div className="deposit-ether-modal__buy-row__description"> |
|
||||||
{!hideTitle && ( |
|
||||||
<div className="deposit-ether-modal__buy-row__description__title"> |
|
||||||
{title} |
|
||||||
</div> |
|
||||||
)} |
|
||||||
<div className="deposit-ether-modal__buy-row__description__text"> |
|
||||||
{text} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
{!hideButton && ( |
|
||||||
<div className="deposit-ether-modal__buy-row__button"> |
|
||||||
<Button |
|
||||||
type="secondary" |
|
||||||
className="deposit-ether-modal__deposit-button" |
|
||||||
large |
|
||||||
onClick={onButtonClick} |
|
||||||
> |
|
||||||
{buttonLabel} |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
)} |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
render() { |
|
||||||
const { |
|
||||||
chainId, |
|
||||||
toWyre, |
|
||||||
toTransak, |
|
||||||
toMoonPay, |
|
||||||
toCoinbasePay, |
|
||||||
address, |
|
||||||
toFaucet, |
|
||||||
isTestnet, |
|
||||||
isBuyableTransakChain, |
|
||||||
isBuyableMoonPayChain, |
|
||||||
isBuyableWyreChain, |
|
||||||
isBuyableCoinbasePayChain, |
|
||||||
} = this.props; |
|
||||||
const { t } = this.context; |
|
||||||
const networkName = NETWORK_TO_NAME_MAP[chainId]; |
|
||||||
const symbol = BUYABLE_CHAINS_MAP[chainId].nativeCurrency; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div className="page-container page-container--full-width page-container--full-height"> |
|
||||||
<div className="page-container__header"> |
|
||||||
<div className="page-container__title"> |
|
||||||
{t('depositCrypto', [symbol])} |
|
||||||
</div> |
|
||||||
<div className="page-container__subtitle"> |
|
||||||
{t('needCryptoInWallet', [symbol])} |
|
||||||
</div> |
|
||||||
<div |
|
||||||
className="page-container__header-close" |
|
||||||
onClick={() => { |
|
||||||
this.props.hideWarning(); |
|
||||||
this.props.hideModal(); |
|
||||||
}} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
<div className="page-container__content"> |
|
||||||
<div className="deposit-ether-modal__buy-rows"> |
|
||||||
{this.renderRow({ |
|
||||||
logo: <LogoCoinbasePay className="deposit-ether-modal__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: <LogoTransak className="deposit-ether-modal__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: <LogoMoonPay className="deposit-ether-modal__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: <LogoWyre className="deposit-ether-modal__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: ( |
|
||||||
<LogoDepositEth className="deposit-ether-modal__logo--lg" /> |
|
||||||
), |
|
||||||
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: <i className="fa fa-tint fa-2x" />, |
|
||||||
title: t('testFaucet'), |
|
||||||
text: t('getEtherFromFaucet', [networkName]), |
|
||||||
buttonLabel: t('getEther'), |
|
||||||
onButtonClick: () => toFaucet(chainId), |
|
||||||
hide: !isTestnet, |
|
||||||
})} |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -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); |
|
||||||
@ -1 +0,0 @@ |
|||||||
export { default } from './deposit-ether-modal.container'; |
|
||||||
@ -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; |
|
||||||
} |
|
||||||
} |
|
||||||
Loading…
Reference in new issue