feat: show user that time lock of swap expired

BoltzExchange · Feb 21, 2019 · a19b885 · a19b885
1 parent 3726a31
commit a19b885
Show file tree

Hide file tree

Showing 11 changed files with 298 additions and 129 deletions.
diff --git a/src/action/navigation/index.js b/src/action/navigation/index.js
@@ -15,6 +15,8 @@ class Navigation {
 
   goSwap = () => navAction(routes.swap);
   goReverseSwap = () => navAction(routes.reverseSwap);
+  goReverseSwapTimelockExpired = () =>
+    navAction(routes.reverseSwapTimelockExpired);
   goSwapConfirm = () => navAction(routes.swapConfirm);
   goSwapDownloadRefund = () => navAction(routes.swapDownloadRefund);
   goSwapDone = () => navAction(routes.swapDone);

diff --git a/src/constants/routes/index.js b/src/constants/routes/index.js
@@ -15,6 +15,7 @@ export const swapDone = 'SwapDone';
  * Reverse Swap routes
  */
 export const reverseSwap = 'ReverseSwap';
+export const reverseSwapTimelockExpired = 'ReverseSwapTimelockExpired';
 
 /**
  * Refund routes

diff --git a/src/views/faq/index.js b/src/views/faq/index.js
@@ -4,7 +4,6 @@ import { nav } from '../../action';
 
 const mapDispatchToProps = dispatch => ({
   goHome: () => dispatch(nav.goHome()),
-  goSwap: () => dispatch(nav.goSwap()),
   goRefund: () => dispatch(nav.goRefund()),
   goFaq: () => dispatch(nav.goFaq()),
 });

diff --git a/src/views/refund/refund.js b/src/views/refund/refund.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
+import View from '../../components/view';
+import Prompt from '../../components/prompt';
 import Controls from '../../components/controls';
 import Background from '../../components/background';
 import StepsWizard from '../../components/stepswizard';
-import Prompt from '../../components/prompt';
-import View from '../../components/view';
 import {
   InputDestinationAddress,
   UploadRefundFile,

diff --git a/src/views/reverse/index.js b/src/views/reverse/index.js
@@ -20,9 +20,10 @@ const mapStateToProps = state => ({
 const mapDispatchToProps = dispatch => ({
   goHome: () => dispatch(nav.goHome()),
   completeSwap: () => dispatch(completeReverseSwap()),
+  goTimelockExpired: () => dispatch(nav.goReverseSwapTimelockExpired()),
   setReverseSwapAddress: address => dispatch(setReverseSwapAddress(address)),
-  startReverseSwap: (info, nextStage) =>
-    dispatch(startReverseSwap(info, nextStage)),
+  startReverseSwap: (info, nextStage, timelockExpired) =>
+    dispatch(startReverseSwap(info, nextStage, timelockExpired)),
 });
 
 export default connect(

diff --git a/src/views/reverse/reverse.js b/src/views/reverse/reverse.js
@@ -6,10 +6,11 @@ import Prompt from '../../components/prompt';
 import Controls from '../../components/controls';
 import Confetti from '../../components/confetti';
 import Loading from '../../components/loading';
-import { InputAddress, PayInvoice, LockingFunds } from './steps';
 import BackGround from '../../components/background';
-import StepsWizard from '../../components/stepswizard';
 import { getCurrencyName } from '../../scripts/utils';
+import StepsWizard from '../../components/stepswizard';
+import DataStorage from '../reversetimelock/dataStorage';
+import { InputAddress, PayInvoice, LockingFunds } from './steps';
 
 const styles = () => ({
   wrapper: {
@@ -19,131 +20,157 @@ const styles = () => ({
   },
 });
 
-const ReverseSwap = ({
-  classes,
-  setReverseSwapAddress,
-  startReverseSwap,
-  completeSwap,
-  goHome,
-  webln,
-  swapFailResponse,
-  swapInfo,
-  swapResponse,
-  isFetching,
-  swapStatus,
-}) => {
-  return (
-    <BackGround>
-      <Prompt />
-      <View className={classes.wrapper}>
-        <StepsWizard
-          range={4}
-          stage={1}
-          id={swapResponse ? swapResponse.id : null}
-          onExit={() => {
-            if (window.confirm('Are you sure you want to exit')) {
-              completeSwap();
-              goHome();
-            }
-          }}
-        >
-          <StepsWizard.Steps>
-            <StepsWizard.Step
-              num={1}
-              render={() => (
-                <InputAddress
-                  swapInfo={swapInfo}
-                  onChange={setReverseSwapAddress}
-                />
-              )}
-            />
-            <StepsWizard.Step
-              num={2}
-              render={() => (
-                <LockingFunds swapInfo={swapInfo} swapResponse={swapResponse} />
-              )}
-            />
-            <StepsWizard.Step
-              num={3}
-              render={() => (
-                <PayInvoice
-                  asset={swapInfo.base}
-                  invoice={swapResponse.invoice}
-                  webln={webln}
-                />
-              )}
-            />
-            <StepsWizard.Step num={4} render={() => <Confetti />} />
-          </StepsWizard.Steps>
-          <StepsWizard.Controls>
-            <StepsWizard.Control
-              num={1}
-              render={props => (
-                <Controls
-                  loading={!swapInfo.address}
-                  text={'Next'}
-                  loadingText={`Input a ${getCurrencyName(
-                    swapInfo.quote
-                  )} address`}
-                  loadingRender={() => undefined}
-                  onPress={() => {
-                    if (swapInfo.address && swapInfo.address !== '') {
-                      startReverseSwap(swapInfo, props.nextStage);
-                      props.nextStage();
+class ReverseSwap extends React.Component {
+  render() {
+    const {
+      webln,
+      goHome,
+      classes,
+      swapInfo,
+      swapStatus,
+      isFetching,
+      swapResponse,
+      completeSwap,
+      goTimelockExpired,
+      startReverseSwap,
+      swapFailResponse,
+      setReverseSwapAddress,
+    } = this.props;
+
+    DataStorage.swapInfo = {
+      asset: swapInfo.quote,
+      amount: swapInfo.quoteAmount,
+    };
+
+    if (swapResponse) {
+      DataStorage.swapInfo.id = swapResponse.id;
+    }
+
+    return (
+      <BackGround>
+        <Prompt />
+        <View className={classes.wrapper}>
+          <StepsWizard
+            range={4}
+            stage={1}
+            id={swapResponse ? swapResponse.id : null}
+            onExit={() => {
+              if (window.confirm('Are you sure you want to exit')) {
+                completeSwap();
+                goHome();
+              }
+            }}
+          >
+            <StepsWizard.Steps>
+              <StepsWizard.Step
+                num={1}
+                render={() => (
+                  <InputAddress
+                    swapInfo={swapInfo}
+                    onChange={setReverseSwapAddress}
+                  />
+                )}
+              />
+              <StepsWizard.Step
+                num={2}
+                render={() => (
+                  <LockingFunds
+                    swapInfo={swapInfo}
+                    swapResponse={swapResponse}
+                  />
+                )}
+              />
+              <StepsWizard.Step
+                num={3}
+                render={() => (
+                  <PayInvoice
+                    asset={swapInfo.base}
+                    invoice={swapResponse.invoice}
+                    webln={webln}
+                  />
+                )}
+              />
+              <StepsWizard.Step num={4} render={() => <Confetti />} />
+            </StepsWizard.Steps>
+            <StepsWizard.Controls>
+              <StepsWizard.Control
+                num={1}
+                render={props => (
+                  <Controls
+                    loading={!swapInfo.address}
+                    text={'Next'}
+                    loadingText={`Input a ${getCurrencyName(
+                      swapInfo.quote
+                    )} address`}
+                    loadingRender={() => undefined}
+                    onPress={() => {
+                      if (swapInfo.address && swapInfo.address !== '') {
+                        startReverseSwap(
+                          swapInfo,
+                          props.nextStage,
+                          goTimelockExpired
+                        );
+                        props.nextStage();
+                      }
+                    }}
+                  />
+                )}
+              />
+              <StepsWizard.Control
+                num={2}
+                render={props => (
+                  <Controls
+                    loading={isFetching}
+                    loadingText={'Locking your funds...'}
+                    loadingRender={() => <Loading />}
+                    error={swapFailResponse === true}
+                    errorAction={() =>
+                      startReverseSwap(
+                        swapInfo,
+                        props.nextStage,
+                        goTimelockExpired
+                      )
                     }
-                  }}
-                />
-              )}
-            />
-            <StepsWizard.Control
-              num={2}
-              render={props => (
-                <Controls
-                  loading={isFetching}
-                  loadingText={'Locking your funds...'}
-                  loadingRender={() => <Loading />}
-                  error={swapFailResponse === true}
-                  errorAction={() =>
-                    startReverseSwap(swapInfo, props.nextStage)
-                  }
-                  errorText={`Reverse swap failed`}
-                />
-              )}
-            />
-            <StepsWizard.Control
-              num={3}
-              render={() => (
-                <Controls
-                  loading={isFetching}
-                  loadingText={swapStatus}
-                  loadingRender={() => <Loading />}
-                />
-              )}
-            />
-            <StepsWizard.Control
-              num={4}
-              render={() => (
-                <Controls
-                  text={'Swap Again!'}
-                  onPress={() => {
-                    completeSwap();
-                    goHome();
-                  }}
-                />
-              )}
-            />
-          </StepsWizard.Controls>
-        </StepsWizard>
-      </View>
-    </BackGround>
-  );
-};
+                    errorText={`Reverse swap failed`}
+                  />
+                )}
+              />
+              <StepsWizard.Control
+                num={3}
+                render={() => (
+                  <Controls
+                    loading={isFetching}
+                    loadingText={swapStatus}
+                    loadingRender={() => <Loading />}
+                  />
+                )}
+              />
+              <StepsWizard.Control
+                num={4}
+                render={() => (
+                  <Controls
+                    text={'Swap Again!'}
+                    onPress={() => {
+                      completeSwap();
+                      goHome();
+                    }}
+                  />
+                )}
+              />
+            </StepsWizard.Controls>
+          </StepsWizard>
+        </View>
+      </BackGround>
+    );
+  }
+}
 
 ReverseSwap.propTypes = {
   classes: PropTypes.object.isRequired,
   history: PropTypes.object.isRequired,
   isFetching: PropTypes.bool.isRequired,
   goHome: PropTypes.func.isRequired,
+  goTimelockExpired: PropTypes.func.isRequired,
   webln: PropTypes.object,
   swapInfo: PropTypes.object,
   swapResponse: PropTypes.object,

diff --git a/src/views/reverse/reverseActions.js b/src/views/reverse/reverseActions.js
@@ -50,7 +50,7 @@ export const reverseSwapResponse = (success, response) => ({
   },
 });
 
-export const startReverseSwap = (swapInfo, nextStage) => {
+export const startReverseSwap = (swapInfo, nextStage, timelockExpired) => {
   const url = `${boltzApi}/createreverseswap`;
   const { pair, keys, baseAmount } = swapInfo;
 
@@ -70,7 +70,13 @@ export const startReverseSwap = (swapInfo, nextStage) => {
 
         // To set "isFetching" to true
         dispatch(reverseSwapRequest());
-        startListening(dispatch, swapInfo, response.data, nextStage);
+        startListening(
+          dispatch,
+          swapInfo,
+          response.data,
+          nextStage,
+          timelockExpired
+        );
       })
       .catch(error => {
         const message = error.response.data.error;
@@ -101,16 +107,27 @@ const claimTransaction = (swapInfo, response, preimage, feeEstimation) => {
   );
 };
 
-const startListening = (dispatch, swapInfo, response, nextStage) => {
+const startListening = (
+  dispatch,
+  swapInfo,
+  response,
+  nextStage,
+  timelockExpired
+) => {
   const source = new EventSource(`${boltzApi}/swapstatus?id=${response.id}`);
 
   source.onmessage = event => {
     const data = JSON.parse(event.data);
+    const message = data.message;
 
-    if (data.message.startsWith('Transaction confirmed')) {
+    if (message.startsWith('Transaction confirmed')) {
       dispatch(setReverseSwapStatus('Waiting for invoice to be paid...'));
       nextStage();
+    } else if (data.message.startsWith('Refunded lockup transaction')) {
+      source.close();
+      dispatch(timelockExpired());
     } else {
+      source.close();
       dispatch(
         getFeeEstimation(feeEstimation => {
           const claimTx = claimTransaction(