From ff64fe98dde7746775396cbf94d63a1a0e91d069 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 29 Sep 2017 13:10:57 -0230 Subject: Shapeshift deposit tx modal. --- ui/app/actions.js | 5 ++- ui/app/app.js | 33 ------------------ .../components/modals/account-modal-container.js | 6 +++- ui/app/components/modals/modal.js | 8 +++++ .../modals/shapeshift-deposit-tx-modal.js | 40 ++++++++++++++++++++++ ui/app/components/tx-list.js | 2 +- ui/app/css/itcss/components/modal.scss | 14 ++++---- 7 files changed, 65 insertions(+), 43 deletions(-) create mode 100644 ui/app/components/modals/shapeshift-deposit-tx-modal.js (limited to 'ui') diff --git a/ui/app/actions.js b/ui/app/actions.js index ff3240abf..1f3726f46 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -1151,7 +1151,10 @@ function reshowQrCode (data, coin) { ] dispatch(actions.hideLoadingIndication()) - return dispatch(actions.showQrView(data, message)) + return dispatch(actions.showModal({ + name: 'SHAPESHIFT_DEPOSIT_TX', + Qr: { data, message }, + })) }) } } diff --git a/ui/app/app.js b/ui/app/app.js index cf9850f9f..583497cb3 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -26,7 +26,6 @@ const InfoScreen = require('./info') const Loading = require('./components/loading') const NetworkIndicator = require('./components/network') const BuyView = require('./components/buy-button-subview') -const QrView = require('./components/qr-code') const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') @@ -72,7 +71,6 @@ function mapStateToProps (state) { lastUnreadNotice: state.metamask.lastUnreadNotice, lostAccounts: state.metamask.lostAccounts, frequentRpcList: state.metamask.frequentRpcList || [], - Qr: state.appState.Qr, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -372,37 +370,6 @@ App.prototype.renderPrimary = function () { log.debug('rendering buy ether screen') return h(BuyView, {key: 'buyEthView'}) - case 'qr': - log.debug('rendering show qr screen') - return h('div', { - style: { - position: 'absolute', - height: '100%', - top: '0px', - left: '0px', - }, - }, [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { - onClick: () => props.dispatch(actions.backToAccountDetail(props.activeAddress)), - style: { - marginLeft: '10px', - marginTop: '50px', - }, - }), - h('div', { - style: { - position: 'absolute', - left: '44px', - width: '285px', - }, - }, [ - h(QrView, { - key: 'qr', - Qr: props.Qr, - }), - ]), - ]) - default: log.debug('rendering default, account detail screen') return h(MainContainer, {key: 'account-detail'}) diff --git a/ui/app/components/modals/account-modal-container.js b/ui/app/components/modals/account-modal-container.js index 3cad72067..c548fb7b3 100644 --- a/ui/app/components/modals/account-modal-container.js +++ b/ui/app/components/modals/account-modal-container.js @@ -30,10 +30,14 @@ module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountModalContai AccountModalContainer.prototype.render = function () { const { selectedIdentity, - children, showBackButton = false, backButtonAction, } = this.props + let { children } = this.props + + if (children.constructor !== Array) { + children = [children] + } return h('div', { style: { borderRadius: '4px' }}, [ h('div.account-modal-container', [ diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 2bd56fb0a..765e46312 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -13,6 +13,7 @@ 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 accountModalStyle = { mobileModalStyle: { @@ -109,6 +110,13 @@ const MODALS = { ...accountModalStyle, }, + SHAPESHIFT_DEPOSIT_TX: { + contents: [ + h(ShapeshiftDepositTxModal), + ], + ...accountModalStyle, + }, + NEW_ACCOUNT: { contents: [ h(NewAccountModal, {}, []), diff --git a/ui/app/components/modals/shapeshift-deposit-tx-modal.js b/ui/app/components/modals/shapeshift-deposit-tx-modal.js new file mode 100644 index 000000000..1fd1ade00 --- /dev/null +++ b/ui/app/components/modals/shapeshift-deposit-tx-modal.js @@ -0,0 +1,40 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const connect = require('react-redux').connect +const actions = require('../../actions') +const QrView = require('../qr-code') +const AccountModalContainer = require('./account-modal-container') + +function mapStateToProps (state) { + return { + Qr: state.appState.modal.modalState.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/tx-list.js b/ui/app/components/tx-list.js index 82541704e..97d937aca 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -57,7 +57,7 @@ TxList.prototype.renderTransaction = function () { TxList.prototype.renderTransactionListItem = function (transaction, conversionRate) { // console.log({transaction}) // refer to transaction-list.js:line 58 - const shapeshiftProps = {}; + if (transaction.key === 'shapeshift') { return h(ShiftListItem, transaction) } diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index fd61ad4f4..ccfaa7db5 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -17,6 +17,13 @@ color: #5B5D67; } +.qr-ellip-address, .ellip-address { + width: 247px; + border: none; + font-family: 'Montserrat Light'; + font-size: 14px; +} + @media screen and (max-width: 575px) { .buy-modal-content-title-wrapper { justify-content: space-around; @@ -250,13 +257,6 @@ width: 286px; } - .qr-ellip-address, .ellip-address { - width: 247px; - border: none; - font-family: 'Montserrat Light'; - font-size: 14px; - } - .btn-clear { min-height: 28px; font-size: 14px; -- cgit