import React, {Component, PropTypes} from 'react'
import classnames from 'classnames'
import {connect} from 'react-redux'
import {qrcode} from 'qrcode-npm'
import copyToClipboard from 'copy-to-clipboard'
import Identicon from '../../../../ui/app/components/identicon'
import {buyEth, showAccountDetail} from '../../../../ui/app/actions'
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,
goToCoinbase: PropTypes.func.isRequired,
showAccountDetail: PropTypes.func.isRequired,
}
state = {
selectedOption: BuyEtherScreen.OPTION_VALUES.COINBASE,
justCopied: false
}
copyToClipboard = () => {
const { address } = this.props;
this.setState({ justCopied: true }, () => copyToClipboard(address))
setTimeout(() => this.setState({ justCopied: false }), 1000)
}
renderSkip() {
const {showAccountDetail, address} = this.props
return (
showAccountDetail(address)}
>
Do it later
{this.renderCoinbaseLogo()}
Coinbase is the world’s most popular way to buy and sell bitcoin, ethereum, and litecoin.
What is Ethereum?
)
}
renderContent() {
const { OPTION_VALUES } = BuyEtherScreen
const { address, goToCoinbase } = this.props
const { justCopied } = this.state
switch (this.state.selectedOption) {
case OPTION_VALUES.COINBASE:
return this.renderCoinbaseForm()
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.renderSkip()}
{this.renderContent()}
)
}
}
export default connect(
({ metamask: { selectedAddress } }) => ({
address: selectedAddress
}),
dispatch => ({
goToCoinbase: address => dispatch(buyEth({ network: '1', address, amount: 0 })),
showAccountDetail: address => dispatch(showAccountDetail(address)),
})
)(BuyEtherScreen)