-
-
-
-
-
- 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 (
+
+
+
+
+
+
+
+
+ )
+ }
+}
+
+
+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)
}
}