Initial redo attempt of the buy view to look like vladt's desighn

ui/app/components/buy-button-subview.js

@@ -6,12 +6,15 @@ const actions = require('../actions')
 const CoinbaseForm = require('./coinbase-form')
 const ShapeshiftForm = require('./shapeshift-form')
 const Loading = require('./loading')
-const TabBar = require('./tab-bar')
+const AccountPanel = require('./account-panel')
+const RadioList = require('./custom-radio-list')
 
 module.exports = connect(mapStateToProps)(BuyButtonSubview)
 
 function mapStateToProps (state) {
   return {
+    identity: state.appState.identity,
+    account: state.metamask.accounts[state.appState.buyView.buyAddress],
     warning: state.appState.warning,
     buyView: state.appState.buyView,
     network: state.metamask.network,
@@ -31,7 +34,11 @@ BuyButtonSubview.prototype.render = function () {
   const isLoading = props.isSubLoading
 
   return (
-    h('.buy-eth-section', [
+    h('.buy-eth-section.flex-column', {
+      style: {
+        alignItems: 'center',
+      },
+    }, [
              // back button
       h('.flex-row', {
         style: {
@@ -46,58 +53,79 @@ BuyButtonSubview.prototype.render = function () {
             left: '10px',
           },
         }),
-        h('h2.page-subtitle', 'Buy Eth'),
-      ]),
-
-      h(Loading, { isLoading }),
-
-      h(TabBar, {
-        tabs: [
-          {
-            content: [
-              'Coinbase',
-              h('a', {
-                onClick: (event) => this.navigateTo('https://github.com/MetaMask/faq/blob/master/COINBASE.md'),
-              }, [
-                h('i.fa.fa-question-circle', {
-                  style: {
-                    margin: '0px 5px',
-                  },
-                }),
-              ]),
-            ],
-            key: 'coinbase',
+        h('h2.text-transform-uppercase.flex-center', {
+          style: {
+            width: '100vw',
+            background: 'rgb(235, 235, 235)',
+            color: 'rgb(174, 174, 174)',
+            paddingTop: '4px',
+            paddingBottom: '4px',
           },
-          {
-            content: [
-              'Shapeshift',
-              h('a', {
-                href: 'https://github.com/MetaMask/faq/blob/master/COINBASE.md',
-                onClick: (event) => this.navigateTo('https://info.shapeshift.io/about'),
-              }, [
-                h('i.fa.fa-question-circle', {
-                  style: {
-                    margin: '0px 5px',
-                  },
-                }),
-              ]),
-            ],
-            key: 'shapeshift',
+        }, 'Buy Eth'),
+      ]),
+      h('div', {
+        style: {
+          position: 'absolute',
+          top: '57vh',
+          left: '49vw',
+        },
+      }, [
+        h(Loading, {isLoading}),
+      ]),
+      h('div', {
+        style: {
+          width: '80%',
+        },
+      }, [
+        h(AccountPanel, {
+          showFullAddress: true,
+          identity: props.identity,
+          account: props.account,
+        }),
+      ]),
+      h('h3.text-transform-uppercase', {
+        style: {
+          paddingLeft: '15px',
+          fontFamily: 'Montserrat Light',
+          width: '100vw',
+          background: 'rgb(235, 235, 235)',
+          color: 'rgb(174, 174, 174)',
+          paddingTop: '4px',
+          paddingBottom: '4px',
+        },
+      }, 'Select Service'),
+      h('.flex-row.selected-exchange', {
+        style: {
+          position: 'relative',
+          right: '35px',
+          marginTop: '20px',
+          marginBottom: '20px',
+        },
+      }, [
+        h(RadioList, {
+          defaultFocus: props.buyView.subview,
+          lables: [
+            'Coinbase',
+            'ShapeShift',
+          ],
+          subtext: {
+            'Coinbase': 'Crypto/FIAT (USA only)',
+            'ShapeShift': 'Crypto',
           },
-        ],
-        defaultTab: 'coinbase',
-        tabSelected: (key) => {
-          switch (key) {
-            case 'coinbase':
-              props.dispatch(actions.coinBaseSubview())
-              break
-            case 'shapeshift':
-              props.dispatch(actions.shapeShiftSubview(props.provider.type))
-              break
-          }
+          onClick: this.radioHandler.bind(this),
+        }),
+      ]),
+      h('h3.text-transform-uppercase', {
+        style: {
+          paddingLeft: '15px',
+          fontFamily: 'Montserrat Light',
+          width: '100vw',
+          background: 'rgb(235, 235, 235)',
+          color: 'rgb(174, 174, 174)',
+          paddingTop: '4px',
+          paddingBottom: '4px',
         },
-      }),
-
+      }, props.buyView.subview),
       this.formVersionSubview(),
     ])
   )
@@ -152,3 +180,12 @@ BuyButtonSubview.prototype.backButtonContext = function () {
     this.props.dispatch(actions.goHome())
   }
 }
+
+BuyButtonSubview.prototype.radioHandler = function (event) {
+  switch (event.target.title) {
+    case 'Coinbase':
+      return this.props.dispatch(actions.coinBaseSubview())
+    case 'ShapeShift':
+      return this.props.dispatch(actions.shapeShiftSubview(this.props.provider.type))
+  }
+}

ui/app/components/coinbase-form.js

@@ -4,7 +4,6 @@ const inherits = require('util').inherits
 const connect = require('react-redux').connect
 const actions = require('../actions')
 
-const isValidAddress = require('../util').isValidAddress
 module.exports = connect(mapStateToProps)(CoinbaseForm)
 
 function mapStateToProps (state) {
@@ -21,72 +20,19 @@ function CoinbaseForm () {
 
 CoinbaseForm.prototype.render = function () {
   var props = this.props
-  var amount = props.buyView.amount
-  var address = props.buyView.buyAddress
 
   return h('.flex-column', {
     style: {
       // margin: '10px',
       padding: '25px',
+      width: '100%',
     },
   }, [
-    h('.flex-column', {
-      style: {
-        alignItems: 'flex-start',
-      },
-    }, [
-      h('.flex-row', [
-        h('div', 'Address:'),
-        h('.ellip-address', address),
-      ]),
-      h('.flex-row', [
-        h('div', 'Amount: $'),
-        h('.input-container', [
-          h('input.buy-inputs', {
-            style: {
-              width: '3em',
-              boxSizing: 'border-box',
-            },
-            defaultValue: amount,
-            onChange: this.handleAmount.bind(this),
-          }),
-          h('i.fa.fa-pencil-square-o.edit-text', {
-            style: {
-              fontSize: '12px',
-              color: '#F7861C',
-              position: 'relative',
-              bottom: '5px',
-              right: '11px',
-            },
-          }),
-        ]),
-      ]),
-    ]),
-
-    h('.info-gray', {
-      style: {
-        fontSize: '10px',
-        fontFamily: 'Montserrat Light',
-        margin: '15px',
-        lineHeight: '13px',
-      },
-    },
-      `there is a USD$ 15 a day max and a USD$ 50
-          dollar limit per the life time of an account without a
-          coinbase account. A fee of 3.75% will be aplied to debit/credit cards.`),
-
-    !props.warning ? h('div', {
-      style: {
-        width: '340px',
-        height: '22px',
-      },
-    }) : props.warning && h('span.error.flex-center', props.warning),
-
-
     h('.flex-row', {
       style: {
         justifyContent: 'space-around',
         margin: '33px',
+        marginTop: '0px',
       },
     }, [
       h('button', {
@@ -106,20 +52,9 @@ CoinbaseForm.prototype.handleAddress = function (event) {
   this.props.dispatch(actions.updateBuyAddress(event.target.value))
 }
 CoinbaseForm.prototype.toCoinbase = function () {
-  var props = this.props
-  var amount = props.buyView.amount
-  var address = props.buyView.buyAddress
-  var message
-
-  if (isValidAddress(address) && isValidAmountforCoinBase(amount).valid) {
-    props.dispatch(actions.buyEth({ network: '1', address, amount: props.buyView.amount }))
-  } else if (!isValidAmountforCoinBase(amount).valid) {
-    message = isValidAmountforCoinBase(amount).message
-    return props.dispatch(actions.displayWarning(message))
-  } else {
-    message = 'Receiving address is invalid.'
-    return props.dispatch(actions.displayWarning(message))
-  }
+  const props = this.props
+  const address = props.buyView.buyAddress
+  props.dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
 }
 
 CoinbaseForm.prototype.renderLoading = function () {
@@ -131,29 +66,3 @@ CoinbaseForm.prototype.renderLoading = function () {
     src: 'images/loading.svg',
   })
 }
-
-function isValidAmountforCoinBase (amount) {
-  amount = parseFloat(amount)
-  if (amount) {
-    if (amount <= 15 && amount > 0) {
-      return {
-        valid: true,
-      }
-    } else if (amount > 15) {
-      return {
-        valid: false,
-        message: 'The amount can not be greater then $15',
-      }
-    } else {
-      return {
-        valid: false,
-        message: 'Can not buy amounts less then $0',
-      }
-    }
-  } else {
-    return {
-      valid: false,
-      message: 'The amount entered is not a number',
-    }
-  }
-}

ui/app/components/custom-radio-list.js

@@ -11,12 +11,11 @@ function RadioList () {
 
 RadioList.prototype.render = function () {
   const props = this.props
-  let activeClass = '.custom-radio-selected'
-  let inactiveClass = '.custom-radio-inactive'
-  let {
+  const activeClass = '.custom-radio-selected'
+  const inactiveClass = '.custom-radio-inactive'
+  const {
     lables,
     defaultFocus,
-    onClick,
   } = props
 
 
@@ -24,37 +23,37 @@ RadioList.prototype.render = function () {
     h('.flex-row', {
       style: {
         fontSize: '12px',
-      }
+      },
     }, [
-        h('.flex-column.custom-radios', {
-          style: {
-            marginRight: '5px',
-          }
+      h('.flex-column.custom-radios', {
+        style: {
+          marginRight: '5px',
         },
-          lables.map((lable, i) => {
-            let isSelcted = (this.state !== null )
-            isSelcted = isSelcted ? (this.state.selected === lable) : (this.props.defaultFocus === lable)
-            return h(isSelcted ? activeClass : inactiveClass, {
-              title: lable,
-              onClick: (event) => {
-                this.setState({selected: event.target.title})
-                props.onClick(event)
-              }
-            })
-          }),
-        ),
-        h('.text', {},
-          lables.map((lable) => {
+      },
+        lables.map((lable, i) => {
+          let isSelcted = (this.state !== null)
+          isSelcted = isSelcted ? (this.state.selected === lable) : (defaultFocus === lable)
+          return h(isSelcted ? activeClass : inactiveClass, {
+            title: lable,
+            onClick: (event) => {
+              this.setState({selected: event.target.title})
+              props.onClick(event)
+            },
+          })
+        })
+      ),
+      h('.text', {},
+        lables.map((lable) => {
           if (props.subtext) {
             return h('.flex-row', {}, [
               h('.radio-titles', lable),
-              h('.radio-titles-subtext', `- ${props.subtext[lable]}`)
+              h('.radio-titles-subtext', `- ${props.subtext[lable]}`),
             ])
           } else {
             return h('.radio-titles', lable)
           }
         })
-      )
+      ),
     ])
   )
 }

ui/app/components/shapeshift-form.js

@@ -43,14 +43,18 @@ ShapeshiftForm.prototype.renderMain = function () {
     style: {
       // marginTop: '10px',
       padding: '25px',
+      paddingTop: '5px',
       width: '100%',
+      minHeight: '215px',
       alignItems: 'center',
+      overflowY: 'auto',
     },
   }, [
     h('.flex-row', {
       style: {
         justifyContent: 'center',
         alignItems: 'baseline',
+        height: '42px',
       },
     }, [
       h('img', {
@@ -82,7 +86,6 @@ ShapeshiftForm.prototype.renderMain = function () {
           style: {
             fontSize: '12px',
             color: '#F7861C',
-            position: 'relative',
             bottom: '48px',
             left: '106px',
           },
@@ -92,7 +95,6 @@ ShapeshiftForm.prototype.renderMain = function () {
       h('.icon-control', [
         h('i.fa.fa-refresh.fa-4.orange', {
           style: {
-            position: 'relative',
             bottom: '5px',
             left: '5px',
             color: '#F7861C',
@@ -121,8 +123,6 @@ ShapeshiftForm.prototype.renderMain = function () {
         },
       }),
     ]),
-
-    this.props.isSubLoading ? this.renderLoading() : null,
     h('.flex-column', {
       style: {
         alignItems: 'flex-start',
@@ -138,17 +138,6 @@ ShapeshiftForm.prototype.renderMain = function () {
         this.props.warning) : this.renderInfo(),
     ]),
 
-    h('.flex-row', {
-      style: {
-        padding: '10px',
-        paddingBottom: '2px',
-        width: '100%',
-      },
-    }, [
-      h('div', 'Receiving address:'),
-      h('.ellip-address', this.props.buyView.buyAddress),
-    ]),
-
     h(this.activeToggle('.input-container'), {
       style: {
         padding: '10px',
@@ -156,6 +145,7 @@ ShapeshiftForm.prototype.renderMain = function () {
         width: '100%',
       },
     }, [
+
       h('div', `${coin} Address:`),
 
       h('input#fromCoinAddress.buy-inputs', {
@@ -190,6 +180,8 @@ ShapeshiftForm.prototype.renderMain = function () {
           onClick: this.shift.bind(this),
           style: {
             marginTop: '10px',
+            position: 'relative',
+            bottom: '33px',
           },
         },
         'Submit'),
@@ -266,8 +258,6 @@ ShapeshiftForm.prototype.renderInfo = function () {
 
   return h('span', {
     style: {
-      marginTop: '10px',
-      marginBottom: '15px',
     },
   }, [
     h('h3.flex-row.text-transform-uppercase', {

ui/app/css/index.css

@@ -489,6 +489,47 @@ input.large-input {
 }
 
 /* buy eth warning screen */
+.custom-radios {
+  justify-content: space-around;
+  align-items: center;
+}
+
+
+.custom-radio-selected {
+  width: 17px;
+  height: 17px;
+  border: solid;
+  border-style: double;
+  border-radius: 15px;
+  border-width: 5px;
+  background: rgba(247, 134, 28, 1);
+  border-color: #F7F7F7;
+}
+
+.custom-radio-inactive {
+  width: 14px;
+  height: 14px;
+  border: solid;
+  border-width: 1px;
+  border-radius: 24px;
+  border-color: #AEAEAE;
+}
+
+.radio-titles {
+  color: rgba(247, 134, 28, 1);
+}
+
+.radio-titles-subtext {
+
+}
+
+.selected-exchange {
+
+}
+
+.buy-radio {
+
+}
 
 .eth-warning{
   transition: opacity 400ms ease-in, transform 400ms ease-in;

ui/app/reducers/app.js

@@ -469,8 +469,10 @@ function reduceApp (state, action) {
           name: 'buyEth',
           context: appState.currentView.name,
         },
+        identity: state.metamask.identities[action.value],
+        buyAddress: action.value,
         buyView: {
-          subview: 'buyForm',
+          subview: 'Coinbase',
           amount: '15.00',
           buyAddress: action.value,
           formView: {
@@ -483,7 +485,7 @@ function reduceApp (state, action) {
     case actions.UPDATE_BUY_ADDRESS:
       return extend(appState, {
         buyView: {
-          subview: 'buyForm',
+          subview: appState.subview,
           formView: {
             coinbase: appState.buyView.formView.coinbase,
             shapeshift: appState.buyView.formView.shapeshift,
@@ -496,7 +498,7 @@ function reduceApp (state, action) {
     case actions.UPDATE_COINBASE_AMOUNT:
       return extend(appState, {
         buyView: {
-          subview: 'buyForm',
+          subview: 'Coinbase',
           formView: {
             coinbase: true,
             shapeshift: false,
@@ -509,7 +511,7 @@ function reduceApp (state, action) {
     case actions.COINBASE_SUBVIEW:
       return extend(appState, {
         buyView: {
-          subview: 'buyForm',
+          subview: 'Coinbase',
           formView: {
             coinbase: true,
             shapeshift: false,
@@ -522,7 +524,7 @@ function reduceApp (state, action) {
     case actions.SHAPESHIFT_SUBVIEW:
       return extend(appState, {
         buyView: {
-          subview: 'buyForm',
+          subview: 'ShapeShift',
           formView: {
             coinbase: false,
             shapeshift: true,
@@ -537,7 +539,7 @@ function reduceApp (state, action) {
     case actions.PAIR_UPDATE:
       return extend(appState, {
         buyView: {
-          subview: 'buyForm',
+          subview: 'ShapeShift',
           formView: {
             coinbase: false,
             shapeshift: true,