feature(payForm): payform UI set up

app/components/Form/Form.js

@@ -13,29 +13,23 @@ const FORM_TYPES = {
   REQUEST_FORM: RequestForm  
 }
 
-class Form extends Component {
-  render() {
-    console.log('props: ', this.props)
-    const { formType, closeForm } = this.props
-    
-    if (!formType) { return null }
-
-    const FormComponent = FORM_TYPES[formType]
-
-    return (
-      <div className={`${styles.outtercontainer} ${formType && styles.open}`}>
-        <div className={styles.innercontainer}>
-          <div className={styles.esc} onClick={closeForm}>
-            <MdClose />
-          </div>
-          
-          <div className={styles.content}>
-            content
-          </div>
+const Form = ({ formType, formProps, closeForm }) => {
+  if (!formType) { return null }
+
+  const FormComponent = FORM_TYPES[formType]
+  return (
+    <div className={`${styles.outtercontainer} ${formType && styles.open}`}>
+      <div className={styles.innercontainer}>
+        <div className={styles.esc} onClick={closeForm}>
+          <MdClose />
+        </div>
+        
+        <div className={styles.content}>
+          <FormComponent {...formProps} />
         </div>
       </div>
-    )
-  }
+    </div>
+  )
 }
 
 

app/components/Form/PayForm.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+import { FaBolt, FaChain } from 'react-icons/lib/fa'
+import CurrencyIcon from 'components/CurrencyIcon'
+
+import styles from './PayForm.scss'
+
+class PayForm extends Component {
+  render() {
+    const {
+      payform,
+      currency,
+      crypto,
+      isOnchain,
+      isLn,
+      inputCaption,
+      setPayAmount,
+      setPayInput,
+      onPaySubmit
+    } = this.props
+
+    return (
+      <div className={styles.container}>
+        <section className={`${styles.amountContainer} ${isLn ? styles.ln : ''}`}>
+          <label htmlFor='amount'>
+            <CurrencyIcon currency={currency} crypto={crypto} />
+          </label>
+          <input
+            type='text'
+            ref={input => this.amountInput = input} // eslint-disable-line
+            size=''
+            style={
+              isLn ?
+                { width: '75%', fontSize: '85px' }
+                :
+                { width: `${payform.amount.length > 1 ? (payform.amount.length * 15) - 5 : 25}%`, fontSize: `${190 - (payform.amount.length ** 2)}px` }
+            }
+            value={payform.amount}
+            onChange={event => setPayAmount(event.target.value)}
+            id='amount'
+            readOnly={isLn}
+          />
+        </section>
+        <div className={styles.inputContainer}>
+          <aside className={styles.paymentIcon}>
+            {(() => {
+              if (isOnchain) {
+                return (
+                  <i>
+                    <span>on-chain</span>
+                    <FaChain />
+                  </i>
+                )
+              } else if (isLn) {
+                return (
+                  <i>
+                    <span>lightning network</span>
+                    <FaBolt />
+                  </i>
+                )
+              }
+              return null
+            })()}
+          </aside>
+          <section className={styles.input}>
+            <input
+              type='text'
+              placeholder='Payment request or bitcoin address'
+              value={payform.payInput}
+              onChange={event => setPayInput(event.target.value)}
+              id='paymentRequest'
+            />
+          </section>
+        </div>
+        <section className={styles.buttonGroup}>
+          <div className={styles.button} onClick={onPaySubmit}>Pay</div>
+        </section>
+      </div>
+    )
+  }
+}
+
+
+PayForm.propTypes = {
+  
+}
+
+export default PayForm

app/components/Form/PayForm.scss

@@ -0,0 +1,142 @@
+@import '../../variables.scss';
+
+.container {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  height: 75vh;
+  justify-content: center;
+  align-items: center;
+}
+
+.amountContainer {
+  color: $main;
+  display: flex;
+  justify-content: center;
+  min-height: 120px;
+  margin-bottom: 20px;
+  min-height: 175px;
+
+  &.ln {
+    opacity: 0.75;
+  }
+  
+  label, input[type=text] {
+    color: inherit;
+    display: inline-block;
+    vertical-align: top;
+    padding: 0;
+  }
+
+  label {
+    svg {
+      width: 85px;
+      height: 85px;
+    }
+
+    svg[data-icon='ltc'] {
+      margin-right: 10px;
+
+      g {
+        transform: scale(1.75) translate(-5px, -5px);
+      }
+    }
+  }
+  
+  input[type=text] {
+    width: 100px;
+    font-size: 180px;
+    border: none;
+    outline: 0;
+    -webkit-appearance: none;
+  }
+}
+
+.inputContainer {
+  position: relative;
+  width: 100%;
+  padding: 40px 0;
+  cursor: pointer;
+
+  .info {
+    margin-bottom: 10px;
+    min-height: 19px;
+  }
+
+  .paymentIcon {
+    position: absolute;
+    width: 20%;
+    left: calc(-12.5% - 75px);
+    top: 42px;
+    color: $main;
+    font-size: 50px;
+    text-align: center;
+
+    span {
+      text-transform: uppercase;
+      display: block;
+      font-size: 12px;
+      font-weight: 200;
+    }
+  }
+}
+
+.input {
+  display: flex;
+  justify-content: center;
+  font-size: 18px;
+  height: auto;
+  min-height: 55px;
+  border: 1px solid $traditionalgrey;
+  border-radius: 6px;
+  position: relative;
+  padding: 0 20px;
+
+  label, input[type=text] {
+    font-size: inherit;
+  }
+
+  label {
+    padding-top: 19px;
+    padding-bottom: 12px;
+    color: $traditionalgrey;
+  }
+
+  input[type=text] {
+    width: 100%;
+    border: none;
+    outline: 0;
+    -webkit-appearance: none;
+    height: 55px;
+    padding: 0 10px;
+  }
+}
+
+.buttonGroup {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  border-radius: 6px;
+  overflow: hidden;
+
+  .button {
+    cursor: pointer;
+    height: 55px;
+    min-height: 55px;
+    text-transform: none;
+    font-size: 18px;
+    transition: opacity .2s ease-out;
+    background: $main;
+    color: $white;
+    border: none;
+    font-weight: 500;
+    padding: 0;
+    width: 100%;
+    text-align: center;
+    line-height: 55px;
+
+    &:first-child {
+      border-right: 1px solid lighten($main, 20%);
+    }
+  }
+}

app/routes/app/components/App.js

@@ -41,13 +41,14 @@ class App extends Component {
       isLn,
 
       openPayForm,
-      payFormProps,
+      formProps,
 
       closeForm,
 
       children
     } = this.props
 
+    console.log('formProps: ', this.props.formProps)
     if (!currentTicker) { return <div>Loading...</div> }
 
     return (
@@ -62,7 +63,7 @@ class App extends Component {
 
         <Form
           formType={form.formType}
-          payFormProps={payFormProps}
+          formProps={formProps}
           closeForm={closeForm}
         />
 

app/routes/app/containers/AppContainer.js

@@ -70,6 +70,34 @@ const mapStateToProps = state => ({
 })
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const payFormProps = {
+    payform: stateProps.payform,
+    currency: stateProps.ticker.currency,
+    crypto: stateProps.ticker.crypto,
+
+    isOnchain: stateProps.isOnchain,
+    isLn: stateProps.isLn,
+    inputCaption: stateProps.inputCaption,
+
+    setPayAmount: dispatchProps.setPayAmount,
+    setPayInput: dispatchProps.setPayInput,
+
+    onPaySubmit: () => {
+      console.log('do submit stuff')
+    }
+  }
+
+  const requestFormProps = {
+
+  }
+
+  const formProps = (formType) => {
+    if (!formType) { return {} }
+
+    if (formType === 'PAY_FORM') { return payFormProps }
+    if (formType === 'REQUEST_FORM') { return requestFormProps }
+  }
+  
   return {
     ...stateProps,
     ...dispatchProps,
@@ -89,20 +117,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     },
 
     // Props to pass to the pay form
-    payFormProps: {
-      payform: stateProps.payform,
-
-      isOnchain: stateProps.isOnchain,
-      isLn: stateProps.isLn,
-      inputCaption: stateProps.inputCaption,
-
-      setPayAmount: dispatchProps.setPayAmount,
-      setPayInput: dispatchProps.setPayInput,
-
-      onPaySubmit: () => {
-        console.log('do submit stuff')
-      }
-    }
+    formProps: formProps(stateProps.form.formType)
   }
 }