feat: support new hold reverse swaps

package.json

@@ -1,6 +1,6 @@
 {
   "name": "boltz-frontend",
-  "version": "1.1.0-beta",
+  "version": "1.2.0-beta",
   "scripts": {
     "start": "BROWSER=none react-scripts start",
     "build": "react-scripts build",
@@ -28,8 +28,8 @@
   "dependencies": {
     "axios": "^0.19.0",
     "bignumber.js": "^9.0.0",
-    "bitcoinjs-lib": "^5.1.3",
-    "boltz-core": "^0.0.7",
+    "bitcoinjs-lib": "^5.1.6",
+    "boltz-core": "^0.0.10",
     "eventsource": "^1.0.7",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",

src/__test__/unit/reducers/ReverseReducer.spec.js

@@ -19,7 +19,9 @@ describe('reverse swap reducer', () => {
     const action = {
       type: actions.REVERSE_SWAP_RESPONSE,
       payload: {
-        response: 'response',
+        response: {
+          test: 'response',
+        },
         success: false,
       },
     };

src/actions/index.js

@@ -1,6 +1,14 @@
+import Navigation from './navigation';
 import { generateKeys } from './keys';
 import history from '../constants/history';
-import Navigation from './navigation';
+
+const randomBytes = size => {
+  const bytes = Buffer.allocUnsafe(size);
+  global.crypto.getRandomValues(bytes);
+
+  return bytes;
+};
 
 const navigation = new Navigation(history);
-export { generateKeys, navigation };
+
+export { navigation, randomBytes, generateKeys };

src/actions/reverseActions.js

@@ -23,6 +23,8 @@ export const initReverseSwap = state => ({
     quoteAmount: state.quoteAmount,
     keys: state.keys,
     pair: state.pair,
+    preimage: state.preimage,
+    preimageHash: state.preimageHash,
   },
 });
 
@@ -61,7 +63,7 @@ export const setIsReconnecting = isReconnecting => ({
 });
 
 export const startReverseSwap = (swapInfo, nextStage, timelockExpired) => {
-  const url = `${boltzApi}/createreverseswap`;
+  const url = `${boltzApi}/createswap`;
   const { pair, keys, baseAmount } = swapInfo;
 
   const amount = toSatoshi(Number.parseFloat(baseAmount));
@@ -70,10 +72,12 @@ export const startReverseSwap = (swapInfo, nextStage, timelockExpired) => {
     dispatch(reverseSwapRequest());
     axios
       .post(url, {
+        type: 'reversesubmarine',
         pairId: pair.id,
         invoiceAmount: amount,
         orderSide: pair.orderSide,
         claimPublicKey: keys.publicKey,
+        preimageHash: swapInfo.preimageHash,
       })
       .then(response => {
         dispatch(reverseSwapResponse(true, response.data));
@@ -95,17 +99,40 @@ export const startReverseSwap = (swapInfo, nextStage, timelockExpired) => {
   };
 };
 
-const getClaimTransaction = (swapInfo, response, preimage, feeEstimation) => {
+export const claimSwap = (dispatch, nextStage, swapInfo, swapResponse) => {
+  dispatch(
+    getFeeEstimation(feeEstimation => {
+      const claimTransaction = getClaimTransaction(
+        swapInfo,
+        swapResponse,
+        feeEstimation
+      );
+
+      dispatch(
+        broadcastClaimTransaction(
+          swapInfo.quote,
+          claimTransaction.toHex(),
+          () => {
+            dispatch(reverseSwapResponse(true, swapResponse));
+            nextStage();
+          }
+        )
+      );
+    })
+  );
+};
+
+const getClaimTransaction = (swapInfo, response, feeEstimation) => {
   const redeemScript = getHexBuffer(response.redeemScript);
-  const lockupTransaction = Transaction.fromHex(response.lockupTransaction);
+  const lockupTransaction = Transaction.fromHex(response.transactionHex);
 
   return constructClaimTransaction(
     [
       {
         ...detectSwap(redeemScript, lockupTransaction),
         redeemScript,
-        preimage: Buffer.from(preimage, 'hex'),
         txHash: lockupTransaction.getHash(),
+        preimage: getHexBuffer(swapInfo.preimage),
         keys: ECPair.fromPrivateKey(getHexBuffer(swapInfo.keys.privateKey)),
       },
     ],
@@ -115,6 +142,24 @@ const getClaimTransaction = (swapInfo, response, preimage, feeEstimation) => {
   );
 };
 
+const broadcastClaimTransaction = (currency, claimTransaction, cb) => {
+  const url = `${boltzApi}/broadcasttransaction`;
+  return dispatch => {
+    axios
+      .post(url, {
+        currency,
+        transactionHex: claimTransaction,
+      })
+      .then(() => cb())
+      .catch(error => {
+        const message = error.response.data.error;
+
+        window.alert(`Failed to broadcast claim transaction: ${message}`);
+        dispatch(reverseSwapResponse(false, message));
+      });
+  };
+};
+
 const handleReverseSwapStatus = (
   data,
   source,
@@ -134,42 +179,40 @@ const handleReverseSwapStatus = (
     latestSwapEvent = status;
   }
 
+  // TODO: handle transaction failed
   switch (status) {
+    case SwapUpdateEvent.TransactionMempool:
+      dispatch(
+        reverseSwapResponse(true, {
+          transactionId: data.transactionId,
+          transactionHex: data.transactionHex,
+        })
+      );
+
+      nextStage();
+      break;
+
     case SwapUpdateEvent.TransactionConfirmed:
-      dispatch(setReverseSwapStatus('Waiting for invoice to be paid...'));
-      nextStage(true);
+      source.close();
+
+      claimSwap(dispatch, nextStage, swapInfo, {
+        ...response,
+        transactionId: data.transactionId,
+        transactionHex: data.transactionHex,
+      });
       break;
 
+    case SwapUpdateEvent.SwapExpired:
     case SwapUpdateEvent.TransactionRefunded:
       source.close();
       dispatch(timelockExpired());
 
       break;
 
-    case SwapUpdateEvent.InvoiceSettled:
+    case SwapUpdateEvent.TransactionFailed:
       source.close();
-
-      dispatch(
-        getFeeEstimation(feeEstimation => {
-          const claimTransaction = getClaimTransaction(
-            swapInfo,
-            response,
-            data.preimage,
-            feeEstimation
-          );
-
-          dispatch(
-            broadcastClaimTransaction(
-              swapInfo.quote,
-              claimTransaction.toHex(),
-              () => {
-                dispatch(reverseSwapResponse(true, response));
-                nextStage();
-              }
-            )
-          );
-        })
-      );
+      dispatch(setReverseSwapStatus('Could not send onchain coins'));
+      dispatch(reverseSwapResponse(false, {}));
       break;
 
     default:
@@ -241,21 +284,3 @@ const startListening = (
     );
   };
 };
-
-const broadcastClaimTransaction = (currency, claimTransaction, cb) => {
-  const url = `${boltzApi}/broadcasttransaction`;
-  return dispatch => {
-    axios
-      .post(url, {
-        currency,
-        transactionHex: claimTransaction,
-      })
-      .then(() => cb())
-      .catch(error => {
-        const message = error.response.data.error;
-
-        window.alert(`Failed to broadcast claim transaction: ${message}`);
-        dispatch(reverseSwapResponse(false, message));
-      });
-  };
-};

src/actions/swapActions.js

@@ -60,6 +60,7 @@ export const startSwap = (swapInfo, cb) => {
     dispatch(swapRequest());
     axios
       .post(url, {
+        type: 'submarine',
         pairId: pair.id,
         orderSide: pair.orderSide,
         invoice: invoice,

src/components/qrcode/index.js

@@ -3,29 +3,27 @@ import Qrious from 'qrious';
 import PropTypes from 'prop-types';
 
 class QrCode extends React.Component {
-  id = '';
-
-  componentDidMount() {
+  render() {
     const { size, link } = this.props;
-    const element = document.getElementById(this.id);
-    this.qr = new Qrious({
-      element,
-    });
 
-    this.qr.set({
-      size,
-      level: 'H',
-      value: link,
-      background: 'white',
-      foreground: 'black',
-      backgroundAlpha: 1,
-      foregroundAlpha: 1,
-    });
-  }
+    if (link) {
+      this.id = `qr-${link.substring(0, 4)}`;
 
-  render() {
-    const { link } = this.props;
-    this.id = `qr-${link.substring(0, 4)}`;
+      const element = document.getElementById(this.id);
+      this.qr = new Qrious({
+        element,
+      });
+
+      this.qr.set({
+        size,
+        level: 'H',
+        value: link,
+        background: 'white',
+        foreground: 'black',
+        backgroundAlpha: 1,
+        foregroundAlpha: 1,
+      });
+    }
 
     return <canvas id={this.id} />;
   }

src/constants/index.js

@@ -9,6 +9,8 @@ export const SwapUpdateEvent = {
   InvoiceSettled: 'invoice.settled',
   InvoiceFailedToPay: 'invoice.failedToPay',
 
+  TransactionFailed: 'transaction.failed',
+  TransactionMempool: 'transaction.mempool',
   TransactionClaimed: 'transaction.claimed',
   TransactionRefunded: 'transaction.refunded',
   TransactionConfirmed: 'transaction.confirmed',