5 files changed, 37 insertions, 7 deletions
diff --git a/ui/app/components/send_/send.constants.js b/ui/app/components/send_/send.constants.js
index df5dee371..8acdf0641 100644
--- a/ui/app/components/send_/send.constants.js
+++ b/ui/app/components/send_/send.constants.js
@@ -36,6 +36,7 @@ const ONE_GWEI_IN_WEI_HEX = ethUtil.addHexPrefix(conversionUtil('0x1', {
 }))
 
 const SIMPLE_GAS_COST = '0x5208' // Hex for 21000, cost of a simple send.
+const BASE_TOKEN_GAS_COST = '0x186a0' // Hex for 100000, a base estimate for token transfers.
 
 module.exports = {
   INSUFFICIENT_FUNDS_ERROR,
@@ -52,4 +53,5 @@ module.exports = {
   REQUIRED_ERROR,
   SIMPLE_GAS_COST,
   TOKEN_TRANSFER_FUNCTION_SIGNATURE,
+  BASE_TOKEN_GAS_COST,
 }
diff --git a/ui/app/components/send_/send.utils.js b/ui/app/components/send_/send.utils.js
index dfd459731..872df1d2f 100644
--- a/ui/app/components/send_/send.utils.js
+++ b/ui/app/components/send_/send.utils.js
@@ -10,6 +10,7 @@ const {
   calcTokenAmount,
 } = require('../../token-util')
 const {
+  BASE_TOKEN_GAS_COST,
   INSUFFICIENT_FUNDS_ERROR,
   INSUFFICIENT_TOKENS_ERROR,
   NEGATIVE_ETH_ERROR,
@@ -183,6 +184,8 @@ async function estimateGas ({ selectedAddress, selectedToken, blockGasLimit, to,
     if (!code || code === '0x') {
       return SIMPLE_GAS_COST
     }
+  } else if (selectedToken && !to) {
+    return BASE_TOKEN_GAS_COST
   }
 
   paramsForGasEstimate.to = selectedToken ? selectedToken.address : to
diff --git a/ui/app/components/send_/tests/send-utils.test.js b/ui/app/components/send_/tests/send-utils.test.js
index f3d5674b7..a518a64e9 100644
--- a/ui/app/components/send_/tests/send-utils.test.js
+++ b/ui/app/components/send_/tests/send-utils.test.js
@@ -2,6 +2,7 @@ import assert from 'assert'
 import sinon from 'sinon'
 import proxyquire from 'proxyquire'
 import {
+  BASE_TOKEN_GAS_COST,
   ONE_GWEI_IN_WEI_HEX,
   SIMPLE_GAS_COST,
 } from '../send.constants'
@@ -336,6 +337,11 @@ describe('send utils', () => {
       assert.notEqual(result, SIMPLE_GAS_COST)
     })
 
+    it(`should return ${BASE_TOKEN_GAS_COST} if passed a selectedToken but no to address`, async () => {
+      const result = await estimateGas(Object.assign({}, baseMockParams, { to: null, selectedToken: { address: '' } }))
+      assert.equal(result, BASE_TOKEN_GAS_COST)
+    })
+
     it(`should return the adjusted blockGasLimit if it fails with a 'Transaction execution error.'`, async () => {
       const result = await estimateGas(Object.assign({}, baseMockParams, {
         to: 'isContract willFailBecauseOf:Transaction execution error.',
diff --git a/ui/app/components/shapeshift-form.js b/ui/app/components/shapeshift-form.js
index 93d2023b5..2c4ba40bf 100644
--- a/ui/app/components/shapeshift-form.js
+++ b/ui/app/components/shapeshift-form.js
@@ -181,7 +181,7 @@ ShapeshiftForm.prototype.render = function () {
   return h('div.shapeshift-form-wrapper', [
     showQrCode
       ? this.renderQrCode()
-      : h('div.shapeshift-form', [
+      : h('div.modal-shapeshift-form', [
           h('div.shapeshift-form__selectors', [
 
             h('div.shapeshift-form__selector', [
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 74658f656..42ef7ae0a 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -642,10 +642,31 @@
     display: flex;
     flex-flow: column nowrap;
     flex: 1;
+    align-items: center;
 
     @media screen and (max-width: 575px) {
       height: 0;
     }
+
+    .shapeshift-form-wrapper {
+      display: flex;
+      flex-flow: column;
+      justify-content: center;
+      align-items: center;
+      flex: 1 0 auto;
+
+      .shapeshift-form, .modal-shapeshift-form {
+        border-radius: 8px;
+        background-color: rgba(0, 0, 0, .05);
+        padding: 17px 15px;
+        margin-bottom: 10px;
+
+        &__caret {
+          width: auto;
+          flex: 1;
+        }
+      }
+    }
   }
 
   &__logo {
@@ -773,17 +794,15 @@
     margin-top: 28px;
     flex: 1 0 auto;
 
-    .shapeshift-form {
-      width: auto;
+    .shapeshift-form, .modal-shapeshift-form {
+      border-radius: 8px;
+      background-color: rgba(0, 0, 0, .05);
+      padding: 17px 15px;
 
       &__caret {
         width: auto;
         flex: 1;
       }
-
-      @media screen and (max-width: 575px) {
-        width: auto;
-      }
     }
   }