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 - - -