From c4c11f7552e9dc967ed9b8f672576a0d8529da4d Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Mon, 2 Oct 2017 22:46:10 -0500 Subject: [PATCH] feature(ln-payment-links): POC for LN payment links --- app/main.dev.js | 14 +++++-- app/reducers/ipc.js | 3 ++ app/reducers/payform.js | 8 ++++ app/reducers/payment.js | 3 ++ .../components/ModalRoot/ModalRoot.js | 4 +- .../SuccessfulSendPayment.js | 26 +++++++++++++ .../SuccessfulSendPayment.scss | 37 +++++++++++++++++++ .../ModalRoot/SuccessfulSendPayment/index.js | 3 ++ 8 files changed, 94 insertions(+), 4 deletions(-) create mode 100644 app/routes/app/components/components/ModalRoot/SuccessfulSendPayment/SuccessfulSendPayment.js create mode 100644 app/routes/app/components/components/ModalRoot/SuccessfulSendPayment/SuccessfulSendPayment.scss create mode 100644 app/routes/app/components/components/ModalRoot/SuccessfulSendPayment/index.js diff --git a/app/main.dev.js b/app/main.dev.js index 8d6b5416..86758411 100644 --- a/app/main.dev.js +++ b/app/main.dev.js @@ -27,9 +27,6 @@ if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true') const path = require('path'); const p = path.join(__dirname, '..', 'app', 'node_modules'); require('module').globalPaths.push(p); - - // set icon - // app.dock.setIcon(`${path.join(__dirname, '..', 'resources')}/zap_2.png`) } const installExtensions = async () => { @@ -69,6 +66,8 @@ app.on('ready', async () => { frame: false }); + mainWindow.setTitle('Zap') + mainWindow.maximize(); mainWindow.loadURL(`file://${__dirname}/app.html`); @@ -99,3 +98,12 @@ app.on('ready', async () => { lndMethods(event, msg, data) }) }); + +app.setAsDefaultProtocolClient('lightning') + +app.on('open-url', function (event, url) { + event.preventDefault() + const payreq = url.split(':')[1] + mainWindow.webContents.send('lightningPaymentUri', { payreq }) + mainWindow.show() +}) diff --git a/app/reducers/ipc.js b/app/reducers/ipc.js index b1c58f1a..2d819b31 100644 --- a/app/reducers/ipc.js +++ b/app/reducers/ipc.js @@ -19,6 +19,7 @@ import { pushclosechannelstatus } from './channels' +import { lightningPaymentUri } from './payform' import { receivePayments, paymentSuccessful } from './payment' import { receiveInvoices, createdInvoice, receiveFormInvoice, invoiceUpdate } from './invoice' import { receiveBalance } from './balance' @@ -46,6 +47,8 @@ const ipc = createIpc({ receiveBalance, + lightningPaymentUri, + paymentSuccessful, channelSuccessful, diff --git a/app/reducers/payform.js b/app/reducers/payform.js index b031b8ff..17827ad6 100644 --- a/app/reducers/payform.js +++ b/app/reducers/payform.js @@ -3,6 +3,7 @@ import bitcoin from 'bitcoinjs-lib' import isEmpty from 'lodash/isEmpty' +import { setFormType } from './form' import { tickerSelectors } from './ticker' import { btc, bech32 } from '../utils' @@ -64,6 +65,13 @@ export function updatePayErrors(errorsObject) { } } +export const lightningPaymentUri = (event, { payreq }) => (dispatch) => { + // Open pay form + dispatch(setFormType('PAY_FORM')) + // Set payreq + dispatch(setPayInput(payreq)) +} + // ------------------------------------ // Action Handlers // ------------------------------------ diff --git a/app/reducers/payment.js b/app/reducers/payment.js index 5666b42a..41883562 100644 --- a/app/reducers/payment.js +++ b/app/reducers/payment.js @@ -2,6 +2,7 @@ import { createSelector } from 'reselect' import { ipcRenderer } from 'electron' import { setFormType } from './form' import { resetPayForm } from './payform' +import { showModal } from './modal' // ------------------------------------ // Constants @@ -73,6 +74,8 @@ export const paymentSuccessful = () => (dispatch) => { // Close the form modal once the payment was succesful dispatch(setFormType(null)) + // Show successful payment state + dispatch(showModal('SUCCESSFUL_SEND_PAYMENT')) // Refetch payments (TODO: dont do a full refetch, rather append new tx to list) dispatch(fetchPayments()) diff --git a/app/routes/app/components/components/ModalRoot/ModalRoot.js b/app/routes/app/components/components/ModalRoot/ModalRoot.js index 1146c57e..2241d0da 100644 --- a/app/routes/app/components/components/ModalRoot/ModalRoot.js +++ b/app/routes/app/components/components/ModalRoot/ModalRoot.js @@ -2,10 +2,12 @@ import React from 'react' import PropTypes from 'prop-types' import { MdClose } from 'react-icons/lib/md' import SuccessfulSendCoins from './SuccessfulSendCoins' +import SuccessfulSendPayment from './SuccessfulSendPayment' import styles from './ModalRoot.scss' const MODAL_COMPONENTS = { - SUCCESSFUL_SEND_COINS: SuccessfulSendCoins + SUCCESSFUL_SEND_COINS: SuccessfulSendCoins, + SUCCESSFUL_SEND_PAYMENT: SuccessfulSendPayment /* other modals */ } diff --git a/app/routes/app/components/components/ModalRoot/SuccessfulSendPayment/SuccessfulSendPayment.js b/app/routes/app/components/components/ModalRoot/SuccessfulSendPayment/SuccessfulSendPayment.js new file mode 100644 index 00000000..e409251d --- /dev/null +++ b/app/routes/app/components/components/ModalRoot/SuccessfulSendPayment/SuccessfulSendPayment.js @@ -0,0 +1,26 @@ +import { shell } from 'electron' +import React from 'react' +import PropTypes from 'prop-types' +import AnimatedCheckmark from 'components/AnimatedCheckmark' +import { btc } from 'utils' +import styles from './SuccessfulSendPayment.scss' + +const SuccessfulSendPayment = ({ hideModal }) => { + return ( +
+ +

+ Successfully sent payment  +

+
+ Done +
+
+ ) +} + +SuccessfulSendPayment.propTypes = { + hideModal: PropTypes.func.isRequired +} + +export default SuccessfulSendPayment diff --git a/app/routes/app/components/components/ModalRoot/SuccessfulSendPayment/SuccessfulSendPayment.scss b/app/routes/app/components/components/ModalRoot/SuccessfulSendPayment/SuccessfulSendPayment.scss new file mode 100644 index 00000000..b562cf30 --- /dev/null +++ b/app/routes/app/components/components/ModalRoot/SuccessfulSendPayment/SuccessfulSendPayment.scss @@ -0,0 +1,37 @@ +@import '../../../../../../variables.scss'; + +.container { + position: relative; + min-height: 250px; + top: calc(50% - 250px); + text-align: center; + + h1 { + font-size: 20px; + margin: 50px 0; + + .link { + cursor: pointer; + color: $main; + text-decoration: underline; + } + + .amount, .addr { + font-weight: bold; + } + } + + .button { + text-align: center; + border-radius: 8px; + background: $main; + padding: 20px 10px; + font-weight: bold; + cursor: pointer; + text-transform: uppercase; + letter-spacing: .2px; + color: $white; + width: 15%; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/app/routes/app/components/components/ModalRoot/SuccessfulSendPayment/index.js b/app/routes/app/components/components/ModalRoot/SuccessfulSendPayment/index.js new file mode 100644 index 00000000..f6f1b05a --- /dev/null +++ b/app/routes/app/components/components/ModalRoot/SuccessfulSendPayment/index.js @@ -0,0 +1,3 @@ +import SuccessfulSendPayment from './SuccessfulSendPayment' + +export default SuccessfulSendPayment