feat: Lightning Joule integration

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",

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

src/components/swaptab/index.js

@@ -148,45 +148,42 @@ 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)
+      );
     }
   };
 
   checkBaseAmount = baseAmount => {
     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>

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,13 +120,15 @@ class LandingPage extends React.Component {
                   initReverseSwap({
                     ...state,
                     keys,
+                    webln: this.webln,
                   });
 
                   goReverseSwap();
                 } else {
                   initSwap({
                     ...state,
                     keys,
+                    webln: this.webln,
                   });
 
                   goSwap();

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,

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,

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,