Display a QR code on payment request modal

packages/lightning-components/QRCode/index.js

@@ -2,12 +2,27 @@ import React from 'react'
 import { format } from 'url'
 import qrImage from 'qr-image'
 
-export const QRCode = ({ address }) => {
-  const bitcoinURL = format({ protocol: 'bitcoin:', host: address })
-  const svg = qrImage.imageSync(bitcoinURL, { type: 'svg' })
+export const QRCode = {
+  bitcoin: ({ address }) => {
+    const bitcoinURL = format({ protocol: 'bitcoin:', host: address })
+    const svg = qrImage.svgObject(bitcoinURL, { type: 'svg' })
 
-  // eslint-disable-next-line react/no-danger
-  return <div dangerouslySetInnerHTML={{ __html: svg }} />
+    return (
+      <svg viewBox={ "0 0 " + svg.size + " " + svg.size } shapeRendering="crispEdges">
+        <path d={ svg.path }/>
+      </svg>
+    )
+  },
+  lightning: ({ paymentRequest }) => {
+    paymentRequest = paymentRequest.replace('lightning://', 'lightning:')
+    const svg = qrImage.svgObject(paymentRequest, { type: 'svg' })
+
+    return (
+      <svg viewBox={ "0 0 " + svg.size + " " + svg.size } shapeRendering="crispEdges">
+        <path d={ svg.path }/>
+      </svg>
+    )
+  }
 }
 
 export default QRCode

packages/lightning-core/request/BitcoinWallet.js

@@ -67,7 +67,7 @@ export class BitcoinWallet extends React.Component {
 
         <Popup name={ QR_CODE }>
           <div style={ styles.qrPopup }>
-            <QRCode address={ address } />
+            <QRCode.bitcoin address={ address } />
           </div>
         </Popup>
 

packages/lightning-core/request/PaymentRequestPopup.js

@@ -2,6 +2,7 @@ import React from 'react'
 import reactCSS from 'reactcss'
 import { remote } from 'electron'
 import { Popup } from 'lightning-popup'
+import { QRCode } from 'lightning-components'
 import { Head, Input } from '../common'
 
 const { Menu, MenuItem } = remote
@@ -29,6 +30,15 @@ export const PaymentRequestPopup = ({ paymentRequest, closePopup }) => {
         color: '#4990E2',
         cursor: 'pointer',
       },
+      qrPopup: {
+        background: '#fff',
+        borderRadius: 2,
+        width: 300,
+        height: 300,
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        paddingBottom: 10,
+      }
     },
   })
   const menu = new Menu()
@@ -50,6 +60,9 @@ export const PaymentRequestPopup = ({ paymentRequest, closePopup }) => {
           body="Send this encoded payment request to the party who would like to
                 pay you via the Lightning Network."
         />
+        <div style={ styles.qrPopup }>
+            <QRCode.lightning paymentRequest={ paymentRequest } />
+        </div>
         <Input
           fullWidth
           selectOnClick