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 ShapeShiftForm from '../shapeshift-form'
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: 'Direct Deposit',
value: BuyEtherScreen.OPTION_VALUES.QR_CODE,
},
{
name: 'Buy with Dollars',
value: BuyEtherScreen.OPTION_VALUES.COINBASE,
},
{
name: 'Buy with Cryptos',
value: BuyEtherScreen.OPTION_VALUES.SHAPESHIFT,
},
];
static propTypes = {
address: PropTypes.string,
goToCoinbase: PropTypes.func.isRequired,
showAccountDetail: PropTypes.func.isRequired,
}
state = {
selectedOption: BuyEtherScreen.OPTION_VALUES.QR_CODE,
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
)
}
renderCoinbaseLogo () {
return (
)
}
renderCoinbaseForm () {
const {goToCoinbase, address} = this.props
return (
{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 } = this.props
const { justCopied } = this.state
const qrImage = qrcode(4, 'M')
qrImage.addData(address)
qrImage.make()
switch (this.state.selectedOption) {
case OPTION_VALUES.COINBASE:
return this.renderCoinbaseForm()
case OPTION_VALUES.SHAPESHIFT:
return (
Trade any leading blockchain asset for any other. Protection by Design. No Account Needed.
)
case OPTION_VALUES.QR_CODE:
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 (
Deposit 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.
Deposit Options
{this.renderSkip()}
{OPTIONS.map(({ name, value }) => (
this.setState({ selectedOption: value })}
>
{name}
{value === selectedOption && (
)}
))}
{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)