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