diff --git a/app/reducers/form.js b/app/reducers/form.js index b1e5033d..91bb4d4b 100644 --- a/app/reducers/form.js +++ b/app/reducers/form.js @@ -1,6 +1,6 @@ // Initial State const initialState = { - modalOpen: false, + modalOpen: true, formType: 'pay', amount: '0', message: '', diff --git a/app/routes/activity/components/components/Payments.js b/app/routes/activity/components/components/Payments.js index 4321a185..6f1c5c78 100644 --- a/app/routes/activity/components/components/Payments.js +++ b/app/routes/activity/components/components/Payments.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types' import Moment from 'react-moment' import 'moment-timezone' import Modal from './Modal' +import { FaBolt } from 'react-icons/lib/fa' import CurrencyIcon from '../../../../components/CurrencyIcon' import { btc } from '../../../../utils' import styles from './Payments.scss' @@ -62,36 +63,38 @@ const Payments = ({ { payments.map((paymentItem, index) => - (
  • setPayment(paymentItem)}> -
    -
    {paymentItem.path[0]}
    -
    -
    -
    - {paymentItem.creation_date * 1000} + ( +
  • setPayment(paymentItem)}> +
    +
    {paymentItem.path[0]}
    - -
    - - { - ticker.currency === 'usd' ? - btc.satoshisToUsd(paymentItem.fee, currentTicker.price_usd) - : - btc.satoshisToBtc(paymentItem.fee) - } - -
    -
    - - { - ticker.currency === 'usd' ? - btc.satoshisToUsd(paymentItem.value, currentTicker.price_usd) - : - btc.satoshisToBtc(paymentItem.value) - } - -
    -
    • ) +
    +
    + {paymentItem.creation_date * 1000} +
    +
    +
    + + { + ticker.currency === 'usd' ? + btc.satoshisToUsd(paymentItem.fee, currentTicker.price_usd) + : + btc.satoshisToBtc(paymentItem.fee) + } + +
    +
    + + { + ticker.currency === 'usd' ? + btc.satoshisToUsd(paymentItem.value, currentTicker.price_usd) + : + btc.satoshisToBtc(paymentItem.value) + } + +
    + + ) ) } diff --git a/app/routes/app/components/components/Form/Form.js b/app/routes/app/components/components/Form/Form.js index 38c3c963..35177fa8 100644 --- a/app/routes/app/components/components/Form/Form.js +++ b/app/routes/app/components/components/Form/Form.js @@ -1,6 +1,8 @@ import React from 'react' import PropTypes from 'prop-types' import { MdClose } from 'react-icons/lib/md' +import Pay from './components/Pay' +import Request from './components/Request' import CurrencyIcon from '../../../../../components/CurrencyIcon' import { btc } from '../../../../../utils' import styles from './Form.scss' @@ -19,23 +21,6 @@ const Form = ({ formInvoice, currentTicker }) => { - const requestClicked = () => { - createInvoice(amount, message, currency, currentTicker.price_usd) - close() - } - - const payClicked = () => { - payInvoice(payment_request) - close() - } - - const paymentRequestOnChange = (payreq) => { - setPaymentRequest(payreq) - if (payreq.length === 124) { fetchInvoice(payreq) } - } - - const calculateAmount = value => (currency === 'usd' ? btc.satoshisToUsd(value, currentTicker.price_usd) : btc.satoshisToBtc(value)) - return (
    @@ -43,62 +28,32 @@ const Form = ({
    -
    - - 1 ? (amount.length * 15) - 5 : 25}%`, fontSize: `${190 - (amount.length ** 2)}px` } - } - value={formType === 'pay' ? calculateAmount(formInvoice.amount) : amount} - onChange={event => setAmount(event.target.value)} - readOnly={formType === 'pay'} - id='amount' - /> -
    - { - formType === 'pay' ? -
    - - paymentRequestOnChange(event.target.value)} - id='paymentRequest' - /> -
    - : -
    - - setMessage(event.target.value)} - id='message' - /> -
    - } { formType === 'pay' ? -
    -
    - Pay -
    -
    + : -
    -
    - Request -
    -
    + + }
    diff --git a/app/routes/app/components/components/Form/Form.scss b/app/routes/app/components/components/Form/Form.scss index 282d0686..191f89a8 100644 --- a/app/routes/app/components/components/Form/Form.scss +++ b/app/routes/app/components/components/Form/Form.scss @@ -128,67 +128,6 @@ } } - .peersContainer { - width: 100%; - margin: 10px 0 50px 0; - - h4 { - text-transform: uppercase; - color: $black; - letter-spacing: 2; - font-weight: bold; - margin-bottom: 20px; - padding: 10px 0; - } - - .peers { - overflow-y: scroll; - width: 100%; - } - - .peer { - position: relative; - width: 100%; - border-top: 1px solid $traditionalgrey; - border-right: 1px solid transparent; - border-bottom: 1px solid transparent; - border-left: 1px solid transparent; - padding: 5px; - cursor: pointer; - transition: all 0.25s; - - &:hover { - background: lighten($main, 20%); - border-radius: 6px; - border: 1px solid $main; - - svg { - visibility: visible; - } - } - - p { - margin: 3px 0; - } - - .address { - font-size: 18px; - } - - .pubkey { - font-size: 12px; - } - - svg { - visibility: hidden; - position: absolute; - top: calc(50% - 8px); - right: 5%; - color: $black; - } - } - } - .buttonGroup { width: 100%; display: flex; diff --git a/app/routes/app/components/components/Form/components/Pay/Pay.js b/app/routes/app/components/components/Form/components/Pay/Pay.js new file mode 100644 index 00000000..92a845a2 --- /dev/null +++ b/app/routes/app/components/components/Form/components/Pay/Pay.js @@ -0,0 +1,67 @@ +import React from 'react' +import PropTypes from 'prop-types' +import CurrencyIcon from '../../../../../../../components/CurrencyIcon' +import { btc } from '../../../../../../../utils' +import styles from './Pay.scss' + +const Pay = ({ + amount, + payment_request, + setPaymentRequest, + fetchInvoice, + payInvoice, + currency, + crypto, + close +}) => { + const payClicked = () => { + if (payment_request.length !== 124) { return } + + payInvoice(payment_request) + close() + } + + const paymentRequestOnChange = payreq => { + setPaymentRequest(payreq) + if (payreq.length === 124) { fetchInvoice(payreq) } + } + + const calculateAmount = value => (currency === 'usd' ? btc.satoshisToUsd(value, currentTicker.price_usd) : btc.satoshisToBtc(value)) + + return ( +
    +
    + + +
    +
    + + paymentRequestOnChange(event.target.value)} + id='paymentRequest' + /> +
    +
    +
    + Pay +
    +
    +
    + ) +} + +Pay.propTypes = {} + +export default Pay diff --git a/app/routes/app/components/components/Form/components/Pay/Pay.scss b/app/routes/app/components/components/Form/components/Pay/Pay.scss new file mode 100644 index 00000000..7a18ac05 --- /dev/null +++ b/app/routes/app/components/components/Form/components/Pay/Pay.scss @@ -0,0 +1,110 @@ +@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; + } +} + +.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 { + 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/components/Form/components/Pay/index.js b/app/routes/app/components/components/Form/components/Pay/index.js new file mode 100644 index 00000000..89680350 --- /dev/null +++ b/app/routes/app/components/components/Form/components/Pay/index.js @@ -0,0 +1,3 @@ +import Pay from './Pay' + +export default Pay diff --git a/app/routes/app/components/components/Form/components/Request/Request.js b/app/routes/app/components/components/Form/components/Request/Request.js new file mode 100644 index 00000000..1d83faeb --- /dev/null +++ b/app/routes/app/components/components/Form/components/Request/Request.js @@ -0,0 +1,59 @@ +import React from 'react' +import PropTypes from 'prop-types' +import CurrencyIcon from '../../../../../../../components/CurrencyIcon' +import styles from './Request.scss' + +const Request = ({ + amount, + setAmount, + payment_request, + setMessage, + createInvoice, + message, + currentTicker, + currency, + crypto, + close +}) => { + const requestClicked = () => { + createInvoice(amount, message, currency, currentTicker.price_usd) + close() + } + + return ( +
    +
    + + 1 ? (amount.length * 15) - 5 : 25}%`, fontSize: `${190 - (amount.length ** 2)}px` }} + value={amount} + onChange={event => setAmount(event.target.value)} + id='amount' + /> +
    +
    + + setMessage(event.target.value)} + id='paymentRequest' + /> +
    +
    +
    + Request +
    +
    +
    + ) +} + +Request.propTypes = {} + +export default Request diff --git a/app/routes/app/components/components/Form/components/Request/Request.scss b/app/routes/app/components/components/Form/components/Request/Request.scss new file mode 100644 index 00000000..7a18ac05 --- /dev/null +++ b/app/routes/app/components/components/Form/components/Request/Request.scss @@ -0,0 +1,110 @@ +@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; + } +} + +.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 { + 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/components/Form/components/Request/index.js b/app/routes/app/components/components/Form/components/Request/index.js new file mode 100644 index 00000000..29b01605 --- /dev/null +++ b/app/routes/app/components/components/Form/components/Request/index.js @@ -0,0 +1,3 @@ +import Request from './Request' + +export default Request diff --git a/graph.svg b/graph.svg new file mode 100644 index 00000000..36b1f680 --- /dev/null +++ b/graph.svg @@ -0,0 +1,673 @@ + + + + + + +LightningNetwork + + + +02e908e249 + +02e908e249 + + + +03c0b01e01 + +03c0b01e01 + + + +02e908e249--03c0b01e01 + +cid:1297207 + + + +02e908e249--03c0b01e01 + +cid:1297208 + + + +03b75d5e04 + +03b75d5e04 + + + +02e908e249--03b75d5e04 + +cid:1298530 + + + +033a2aff9a + +033a2aff9a + + + +02e908e249--033a2aff9a + +cid:1298191 + + + +03cde254c5 + +03cde254c5 + + + +03c0b01e01--03cde254c5 + +cid:1298497 + + + +02e4847124 + +02e4847124 + + + +02e4847124--03c0b01e01 + +cid:1297230 + + + +02c663ccbd + +02c663ccbd + + + +02c663ccbd--03c0b01e01 + +cid:1297248 + + + +02ac61d212 + +02ac61d212 + + + +02ac61d212--03c0b01e01 + +cid:1297249 + + + +02b4f0aa3f + +02b4f0aa3f + + + +02ac61d212--02b4f0aa3f + +cid:1297331 + + + +02ac61d212--033a2aff9a + +cid:1297499 + + + +02b4f0aa3f--02e908e249 + +cid:1298327 + + + +02b4f0aa3f--03c0b01e01 + +cid:1298529 + + + +03b19a969b + +03b19a969b + + + +02b4f0aa3f--03b19a969b + +cid:1297285 + + + +0384704df7 + +0384704df7 + + + +02b4f0aa3f--0384704df7 + +cid:1297366 + + + +02b4f0aa3f--033a2aff9a + +cid:1297489 + + + +03ec6530cb + +03ec6530cb + + + +02b4f0aa3f--03ec6530cb + +cid:1298234 + + + +0269355f90 + +0269355f90 + + + +0269355f90--03c0b01e01 + +cid:1297317 + + + +02252bef3c + +02252bef3c + + + +02252bef3c--03c0b01e01 + +cid:1297322 + + + +02252bef3c--02b4f0aa3f + +cid:1297375 + + + +02252bef3c--03b75d5e04 + +cid:1298529 + + + +03b75d5e04--03c0b01e01 + +cid:1297364 + + + +03b75d5e04--03c0b01e01 + +cid:1298530 + + + +0284065d1a + +0284065d1a + + + +0352d564b1 + +0352d564b1 + + + +0284065d1a--0352d564b1 + +cid:1297381 + + + +02d7873490 + +02d7873490 + + + +0284065d1a--02d7873490 + +cid:1297386 + + + +024dce9196 + +024dce9196 + + + +024dce9196--02e908e249 + +cid:1298530 + + + +024dce9196--03b75d5e04 + +cid:1297982 + + + +024dce9196--02d7873490 + +cid:1297396 + + + +02a07d7d15 + +02a07d7d15 + + + +024dce9196--02a07d7d15 + +cid:1298453 + + + +024dce9196--03cde254c5 + +cid:1298497 + + + +026d2f2323 + +026d2f2323 + + + +026d2f2323--03c0b01e01 + +cid:1297432 + + + +026d2f2323--03c0b01e01 + +cid:1297434 + + + +02f8bcf47c + +02f8bcf47c + + + +02f8bcf47c--0352d564b1 + +cid:1297441 + + + +033a2aff9a--03c0b01e01 + +cid:1297489 + + + +033a2aff9a--03c0b01e01 + +cid:1298186 + + + +033a2aff9a--03b75d5e04 + +cid:1298243 + + + +03867586f8 + +03867586f8 + + + +033a2aff9a--03867586f8 + +cid:1298191 + + + +0333fe9b08 + +0333fe9b08 + + + +0333fe9b08--03c0b01e01 + +cid:1297513 + + + +0341f1ed97 + +0341f1ed97 + + + +0341f1ed97--03c0b01e01 + +cid:1297532 + + + +02a6dd5bd4 + +02a6dd5bd4 + + + +02a6dd5bd4--03c0b01e01 + +cid:1297546 + + + +020c754f6c + +020c754f6c + + + +020c754f6c--03c0b01e01 + +cid:1297679 + + + +020c754f6c--02b4f0aa3f + +cid:1297598 + + + +020c754f6c--033a2aff9a + +cid:1297678 + + + +025614041d + +025614041d + + + +020c754f6c--025614041d + +cid:1297679 + + + +0211056c47 + +0211056c47 + + + +020c754f6c--0211056c47 + +cid:1297740 + + + +020c754f6c--0211056c47 + +cid:1297745 + + + +0272271b09 + +0272271b09 + + + +020c754f6c--0272271b09 + +cid:1297755 + + + +03335bde14 + +03335bde14 + + + +025614041d--03335bde14 + +cid:1297663 + + + +027462c767 + +027462c767 + + + +027462c767--03c0b01e01 + +cid:1297681 + + + +027462c767--02b4f0aa3f + +cid:1297684 + + + +0211056c47--03c0b01e01 + +cid:1297730 + + + +0211056c47--025614041d + +cid:1297745 + + + +0272271b09--0333fe9b08 + +cid:1297748 + + + +036c49153b + +036c49153b + + + +0272271b09--036c49153b + +cid:1297734 + + + +0396a1e7d6 + +0396a1e7d6 + + + +0272271b09--0396a1e7d6 + +cid:1297981 + + + +03867586f8--03c0b01e01 + +cid:1298186 + + + +03867586f8--03c0b01e01 + +cid:1298529 + + + +035ee0915e + +035ee0915e + + + +035ee0915e--03c0b01e01 + +cid:1298186 + + + +0299a8ba36 + +0299a8ba36 + + + +0299a8ba36--03c0b01e01 + +cid:1298347 + + + +0299a8ba36--02b4f0aa3f + +cid:1298349 + + + +02a07d7d15--03c0b01e01 + +cid:1298455 + + + +02a07d7d15--02b4f0aa3f + +cid:1298453 + + + +02a07d7d15--03b75d5e04 + +cid:1298695 + + + +031bc4bbbb + +031bc4bbbb + + + +031bc4bbbb--03c0b01e01 + +cid:1298638 + + + +02527e1158 + +02527e1158 + + + +02574473ad + +02574473ad + + + +02527e1158--02574473ad + +cid:1298680 + + + +02574473ad--03b75d5e04 + +cid:1298681 + + + +033f2ad3d5 + +033f2ad3d5 + + + +033f2ad3d5--03b75d5e04 + +cid:1298687 + + + +0262b3daf8 + +0262b3daf8 + + + +02ae91a4c8 + +02ae91a4c8 + + + +0307945454 + +0307945454 + + + +03ee7f315e + +03ee7f315e + + + +03f17fad98 + +03f17fad98 + + + diff --git a/package.json b/package.json index 35846349..4158f953 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "build-dll": "cross-env NODE_ENV=development node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.renderer.dev.dll.js --colors", "build-main": "cross-env NODE_ENV=production node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.main.prod.js --colors", "build-renderer": "cross-env NODE_ENV=production node --trace-warnings -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.renderer.prod.js --colors", - "dev": "cross-env START_HOT=1 npm run start-renderer-dev", + "dev": "cross-env START_HOT=1 concurrently \"npm run start-renderer-dev\" \"npm run lnd\"", "flow": "flow", "flow-typed": "rimraf flow-typed/npm && flow-typed install --overwrite || true", "lint": "eslint --cache --format=node_modules/eslint-formatter-pretty .", @@ -27,7 +27,8 @@ "test": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 node --trace-warnings ./test/runTests.js", "test-all": "npm run lint && npm run flow && npm run build && npm run test && npm run test-e2e", "test-e2e": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 node --trace-warnings ./test/runTests.js e2e", - "test-watch": "npm test -- --watch" + "test-watch": "npm test -- --watch", + "lnd": "lnd --bitcoin.active --bitcoin.testnet --debuglevel=debug --neutrino.active --neutrino.connect=faucet.lightning.community:18333 --no-macaroons" }, "browserslist": "electron 1.6", "build": {