diff options
author | Mark Stacey <markjstacey@gmail.com> | 2019-06-25 00:47:48 +0800 |
---|---|---|
committer | Dan J Miller <danjm.com@gmail.com> | 2019-06-25 00:47:48 +0800 |
commit | 313def1ce2459e30e12572e28605da13c5fe3fbe (patch) | |
tree | b302bf9b7ad026d3bf9020c838521443c1a3ea81 /ui/app/components | |
parent | a257a73172cb8d51db20461b982b9b4accb2a429 (diff) | |
download | tangerine-wallet-browser-313def1ce2459e30e12572e28605da13c5fe3fbe.tar.gz tangerine-wallet-browser-313def1ce2459e30e12572e28605da13c5fe3fbe.tar.zst tangerine-wallet-browser-313def1ce2459e30e12572e28605da13c5fe3fbe.zip |
Remove shapeshift deposit form (#6746)
Closes #6478
Diffstat (limited to 'ui/app/components')
-rw-r--r-- | ui/app/components/app/modals/deposit-ether-modal.js | 36 | ||||
-rw-r--r-- | ui/app/components/app/modals/modal.js | 8 | ||||
-rw-r--r-- | ui/app/components/app/modals/shapeshift-deposit-tx-modal.js | 40 | ||||
-rw-r--r-- | ui/app/components/app/shapeshift-form.js | 256 |
4 files changed, 2 insertions, 338 deletions
diff --git a/ui/app/components/app/modals/deposit-ether-modal.js b/ui/app/components/app/modals/deposit-ether-modal.js index f56069d65..20c4d018c 100644 --- a/ui/app/components/app/modals/deposit-ether-modal.js +++ b/ui/app/components/app/modals/deposit-ether-modal.js @@ -5,7 +5,6 @@ const inherits = require('util').inherits const connect = require('react-redux').connect const actions = require('../../../store/actions') const { getNetworkDisplayName } = require('../../../../../app/scripts/controllers/network/util') -const ShapeshiftForm = require('../shapeshift-form') import Button from '../../ui/button' @@ -13,8 +12,6 @@ let DIRECT_DEPOSIT_ROW_TITLE let DIRECT_DEPOSIT_ROW_TEXT let WYRE_ROW_TITLE let WYRE_ROW_TEXT -let SHAPESHIFT_ROW_TITLE -let SHAPESHIFT_ROW_TEXT let FAUCET_ROW_TITLE let COINSWITCH_ROW_TITLE let COINSWITCH_ROW_TEXT @@ -56,15 +53,9 @@ function DepositEtherModal (_, context) { DIRECT_DEPOSIT_ROW_TEXT = context.t('directDepositEtherExplainer') WYRE_ROW_TITLE = context.t('buyWithWyre') WYRE_ROW_TEXT = context.t('buyWithWyreDescription') - SHAPESHIFT_ROW_TITLE = context.t('depositShapeShift') - SHAPESHIFT_ROW_TEXT = context.t('depositShapeShiftExplainer') FAUCET_ROW_TITLE = context.t('testFaucet') COINSWITCH_ROW_TITLE = context.t('buyCoinSwitch') COINSWITCH_ROW_TEXT = context.t('buyCoinSwitchExplainer') - - this.state = { - buyingWithShapeshift: false, - } } DepositEtherModal.contextTypes = { @@ -131,7 +122,6 @@ DepositEtherModal.prototype.renderRow = function ({ DepositEtherModal.prototype.render = function () { const { network, toWyre, toCoinSwitch, address, toFaucet } = this.props - const { buyingWithShapeshift } = this.state const isTestNetwork = ['3', '4', '5', '42'].find(n => n === network) const networkName = getNetworkDisplayName(network) @@ -148,7 +138,6 @@ DepositEtherModal.prototype.render = function () { h('div.page-container__header-close', { onClick: () => { - this.setState({ buyingWithShapeshift: false }) this.props.hideWarning() this.props.hideModal() }, @@ -168,7 +157,6 @@ DepositEtherModal.prototype.render = function () { text: DIRECT_DEPOSIT_ROW_TEXT, buttonLabel: this.context.t('viewAccount'), onButtonClick: () => this.goToAccountDetailsModal(), - hide: buyingWithShapeshift, }), this.renderRow({ @@ -177,7 +165,7 @@ DepositEtherModal.prototype.render = function () { text: this.facuetRowText(networkName), buttonLabel: this.context.t('getEther'), onButtonClick: () => toFaucet(network), - hide: !isTestNetwork || buyingWithShapeshift, + hide: !isTestNetwork, }), this.renderRow({ @@ -191,7 +179,7 @@ DepositEtherModal.prototype.render = function () { text: WYRE_ROW_TEXT, buttonLabel: this.context.t('continueToWyre'), onButtonClick: () => toWyre(address), - hide: isTestNetwork || buyingWithShapeshift, + hide: isTestNetwork, }), this.renderRow({ @@ -205,29 +193,9 @@ DepositEtherModal.prototype.render = function () { text: COINSWITCH_ROW_TEXT, buttonLabel: this.context.t('continueToCoinSwitch'), onButtonClick: () => toCoinSwitch(address), - hide: isTestNetwork || buyingWithShapeshift, - }), - - this.renderRow({ - logo: h('div.deposit-ether-modal__logo', { - style: { - backgroundImage: 'url(\'./images/shapeshift logo.png\')', - }, - }), - title: SHAPESHIFT_ROW_TITLE, - text: SHAPESHIFT_ROW_TEXT, - buttonLabel: this.context.t('shapeshiftBuy'), - onButtonClick: () => this.setState({ buyingWithShapeshift: true }), hide: isTestNetwork, - hideButton: buyingWithShapeshift, - hideTitle: buyingWithShapeshift, - onBackClick: () => this.setState({ buyingWithShapeshift: false }), - showBackButton: this.state.buyingWithShapeshift, - className: buyingWithShapeshift && 'deposit-ether-modal__buy-row__shapeshift-buy', }), - buyingWithShapeshift && h(ShapeshiftForm), - ]), ]), diff --git a/ui/app/components/app/modals/modal.js b/ui/app/components/app/modals/modal.js index 717f623af..90432da96 100644 --- a/ui/app/components/app/modals/modal.js +++ b/ui/app/components/app/modals/modal.js @@ -16,7 +16,6 @@ const AccountDetailsModal = require('./account-details-modal') const EditAccountNameModal = require('./edit-account-name-modal') const ExportPrivateKeyModal = require('./export-private-key-modal') const NewAccountModal = require('./new-account-modal') -const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js') const HideTokenConfirmationModal = require('./hide-token-confirmation-modal') const NotifcationModal = require('./notification-modal') const QRScanner = require('./qr-scanner') @@ -181,13 +180,6 @@ const MODALS = { ...accountModalStyle, }, - SHAPESHIFT_DEPOSIT_TX: { - contents: [ - h(ShapeshiftDepositTxModal), - ], - ...accountModalStyle, - }, - HIDE_TOKEN_CONFIRMATION: { contents: [ h(HideTokenConfirmationModal, {}, []), diff --git a/ui/app/components/app/modals/shapeshift-deposit-tx-modal.js b/ui/app/components/app/modals/shapeshift-deposit-tx-modal.js deleted file mode 100644 index ada9430f7..000000000 --- a/ui/app/components/app/modals/shapeshift-deposit-tx-modal.js +++ /dev/null @@ -1,40 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const connect = require('react-redux').connect -const actions = require('../../../store/actions') -const QrView = require('../../ui/qr-code') -const AccountModalContainer = require('./account-modal-container') - -function mapStateToProps (state) { - return { - Qr: state.appState.modal.modalState.props.Qr, - } -} - -function mapDispatchToProps (dispatch) { - return { - hideModal: () => { - dispatch(actions.hideModal()) - }, - } -} - -inherits(ShapeshiftDepositTxModal, Component) -function ShapeshiftDepositTxModal () { - Component.call(this) - -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftDepositTxModal) - -ShapeshiftDepositTxModal.prototype.render = function () { - const { Qr } = this.props - - return h(AccountModalContainer, { - }, [ - h('div', {}, [ - h(QrView, {key: 'qr', Qr}), - ]), - ]) -} diff --git a/ui/app/components/app/shapeshift-form.js b/ui/app/components/app/shapeshift-form.js deleted file mode 100644 index 34a6f3acd..000000000 --- a/ui/app/components/app/shapeshift-form.js +++ /dev/null @@ -1,256 +0,0 @@ -const h = require('react-hyperscript') -const inherits = require('util').inherits -const PropTypes = require('prop-types') -const Component = require('react').Component -const connect = require('react-redux').connect -const classnames = require('classnames') -const qrcode = require('qrcode-generator') -const { shapeShiftSubview, pairUpdate, buyWithShapeShift } = require('../../store/actions') -const { isValidAddress } = require('../../helpers/utils/util') -const SimpleDropdown = require('./dropdowns/simple-dropdown') - -import Button from '../ui/button' - -function mapStateToProps (state) { - const { - coinOptions, - tokenExchangeRates, - selectedAddress, - } = state.metamask - const { warning } = state.appState - - return { - coinOptions, - tokenExchangeRates, - selectedAddress, - warning, - } -} - -function mapDispatchToProps (dispatch) { - return { - shapeShiftSubview: () => dispatch(shapeShiftSubview()), - pairUpdate: coin => dispatch(pairUpdate(coin)), - buyWithShapeShift: data => dispatch(buyWithShapeShift(data)), - } -} - -ShapeshiftForm.contextTypes = { - t: PropTypes.func, -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(ShapeshiftForm) - - -inherits(ShapeshiftForm, Component) -function ShapeshiftForm () { - Component.call(this) - - this.state = { - depositCoin: 'btc', - refundAddress: '', - showQrCode: false, - depositAddress: '', - errorMessage: '', - isLoading: false, - bought: false, - } -} - -ShapeshiftForm.prototype.getCoinPair = function () { - return `${this.state.depositCoin.toUpperCase()}_ETH` -} - -ShapeshiftForm.prototype.componentWillMount = function () { - this.props.shapeShiftSubview() -} - -ShapeshiftForm.prototype.onCoinChange = function (coin) { - this.setState({ - depositCoin: coin, - errorMessage: '', - }) - this.props.pairUpdate(coin) -} - -ShapeshiftForm.prototype.onBuyWithShapeShift = function () { - 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: this.context.t('invalidRequest'), - isLoading: false, - })) - } -} - -ShapeshiftForm.prototype.renderMetadata = function (label, value) { - return h('div', {className: 'shapeshift-form__metadata-wrapper'}, [ - - h('div.shapeshift-form__metadata-label', {}, [ - h('span', `${label}:`), - ]), - - h('div.shapeshift-form__metadata-value', {}, [ - h('span', value), - ]), - - ]) -} - -ShapeshiftForm.prototype.renderMarketInfo = function () { - const { tokenExchangeRates } = this.props - const { - limit, - rate, - minimum, - } = tokenExchangeRates[this.getCoinPair()] || {} - - return h('div.shapeshift-form__metadata', {}, [ - - this.renderMetadata(this.context.t('status'), limit ? this.context.t('available') : this.context.t('unavailable')), - this.renderMetadata(this.context.t('limit'), limit), - this.renderMetadata(this.context.t('exchangeRate'), rate), - this.renderMetadata(this.context.t('min'), minimum), - - ]) -} - -ShapeshiftForm.prototype.renderQrCode = function () { - const { depositAddress, isLoading, depositCoin } = this.state - const qrImage = qrcode(4, 'M') - qrImage.addData(depositAddress) - qrImage.make() - - return h('div.shapeshift-form', {}, [ - - h('div.shapeshift-form__deposit-instruction', [ - this.context.t('depositCoin', [depositCoin.toUpperCase()]), - ]), - - h('div', depositAddress), - - h('div.shapeshift-form__qr-code', [ - isLoading - ? h('img', { - src: 'images/loading.svg', - style: { width: '60px'}, - }) - : h('div', { - dangerouslySetInnerHTML: { __html: qrImage.createTableTag(4) }, - }), - ]), - - this.renderMarketInfo(), - - ]) -} - - -ShapeshiftForm.prototype.render = function () { - const { coinOptions, btnClass, warning } = this.props - const { errorMessage, showQrCode, depositAddress } = this.state - const { tokenExchangeRates } = this.props - const token = tokenExchangeRates[this.getCoinPair()] - - return h('div.shapeshift-form-wrapper', [ - showQrCode - ? this.renderQrCode() - : h('div.modal-shapeshift-form', [ - h('div.shapeshift-form__selectors', [ - - h('div.shapeshift-form__selector', [ - - h('div.shapeshift-form__selector-label', this.context.t('deposit')), - - h(SimpleDropdown, { - selectedOption: this.state.depositCoin, - onSelect: (coin) => this.onCoinChange(coin), - options: Object.entries(coinOptions).map(([coin]) => ({ - value: coin.toLowerCase(), - displayValue: coin, - })), - }), - - ]), - - h('div.icon.shapeshift-form__caret', { - style: { backgroundImage: 'url(images/caret-right.svg)'}, - }), - - h('div.shapeshift-form__selector', [ - - h('div.shapeshift-form__selector-label', [ - this.context.t('receive'), - ]), - - h('div.shapeshift-form__selector-input', ['ETH']), - - ]), - - ]), - - warning && h('div.shapeshift-form__address-input-label', warning), - - !warning && h('div', { - className: classnames('shapeshift-form__address-input-wrapper', { - 'shapeshift-form__address-input-wrapper--error': errorMessage, - }), - }, [ - - h('div.shapeshift-form__address-input-label', [ - this.context.t('refundAddress'), - ]), - - h('input.shapeshift-form__address-input', { - type: 'text', - onChange: e => this.setState({ - refundAddress: e.target.value, - errorMessage: '', - }), - }), - - h('divshapeshift-form__address-input-error-message', [errorMessage]), - ]), - - !warning && this.renderMarketInfo(), - - ]), - - !depositAddress && h(Button, { - type: 'secondary', - large: true, - className: `${btnClass} shapeshift-form__shapeshift-buy-btn`, - disabled: !token, - onClick: () => this.onBuyWithShapeShift(), - }, [this.context.t('buy')]), - - ]) -} |