diff --git a/app/components/Form/Form.js b/app/components/Form/Form.js index dfc9476b..cbaece23 100644 --- a/app/components/Form/Form.js +++ b/app/components/Form/Form.js @@ -1,15 +1,19 @@ import React from 'react' import PropTypes from 'prop-types' +import Isvg from 'react-inlinesvg' import { MdClose } from 'react-icons/lib/md' +import Pay from './Pay' import PayForm from './PayForm' import RequestForm from './RequestForm' +import x from 'icons/x.svg' import styles from './Form.scss' const FORM_TYPES = { - PAY_FORM: PayForm, + // PAY_FORM: PayForm, + PAY_FORM: Pay, REQUEST_FORM: RequestForm } @@ -18,16 +22,13 @@ const Form = ({ formType, formProps, closeForm }) => { const FormComponent = FORM_TYPES[formType] return ( -
-
-
- -
- -
- -
+
+
+ + +
+
) } diff --git a/app/components/Form/Form.scss b/app/components/Form/Form.scss index 25a54ff0..d0fa3879 100644 --- a/app/components/Form/Form.scss +++ b/app/components/Form/Form.scss @@ -1,59 +1,27 @@ @import '../../variables.scss'; -.outtercontainer { - position: absolute; - top: 0; - bottom: 0; - width: 100%; - height: 100vh; - background: $white; - z-index: 0; - opacity: 0; - transition: all 0.5s; - - &.open { - opacity: 1; - z-index: 20; - } -} - -.innercontainer { +.container { position: relative; height: 100vh; - margin: 5%; + background: $spaceblue; } -.esc { - position: absolute; - top: 0; - right: 0; - color: $darkestgrey; - cursor: pointer; - padding: 20px; - border-radius: 50%; +.closeContainer { + text-align: right; + padding: 20px 40px 0px; - &:hover { - color: $bluegrey; - background: $darkgrey; - } + span { + cursor: pointer; + opacity: 1.0; + transition: 0.25s all; - &:active { - color: $white; - background: $main; + &:hover { + opacity: 0.5; + } } svg { - width: 32px; - height: 32px; + color: $white; } } -.content { - width: 50%; - margin: 0 auto; - display: flex; - flex-direction: column; - height: 75vh; - justify-content: center; - align-items: center; -} diff --git a/app/components/Form/Pay.js b/app/components/Form/Pay.js new file mode 100644 index 00000000..a88dd950 --- /dev/null +++ b/app/components/Form/Pay.js @@ -0,0 +1,156 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +import Isvg from 'react-inlinesvg' +import paperPlane from 'icons/paper_plane.svg' + +import { FaBolt, FaChain, FaAngleDown } from 'react-icons/lib/fa' +import LoadingBolt from 'components/LoadingBolt' +import CurrencyIcon from 'components/CurrencyIcon' + +import styles from './Pay.scss' + +class Pay extends Component { + componentDidUpdate(prevProps) { + const { + isOnchain, isLn, payform: { payInput }, fetchInvoice + } = this.props + + // If on-chain, focus on amount to let user know it's editable + if (isOnchain) { this.amountInput.focus() } + + // If LN go retrieve invoice details + if ((prevProps.payform.payInput !== payInput) && isLn) { + fetchInvoice(payInput) + } + } + + render() { + const { + payform: { amount, payInput, showErrors }, + currency, + crypto, + + isOnchain, + isLn, + currentAmount, + usdAmount, + inputCaption, + showPayLoadingScreen, + payFormIsValid: { errors, isValid }, + + setPayAmount, + onPayAmountBlur, + + setPayInput, + onPayInputBlur, + + onPaySubmit + } = this.props + + console.log('usdAmount: ', usdAmount) + + return ( +
+ {showPayLoadingScreen && } +
+ +

Make Payment

+
+ +
+
+
+ + + +
+
+