aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--ui/app/actions.js5
-rw-r--r--ui/app/app.js33
-rw-r--r--ui/app/components/modals/account-modal-container.js6
-rw-r--r--ui/app/components/modals/modal.js8
-rw-r--r--ui/app/components/modals/shapeshift-deposit-tx-modal.js40
-rw-r--r--ui/app/components/tx-list.js2
-rw-r--r--ui/app/css/itcss/components/modal.scss14
7 files changed, 65 insertions, 43 deletions
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;