4 files changed, 198 insertions, 4 deletions
diff --git a/ui/app/components/qr-code.js b/ui/app/components/qr-code.js
index f8cace4e0..c26b02b94 100644
--- a/ui/app/components/qr-code.js
+++ b/ui/app/components/qr-code.js
@@ -10,6 +10,7 @@ function mapStateToProps (state) {
   return {
     Qr: state.appState.Qr,
     buyView: state.appState.buyView,
+    warning: state.appState.warning,
   }
 }
 
@@ -23,6 +24,7 @@ QrCodeView.prototype.render = function () {
   var props = this.props
   var Qr = props.Qr
   return h('.main-container.flex-column', {
+    key: 'qr',
     style: {
       justifyContent: 'center',
       padding: '45px',
@@ -30,8 +32,17 @@ QrCodeView.prototype.render = function () {
     },
   }, [
     Array.isArray(Qr.message) ? h('.message-container', this.renderMultiMessage()) : h('h3', Qr.message),
+
+    this.props.warning ? this.props.warning && h('span.error.flex-center', {
+      style: {
+        textAlign: 'center',
+        width: '229px',
+        height: '82px',
+      },
+    },
+    this.props.warning) : null,
+
     h('#qr-container.flex-column', {
-      key: 'qr',
       style: {
         marginTop: '25px',
         marginBottom: '15px',
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
new file mode 100644
index 000000000..233920a1f
--- /dev/null
+++ b/ui/app/components/shift-list-item.js
@@ -0,0 +1,177 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const vreme = new (require('vreme'))
+const explorerLink = require('../../lib/explorer-link')
+const extension = require('../../../app/scripts/lib/extension')
+const actions = require('../actions')
+const addressSummary = require('../util').addressSummary
+
+const CopyButton = require('./copyButton')
+const EtherBalance = require('./eth-balance')
+
+
+module.exports = connect(mapStateToProps)(ShiftListItem)
+
+function mapStateToProps (state) {
+  return {}
+}
+
+inherits(ShiftListItem, Component)
+function ShiftListItem () {
+  Component.call(this)
+}
+
+ShiftListItem.prototype.render = function () {
+  const props = this.props
+  return (
+    h(`.transaction-list-item.flex-row`, {
+      style:{
+        paddingTop: '20px',
+        paddingBottom: '20px',
+        justifyContent: 'space-around',
+        alignItems: 'center',
+      },
+    }, [
+      h('div', {
+        style: {
+          width:'0px',
+          position: 'relative',
+          bottom: '19px',
+        },
+      }, [
+        h('img', {
+          src:'https://info.shapeshift.io/sites/default/files/logo.png',
+          style: {
+            height: '35px',
+            width: '132px',
+            position: 'absolute',
+            clip: 'rect(0px,23px,34px,0px)',
+          },
+        }),
+      ]),
+
+      this.renderInfo(),
+      this.renderUtilComponents(),
+    ])
+  )
+}
+
+function formatDate (date) {
+  return vreme.format(new Date(date), 'March 16 2014 14:30')
+}
+
+ShiftListItem.prototype.renderUtilComponents = function () {
+  var props = this.props
+
+  switch (props.response.status) {
+    case 'no_deposits':
+      return h('.flex-row', [
+        h(CopyButton, { value: this.props.depositAddress }),
+        h('i.fa.fa-qrcode.pointer', {
+          onClick: () => props.dispatch(actions.reshowQrCode(props.depositAddress, props.depositType)),
+          style: {
+            margin: '5px',
+            marginLeft: '23px',
+            marginRight: '12px',
+            fontSize: '20px',
+            color: '#F7861C',
+          },
+        }),
+      ])
+    case 'received':
+      return h('.flex-row')
+
+    case 'complete':
+      return h('.flex-row', [
+        h(CopyButton, { value: this.props.response.transaction }),
+        h(EtherBalance, {
+          value: `+${props.response.outgoingCoin}`,
+          width: '55px',
+          shorten: true,
+          style: {fontSize: '15px'},
+        })
+      ])
+
+    case 'failed':
+      return ''
+    default:
+      return ''
+  }
+
+}
+
+ShiftListItem.prototype.renderInfo = function () {
+  var props = this.props
+  switch (props.response.status) {
+    case 'no_deposits':
+      return h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
+        h('div', {
+            style: {
+              fontSize: 'x-small',
+              color: '#ABA9AA',
+              width: '100%',
+            },
+          }, [
+          `${props.depositType} to ETH via ShapeShift`
+        ]),
+        h('div', `Status: ${props.response.status.replace('_', ' ')}`),
+        h('div', {
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, formatDate(props.time)),
+      ])
+    case 'received':
+      return h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
+        h('div', {
+            style: {
+              fontSize: 'x-small',
+              color: '#ABA9AA',
+              width: '100%',
+            },
+          }, [
+          `${props.depositType} to ETH via ShapeShift`
+        ]),
+        h('div', `Conversion in progress`),
+        h('div', {
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, formatDate(props.time)),
+      ])
+    case 'complete':
+    var url = explorerLink(props.response.transaction, parseInt('1'))
+
+      return h('.flex-column.pointer', {
+        style: {width: '200px', overflow: 'hidden'},
+        onClick: () => extension.tabs.create({ url })
+      }, [
+        h('div', {
+            style: {
+              fontSize: 'x-small',
+              color: '#ABA9AA',
+              width: '100%',
+            },
+          }, `ShapeShift`),
+        h('div', props.completeTime),
+        h('div', {
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, addressSummary(props.response.transaction)),
+      ])
+
+    case 'failed':
+      return h('span.error', ' (Failed)')
+    default:
+      return ''
+  }
+}
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index 796ba61ae..b03ca11ad 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -10,7 +10,7 @@ const vreme = new (require('vreme'))
 const extension = require('../../../app/scripts/lib/extension')
 
 const TransactionIcon = require('./transaction-list-item-icon')
-
+const ShiftListItem = require('./shift-list-item')
 module.exports = TransactionListItem
 
 inherits(TransactionListItem, Component)
@@ -20,7 +20,9 @@ function TransactionListItem () {
 
 TransactionListItem.prototype.render = function () {
   const { transaction, i, network } = this.props
-
+  if (transaction.key === 'shapeshift') {
+    if (network === '1') return h(ShiftListItem, transaction)
+  }
   var date = formatDate(transaction.time)
 
   let isLinkable = false
diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js
index 886aa7c00..9bf0f6d81 100644
--- a/ui/app/components/transaction-list.js
+++ b/ui/app/components/transaction-list.js
@@ -14,7 +14,11 @@ function TransactionList () {
 
 TransactionList.prototype.render = function () {
   const { txsToRender, network, unconfMsgs } = this.props
-  const transactions = txsToRender.concat(unconfMsgs)
+  var shapeShiftTxList
+  if (network === '1'){
+    shapeShiftTxList = this.props.shapeShiftTxList
+  }
+  const transactions = !shapeShiftTxList ? txsToRender.concat(unconfMsgs) : txsToRender.concat(unconfMsgs, shapeShiftTxList)
   .sort((a, b) => b.time - a.time)
 
   return (