import React, {Component, PropTypes} from 'react'
import classnames from 'classnames'
import {connect} from 'react-redux'
import {qrcode} from 'qrcode-npm'
import Identicon from '../../../../ui/app/components/identicon'
class BuyEtherScreen extends Component {
static OPTION_VALUES = {
COINBASE: 'coinbase',
SHAPESHIFT: 'shapeshift',
QR_CODE: 'qr_code',
};
static OPTIONS = [
{
name: 'Buy with Dollars',
value: BuyEtherScreen.OPTION_VALUES.COINBASE
},
{
name: 'Buy with Bitcoin',
value: BuyEtherScreen.OPTION_VALUES.SHAPESHIFT
},
{
name: 'Deposit Ether',
value: BuyEtherScreen.OPTION_VALUES.QR_CODE
},
];
static propTypes = {
address: PropTypes.string,
}
state = {
selectedOption: BuyEtherScreen.OPTION_VALUES.COINBASE,
}
renderCoinbaseLogo() {
return (
);
}
renderShapeShiftLogo() {
return (
)
}
renderContent() {
const { OPTION_VALUES } = BuyEtherScreen;
const { address } = this.props;
switch (this.state.selectedOption) {
case OPTION_VALUES.COINBASE:
return (
{this.renderCoinbaseLogo()}
Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.
What is Ethereum?
)
case OPTION_VALUES.SHAPESHIFT:
return (
{this.renderShapeShiftLogo()}
Trade any leading blockchain asset for any other. Protection by Design. No Account Needed.
)
case OPTION_VALUES.QR_CODE:
const qrImage = qrcode(4, 'M')
qrImage.addData(address)
qrImage.make()
return (
Deposit Ether directly into your account.
(This is the account address that MetaMask created for you to recieve funds.)
)
default:
return null;
}
}
render() {
const { OPTIONS } = BuyEtherScreen;
const { selectedOption } = this.state;
return (
Buy Ether
MetaMask works best if you have Ether in your account to pay for transaction gas fees and more. To get Ether, choose from one of these methods.
Purchasing Options
{OPTIONS.map(({ name, value }) => (
this.setState({ selectedOption: value })}
>
{name}
{value === selectedOption && (
)}
))}
{this.renderContent()}
)
}
}
export default connect(
({ metamask: { identities } }) => ({
address: Object.entries(identities)
.map(([key]) => key)[0]
})
)(BuyEtherScreen)