From b4adfed8e4baef1893e90520da5c6165cf2310bc Mon Sep 17 00:00:00 2001
From: michael1011 <me@michael1011.at>
Date: Wed, 6 Feb 2019 17:47:13 +0100
Subject: [PATCH] feat: Lightning Joule integration

---
 package-lock.json                     | 70 +++++++++++++++------------
 package.json                          |  3 +-
 src/components/inputarea/index.js     |  3 ++
 src/components/swaptab/index.js       | 55 ++++++++++-----------
 src/views/landingpage/landingpage.js  | 11 +++++
 src/views/reverse/index.js            |  1 +
 src/views/reverse/reverse.js          |  3 ++
 src/views/reverse/reverseActions.js   |  1 +
 src/views/reverse/reverseReducer.js   |  2 +
 src/views/reverse/steps/payInvoice.js | 48 ++++++++++++------
 src/views/swap/index.js               |  1 +
 src/views/swap/steps/inputInvoice.js  | 16 ++++++
 src/views/swap/swap.js                | 10 +++-
 src/views/swap/swapActions.js         |  1 +
 src/views/swap/swapReducer.js         |  2 +
 15 files changed, 149 insertions(+), 78 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 42f1bbb..e00e647 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1010,6 +1010,27 @@
         "loader-utils": "^1.1.0"
       }
     },
+    "@types/chrome": {
+      "version": "0.0.74",
+      "resolved": "https://registry.npmjs.org/@types/chrome/-/chrome-0.0.74.tgz",
+      "integrity": "sha512-hzosS5CkQcIKCgxcsV2AzbJ36KNxG/Db2YEN/erEu7Boprg+KpMDLBQqKFmSo+JkQMGqRcicUyqCowJpuT+C6A==",
+      "requires": {
+        "@types/filesystem": "*"
+      }
+    },
+    "@types/filesystem": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/filesystem/-/filesystem-0.0.29.tgz",
+      "integrity": "sha512-85/1KfRedmfPGsbK8YzeaQUyV1FQAvMPMTuWFQ5EkLd2w7szhNO96bk3Rh/SKmOfd9co2rCLf0Voy4o7ECBOvw==",
+      "requires": {
+        "@types/filewriter": "*"
+      }
+    },
+    "@types/filewriter": {
+      "version": "0.0.28",
+      "resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.28.tgz",
+      "integrity": "sha1-wFTor02d11205jq8dviFFocU1LM="
+    },
     "@types/q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.1.tgz",
@@ -5945,8 +5966,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5964,13 +5984,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5983,18 +6001,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -6097,8 +6112,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "ini": {
           "version": "1.3.5",
@@ -6108,7 +6122,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -6121,20 +6134,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -6151,7 +6161,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -6224,8 +6233,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -6235,7 +6243,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -6311,8 +6318,7 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -6342,7 +6348,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -6360,7 +6365,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -6399,13 +6403,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true,
-          "optional": true
+          "bundled": true
         }
       }
     },
@@ -16739,6 +16741,14 @@
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
       "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
     },
+    "webln": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/webln/-/webln-0.1.0.tgz",
+      "integrity": "sha512-EB2YOCobf7wXDGqIZ+fWizGSyKANsX4LMy08FhN4sRn4aQWx1vwDW9HuqWQylhPvLvKQUhhinMYisvbyNT0pMg==",
+      "requires": {
+        "@types/chrome": "0.0.74"
+      }
+    },
     "webpack": {
       "version": "4.19.1",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.19.1.tgz",
diff --git a/package.json b/package.json
index f298e62..3363a1a 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,8 @@
     "react-scripts": "^2.1.3",
     "redux": "^4.0.1",
     "redux-logger": "^3.0.6",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "webln": "^0.1.0"
   },
   "devDependencies": {
     "@babel/plugin-syntax-decorators": "^7.2.0",
diff --git a/src/components/inputarea/index.js b/src/components/inputarea/index.js
index fe64936..adba9e4 100644
--- a/src/components/inputarea/index.js
+++ b/src/components/inputarea/index.js
@@ -22,10 +22,12 @@ const InputArea = ({
   height,
   width,
   onChange,
+  value,
   placeholder,
 }) => (
   <textarea
     autoFocus={autoFocus}
+    value={value}
     placeholder={placeholder}
     className={classes.wrapper}
     rows={height}
@@ -41,6 +43,7 @@ InputArea.propTypes = {
   onChange: PropTypes.func.isRequired,
   error: PropTypes.bool.isRequired,
   autoFocus: PropTypes.bool,
+  value: PropTypes.string,
   placeholder: PropTypes.string,
 };
 
diff --git a/src/components/swaptab/index.js b/src/components/swaptab/index.js
index bd8aaa6..848f66f 100644
--- a/src/components/swaptab/index.js
+++ b/src/components/swaptab/index.js
@@ -148,20 +148,34 @@ class SwapTab extends React.Component {
       const rate = this.getRate();
 
       // Swapping from chain to chain or from Lightning to Lightning is not supported right now
-      if (this.baseAsset.isLightning !== this.quoteAsset.isLightning) {
-        this.setState(
-          {
-            rate,
-            error: false,
-          },
-          () => this.updateQuoteAmount(this.state.baseAmount)
-        );
-      } else {
+      if (
+        this.state.base === this.state.quote ||
+        (this.baseAsset.isLightning && this.quoteAsset.isLightning)
+      ) {
         this.setState({
           rate: undefined,
           error: true,
+          errorMessage: 'Choose a different asset',
         });
+        return;
       }
+
+      if (!this.baseAsset.isLightning && !this.quoteAsset.isLightning) {
+        this.setState({
+          rate: undefined,
+          error: true,
+          errorMessage: 'Coming soon',
+        });
+        return;
+      }
+
+      this.setState(
+        {
+          rate,
+          error: false,
+        },
+        () => this.updateQuoteAmount(this.state.baseAmount)
+      );
     }
   };
 
@@ -169,24 +183,7 @@ class SwapTab extends React.Component {
     return baseAmount <= MAX && baseAmount >= MIN;
   };
 
-  checkValidPair = (quote, base) => {
-    if (quote === base) {
-      this.setState({
-        error: true,
-        errorMessage: 'Choose a different asset',
-      });
-      return;
-    }
-
-    const pair = `${quote}/${base}`;
-    if (pair === 'BTC/LTC' || pair === 'LTC/BTC') {
-      this.setState({
-        error: true,
-        errorMessage: 'Coming soon',
-      });
-      return;
-    }
-
+  updatePair = (quote, base) => {
     this.setState({ base, quote, error: false, errorMessage: '' });
   };
 
@@ -274,7 +271,7 @@ class SwapTab extends React.Component {
             <DropDown
               defaultValue={base}
               fields={currencies}
-              onChange={e => this.checkValidPair(quote, e)}
+              onChange={e => this.updatePair(quote, e)}
             />
           </View>
           <View className={classes.select}>
@@ -290,7 +287,7 @@ class SwapTab extends React.Component {
             <DropDown
               defaultValue={quote}
               fields={currencies}
-              onChange={e => this.checkValidPair(e, base)}
+              onChange={e => this.updatePair(e, base)}
             />
           </View>
         </View>
diff --git a/src/views/landingpage/landingpage.js b/src/views/landingpage/landingpage.js
index e4b4b4b..fb90075 100644
--- a/src/views/landingpage/landingpage.js
+++ b/src/views/landingpage/landingpage.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
+import { requestProvider } from 'webln';
 import BackGround from '../../components/background';
 import View from '../../components/view';
 import { LinkButton } from '../../components/button';
@@ -57,6 +58,14 @@ class LandingPage extends React.Component {
     this.props.getPairs(() => {
       this.forceUpdate();
     });
+
+    try {
+      requestProvider().then(provider => {
+        this.webln = provider;
+      });
+    } catch (error) {
+      console.log(`Could not enable webln: ${error}`);
+    }
   }
 
   render() {
@@ -111,6 +120,7 @@ class LandingPage extends React.Component {
                   initReverseSwap({
                     ...state,
                     keys,
+                    webln: this.webln,
                   });
 
                   goReverseSwap();
@@ -118,6 +128,7 @@ class LandingPage extends React.Component {
                   initSwap({
                     ...state,
                     keys,
+                    webln: this.webln,
                   });
 
                   goSwap();
diff --git a/src/views/reverse/index.js b/src/views/reverse/index.js
index f73b181..f485c52 100644
--- a/src/views/reverse/index.js
+++ b/src/views/reverse/index.js
@@ -8,6 +8,7 @@ import { nav } from '../../action/index';
 import ReverseSwap from './reverse';
 
 const mapStateToProps = state => ({
+  webln: state.reverseSwapReducer.webln,
   inSwapMode: state.reverseSwapReducer.inSwapMode,
   isFetching: state.reverseSwapReducer.isFetching,
   swapInfo: state.reverseSwapReducer.swapInfo,
diff --git a/src/views/reverse/reverse.js b/src/views/reverse/reverse.js
index 7c885fe..5691f86 100644
--- a/src/views/reverse/reverse.js
+++ b/src/views/reverse/reverse.js
@@ -23,6 +23,7 @@ const ReverseSwap = ({
   startReverseSwap,
   completeSwap,
   goHome,
+  webln,
   nextStage,
   swapInfo,
   swapResponse,
@@ -60,6 +61,7 @@ const ReverseSwap = ({
                 <PayInvoice
                   asset={swapInfo.base}
                   invoice={swapResponse.invoice}
+                  webln={webln}
                 />
               )}
             />
@@ -111,6 +113,7 @@ ReverseSwap.propTypes = {
   history: PropTypes.object.isRequired,
   isFetching: PropTypes.bool.isRequired,
   goHome: PropTypes.func.isRequired,
+  webln: PropTypes.object,
   swapInfo: PropTypes.object,
   swapResponse: PropTypes.object,
   completeSwap: PropTypes.func,
diff --git a/src/views/reverse/reverseActions.js b/src/views/reverse/reverseActions.js
index c61e7cc..2b2cba5 100644
--- a/src/views/reverse/reverseActions.js
+++ b/src/views/reverse/reverseActions.js
@@ -9,6 +9,7 @@ import { toSatoshi, getHexBuffer, getNetwork } from '../../scripts/utils';
 export const initReverseSwap = state => ({
   type: actionTypes.INIT_REVERSE_SWAP,
   payload: {
+    webln: state.webln,
     base: state.base,
     quote: state.quote,
     baseAmount: state.baseAmount,
diff --git a/src/views/reverse/reverseReducer.js b/src/views/reverse/reverseReducer.js
index 8f105f4..2f89a0e 100644
--- a/src/views/reverse/reverseReducer.js
+++ b/src/views/reverse/reverseReducer.js
@@ -1,6 +1,7 @@
 import * as actionTypes from '../../constants/actions';
 
 const initalState = {
+  webln: null,
   isFetching: false,
   swapInfo: {
     base: null,
@@ -33,6 +34,7 @@ const reducer = (state = initalState, action) => {
     case actionTypes.INIT_REVERSE_SWAP:
       return {
         ...state,
+        webln: action.payload.webln,
         swapInfo: {
           ...state.swapInfo,
           base: action.payload.base,
diff --git a/src/views/reverse/steps/payInvoice.js b/src/views/reverse/steps/payInvoice.js
index 723f093..eef56f5 100644
--- a/src/views/reverse/steps/payInvoice.js
+++ b/src/views/reverse/steps/payInvoice.js
@@ -44,27 +44,43 @@ const payInvoiceStyles = () => ({
   },
 });
 
-const StyledPayInvoice = ({ classes, asset, invoice }) => (
-  <View className={classes.wrapper}>
-    <View className={classes.qrcode}>
-      <QrCode size={300} link={invoice} />
-    </View>
-    <View className={classes.info}>
-      <p className={classes.title}>Pay this {asset} Lightning invoice</p>
-      <p className={classes.invoice} id="copy">
-        {invoice}
-      </p>
-      <span className={classes.action} onClick={() => copyToClipBoard()}>
-        Copy
-      </span>
-    </View>
-  </View>
-);
+class StyledPayInvoice extends React.Component {
+  componentDidMount() {
+    const { invoice, webln } = this.props;
+
+    console.log(webln);
+    if (webln) {
+      webln.sendPayment(invoice);
+    }
+  }
+
+  render() {
+    const { classes, asset, invoice } = this.props;
+
+    return (
+      <View className={classes.wrapper}>
+        <View className={classes.qrcode}>
+          <QrCode size={300} link={invoice} />
+        </View>
+        <View className={classes.info}>
+          <p className={classes.title}>Pay this {asset} Lightning invoice</p>
+          <p className={classes.invoice} id="copy">
+            {invoice}
+          </p>
+          <span className={classes.action} onClick={() => copyToClipBoard()}>
+            Copy
+          </span>
+        </View>
+      </View>
+    );
+  }
+}
 
 StyledPayInvoice.propTypes = {
   classes: PropTypes.object.isRequired,
   asset: PropTypes.string.isRequired,
   invoice: PropTypes.string.isRequired,
+  webln: PropTypes.object,
 };
 
 const PayInvoice = injectSheet(payInvoiceStyles)(StyledPayInvoice);
diff --git a/src/views/swap/index.js b/src/views/swap/index.js
index 6035ea3..15c7e76 100644
--- a/src/views/swap/index.js
+++ b/src/views/swap/index.js
@@ -4,6 +4,7 @@ import { nav } from '../../action/index';
 import Swap from './swap';
 
 const mapStateToProps = state => ({
+  webln: state.swapReducer.webln,
   inSwapMode: state.swapReducer.inSwapMode,
   swapInfo: state.swapReducer.swapInfo,
   swapResponse: state.swapReducer.swapResponse.response,
diff --git a/src/views/swap/steps/inputInvoice.js b/src/views/swap/steps/inputInvoice.js
index f41c7ae..744ec56 100644
--- a/src/views/swap/steps/inputInvoice.js
+++ b/src/views/swap/steps/inputInvoice.js
@@ -34,8 +34,22 @@ class StyledInputInvoice extends React.Component {
     error: false,
   };
 
+  componentDidMount() {
+    const { swapInfo, webln } = this.props;
+
+    if (webln) {
+      webln.makeInvoice(swapInfo.quoteAmount).then(response => {
+        const invoice = response.paymentRequest;
+
+        this.setState({ value: invoice });
+        this.onChange(invoice);
+      });
+    }
+  }
+
   onChange = input => {
     const valid = input.slice(0, 2);
+
     if (valid === 'ln') {
       this.setState({ error: false }, () => this.props.onChange(input, false));
     } else {
@@ -62,6 +76,7 @@ class StyledInputInvoice extends React.Component {
           height={150}
           onChange={this.onChange}
           error={error}
+          value={this.state.value}
           placeholder={
             'Paste your invoice here: lntb20n1pwqhmchpp5v9tsdn62ptl47z8wvzj7xakw09wmj5yax05pv5z2alhpqgdmedlsd' +
             'qqcqzys2wuh6vnuu8f6c94mx7wlduh8kge8ftuarg23nnkpuhgdjpw96hdj2qem2mcztny8vxng6gdc5xsfh2' +
@@ -76,6 +91,7 @@ class StyledInputInvoice extends React.Component {
 StyledInputInvoice.propTypes = {
   classes: PropTypes.object.isRequired,
   swapInfo: PropTypes.object.isRequired,
+  webln: PropTypes.object,
   onChange: PropTypes.func.isRequired,
 };
 
diff --git a/src/views/swap/swap.js b/src/views/swap/swap.js
index 0feaada..e776d2d 100644
--- a/src/views/swap/swap.js
+++ b/src/views/swap/swap.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
 import View from '../../components/view';
+import { FEE } from '../../constants/fees';
 import Prompt from '../../components/prompt';
 import Loading from '../../components/loader';
 import Controls from '../../components/controls';
@@ -9,7 +10,6 @@ import Confetti from '../../components/confetti';
 import BackGround from '../../components/background';
 import StepsWizard from '../../components/stepswizard';
 import { InputInvoice, SendTransaction, DownloadRefund } from './steps';
-import { FEE } from '../../constants/fees';
 
 const styles = () => ({
   wrapper: {
@@ -21,6 +21,7 @@ const styles = () => ({
 
 const Swap = ({
   classes,
+  webln,
   setSwapInvoice,
   completeSwap,
   goHome,
@@ -48,7 +49,11 @@ const Swap = ({
             <StepsWizard.Step
               num={1}
               render={() => (
-                <InputInvoice swapInfo={swapInfo} onChange={setSwapInvoice} />
+                <InputInvoice
+                  swapInfo={swapInfo}
+                  webln={webln}
+                  onChange={setSwapInvoice}
+                />
               )}
             />
             <StepsWizard.Step
@@ -133,6 +138,7 @@ Swap.propTypes = {
   classes: PropTypes.object.isRequired,
   history: PropTypes.object.isRequired,
   goHome: PropTypes.func.isRequired,
+  webln: PropTypes.object,
   swapInfo: PropTypes.object,
   swapResponse: PropTypes.object,
   completeSwap: PropTypes.func,
diff --git a/src/views/swap/swapActions.js b/src/views/swap/swapActions.js
index 166d3d3..745c417 100644
--- a/src/views/swap/swapActions.js
+++ b/src/views/swap/swapActions.js
@@ -12,6 +12,7 @@ export const completeSwap = () => {
 export const initSwap = state => ({
   type: actionTypes.INIT_SWAP,
   payload: {
+    webln: state.webln,
     base: state.base,
     quote: state.quote,
     baseAmount: state.baseAmount,
diff --git a/src/views/swap/swapReducer.js b/src/views/swap/swapReducer.js
index 8d6d4ad..c1453fa 100644
--- a/src/views/swap/swapReducer.js
+++ b/src/views/swap/swapReducer.js
@@ -1,6 +1,7 @@
 import * as actionTypes from '../../constants/actions';
 
 const initalState = {
+  webln: null,
   isFetching: false,
   swapInfo: {
     base: null,
@@ -37,6 +38,7 @@ const reducer = (state = initalState, action) => {
     case actionTypes.INIT_SWAP:
       return {
         ...state,
+        webln: action.payload.webln,
         swapInfo: {
           ...state.swapInfo,
           base: action.payload.base,