diff --git a/app/components/ModalRoot/ModalRoot.js b/app/components/ModalRoot/ModalRoot.js index 1146c57e..2241d0da 100644 --- a/app/components/ModalRoot/ModalRoot.js +++ b/app/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/components/ModalRoot/SuccessfulSendPayment.js b/app/components/ModalRoot/SuccessfulSendPayment.js new file mode 100644 index 00000000..d8d74380 --- /dev/null +++ b/app/components/ModalRoot/SuccessfulSendPayment.js @@ -0,0 +1,22 @@ +import React from 'react' +import PropTypes from 'prop-types' +import AnimatedCheckmark from 'components/AnimatedCheckmark' +import styles from './SuccessfulSendPayment.scss' + +const SuccessfulSendPayment = ({ hideModal }) => ( +
+ +

+ Successfully sent payment  +

+
+ Done +
+
+) + +SuccessfulSendPayment.propTypes = { + hideModal: PropTypes.func.isRequired +} + +export default SuccessfulSendPayment diff --git a/app/components/ModalRoot/SuccessfulSendPayment.scss b/app/components/ModalRoot/SuccessfulSendPayment.scss new file mode 100644 index 00000000..297541bc --- /dev/null +++ b/app/components/ModalRoot/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/main.dev.js b/app/main.dev.js index 8d6b5416..52ba7a30 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 () => { @@ -99,3 +96,13 @@ 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..bc67489e 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 42b55c7c..f626af99 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)) +} + export function resetPayForm() { return { type: RESET_FORM 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/test/components/ModalRoot.spec.js b/test/components/ModalRoot.spec.js index cbd99af7..05a6dcf2 100644 --- a/test/components/ModalRoot.spec.js +++ b/test/components/ModalRoot.spec.js @@ -2,6 +2,7 @@ import React from 'react' import { shallow } from 'enzyme' import ModalRoot from '../../app/components/ModalRoot' import SuccessfulSendCoins from '../../app/components/ModalRoot/SuccessfulSendCoins' +import SuccessfulSendPayment from '../../app/components/ModalRoot/SuccessfulSendPayment' const defaultProps = { hideModal: () => {}, @@ -32,4 +33,16 @@ describe('SuccessfulSendCoins modal', () => { it('should render specific modal', () => { expect(el.find(SuccessfulSendCoins).length).toBe(1) }) -}); +}) + +describe('SuccessfulSendPayment modal', () => { + const props = { + ...defaultProps, + modalType: 'SUCCESSFUL_SEND_PAYMENT', + modalProps: {} + } + const el = shallow() + it('should render specific modal', () => { + expect(el.find(SuccessfulSendPayment).length).toBe(1) + }) +})