Merge pull request #78 from BoltzExchange/joule-integration

feat: Lightning Joule integration

package.json

@@ -42,7 +42,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';
@@ -65,6 +66,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}`);
+    }
   }
 
   toggleModal = () => {
@@ -127,13 +136,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,

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,

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

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,