1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-11 20:27:12 +01:00
metamask-extension/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js

235 lines
7.8 KiB
JavaScript
Raw Normal View History

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import {
NETWORK_TO_NAME_MAP,
BUYABLE_CHAINS_MAP,
} from '../../../../../shared/constants/network';
import { EVENT } 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,
2022-03-29 15:46:24 +02:00
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();
};
2020-11-03 00:41:28 +01:00
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 && (
2020-11-03 00:41:28 +01:00
<div
className="deposit-ether-modal__buy-row__back"
onClick={onBackClick}
>
<i className="fa fa-arrow-left cursor-pointer" />
</div>
)}
2020-11-03 00:41:28 +01:00
<div className="deposit-ether-modal__buy-row__logo-container">
{logo}
</div>
<div className="deposit-ether-modal__buy-row__description">
{!hideTitle && (
2020-11-03 00:41:28 +01:00
<div className="deposit-ether-modal__buy-row__description__title">
{title}
</div>
)}
2020-11-03 00:41:28 +01:00
<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>
);
}
2020-11-03 00:41:28 +01:00
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 (
2020-11-03 00:41:28 +01:00
<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: 'Click buy Ether via Coinbase Pay',
properties: {
action: 'Deposit Ether',
legacy_event: true,
},
});
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: () => {
2022-03-29 15:46:24 +02:00
this.context.trackEvent({
category: EVENT.CATEGORIES.ACCOUNTS,
2022-03-29 15:46:24 +02:00
event: 'Click buy Ether via Transak',
properties: {
action: 'Deposit Ether',
2022-03-29 15:46:24 +02:00
legacy_event: true,
},
});
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: 'Click buy Ether via MoonPay',
properties: {
action: 'Deposit Ether',
legacy_event: true,
},
});
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: 'Click buy Ether via Wyre',
properties: {
action: 'Deposit Ether',
legacy_event: true,
},
});
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.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>
);
}
}