diff --git a/app/components/Form/PayForm.js b/app/components/Form/PayForm.js deleted file mode 100644 index 83ca3733..00000000 --- a/app/components/Form/PayForm.js +++ /dev/null @@ -1,152 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' - -import { FaBolt, FaChain } from 'react-icons/lib/fa' -import LoadingBolt from 'components/LoadingBolt' -import CurrencyIcon from 'components/CurrencyIcon' - -import styles from './PayForm.scss' - -class PayForm 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, - inputCaption, - showPayLoadingScreen, - payFormIsValid: { errors, isValid }, - - setPayAmount, - onPayAmountBlur, - - setPayInput, - onPayInputBlur, - - onPaySubmit - } = this.props - - return ( -
- {showPayLoadingScreen && } - -
- - { this.amountInput = input }} - size='' - style={ - isLn ? - { width: '75%', fontSize: '85px' } - : - { width: `${amount.length > 1 ? (amount.length * 20) - 5 : 35}%`, fontSize: `${190 - (amount.length ** 2)}px` } - } - value={currentAmount} - onChange={event => setPayAmount(event.target.value)} - onBlur={onPayAmountBlur} - id='amount' - readOnly={isLn} - /> -
-
- {showErrors.amount && - {errors.amount} - } -
-
-
- {inputCaption} -
- -
- setPayInput(event.target.value)} - onBlur={onPayInputBlur} - id='paymentRequest' - /> -
-
- {showErrors.payInput && - {errors.payInput} - } -
-
-
-
Pay
-
-
- ) - } -} - - -PayForm.propTypes = { - payform: PropTypes.shape({ - amount: PropTypes.string.isRequired, - payInput: PropTypes.string.isRequired, - showErrors: PropTypes.object.isRequired - }).isRequired, - currency: PropTypes.string.isRequired, - crypto: PropTypes.string.isRequired, - - isOnchain: PropTypes.bool.isRequired, - isLn: PropTypes.bool.isRequired, - currentAmount: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]).isRequired, - inputCaption: PropTypes.string.isRequired, - showPayLoadingScreen: PropTypes.bool.isRequired, - payFormIsValid: PropTypes.shape({ - errors: PropTypes.object, - isValid: PropTypes.bool - }).isRequired, - - setPayAmount: PropTypes.func.isRequired, - onPayAmountBlur: PropTypes.func.isRequired, - setPayInput: PropTypes.func.isRequired, - onPayInputBlur: PropTypes.func.isRequired, - fetchInvoice: PropTypes.func.isRequired, - - onPaySubmit: PropTypes.func.isRequired -} - -export default PayForm diff --git a/app/components/Form/PayForm.scss b/app/components/Form/PayForm.scss deleted file mode 100644 index b40eab3d..00000000 --- a/app/components/Form/PayForm.scss +++ /dev/null @@ -1,166 +0,0 @@ -@import '../../variables.scss'; - -.container { - margin: 0 auto; - display: flex; - flex-direction: column; - height: 75vh; - justify-content: center; - align-items: center; -} - -.amountContainer { - position: relative; - color: $main; - display: flex; - justify-content: center; - min-height: 175px; - border-bottom: 1px solid transparent; - - &.ln { - opacity: 0.75; - } - - &.error { - border-color: $red; - } - - label, input[type=number], 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=number], input[type=text] { - width: 100px; - font-size: 180px; - border: none; - outline: 0; - -webkit-appearance: none; - font-weight: 200; - } - - input[type=number] { - &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { - -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; - - &.error { - border-color: $red; - } - - label, input[type=number], 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; - } -} - -.errorMessage { - margin: 10px 0; - min-height: 20px; - color: $red; - opacity: 0; - transition: all 0.25s ease; - - &.active { - opacity: 1; - } -} - -.buttonGroup { - width: 100%; - display: flex; - flex-direction: row; - border-radius: 6px; - overflow: hidden; - - .button { - width: 100%; - margin-bottom: 20px; - font-weight: bold; - cursor: pointer; - text-transform: uppercase; - letter-spacing: .2px; - - &:first-child { - border-right: 1px solid lighten($main, 20%); - } - - &.active { - opacity: 1; - cursor: pointer; - } - } -} diff --git a/app/components/Form/RequestForm.js b/app/components/Form/RequestForm.js deleted file mode 100644 index 18231a4c..00000000 --- a/app/components/Form/RequestForm.js +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import CurrencyIcon from 'components/CurrencyIcon' -import styles from './RequestForm.scss' - -const RequestForm = ({ - requestform: { amount, memo }, - currency, - crypto, - - setRequestAmount, - setRequestMemo, - - onRequestSubmit -}) => ( -
-
- - 1 ? (amount.length * 15) - 5 : 25}%`, fontSize: `${190 - (amount.length ** 2)}px` }} - value={amount} - onChange={event => setRequestAmount(event.target.value)} - id='amount' - /> -
-
- - setRequestMemo(event.target.value)} - id='memo' - /> -
-
-
- Request -
-
-
-) - -RequestForm.propTypes = { - requestform: PropTypes.shape({ - amount: PropTypes.string.isRequired, - memo: PropTypes.string - }).isRequired, - currency: PropTypes.string.isRequired, - crypto: PropTypes.string.isRequired, - - setRequestAmount: PropTypes.func.isRequired, - setRequestMemo: PropTypes.func.isRequired, - - onRequestSubmit: PropTypes.func.isRequired -} - -export default RequestForm diff --git a/app/components/Form/RequestForm.scss b/app/components/Form/RequestForm.scss deleted file mode 100644 index f81caaa5..00000000 --- a/app/components/Form/RequestForm.scss +++ /dev/null @@ -1,103 +0,0 @@ -@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; - - 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; - font-weight: 200; - } -} - -.inputContainer { - width: 100%; - display: flex; - justify-content: center; - font-size: 18px; - height: auto; - min-height: 55px; - margin-bottom: 20px; - 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 { - width: 100%; - margin-bottom: 20px; - font-weight: bold; - cursor: pointer; - text-transform: uppercase; - letter-spacing: .2px; - - &:first-child { - border-right: 1px solid lighten($main, 20%); - } - } -} \ No newline at end of file