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 {buyEth, showAccountDetail} from '../../../../ui/app/actions'
const OPTION_VALUES = {
COINBASE: 'coinbase',
SHAPESHIFT: 'shapeshift',
QR_CODE: 'qr_code',
}
const OPTIONS = [
{
name: 'Direct Deposit',
value: OPTION_VALUES.QR_CODE,
},
{
name: 'Buy with Dollars',
value: OPTION_VALUES.COINBASE,
},
{
name: 'Buy with Cryptos',
value: OPTION_VALUES.SHAPESHIFT,
},
]
class BuyEtherWidget extends Component {
static propTypes = {
address: PropTypes.string,
skipText: PropTypes.string,
className: PropTypes.string,
onSkip: PropTypes.func,
goToCoinbase: PropTypes.func,
showAccountDetail: PropTypes.func,
};
state = {
selectedOption: OPTION_VALUES.QR_CODE,
};
copyToClipboard = () => {
const { address } = this.props
this.setState({ justCopied: true }, () => copyToClipboard(address))
setTimeout(() => this.setState({ justCopied: false }), 1000)
}
renderSkip () {
const {showAccountDetail, address, skipText, onSkip} = this.props
return (
{
if (onSkip) return onSkip()
showAccountDetail(address)
}}
>
{skipText || '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 { 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 { className = '' } = this.props
const { selectedOption } = this.state
return (
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)),
})
)(BuyEtherWidget)