Merge pull request #58 from LN-Zap/feature/protocol-client

Feature/protocol client

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 */
 }
 

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 }) => (
+  <div className={styles.container}>
+    <AnimatedCheckmark />
+    <h1>
+      <span>Successfully sent payment</span>&nbsp;
+    </h1>
+    <div className={styles.button} onClick={hideModal}>
+        Done
+    </div>
+  </div>
+)
+
+SuccessfulSendPayment.propTypes = {
+  hideModal: PropTypes.func.isRequired
+}
+
+export default SuccessfulSendPayment

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;
+  }
+}

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()
+})

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,

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

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

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(<ModalRoot {...props} />)
+  it('should render specific modal', () => {
+    expect(el.find(SuccessfulSendPayment).length).toBe(1)
+  })
+})