feature(ln-payment-links): POC for LN payment links

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

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))
+}
+
 // ------------------------------------
 // Action Handlers
 // ------------------------------------

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

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

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

app/routes/app/components/components/ModalRoot/SuccessfulSendPayment/index.js

@@ -0,0 +1,3 @@
+import SuccessfulSendPayment from './SuccessfulSendPayment'
+
+export default SuccessfulSendPayment