fix: reverse lockup timeout component

src/__test__/unit/action/DataStorage.spec.js

@@ -20,7 +20,7 @@ describe('data storage actions', () => {
       type: actionTypes.SET_ASSET,
       payload,
     };
-    expect(actions.dataStorageSetAsset(payload.asset, payload.amount)).toEqual(
+    expect(actions.dataStorageSetAsset(payload, payload.amount)).toEqual(
       expectedAction
     );
   });

src/actions/datastorageActions.js

@@ -14,7 +14,7 @@ export const dataStorageSetId = id => ({
  * @param {String} asset
  * @param {Number} amount
  */
-export const dataStorageSetAsset = (asset, amount) => ({
+export const dataStorageSetAsset = ({ asset, amount }) => ({
   type: actionTypes.SET_ASSET,
   payload: {
     asset,

src/actions/navigation.js

@@ -28,6 +28,10 @@ class Navigation {
   navReverseSwap = () => {
     this._push(routes.reverseSwap);
   };
+
+  navReverseExpired = () => {
+    this._push(routes.reverseExpired);
+  };
 }
 
 export default Navigation;

src/actions/reverseActions.js

@@ -143,6 +143,7 @@ const handleReverseSwapStatus = (
     case SwapUpdateEvent.TransactionRefunded:
       source.close();
       dispatch(timelockExpired());
+
       break;
 
     case SwapUpdateEvent.InvoiceSettled:

src/constants/routes/index.js

@@ -3,3 +3,4 @@ export const faq = '/faq';
 export const refund = '/refund';
 export const swap = '/swap';
 export const reverseSwap = '/reverseswap';
+export const reverseExpired = '/expired';

src/views/index.js

@@ -14,6 +14,7 @@ const Faq = lazy(() => import('./faq'));
 const Swap = lazy(() => import('./swap'));
 const Refund = lazy(() => import('./refund'));
 const ReverseSwap = lazy(() => import('./reverse'));
+const ReverseSwapTimelockExpired = lazy(() => import('./reversetimelock'));
 
 jss.setup(preset);
 const App = () => {
@@ -28,6 +29,11 @@ const App = () => {
               <Route exact path={routes.swap} component={Swap} />
               <Route exact path={routes.refund} component={Refund} />
               <Route exact path={routes.reverseSwap} component={ReverseSwap} />
+              <Route
+                exact
+                path={routes.reverseExpired}
+                component={ReverseSwapTimelockExpired}
+              />
               <Route path={'*'} component={LandingPage} />
             </Switch>
           </Router>

src/views/landingpage/index.js

@@ -1,7 +1,7 @@
 import React, { lazy } from 'react';
 import { connect } from 'react-redux';
-import PlatformSelector from '../../hoc/platformSelector';
 import { initSwap } from '../../actions/swapActions';
+import PlatformSelector from '../../hoc/platformSelector';
 import * as actions from '../../actions/landingPageActions';
 import { initReverseSwap } from '../../actions/reverseActions';
 

src/views/reverse/index.js

@@ -9,9 +9,11 @@ import {
   dataStorageSetAsset,
   dataStorageSetId,
 } from '../../actions/datastorageActions';
+import { navigation } from '../../actions';
 
 const mapStateToProps = state => ({
   webln: state.reverseSwapReducer.webln,
+
   inSwapMode: state.reverseSwapReducer.inSwapMode,
   isFetching: state.reverseSwapReducer.isFetching,
   isReconnecting: state.reverseSwapReducer.isReconnecting,
@@ -31,6 +33,7 @@ const mapDispatchToProps = dispatch => ({
   dataStorageSetAsset: (asset, amount) =>
     dispatch(dataStorageSetAsset(asset, amount)),
   dataStorageSetId: id => dispatch(dataStorageSetId(id)),
+  goTimelockExpired: () => dispatch(navigation.navReverseExpired()),
 });
 
 export default connect(

src/views/reverse/reverse.js

@@ -40,22 +40,20 @@ class ReverseSwap extends React.Component {
       swapResponse,
       swapInfo,
       dataStorageSetId,
+      dataStorageSetAsset,
     } = this.props;
 
     this.redirectIfLoggedOut();
 
-    if (
-      prevProps.swapInfo.quote !== swapInfo.quote &&
-      prevProps.swapInfo.quoteAmount !== swapInfo.quoteAmount
-    ) {
-      this.props.dataStorageSetAsset({
+    if (swapInfo.quote && swapInfo.quoteAmount) {
+      dataStorageSetAsset({
         asset: swapInfo.quote,
         amount: swapInfo.quoteAmount,
       });
     }
 
-    if (swapResponse.id !== prevProps.swapResponse.id && swapResponse.id) {
-      dataStorageSetId(swapResponse);
+    if (swapResponse.id) {
+      dataStorageSetId(swapResponse.id);
     }
 
     if (isReconnecting && !prevProps.isReconnecting) {
@@ -250,7 +248,7 @@ ReverseSwap.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   isReconnecting: PropTypes.bool.isRequired,
   inSwapMode: PropTypes.bool.isRequired,
-  goTimelockExpired: PropTypes.func,
+  goTimelockExpired: PropTypes.func.isRequired,
   webln: PropTypes.object,
   swapInfo: PropTypes.object,
   swapResponse: PropTypes.object,

src/views/reversetimelock/ReverseSwapTimelockExpired.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import injectSheet from 'react-jss';
-import { navigation } from '../../action';
+import { navigation } from '../../actions';
 import View from '../../components/view';
 import NavigationBar from '../../components/navigationbar';
 import Controls from '../../components/controls';
@@ -49,51 +49,58 @@ const styles = theme => ({
   },
 });
 
-const ReverseSwapTimelockExpired = ({
-  classes,
-  amount,
-  asset,
-  id,
-  dataStorageClear,
-}) => (
-  <BackGround>
-    <NavigationBar />
-    <View className={classes.wrapper}>
-      <View className={classes.tab}>
-        <View className={classes.padding}>
-          <View className={classes.content}>
-            <h1>
-              Aw swap! We could not lock your {amount} {asset} for you.
-            </h1>
-            <p className={classes.reason}>
-              The time lock of the locked up funds expired before the invoice
-              got paid. Therefore, we refunded the coins back to our platform
-              and aborted the Swap. Please report your Swap ID <i>{id}</i>{' '}
-              <a href={'https://discordapp.com/invite/cq4dkwQ'}>here</a> to{' '}
-              learn further details.
-            </p>
+class ReverseSwapTimelockExpired extends React.Component {
+  componentDidMount = () => {
+    if (this.props.id === '') {
+      navigation.navHome();
+    }
+  };
+
+  render = () => {
+    const { id, asset, amount, classes, dataStorageClear } = this.props;
+
+    return (
+      <BackGround>
+        <NavigationBar />
+        <View className={classes.wrapper}>
+          <View className={classes.tab}>
+            <View className={classes.padding}>
+              <View className={classes.content}>
+                <h1>
+                  Aw swap! We could not lock your {amount} {asset} for you.
+                </h1>
+                <p className={classes.reason}>
+                  The time lock of the locked up funds expired before the
+                  invoice got paid. Therefore, we refunded the coins back to our
+                  platform and aborted the Swap. Please report your Swap ID{' '}
+                  <i>{id}</i>{' '}
+                  <a href={'https://discordapp.com/invite/cq4dkwQ'}>here</a> to{' '}
+                  learn further details.
+                </p>
+              </View>
+            </View>
+            <View className={classes.retry}>
+              <Controls
+                text={'Try another Swap'}
+                onPress={() => {
+                  window.location.reload();
+                  dataStorageClear();
+                }}
+              />
+            </View>
           </View>
         </View>
-        <View className={classes.retry}>
-          <Controls
-            text={'Try another Swap'}
-            onPress={() => {
-              dataStorageClear();
-              navigation.navHome();
-            }}
-          />
-        </View>
-      </View>
-    </View>
-  </BackGround>
-);
+      </BackGround>
+    );
+  };
+}
 
 ReverseSwapTimelockExpired.propTypes = {
   classes: PropTypes.object.isRequired,
   id: PropTypes.string,
   asset: PropTypes.string,
   amount: PropTypes.number,
-  dataStorageClear: PropTypes.func,
+  dataStorageClear: PropTypes.func.isRequired,
 };
 
 export default injectSheet(styles)(ReverseSwapTimelockExpired);