Merge branch 'master' into PopupNotifications

14 files changed, 335 insertions, 35 deletions

diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js
index 2c98af0dd..836f4bcb9 100644
--- a/ui/app/account-detail.js
+++ b/ui/app/account-detail.js
@@ -30,6 +30,7 @@ function mapStateToProps (state) {
     unconfTxs: valuesFor(state.metamask.unconfTxs),
     unconfMsgs: valuesFor(state.metamask.unconfMsgs),
     isEthWarningConfirmed: state.metamask.isEthConfirmed,
+    shapeShiftTxList: state.metamask.shapeShiftTxList,
   }
 }
 
@@ -179,12 +180,7 @@ AccountDetailScreen.prototype.render = function () {
               position: 'absolute',
               left: '219px',
             },
-          }, props.accountDetail.subview === 'buyForm' ? [h('i.fa.fa-arrow-left', {
-            style: {
-              width: '22.641px',
-              height: '14px',
-            },
-          })] : 'BUY'),
+          }, 'BUY'),
 
           h('button', {
             onClick: () => props.dispatch(actions.showSendPage()),
@@ -233,7 +229,7 @@ AccountDetailScreen.prototype.subview = function () {
 }
 
 AccountDetailScreen.prototype.transactionList = function () {
-  const { transactions, unconfTxs, unconfMsgs, address, network } = this.props
+  const { transactions, unconfTxs, unconfMsgs, address, network, shapeShiftTxList } = this.props
 
   var txsToRender = transactions
   // only transactions that are from the current address
@@ -248,6 +244,7 @@ AccountDetailScreen.prototype.transactionList = function () {
     network,
     unconfTxs,
     unconfMsgs,
+    shapeShiftTxList,
     viewPendingTx: (txId) => {
       this.props.dispatch(actions.viewPendingTx(txId))
     },
diff --git a/ui/app/actions.js b/ui/app/actions.js
index dadf124d8..c6c932296 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -135,6 +135,8 @@ var actions = {
 // QR STUFF:
   SHOW_QR: 'SHOW_QR',
   getQr: getQr,
+  reshowQrCode: reshowQrCode,
+  SHOW_QR_VIEW: 'SHOW_QR_VIEW',
 }
 
 module.exports = actions
@@ -717,6 +719,7 @@ function coinShiftRquest (data, marketData) {
       if (response.error) return dispatch(actions.showWarning(response.error))
       var message = `
         Deposit your ${response.depositType} to the address bellow:`
+      _accountManager.createShapeShiftTx(response.deposit, response.depositType)
       dispatch(actions.getQr(response.deposit, '125x125', [message].concat(marketData)))
     })
   }
@@ -738,6 +741,32 @@ function getQr (data, size, message) {
     })
   }
 }
+function reshowQrCode (data, coin) {
+  return (dispatch) => {
+    dispatch(actions.showLoadingIndication())
+    shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => {
+      if (mktResponse.error) return dispatch(actions.showWarning(mktResponse.error))
+
+      var message = [
+        `Deposit your ${coin} to the address bellow:`,
+        `Deposit Limit: ${mktResponse.limit}`,
+        `Deposit Minimum:${mktResponse.minimum}`,
+      ]
+
+      qrRequest(data, '125x125', (response) => {
+        dispatch(actions.hideLoadingIndication())
+        dispatch({
+          type: actions.SHOW_QR_VIEW,
+          value: {
+            qr: response,
+            message: message,
+            data: data,
+          },
+        })
+      })
+    })
+  }
+}
 
 function shapeShiftRequest (query, options, cb) {
   var queryResponse, method
diff --git a/ui/app/app.js b/ui/app/app.js
index 3b21e4477..53ab7dd00 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -29,6 +29,7 @@ const NetworkIndicator = require('./components/network')
 const Tooltip = require('./components/tooltip')
 const EthStoreWarning = require('./eth-store-warning')
 const BuyView = require('./components/buy-button-subview')
+const QrView = require('./components/qr-code')
 module.exports = connect(mapStateToProps)(App)
 
 inherits(App, Component)
@@ -364,6 +365,33 @@ App.prototype.renderPrimary = function () {
       return h(CreateVaultScreen, {key: 'createVault'})
     case 'buyEth':
       return h(BuyView, {key: 'buyEthView'})
+    case 'qr':
+      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',
+            bottom: '115px',
+            left: '44px',
+            width: '285px',
+          },
+        }, [
+          h(QrView, {key: 'qr'}),
+        ]),
+      ])
 
     default:
       return h(AccountDetailScreen, {key: 'account-detail'})
diff --git a/ui/app/components/account-eth-balance.js b/ui/app/components/account-eth-balance.js
index 6cdb33b73..8d693685f 100644
--- a/ui/app/components/account-eth-balance.js
+++ b/ui/app/components/account-eth-balance.js
@@ -46,16 +46,17 @@ EthBalanceComponent.prototype.render = function () {
 EthBalanceComponent.prototype.renderBalance = function (value, state) {
   if (value === 'None') return value
   var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3)
-  var balance, fiatNumber
+  var balance, fiatDisplayNumber, fiatTooltipNumber
   var splitBalance = value.split(' ')
   var ethNumber = splitBalance[0]
   var ethSuffix = splitBalance[1]
 
 
   if (state.conversionRate !== 0) {
-    fiatNumber = (Number(splitBalance[0]) * state.conversionRate).toFixed(2)
+    fiatTooltipNumber = Number(splitBalance[0]) * state.conversionRate
+    fiatDisplayNumber = fiatTooltipNumber.toFixed(2)
   } else {
-    fiatNumber = 'N/A'
+    fiatDisplayNumber = 'N/A'
   }
 
   var fiatSuffix = state.currentFiat
@@ -99,16 +100,16 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) {
       ]),
       h(Tooltip, {
         position: 'bottom',
-        title: `${fiatNumber} ${fiatSuffix}`,
+        title: `${fiatTooltipNumber} ${fiatSuffix}`,
       }, [
-        fiatDisplay(fiatNumber, fiatSuffix),
+        fiatDisplay(fiatDisplayNumber, fiatSuffix),
       ]),
     ])
   )
 }
 
-function fiatDisplay (fiatNumber, fiatSuffix) {
-  if (fiatNumber !== 'N/A') {
+function fiatDisplay (fiatDisplayNumber, fiatSuffix) {
+  if (fiatDisplayNumber !== 'N/A') {
     return h('.flex-row', {
       style: {
         alignItems: 'flex-end',
@@ -124,7 +125,7 @@ function fiatDisplay (fiatNumber, fiatSuffix) {
           fontSize: '12px',
           color: '#333333',
         },
-      }, fiatNumber),
+      }, fiatDisplayNumber),
       h('div', {
         style: {
           color: '#AEAEAE',
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/eth-balance.js b/ui/app/components/eth-balance.js
index 6c324c947..498873faa 100644
--- a/ui/app/components/eth-balance.js
+++ b/ui/app/components/eth-balance.js
@@ -15,26 +15,27 @@ function EthBalanceComponent () {
 EthBalanceComponent.prototype.render = function () {
   var state = this.props
   var style = state.style
-
-  const value = formatBalance(state.value, 6)
+  var needsParse = this.props.needsParse !== undefined ? this.props.needsParse : true
+  const value = formatBalance(state.value, 6, needsParse)
   var width = state.width
 
   return (
 
-    h('.ether-balance', {
+    h('.ether-balance.ether-balance-amount', {
       style: style,
     }, [
-      h('.ether-balance-amount', {
+      h('div', {
         style: {
           display: 'inline',
           width: width,
         },
-      }, this.renderBalance(value, state)),
+      }, this.renderBalance(value)),
     ])
 
   )
 }
-EthBalanceComponent.prototype.renderBalance = function (value, state) {
+EthBalanceComponent.prototype.renderBalance = function (value) {
+  var state = this.props
   if (value === 'None') return value
   var balanceObj = generateBalanceObject(value, state.shorten ? 1 : 3)
   var balance
@@ -68,7 +69,7 @@ EthBalanceComponent.prototype.renderBalance = function (value, state) {
             width: '100%',
             textAlign: 'right',
           },
-        }, balance),
+        }, this.props.incoming ? `+${balance}` : balance),
         h('div', {
           style: {
             color: ' #AEAEAE',
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/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 48d220693..b8650f7d5 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -202,6 +202,8 @@ ShapeshiftForm.prototype.shift = function () {
     'withdrawal': withdrawal,
     'pair': pair,
     'returnAddress': returnAddress,
+    //  Public api key
+    'apiKey': '803d1f5df2ed1b1476e4b9e6bcd089e34d8874595dda6a23b67d93c56ea9cc2445e98a6748b219b2b6ad654d9f075f1f1db139abfa93158c04e825db122c14b6',
   }
   var message = [
     `Deposit Limit: ${props.buyView.formView.marketinfo.limit}`,
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
new file mode 100644
index 000000000..11e11cd37
--- /dev/null
+++ b/ui/app/components/shift-list-item.js
@@ -0,0 +1,202 @@
+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')
+const Tooltip = require('./tooltip')
+
+
+module.exports = connect(mapStateToProps)(ShiftListItem)
+
+function mapStateToProps (state) {
+  return {}
+}
+
+inherits(ShiftListItem, Component)
+
+function ShiftListItem () {
+  Component.call(this)
+}
+
+ShiftListItem.prototype.render = function () {
+  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(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,
+          needsParse: false,
+          incoming: true,
+          style: {
+            fontSize: '15px',
+            color: '#01888C',
+          },
+        }),
+      ])
+
+    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', 'No deposits received'),
+        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%',
+          },
+        }, 'From ShapeShift'),
+        h('div', formatDate(props.time)),
+        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 (
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 deebf02be..94b7e8bf7 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -485,6 +485,20 @@ function reduceApp (state, action) {
           data: action.value.data,
         },
       })
+
+    case actions.SHOW_QR_VIEW:
+      return extend(appState, {
+        currentView: {
+          name: 'qr',
+          context: appState.currentView.context,
+        },
+        transForward: true,
+        Qr: {
+          message: action.value.message,
+          image: action.value.qr,
+          data: action.value.data,
+        },
+      })
     default:
       return appState
   }
diff --git a/ui/app/util.js b/ui/app/util.js
index e1fd6e399..e4b77e2bc 100644
--- a/ui/app/util.js
+++ b/ui/app/util.js
@@ -92,8 +92,8 @@ function parseBalance (balance) {
 
 // Takes wei hex, returns an object with three properties.
 // Its "formatted" property is what we generally use to render values.
-function formatBalance (balance, decimalsToKeep) {
-  var parsed = parseBalance(balance)
+function formatBalance (balance, decimalsToKeep, needsParse = true) {
+  var parsed = needsParse ? parseBalance(balance) : balance.split('.')
   var beforeDecimal = parsed[0]
   var afterDecimal = parsed[1]
   var formatted = 'None'
@@ -141,16 +141,21 @@ function shortenBalance (balance, decimalsToKeep = 1) {
   var convertedBalance = parseFloat(balance)
   if (convertedBalance > 1000000) {
     truncatedValue = (balance / 1000000).toFixed(decimalsToKeep)
-    return `>${truncatedValue}m`
+    return `${truncatedValue}m`
   } else if (convertedBalance > 1000) {
     truncatedValue = (balance / 1000).toFixed(decimalsToKeep)
-    return `>${truncatedValue}k`
+    return `${truncatedValue}k`
   } else if (convertedBalance === 0) {
     return '0'
+  } else if (convertedBalance < 0.001) {
+    return '<0.001'
   } else if (convertedBalance < 1) {
-    var exponent = balance.match(/\.0*/)[0].length
-    truncatedValue = (convertedBalance * Math.pow(10, exponent)).toFixed(decimalsToKeep)
-    return `<${truncatedValue}e-${exponent}`
+    var stringBalance = convertedBalance.toString()
+    if (stringBalance.split('.')[1].length > 3) {
+      return convertedBalance.toFixed(3)
+    } else {
+      return stringBalance
+    }
   } else {
     return convertedBalance.toFixed(decimalsToKeep)
   }