diff --git a/app/components/Form/Form.js b/app/components/Form/Form.js index f4c919ac..14a4f353 100644 --- a/app/components/Form/Form.js +++ b/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 ( -
-
-
- -
- -
- content -
+const Form = ({ formType, formProps, closeForm }) => { + if (!formType) { return null } + + const FormComponent = FORM_TYPES[formType] + return ( +
+
+
+ +
+ +
+
- ) - } +
+ ) } diff --git a/app/components/Form/PayForm.js b/app/components/Form/PayForm.js index e69de29b..d7fc6e89 100644 --- a/app/components/Form/PayForm.js +++ b/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 ( +
+
+ + 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} + /> +
+
+ +
+ setPayInput(event.target.value)} + id='paymentRequest' + /> +
+
+
+
Pay
+
+
+ ) + } +} + + +PayForm.propTypes = { + +} + +export default PayForm diff --git a/app/components/Form/PayForm.scss b/app/components/Form/PayForm.scss new file mode 100644 index 00000000..e89855f4 --- /dev/null +++ b/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%); + } + } +} \ No newline at end of file diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js index 4a55c8cb..e9021e6b 100644 --- a/app/routes/app/components/App.js +++ b/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
Loading...
} return ( @@ -62,7 +63,7 @@ class App extends Component {
diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js index 46f0950e..c845dec9 100644 --- a/app/routes/app/containers/AppContainer.js +++ b/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) } }