Shapeshift deposit tx modal.

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;