From 62cb41ae7423c0113262cbde856612d82eb2d761 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Wed, 13 Sep 2017 16:12:24 -0500 Subject: [PATCH 01/20] feature(form): refcactor pay/request form into 2 components --- app/reducers/form.js | 2 +- .../components/components/Payments.js | 61 +- .../app/components/components/Form/Form.js | 95 +-- .../app/components/components/Form/Form.scss | 61 -- .../components/Form/components/Pay/Pay.js | 67 ++ .../components/Form/components/Pay/Pay.scss | 110 +++ .../components/Form/components/Pay/index.js | 3 + .../Form/components/Request/Request.js | 59 ++ .../Form/components/Request/Request.scss | 110 +++ .../Form/components/Request/index.js | 3 + graph.svg | 673 ++++++++++++++++++ package.json | 5 +- 12 files changed, 1086 insertions(+), 163 deletions(-) create mode 100644 app/routes/app/components/components/Form/components/Pay/Pay.js create mode 100644 app/routes/app/components/components/Form/components/Pay/Pay.scss create mode 100644 app/routes/app/components/components/Form/components/Pay/index.js create mode 100644 app/routes/app/components/components/Form/components/Request/Request.js create mode 100644 app/routes/app/components/components/Form/components/Request/Request.scss create mode 100644 app/routes/app/components/components/Form/components/Request/index.js create mode 100644 graph.svg 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": { From dabc626d3c649201710eaa53f8caeda4f512a2a7 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Wed, 13 Sep 2017 17:15:40 -0500 Subject: [PATCH 02/20] feature(payment): HTML/CSS mock new design for onchain/ln payment --- app/reducers/form.js | 10 + app/routes/app/components/App.js | 2 + .../app/components/components/Form/Form.js | 6 +- .../components/Form/components/Pay/Pay.js | 62 +- .../components/Form/components/Pay/Pay.scss | 44 +- app/routes/app/containers/AppContainer.js | 2 + graph.svg | 673 ------------------ 7 files changed, 112 insertions(+), 687 deletions(-) delete mode 100644 graph.svg diff --git a/app/reducers/form.js b/app/reducers/form.js index 91bb4d4b..b91610bf 100644 --- a/app/reducers/form.js +++ b/app/reducers/form.js @@ -2,6 +2,7 @@ const initialState = { modalOpen: true, formType: 'pay', + paymentType: 'onchain', amount: '0', message: '', pubkey: '', @@ -14,6 +15,7 @@ export const SET_FORM = 'SET_FORM' export const SET_AMOUNT = 'SET_AMOUNT' export const SET_MESSAGE = 'SET_MESSAGE' export const SET_PUBKEY = 'SET_PUBKEY' +export const SET_PAYMENT_TYPE = 'SET_PAYMENT_TYPE' export const SET_PAYMENT_REQUEST = 'SET_PAYMENT_REQUEST' export const RESET_FORM = 'RESET_FORM' @@ -28,6 +30,13 @@ export function setForm({ modalOpen, formType }) { } } +export function setPaymentType(paymentType) { + return { + type: SET_PAYMENT_TYPE, + paymentType + } +} + export function setAmount(amount) { return { type: SET_AMOUNT, @@ -70,6 +79,7 @@ const ACTION_HANDLERS = { [SET_AMOUNT]: (state, { amount }) => ({ ...state, amount }), [SET_MESSAGE]: (state, { message }) => ({ ...state, message }), [SET_PUBKEY]: (state, { pubkey }) => ({ ...state, pubkey }), + [SET_PAYMENT_TYPE]: (state, { paymentType }) => ({ ...state, paymentType }), [SET_PAYMENT_REQUEST]: (state, { payment_request }) => ({ ...state, payment_request }), [RESET_FORM]: () => (initialState) } diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js index 3a51c121..9bb35803 100644 --- a/app/routes/app/components/App.js +++ b/app/routes/app/components/App.js @@ -27,6 +27,7 @@ class App extends Component { peers, setCurrency, setForm, + setPaymentType, createInvoice, payInvoice, fetchInvoice, @@ -41,6 +42,7 @@ class App extends Component {
    setForm({ modalOpen: false })} + setPaymentType={setPaymentType} setAmount={setAmount} setMessage={setMessage} setPubkey={setPubkey} diff --git a/app/routes/app/components/components/Form/Form.js b/app/routes/app/components/components/Form/Form.js index 35177fa8..d3b6ae04 100644 --- a/app/routes/app/components/components/Form/Form.js +++ b/app/routes/app/components/components/Form/Form.js @@ -8,7 +8,8 @@ import { btc } from '../../../../../utils' import styles from './Form.scss' const Form = ({ - form: { formType, amount, message, payment_request }, + form: { formType, paymentType, amount, message, payment_request }, + setPaymentType, setAmount, setMessage, setPaymentRequest, @@ -31,6 +32,8 @@ const Form = ({ { formType === 'pay' ? -
    - - paymentRequestOnChange(event.target.value)} - id='paymentRequest' - /> -
    +
    setPaymentType('onchain')} + > + +
    + + paymentRequestOnChange(event.target.value)} + id='paymentRequest' + /> +
    +
    +
    +
    setPaymentType('ln')} + > + +
    + + paymentRequestOnChange(event.target.value)} + id='paymentRequest' + /> +
    +
    Pay @@ -62,6 +94,14 @@ const Pay = ({ ) } -Pay.propTypes = {} +Pay.propTypes = { + amount: PropTypes.string.isRequired, + setPaymentRequest: PropTypes.func.isRequired, + fetchInvoice: PropTypes.func.isRequired, + payInvoice: PropTypes.func.isRequired, + currency: PropTypes.string.isRequired, + crypto: PropTypes.string.isRequired, + close: PropTypes.func.isRequired +} 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 index 7a18ac05..07dfae63 100644 --- a/app/routes/app/components/components/Form/components/Pay/Pay.scss +++ b/app/routes/app/components/components/Form/components/Pay/Pay.scss @@ -47,14 +47,54 @@ } } -.inputContainer { +.onchain, .ln { + position: relative; width: 100%; + padding: 40px 0; + opacity: 0.25; + cursor: pointer; + transition: all 0.25s; + + &.active { + opacity: 1; + } + + .paymentIcon { + position: absolute; + width: 20%; + left: calc(-12.5% - 75px); + color: $main; + font-size: 50px; + text-align: center; + + span { + text-transform: uppercase; + display: block; + font-size: 12px; + font-weight: 200; + } + } +} + +.divider { + height: 1px; + background: $main; + width: 150%; +} + +.onchain { +} + +.ln { + margin-bottom: 20px; +} + +.inputContainer { 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; diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js index cf6de0ef..2b73adaf 100644 --- a/app/routes/app/containers/AppContainer.js +++ b/app/routes/app/containers/AppContainer.js @@ -8,6 +8,7 @@ import { payInvoice } from '../../../reducers/payment' import { fetchChannels } from '../../../reducers/channels' import { setForm, + setPaymentType, setAmount, setMessage, setPubkey, @@ -24,6 +25,7 @@ const mapDispatchToProps = { setPubkey, setPaymentRequest, setForm, + setPaymentType, createInvoice, payInvoice, fetchChannels, diff --git a/graph.svg b/graph.svg deleted file mode 100644 index 36b1f680..00000000 --- a/graph.svg +++ /dev/null @@ -1,673 +0,0 @@ - - - - - - -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 - - - From a98fbd6148711b149e44af568ddd137d37f9127f Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Wed, 13 Sep 2017 16:12:24 -0500 Subject: [PATCH 03/20] feature(form): refcactor pay/request form into 2 components --- app/reducers/form.js | 2 +- .../components/components/Payments.js | 61 +- .../app/components/components/Form/Form.js | 95 +-- .../app/components/components/Form/Form.scss | 61 -- .../components/Form/components/Pay/Pay.js | 67 ++ .../components/Form/components/Pay/Pay.scss | 110 +++ .../components/Form/components/Pay/index.js | 3 + .../Form/components/Request/Request.js | 59 ++ .../Form/components/Request/Request.scss | 110 +++ .../Form/components/Request/index.js | 3 + graph.svg | 673 ++++++++++++++++++ package.json | 5 +- 12 files changed, 1086 insertions(+), 163 deletions(-) create mode 100644 app/routes/app/components/components/Form/components/Pay/Pay.js create mode 100644 app/routes/app/components/components/Form/components/Pay/Pay.scss create mode 100644 app/routes/app/components/components/Form/components/Pay/index.js create mode 100644 app/routes/app/components/components/Form/components/Request/Request.js create mode 100644 app/routes/app/components/components/Form/components/Request/Request.scss create mode 100644 app/routes/app/components/components/Form/components/Request/index.js create mode 100644 graph.svg 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": { From 9d6406004638c1e4a3e8b9535d47fcd484468072 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Wed, 13 Sep 2017 17:15:40 -0500 Subject: [PATCH 04/20] feature(payment): HTML/CSS mock new design for onchain/ln payment --- app/reducers/form.js | 10 + app/routes/app/components/App.js | 2 + .../app/components/components/Form/Form.js | 6 +- .../components/Form/components/Pay/Pay.js | 62 +- .../components/Form/components/Pay/Pay.scss | 44 +- app/routes/app/containers/AppContainer.js | 2 + graph.svg | 673 ------------------ 7 files changed, 112 insertions(+), 687 deletions(-) delete mode 100644 graph.svg diff --git a/app/reducers/form.js b/app/reducers/form.js index 91bb4d4b..b91610bf 100644 --- a/app/reducers/form.js +++ b/app/reducers/form.js @@ -2,6 +2,7 @@ const initialState = { modalOpen: true, formType: 'pay', + paymentType: 'onchain', amount: '0', message: '', pubkey: '', @@ -14,6 +15,7 @@ export const SET_FORM = 'SET_FORM' export const SET_AMOUNT = 'SET_AMOUNT' export const SET_MESSAGE = 'SET_MESSAGE' export const SET_PUBKEY = 'SET_PUBKEY' +export const SET_PAYMENT_TYPE = 'SET_PAYMENT_TYPE' export const SET_PAYMENT_REQUEST = 'SET_PAYMENT_REQUEST' export const RESET_FORM = 'RESET_FORM' @@ -28,6 +30,13 @@ export function setForm({ modalOpen, formType }) { } } +export function setPaymentType(paymentType) { + return { + type: SET_PAYMENT_TYPE, + paymentType + } +} + export function setAmount(amount) { return { type: SET_AMOUNT, @@ -70,6 +79,7 @@ const ACTION_HANDLERS = { [SET_AMOUNT]: (state, { amount }) => ({ ...state, amount }), [SET_MESSAGE]: (state, { message }) => ({ ...state, message }), [SET_PUBKEY]: (state, { pubkey }) => ({ ...state, pubkey }), + [SET_PAYMENT_TYPE]: (state, { paymentType }) => ({ ...state, paymentType }), [SET_PAYMENT_REQUEST]: (state, { payment_request }) => ({ ...state, payment_request }), [RESET_FORM]: () => (initialState) } diff --git a/app/routes/app/components/App.js b/app/routes/app/components/App.js index 3a51c121..9bb35803 100644 --- a/app/routes/app/components/App.js +++ b/app/routes/app/components/App.js @@ -27,6 +27,7 @@ class App extends Component { peers, setCurrency, setForm, + setPaymentType, createInvoice, payInvoice, fetchInvoice, @@ -41,6 +42,7 @@ class App extends Component { setForm({ modalOpen: false })} + setPaymentType={setPaymentType} setAmount={setAmount} setMessage={setMessage} setPubkey={setPubkey} diff --git a/app/routes/app/components/components/Form/Form.js b/app/routes/app/components/components/Form/Form.js index 35177fa8..d3b6ae04 100644 --- a/app/routes/app/components/components/Form/Form.js +++ b/app/routes/app/components/components/Form/Form.js @@ -8,7 +8,8 @@ import { btc } from '../../../../../utils' import styles from './Form.scss' const Form = ({ - form: { formType, amount, message, payment_request }, + form: { formType, paymentType, amount, message, payment_request }, + setPaymentType, setAmount, setMessage, setPaymentRequest, @@ -31,6 +32,8 @@ const Form = ({ { formType === 'pay' ?
    -
    - - paymentRequestOnChange(event.target.value)} - id='paymentRequest' - /> -
    +
    setPaymentType('onchain')} + > + +
    + + paymentRequestOnChange(event.target.value)} + id='paymentRequest' + /> +
    +
    +
    +
    setPaymentType('ln')} + > + +
    + + paymentRequestOnChange(event.target.value)} + id='paymentRequest' + /> +
    +
    Pay @@ -62,6 +94,14 @@ const Pay = ({ ) } -Pay.propTypes = {} +Pay.propTypes = { + amount: PropTypes.string.isRequired, + setPaymentRequest: PropTypes.func.isRequired, + fetchInvoice: PropTypes.func.isRequired, + payInvoice: PropTypes.func.isRequired, + currency: PropTypes.string.isRequired, + crypto: PropTypes.string.isRequired, + close: PropTypes.func.isRequired +} 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 index 7a18ac05..07dfae63 100644 --- a/app/routes/app/components/components/Form/components/Pay/Pay.scss +++ b/app/routes/app/components/components/Form/components/Pay/Pay.scss @@ -47,14 +47,54 @@ } } -.inputContainer { +.onchain, .ln { + position: relative; width: 100%; + padding: 40px 0; + opacity: 0.25; + cursor: pointer; + transition: all 0.25s; + + &.active { + opacity: 1; + } + + .paymentIcon { + position: absolute; + width: 20%; + left: calc(-12.5% - 75px); + color: $main; + font-size: 50px; + text-align: center; + + span { + text-transform: uppercase; + display: block; + font-size: 12px; + font-weight: 200; + } + } +} + +.divider { + height: 1px; + background: $main; + width: 150%; +} + +.onchain { +} + +.ln { + margin-bottom: 20px; +} + +.inputContainer { 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; diff --git a/app/routes/app/containers/AppContainer.js b/app/routes/app/containers/AppContainer.js index cf6de0ef..2b73adaf 100644 --- a/app/routes/app/containers/AppContainer.js +++ b/app/routes/app/containers/AppContainer.js @@ -8,6 +8,7 @@ import { payInvoice } from '../../../reducers/payment' import { fetchChannels } from '../../../reducers/channels' import { setForm, + setPaymentType, setAmount, setMessage, setPubkey, @@ -24,6 +25,7 @@ const mapDispatchToProps = { setPubkey, setPaymentRequest, setForm, + setPaymentType, createInvoice, payInvoice, fetchChannels, diff --git a/graph.svg b/graph.svg deleted file mode 100644 index 36b1f680..00000000 --- a/graph.svg +++ /dev/null @@ -1,673 +0,0 @@ - - - - - - -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 - - - From d8c5623e0131d89e1fb889eb5356fd1752bcbf12 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Thu, 14 Sep 2017 12:13:28 -0500 Subject: [PATCH 05/20] feature(sendcoins): working demo of UX flow --- app/reducers/form.js | 4 +- .../app/components/components/Form/Form.js | 4 +- .../components/Form/components/Pay/Pay.js | 104 +++++++++++------- .../components/Form/components/Pay/Pay.scss | 29 ++--- package.json | 2 +- 5 files changed, 84 insertions(+), 59 deletions(-) diff --git a/app/reducers/form.js b/app/reducers/form.js index b91610bf..78425466 100644 --- a/app/reducers/form.js +++ b/app/reducers/form.js @@ -1,8 +1,8 @@ // Initial State const initialState = { - modalOpen: true, + modalOpen: false, formType: 'pay', - paymentType: 'onchain', + paymentType: '', amount: '0', message: '', pubkey: '', diff --git a/app/routes/app/components/components/Form/Form.js b/app/routes/app/components/components/Form/Form.js index d3b6ae04..2e241816 100644 --- a/app/routes/app/components/components/Form/Form.js +++ b/app/routes/app/components/components/Form/Form.js @@ -34,7 +34,9 @@ const Form = ({ { setPaymentRequest(payreq) - if (payreq.length === 124) { fetchInvoice(payreq) } + if (payreq.length === 124) { + setPaymentType('ln') + fetchInvoice(payreq) + } else if (payreq.length === 42) { + setPaymentType('onchain') + } else { + setPaymentType('') + } } const calculateAmount = value => (currency === 'usd' ? btc.satoshisToUsd(value, currentTicker.price_usd) : btc.satoshisToBtc(value)) + console.log('paymentType: ', paymentType) + console.log('onchainAmount: ', onchainAmount) return (
    -
    +
    1 ? (onchainAmount.length * 15) - 5 : 25}%`, fontSize: `${190 - (onchainAmount.length ** 2)}px` } + } + value={paymentType === 'ln' ? calculateAmount(invoiceAmount) : onchainAmount} + onChange={event => setAmount(event.target.value)} id='amount' - readOnly + readOnly={paymentType === 'ln'} />
    -
    setPaymentType('onchain')} - > - -
    - - paymentRequestOnChange(event.target.value)} - id='paymentRequest' - /> -
    -
    -
    -
    setPaymentType('ln')} - > -