ShapeShift Integration

2 files changed, 28 insertions, 86 deletions

diff --git a/mascara/src/app/first-time/buy-ether-screen.js b/mascara/src/app/first-time/buy-ether-screen.js
index 44141db64..45b2df1c8 100644
--- a/mascara/src/app/first-time/buy-ether-screen.js
+++ b/mascara/src/app/first-time/buy-ether-screen.js
@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import {connect} from 'react-redux'
 import {qrcode} from 'qrcode-npm'
 import copyToClipboard from 'copy-to-clipboard'
+import ShapeShiftForm from '../shapeshift-form'
 import Identicon from '../../../../ui/app/components/identicon'
 import {buyEth, showAccountDetail} from '../../../../ui/app/actions'
 
@@ -79,12 +80,6 @@ class BuyEtherScreen extends Component {
     )
   }
 
-  renderShapeShiftLogo () {
-    return (
-      <div className='shapeshift-logo' />
-    )
-  }
-
   renderCoinbaseForm () {
     const {goToCoinbase, address} = this.props
 
@@ -119,83 +114,13 @@ class BuyEtherScreen extends Component {
       case OPTION_VALUES.SHAPESHIFT:
         return (
           <div className='buy-ether__action-content-wrapper'>
-            <div>{this.renderShapeShiftLogo()}</div>
+            <div className='shapeshift-logo' />
             <div className='buy-ether__body-text'>
               Trade any leading blockchain asset for any other. Protection by Design. No Account Needed.
             </div>
-            <div className='shapeshift-form'>
-              <div className='shapeshift-form__selectors'>
-                <div className='shapeshift-form__selector'>
-                  <div className='shapeshift-form__selector-label'>
-                    Deposit
-                  </div>
-                  <select className='shapeshift-form__selector-input'>
-                    <option value='btc'>BTC</option>
-                  </select>
-                </div>
-                <div
-                  className='icon shapeshift-form__caret'
-                  style={{ backgroundImage: 'url(images/caret-right.svg)'}}
-                />
-                <div className='shapeshift-form__selector'>
-                  <div className='shapeshift-form__selector-label'>
-                    Receive
-                  </div>
-                  <select className='shapeshift-form__selector-input'>
-                    <option value='btc'>BTC</option>
-                  </select>
-                </div>
-              </div>
-              <div className='shapeshift-form__address-input-wrapper'>
-                <div className='shapeshift-form__address-input-label'>
-                  Your Refund Address
-                </div>
-                <input type='text' className='shapeshift-form__address-input' />
-              </div>
-              <div className='shapeshift-form__metadata'>
-                <div className='shapeshift-form__metadata-wrapper'>
-                  <div className='shapeshift-form__metadata-label'>
-                    Status:
-                  </div>
-                  <div className='shapeshift-form__metadata-value'>
-                    Available
-                  </div>
-                </div>
-                <div className='shapeshift-form__metadata-wrapper'>
-                  <div className='shapeshift-form__metadata-label'>
-                    Limit:
-                  </div>
-                  <div className='shapeshift-form__metadata-value'>
-                    2.06856464
-                  </div>
-                </div>
-                <div className='shapeshift-form__metadata-wrapper'>
-                  <div className='shapeshift-form__metadata-label'>
-                    Exchange Rate:
-                  </div>
-                  <div className='shapeshift-form__metadata-value'>
-                    12.21840214
-                  </div>
-                </div>
-                <div className='shapeshift-form__metadata-wrapper'>
-                  <div className='shapeshift-form__metadata-label'>
-                    Minimum:
-                  </div>
-                  <div className='shapeshift-form__metadata-value'>
-                    0.000163
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className='buy-ether__buttons'>
-              <button
-                className='first-time-flow__button'
-              >
-                Buy
-              </button>
-            </div>
+            <ShapeShiftForm btnClass='first-time-flow__button' />
           </div>
-        )
+          )
       case OPTION_VALUES.QR_CODE:
         return (
           <div className='buy-ether__action-content-wrapper'>
diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 50d0d2fb7..c9c3f6380 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -578,7 +578,8 @@ button.first-time-flow__button--tertiary:hover {
   flex: 1 0 auto;
 }
 
-.shapeshift-form__selector-label {
+.shapeshift-form__selector-label,
+.shapeshift-form__deposit-instruction {
   color: #757575;
   color: rgba(0, 0, 0, 0.45);
   font-family: Montserrat Light;
@@ -597,10 +598,8 @@ button.first-time-flow__button--tertiary:hover {
   text-align: center;
   width: 100%;
   height: 45px;
-}
-
-.shapeshift-form__address-input-wrapper {
-  padding-bottom: 24px;
+  line-height: 44px;
+  font-family: Montserrat Light;
 }
 
 .shapeshift-form__address-input-label {
@@ -622,6 +621,18 @@ button.first-time-flow__button--tertiary:hover {
   width: 100%;
 }
 
+.shapeshift-form__address-input-wrapper--error .shapeshift-form__address-input {
+  border-color: #FF001F;
+}
+
+.shapeshift-form__address-input-error-message {
+  color: #FF001F;
+  font-family: Montserrat Light;
+  font-size: 12px;
+  height: 24px;
+  line-height: 18px;
+}
+
 .shapeshift-form__metadata {
   display: flex;
   flex-flow: row wrap;
@@ -640,11 +651,11 @@ button.first-time-flow__button--tertiary:hover {
 }
 
 .shapeshift-form__metadata-wrapper:nth-child(odd) {
-  padding-right: 24px;
+  padding-right: 14px;
 }
 
 .shapeshift-form__metadata-label {
-  flex: 1 0 65%;
+  flex: 1 0 60%;
 }
 
 .shapeshift-form__metadata-value {
@@ -654,3 +665,9 @@ button.first-time-flow__button--tertiary:hover {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.shapeshift-form__qr-code {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+}