Merge branch 'master' into NewUI-flat

6 files changed, 102 insertions, 80 deletions

diff --git a/ui/app/components/buy-button-subview.js b/ui/app/components/buy-button-subview.js
index 87084f92d..759eb15bd 100644
--- a/ui/app/components/buy-button-subview.js
+++ b/ui/app/components/buy-button-subview.js
@@ -143,7 +143,7 @@ BuyButtonSubview.prototype.formVersionSubview = function () {
     return h('div.flex-column', {
       style: {
         alignItems: 'center',
-        margin: '50px',
+        margin: '20px 50px',
       },
     }, [
       h('h3.text-transform-uppercase', {
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 76a265d63..901a4a956 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -33,10 +33,10 @@ ShapeshiftForm.prototype.renderMain = function () {
 
   return h('.flex-column', {
     style: {
-      // marginTop: '10px',
+      position: 'relative',
       padding: '25px',
       paddingTop: '5px',
-      width: '100%',
+      width: '90%',
       minHeight: '215px',
       alignItems: 'center',
       overflowY: 'auto',
@@ -58,7 +58,9 @@ ShapeshiftForm.prototype.renderMain = function () {
         },
       }),
 
-      h('.input-container', [
+      h('.input-container', {
+        position: 'relative',
+      }, [
         h('input#fromCoin.buy-inputs.ex-coins', {
           type: 'text',
           list: 'coinList',
@@ -79,27 +81,31 @@ ShapeshiftForm.prototype.renderMain = function () {
           style: {
             fontSize: '12px',
             color: '#F7861C',
-            position: 'relative',
-            bottom: '48px',
-            left: '106px',
+            position: 'absolute',
           },
         }),
       ]),
 
-      h('.icon-control', [
-        h('i.fa.fa-refresh.fa-4.orange', {
-          style: {
-            bottom: '5px',
-            left: '5px',
-            color: '#F7861C',
-          },
-          onClick: this.updateCoin.bind(this),
-        }),
+      h('.icon-control', {
+        style: {
+          position: 'relative',
+        },
+      }, [
+        // Not visible on the screen, can't see it on master.
+
+        // h('i.fa.fa-refresh.fa-4.orange', {
+        //   style: {
+        //     bottom: '5px',
+        //     left: '5px',
+        //     color: '#F7861C',
+        //   },
+        //   onClick: this.updateCoin.bind(this),
+        // }),
         h('i.fa.fa-chevron-right.fa-4.orange', {
           style: {
-            position: 'relative',
-            bottom: '26px',
-            left: '10px',
+            position: 'absolute',
+            bottom: '35%',
+            left: '0%',
             color: '#F7861C',
           },
           onClick: this.updateCoin.bind(this),
@@ -117,69 +123,73 @@ ShapeshiftForm.prototype.renderMain = function () {
         },
       }),
     ]),
+
     h('.flex-column', {
       style: {
+        marginTop: '1%',
         alignItems: 'flex-start',
       },
     }, [
-      this.props.warning ? this.props.warning && h('span.error.flex-center', {
-        style: {
-          textAlign: 'center',
-          width: '229px',
-          height: '82px',
-        },
-      },
-        this.props.warning) : this.renderInfo(),
+      this.props.warning
+        ? this.props.warning
+        && h('span.error.flex-center', {
+          style: {
+            textAlign: 'center',
+            width: '229px',
+            height: '82px',
+          },
+        }, this.props.warning)
+        : this.renderInfo(),
+
+      this.renderRefundAddressForCoin(coin),
     ]),
 
-    h(this.activeToggle('.input-container'), {
-      style: {
-        padding: '10px',
-        paddingTop: '0px',
-        width: '100%',
-      },
-    }, [
+  ])
+}
+
+ShapeshiftForm.prototype.renderRefundAddressForCoin = function (coin) {
+  return h(this.activeToggle('.input-container'), {
+    style: {
+      marginTop: '1%',
+    },
+  }, [
 
-      h('div', `${coin} Address:`),
+    h('div', `${coin} Address:`),
 
-      h('input#fromCoinAddress.buy-inputs', {
-        type: 'text',
-        placeholder: `Your ${coin} Refund Address`,
-        dataset: {
-          persistentFormId: 'refund-address',
-        },
-        style: {
-          boxSizing: 'border-box',
-          width: '227px',
-          height: '30px',
-          padding: ' 5px ',
-        },
-      }),
+    h('input#fromCoinAddress.buy-inputs', {
+      type: 'text',
+      placeholder: `Your ${coin} Refund Address`,
+      dataset: {
+        persistentFormId: 'refund-address',
 
-      h('i.fa.fa-pencil-square-o.edit-text', {
-        style: {
-          fontSize: '12px',
-          color: '#F7861C',
-          position: 'relative',
-          bottom: '10px',
-          right: '11px',
-        },
-      }),
-      h('.flex-row', {
+      },
+      style: {
+        boxSizing: 'border-box',
+        width: '227px',
+        height: '30px',
+        padding: ' 5px ',
+      },
+    }),
+
+    h('i.fa.fa-pencil-square-o.edit-text', {
+      style: {
+        fontSize: '12px',
+        color: '#F7861C',
+        position: 'absolute',
+      },
+    }),
+    h('div.flex-row', {
+      style: {
+        justifyContent: 'flex-start',
+      },
+    }, [
+      h('button', {
+        onClick: this.shift.bind(this),
         style: {
-          justifyContent: 'flex-end',
+          marginTop: '1%',
         },
-      }, [
-        h('button', {
-          onClick: this.shift.bind(this),
-          style: {
-            marginTop: '10px',
-            position: 'relative',
-            bottom: '40px',
-          },
-        },
-        'Submit'),
-      ]),
+      },
+      'Submit'),
     ]),
   ])
 }
diff --git a/ui/app/components/shift-list-item.js b/ui/app/components/shift-list-item.js
index 32bfbeda4..079f05e31 100644
--- a/ui/app/components/shift-list-item.js
+++ b/ui/app/components/shift-list-item.js
@@ -2,7 +2,7 @@ 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 vreme = new (require('vreme'))()
 const explorerLink = require('../../lib/explorer-link')
 const actions = require('../actions')
 const addressSummary = require('../util').addressSummary
diff --git a/ui/app/components/transaction-list-item.js b/ui/app/components/transaction-list-item.js
index dbda66a31..9018bab06 100644
--- a/ui/app/components/transaction-list-item.js
+++ b/ui/app/components/transaction-list-item.js
@@ -6,7 +6,7 @@ const EthBalance = require('./eth-balance')
 const addressSummary = require('../util').addressSummary
 const explorerLink = require('../../lib/explorer-link')
 const CopyButton = require('./copyButton')
-const vreme = new (require('vreme'))
+const vreme = new (require('vreme'))()
 const Tooltip = require('./tooltip')
 const numberToBN = require('number-to-bn')
 
@@ -154,12 +154,21 @@ function failIfFailed (transaction) {
   if (transaction.status === 'rejected') {
     return h('span.error', ' (Rejected)')
   }
-  if (transaction.err) {
+  if (transaction.err || transaction.warning) {
+    const { err, warning = {} } = transaction
+    const errFirst = !!(( err && warning ) || err)
+    const message = errFirst ? err.message : warning.message
+
+    errFirst ? err.message : warning.message
+
+
     return h(Tooltip, {
-      title: transaction.err.message,
+      title: message,
       position: 'bottom',
     }, [
-      h('span.error', ' (Failed)'),
+      h(`span.${errFirst ? 'error' : 'warning'}`,
+        ` (${errFirst ? 'Failed' : 'Warning'})`
+      ),
     ])
   }
 }
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index ac8cbf158..878852bf6 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -42,9 +42,12 @@ function reduceApp (state, action) {
     accountDetail: {
       subview: 'transactions',
     },
-    transForward: true, // Used to render transition direction
-    isLoading: false,   // Used to display loading indicator
-    warning: null,      // Used to display error text
+    // Used to render transition direction
+    transForward: true,
+    // Used to display loading indicator
+    isLoading: false,
+    // Used to display error text
+    warning: null,
   }, state.appState)
 
   switch (action.type) {
diff --git a/ui/app/store.js b/ui/app/store.js
index ba9e58b49..3bafdee11 100644
--- a/ui/app/store.js
+++ b/ui/app/store.js
@@ -1,8 +1,8 @@
 const createStore = require('redux').createStore
 const applyMiddleware = require('redux').applyMiddleware
-const thunkMiddleware = require('redux-thunk')
+const thunkMiddleware = require('redux-thunk').default
 const rootReducer = require('./reducers')
-const createLogger = require('redux-logger')
+const createLogger = require('redux-logger').createLogger
 
 global.METAMASK_DEBUG = 'GULP_METAMASK_DEBUG'