Create a ShapeShift tx in tx History

8 files changed, 105 insertions, 65 deletions

diff --git a/app/scripts/lib/config-manager.js b/app/scripts/lib/config-manager.js
index d6d10c8f2..6f5cb3a4a 100644
--- a/app/scripts/lib/config-manager.js
+++ b/app/scripts/lib/config-manager.js
@@ -337,11 +337,11 @@ ConfigManager.prototype.getShapeShiftTxList = function () {
   var data = this.getData()
   var shapeShiftTxList = data.shapeShiftTxList ? data.shapeShiftTxList : []
   shapeShiftTxList.forEach((tx) => {
-    if (tx.response.status !== 'complete'){
+    if (tx.response.status !== 'complete') {
       var requestListner = function (request) {
         tx.response = JSON.parse(this.responseText)
-        if (tx.status === 'complete') {
-          tx.completeTime = new Date().getTime()
+        if (tx.response.status === 'complete') {
+          tx.time = new Date().getTime()
         }
       }
 
@@ -351,6 +351,7 @@ ConfigManager.prototype.getShapeShiftTxList = function () {
       shapShiftReq.send()
     }
   })
+  this.setData(data)
   return shapeShiftTxList
 }
 
@@ -358,10 +359,11 @@ ConfigManager.prototype.createShapeShiftTx = function (depositAddress, depositTy
   var data = this.getData()
 
   var shapeShiftTx = {depositAddress, depositType, key: 'shapeshift', time: new Date().getTime(), response: {}}
-  if(!data.shapeShiftTxList) {
+  if (!data.shapeShiftTxList) {
     data.shapeShiftTxList = [shapeShiftTx]
   } else {
     data.shapeShiftTxList.push(shapeShiftTx)
   }
   this.setData(data)
 }
+
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 0b1d40148..218f1f72a 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -65,7 +65,7 @@ module.exports = class MetamaskController {
       // coinbase
       buyEth: this.buyEth.bind(this),
       // shapeshift
-      createShapeShiftTx : this.createShapeShiftTx.bind(this),
+      createShapeShiftTx: this.createShapeShiftTx.bind(this),
     }
   }
 
@@ -319,10 +319,9 @@ module.exports = class MetamaskController {
     })
   }
 
- createShapeShiftTx (depositAddress, depositType) {
+  createShapeShiftTx (depositAddress, depositType) {
     this.configManager.createShapeShiftTx(depositAddress, depositType)
   }
-
 }
 
 function noop () {}
diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 261370d0a..836f4bcb9 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -30,7 +30,7 @@ function mapStateToProps (state) {
     unconfTxs: valuesFor(state.metamask.unconfTxs),
     unconfMsgs: valuesFor(state.metamask.unconfMsgs),
     isEthWarningConfirmed: state.metamask.isEthConfirmed,
-    shapeShiftTxList : state.metamask.shapeShiftTxList,
+    shapeShiftTxList: state.metamask.shapeShiftTxList,
   }
 }
 
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 9b99a05c1..c6c932296 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -747,7 +747,7 @@ function reshowQrCode (data, coin) {
     shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => {
       if (mktResponse.error) return dispatch(actions.showWarning(mktResponse.error))
 
-      var message =[
+      var message = [
         `Deposit your ${coin} to the address bellow:`,
         `Deposit Limit: ${mktResponse.limit}`,
         `Deposit Minimum:${mktResponse.minimum}`,
diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index cebb8f3f6..742241e5b 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -54,7 +54,7 @@ BuyButtonSubview.prototype.render = function () {
           justifyContent: 'space-around',
         },
       }, [
-        h(currentForm.coinbase ? '.activeForm' : '.inactiveForm', {
+        h(currentForm.coinbase ? '.activeForm' : '.inactiveForm.pointer', {
           onClick: () => props.dispatch(actions.coinBaseSubview()),
         }, 'Coinbase'),
         h('a', {
@@ -67,7 +67,7 @@ BuyButtonSubview.prototype.render = function () {
             },
           }),
         ]),
-        h(currentForm.shapeshift ? '.activeForm' : '.inactiveForm', {
+        h(currentForm.shapeshift ? '.activeForm' : '.inactiveForm.pointer', {
           onClick: () => props.dispatch(actions.shapeShiftSubview(props.provider.type)),
         }, 'Shapeshift'),
 
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 233920a1f..c4cc554fb 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -10,6 +10,7 @@ const addressSummary = require('../util').addressSummary
 
 const CopyButton = require('./copyButton')
 const EtherBalance = require('./eth-balance')
+const Tooltip = require('./tooltip')
 
 
 module.exports = connect(mapStateToProps)(ShiftListItem)
@@ -19,15 +20,15 @@ function mapStateToProps (state) {
 }
 
 inherits(ShiftListItem, Component)
+
 function ShiftListItem () {
   Component.call(this)
 }
 
 ShiftListItem.prototype.render = function () {
-  const props = this.props
   return (
-    h(`.transaction-list-item.flex-row`, {
-      style:{
+    h('.transaction-list-item.flex-row', {
+      style: {
         paddingTop: '20px',
         paddingBottom: '20px',
         justifyContent: 'space-around',
@@ -36,13 +37,13 @@ ShiftListItem.prototype.render = function () {
     }, [
       h('div', {
         style: {
-          width:'0px',
+          width: '0px',
           position: 'relative',
           bottom: '19px',
         },
       }, [
         h('img', {
-          src:'https://info.shapeshift.io/sites/default/files/logo.png',
+          src: 'https://info.shapeshift.io/sites/default/files/logo.png',
           style: {
             height: '35px',
             width: '132px',
@@ -68,30 +69,53 @@ ShiftListItem.prototype.renderUtilComponents = function () {
   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',
-          },
+        h(CopyButton, {
+          value: this.props.depositAddress,
         }),
+        h(Tooltip, {
+          title: 'QR Code',
+        }, [
+          h('i.fa.fa-qrcode.pointer.pop-hover', {
+            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'},
-        })
+        h(CopyButton, {
+          value: this.props.response.transaction,
+        }),
+        h('.flex-row', {
+          style: {
+            alignItems: 'baseline',
+          },
+        }, [
+          h('.color-orange', {
+            style: {
+              fontFamily: 'Montserrat Light',
+              position: 'relative',
+              left: '6px',
+            },
+          }, '+'),
+          h(EtherBalance, {
+            value: `${props.response.outgoingCoin}`,
+            width: '55px',
+            shorten: true,
+            style: {
+              fontSize: '15px',
+            },
+          }),
+        ]),
       ])
 
     case 'failed':
@@ -106,17 +130,20 @@ ShiftListItem.prototype.renderInfo = function () {
   var props = this.props
   switch (props.response.status) {
     case 'no_deposits':
-      return h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
+      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('_', ' ')}`),
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, `${props.depositType} to ETH via ShapeShift`),
+        h('div', 'No deposits received'),
         h('div', {
           style: {
             fontSize: 'x-small',
@@ -126,17 +153,20 @@ ShiftListItem.prototype.renderInfo = function () {
         }, formatDate(props.time)),
       ])
     case 'received':
-      return h('.flex-column', {style: {width: '200px', overflow: 'hidden'}}, [
+      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`),
+          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',
@@ -146,20 +176,25 @@ ShiftListItem.prototype.renderInfo = function () {
         }, formatDate(props.time)),
       ])
     case 'complete':
-    var url = explorerLink(props.response.transaction, parseInt('1'))
+      var url = explorerLink(props.response.transaction, parseInt('1'))
 
       return h('.flex-column.pointer', {
-        style: {width: '200px', overflow: 'hidden'},
-        onClick: () => extension.tabs.create({ url })
+        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),
+          style: {
+            fontSize: 'x-small',
+            color: '#ABA9AA',
+            width: '100%',
+          },
+        }, 'From ShapeShift'),
+        h('div', formatDate(props.time)),
         h('div', {
           style: {
             fontSize: 'x-small',
@@ -170,7 +205,7 @@ ShiftListItem.prototype.renderInfo = function () {
       ])
 
     case 'failed':
-      return h('span.error', ' (Failed)')
+      return h('span.error', '(Failed)')
     default:
       return ''
   }
diff --git a/ui/app/css/index.css b/ui/app/css/index.css
index 1278e95c9..e2be0abd9 100644
--- a/ui/app/css/index.css
+++ b/ui/app/css/index.css
@@ -592,3 +592,7 @@ div.message-container > div:first-child {
   font-size: 15px;
   color: #4D4D4D;
 }
+
+.pop-hover:hover {
+    transform: scale(1.1);
+}
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 63804d478..8c2696877 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -490,7 +490,7 @@ function reduceApp (state, action) {
           data: action.value.data,
         },
       })
-        default:
+    default:
       return appState
   }
 }