From e89ae877aa70541bdca1fafd5e50926200c85214 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 24 Oct 2017 22:21:30 -0700 Subject: Add BuyEtherWidget for future use in buy ether modal --- mascara/src/app/buy-ether-widget/index.js | 197 ++++++++++++++++++++++++++++++ 1 file changed, 197 insertions(+) create mode 100644 mascara/src/app/buy-ether-widget/index.js (limited to 'mascara') diff --git a/mascara/src/app/buy-ether-widget/index.js b/mascara/src/app/buy-ether-widget/index.js new file mode 100644 index 000000000..9fe659daa --- /dev/null +++ b/mascara/src/app/buy-ether-widget/index.js @@ -0,0 +1,197 @@ +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) -- cgit v1.2.3 From ec6c3c33bdbe2d90dc71649d0cc5fb3c07d96af7 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 5 Dec 2017 13:11:59 -0330 Subject: Merge branch 'master' into NewUI-flat-merge-with-master --- mascara/src/app/first-time/notice-screen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'mascara') diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js index 713f3f242..d09070a95 100644 --- a/mascara/src/app/first-time/notice-screen.js +++ b/mascara/src/app/first-time/notice-screen.js @@ -64,7 +64,7 @@ class NoticeScreen extends Component {
{title}
-- cgit v1.2.3