diff --git a/mascara/src/app/buy-ether-widget/index.js b/mascara/src/app/buy-ether-widget/index.js deleted file mode 100644 index d0d6ff343..000000000 --- a/mascara/src/app/buy-ether-widget/index.js +++ /dev/null @@ -1,198 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import classnames from 'classnames' -import {connect} from 'react-redux' -import {qrcode} from 'qrcode-generator' -import copyToClipboard from 'copy-to-clipboard' -import ShapeShiftForm from '../shapeshift-form' -import {buyEth, showAccountDetail} from '../../../../ui/app/store/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) diff --git a/mascara/src/app/shapeshift-form/index.js b/mascara/src/app/shapeshift-form/index.js deleted file mode 100644 index c044f9ecc..000000000 --- a/mascara/src/app/shapeshift-form/index.js +++ /dev/null @@ -1,218 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import classnames from 'classnames' -import qrcode from 'qrcode-generator' -import {connect} from 'react-redux' -import {shapeShiftSubview, pairUpdate, buyWithShapeShift} from '../../../../ui/app/store/actions' -import {isValidAddress} from '../../../../ui/app/helpers/utils/util' - -export class ShapeShiftForm extends Component { - static propTypes = { - selectedAddress: PropTypes.string.isRequired, - btnClass: PropTypes.string.isRequired, - tokenExchangeRates: PropTypes.object.isRequired, - coinOptions: PropTypes.object.isRequired, - shapeShiftSubview: PropTypes.func.isRequired, - pairUpdate: PropTypes.func.isRequired, - buyWithShapeShift: PropTypes.func.isRequired, - }; - - state = { - depositCoin: 'btc', - refundAddress: '', - showQrCode: false, - depositAddress: '', - errorMessage: '', - isLoading: false, - }; - - componentWillMount () { - this.props.shapeShiftSubview() - } - - onCoinChange = e => { - const coin = e.target.value - this.setState({ - depositCoin: coin, - errorMessage: '', - }) - this.props.pairUpdate(coin) - } - - onBuyWithShapeShift = () => { - this.setState({ - isLoading: true, - showQrCode: true, - }) - - const { - buyWithShapeShift, - selectedAddress: withdrawal, - } = this.props - const { - refundAddress: returnAddress, - depositCoin, - } = this.state - const pair = `${depositCoin}_eth` - const data = { - withdrawal, - pair, - returnAddress, - // Public api key - 'apiKey': '803d1f5df2ed1b1476e4b9e6bcd089e34d8874595dda6a23b67d93c56ea9cc2445e98a6748b219b2b6ad654d9f075f1f1db139abfa93158c04e825db122c14b6', - } - - if (isValidAddress(withdrawal)) { - buyWithShapeShift(data) - .then(d => this.setState({ - showQrCode: true, - depositAddress: d.deposit, - isLoading: false, - })) - .catch(() => this.setState({ - showQrCode: false, - errorMessage: 'Invalid Request', - isLoading: false, - })) - } - } - - renderMetadata (label, value) { - return ( -
-
- {label}: -
-
- {value} -
-
- ) - } - - renderMarketInfo () { - const { depositCoin } = this.state - const coinPair = `${depositCoin}_eth` - const { tokenExchangeRates } = this.props - const { - limit, - rate, - minimum, - } = tokenExchangeRates[coinPair] || {} - - return ( -
- {this.renderMetadata('Status', limit ? 'Available' : 'Unavailable')} - {this.renderMetadata('Limit', limit)} - {this.renderMetadata('Exchange Rate', rate)} - {this.renderMetadata('Minimum', minimum)} -
- ) - } - - renderQrCode () { - const { depositAddress, isLoading } = this.state - const qrImage = qrcode(4, 'M') - qrImage.addData(depositAddress) - qrImage.make() - - return ( -
-
- Deposit your BTC to the address bellow: -
-
- {isLoading - ? - :
- } -
- {this.renderMarketInfo()} -
- ) - } - - render () { - const { coinOptions, btnClass } = this.props - const { depositCoin, errorMessage, showQrCode } = this.state - const coinPair = `${depositCoin}_eth` - const { tokenExchangeRates } = this.props - const token = tokenExchangeRates[coinPair] - - return showQrCode ? this.renderQrCode() : ( -
-
-
-
-
- Deposit -
- -
-
-
-
- Receive -
-
- ETH -
-
-
-
-
- Your Refund Address -
- this.setState({ - refundAddress: e.target.value, - errorMessage: '', - })} - /> -
- {errorMessage} -
-
- {this.renderMarketInfo()} -
- -
- ) - } -} - -export default connect( - ({ metamask: { coinOptions, tokenExchangeRates, selectedAddress } }) => ({ - coinOptions, tokenExchangeRates, selectedAddress, - }), - dispatch => ({ - shapeShiftSubview: () => dispatch(shapeShiftSubview()), - pairUpdate: coin => dispatch(pairUpdate(coin)), - buyWithShapeShift: data => dispatch(buyWithShapeShift(data)), - }) -)(ShapeShiftForm)