-
-
-
-
-
-
-
+
)
}
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 &&
}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{ this.amountInput = input }}
+ size=''
+ placeholder='0.00000000'
+ value={currentAmount || ''}
+ onChange={event => setPayAmount(event.target.value)}
+ onBlur={onPayAmountBlur}
+ id='amount'
+ readOnly={isLn}
+ />
+
+
+
+
+ {`≈ ${usdAmount} USD`}
+
+
+
+
+
+
+ )
+ }
+}
+
+
+Pay.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
+ ]),
+ 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 Pay
diff --git a/app/components/Form/Pay.scss b/app/components/Form/Pay.scss
new file mode 100644
index 00000000..98ec2b17
--- /dev/null
+++ b/app/components/Form/Pay.scss
@@ -0,0 +1,123 @@
+@import '../../variables.scss';
+
+.container {
+ padding: 0 40px;
+ font-family: Roboto;
+}
+
+.header {
+ text-align: center;
+ padding-bottom: 20px;
+ color: $white;
+ border-bottom: 1px solid $spaceborder;
+
+ h1 {
+ font-size: 22px;
+ font-weight: 100;
+ margin-top: 10px;
+ letter-spacing: 1.5px;
+ }
+}
+
+.content {
+ margin-top: 50px;
+ color: $white;
+
+ .destination {
+ margin-bottom: 25px;
+ }
+
+ .amount .bottom {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ input {
+ font-size: 40px;
+ max-width: 250px;
+ }
+ }
+
+ .top {
+ margin-bottom: 30px;
+
+ label {
+ font-size: 14px;
+ }
+ }
+
+ .bottom {
+ input, textarea {
+ background: transparent;
+ outline: none;
+ border: 0;
+ color: $gold;
+ -webkit-text-fill-color: $white;
+ font-size: 12px;
+ width: 100%;
+ font-weight: 200;
+ }
+
+ input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+ text-shadow: none;
+ -webkit-text-fill-color: initial;
+ }
+ }
+
+ .currency {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ .currentCurrency {
+ cursor: pointer;
+ transition: 0.25s all;
+
+ &:hover {
+ opacity: 0.5;
+ }
+
+ span {
+ font-size: 14px;
+
+ &:nth-child(1) {
+ font-weight: bold;
+ }
+ }
+
+ }
+
+ ul {
+ visibility: hidden;
+ position: absolute;
+ }
+ }
+
+ .usdAmount {
+ margin-top: 20px;
+ }
+
+ .submit {
+ margin-top: 50px;
+ text-align: center;
+
+ .button {
+ width: 235px;
+ margin: 0 auto;
+ padding: 20px 10px;
+ background: #31343f;
+ opacity: 0.5;
+ cursor: pointer;
+ transition: 0.25s all;
+
+ &.active {
+ background: $gold;
+ opacity: 1.0;
+
+ &:hover {
+ background: darken($gold, 5%);
+ }
+ }
+ }
+ }
+}
diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js
index 6bb2195a..703bc554 100644
--- a/app/components/Wallet/Wallet.js
+++ b/app/components/Wallet/Wallet.js
@@ -35,6 +35,7 @@ class Wallet extends Component {
} = this.props
const { modalOpen, qrCodeType } = this.state
+ const usdAmount = btc.satoshisToUsd((parseInt(balance.walletBalance, 10) + parseInt(balance.channelBalance, 10)), currentTicker.price_usd)
const changeQrCode = () => {
const qrCodeNum = this.state.qrCodeType === 1 ? 2 : 1
@@ -89,6 +90,7 @@ class Wallet extends Component {
+
≈ ${usdAmount ? usdAmount.toLocaleString() : ''}
setCurrency('btc')}>
BTC
@@ -99,9 +101,6 @@ class Wallet extends Component {
setCurrency('sats')}>
Satoshis
- setCurrency('usd')}>
- USD
-