feat: watch new escrow events

src/js/features/escrow/actions.js

@@ -3,7 +3,7 @@ import {
   CREATE_ESCROW, LOAD_ESCROWS, RELEASE_ESCROW, CANCEL_ESCROW,
   RATE_TRANSACTION, PAY_ESCROW, OPEN_CASE, OPEN_CASE_SIGNATURE, PAY_ESCROW_SIGNATURE, CLOSE_DIALOG,
   ADD_USER_RATING, USER_RATING, GET_ESCROW, GET_FEE, FUND_ESCROW, RESET_STATUS,
-  WATCH_ESCROW
+  WATCH_ESCROW, WATCH_ESCROW_CREATIONS
 } from './constants';
 
 import Escrow from '../../../embarkArtifacts/contracts/Escrow';
@@ -82,6 +82,7 @@ export const rateTransaction = (escrowId, rating) => ({ type: RATE_TRANSACTION,
 export const resetStatus = () => ({type: RESET_STATUS});
 
 export const watchEscrow = (escrowId) => ({type: WATCH_ESCROW, escrowId});
+export const watchEscrowCreations = (offers) => ({type: WATCH_ESCROW_CREATIONS, offers});
 
 // TODO: Update with new UI
 

src/js/features/escrow/constants.js

@@ -8,6 +8,9 @@ export const RESET_CREATE_ESCROW_STATUS = 'RESET_CREATE_ESCROW_STATUS';
 export const WATCH_ESCROW = 'WATCH_ESCROW';
 export const ESCROW_EVENT_RECEIVED = 'ESCROW_EVENT_RECEIVED';
 
+export const WATCH_ESCROW_CREATIONS = 'WATCH_ESCROW_CREATIONS';
+export const ESCROW_CREATED_EVENT_RECEIVED = 'ESCROW_CREATED_EVENT_RECEIVED';
+
 export const GET_ESCROW = 'GET_ESCROW';
 export const GET_ESCROW_SUCCEEDED = 'GET_ESCROW_SUCCEEDED';
 export const GET_ESCROW_FAILED = 'GET_ESCROW_FAILED';

src/js/features/escrow/helpers.js

@@ -15,7 +15,8 @@ export const eventTypes = {
   paid: 'Paid',
   funded: 'Funded',
   released: 'Released',
-  canceled: 'Canceled'
+  canceled: 'Canceled',
+  created: 'Created'
 };
 
 export const escrowStatus = {

src/js/features/escrow/reducer.js

@@ -9,7 +9,7 @@ import {
   PAY_ESCROW, PAY_ESCROW_SUCCEEDED, PAY_ESCROW_FAILED, PAY_ESCROW_PRE_SUCCESS,
   CANCEL_ESCROW, CANCEL_ESCROW_SUCCEEDED, CANCEL_ESCROW_FAILED, CANCEL_ESCROW_PRE_SUCCESS,
   RATE_TRANSACTION, RATE_TRANSACTION_FAILED, RATE_TRANSACTION_SUCCEEDED, RATE_TRANSACTION_PRE_SUCCESS,
-  ESCROW_EVENT_RECEIVED
+  ESCROW_EVENT_RECEIVED, ESCROW_CREATED_EVENT_RECEIVED
 } from './constants';
 import { States } from '../../utils/transaction';
 import { escrowStatus, eventTypes } from './helpers';
@@ -24,7 +24,8 @@ const DEFAULT_STATE = {
   payStatus: States.none,
   cancelStatus: States.none,
   rateStatus: States.none,
-  fee: '0'
+  fee: '0',
+  newEscrow: null
 };
 
 // eslint-disable-next-line complexity
@@ -229,6 +230,11 @@ function reducer(state = DEFAULT_STATE, action) {
         ...state,
         escrows: escrowsClone
       };
+    case ESCROW_CREATED_EVENT_RECEIVED:
+      return {
+        ...state,
+        newEscrow: action.result.returnValues.escrowId
+      };
     case RESET_STATUS:
       return {
         ...state,

src/js/features/escrow/saga.js

@@ -19,7 +19,7 @@ import {
   SIGNATURE_PAYMENT, SIGNATURE_OPEN_CASE, GET_ARBITRATION_BY_ID_FAILED,
   USER_RATING, USER_RATING_FAILED, USER_RATING_SUCCEEDED, ADD_USER_RATING,
   GET_ESCROW, GET_ESCROW_FAILED, GET_ESCROW_SUCCEEDED, GET_FEE, GET_FEE_SUCCEEDED, GET_FEE_FAILED,
-  WATCH_ESCROW, ESCROW_EVENT_RECEIVED
+  WATCH_ESCROW, ESCROW_EVENT_RECEIVED, WATCH_ESCROW_CREATIONS, ESCROW_CREATED_EVENT_RECEIVED
 } from './constants';
 import {eventTypes} from './helpers';
 
@@ -159,6 +159,10 @@ export function *doLoadEscrows({address}) {
   }
 }
 
+export function *onLoadEscrows() {
+  yield takeEvery(LOAD_ESCROWS, doLoadEscrows);
+}
+
 export function *doGetEscrow({escrowId}) {
   try {
     const escrow = yield Escrow.methods.transactions(escrowId).call();
@@ -175,14 +179,23 @@ export function *doGetEscrow({escrowId}) {
   }
 }
 
-export function *onLoadEscrows() {
-  yield takeEvery(LOAD_ESCROWS, doLoadEscrows);
-}
-
 export function *onGetEscrow() {
   yield takeEvery(GET_ESCROW, doGetEscrow);
 }
 
+export function *doGetEscrowByEvent({result}) {
+  try {
+    yield doGetEscrow({escrowId: result.returnValues.escrowId});
+  } catch (error) {
+    console.error(error);
+    yield put({type: GET_ESCROW_FAILED, error: error.message});
+  }
+}
+
+export function *onGetEscrowAfterEvent() {
+  yield takeEvery(ESCROW_CREATED_EVENT_RECEIVED, doGetEscrowByEvent);
+}
+
 export function *onGetFee() {
   yield takeEvery(GET_FEE, doGetFee);
 }
@@ -262,8 +275,20 @@ export function *onWatchEscrow() {
   yield takeEvery(WATCH_ESCROW, watchEscrow);
 }
 
+export function *watchEscrowCreations({offers}) {
+  try {
+    yield all(offers.map(offer => contractEvent(Escrow, eventTypes.created, {offerId: offer.offerId}, ESCROW_CREATED_EVENT_RECEIVED)));
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+export function *onWatchEscrowCreations() {
+  yield takeEvery(WATCH_ESCROW_CREATIONS, watchEscrowCreations);
+}
+
 export default [
   fork(onCreateEscrow), fork(onLoadEscrows), fork(onGetEscrow), fork(onReleaseEscrow), fork(onCancelEscrow), fork(onUserRating), fork(onAddUserRating),
   fork(onRateTx), fork(onPayEscrow), fork(onPayEscrowSignature), fork(onOpenCase), fork(onOpenCaseSignature), fork(onOpenCaseSuccess),
-  fork(onGetFee), fork(onFundEscrow), fork(onWatchEscrow)
+  fork(onGetFee), fork(onFundEscrow), fork(onWatchEscrow), fork(onWatchEscrowCreations), fork(onGetEscrowAfterEvent)
 ];

src/js/features/escrow/selectors.js

@@ -64,6 +64,8 @@ export const getEscrowById = (state, escrowId) => {
 export const getFee = state => state.escrow.fee;
 export const txHash = state => state.escrow.txHash;
 
+export const newEscrow = state => state.escrow.newEscrow;
+
 // TODO: move to new UI
 export const receipt = state => state.escrow.receipt;
 export const error = state => state.escrow.error;

src/js/layout/App.jsx

@@ -45,6 +45,7 @@ import SignatureContainer from '../pages/tmp/SignatureContainer';
 import prices from '../features/prices';
 import network from '../features/network';
 import metadata from '../features/metadata';
+import escrow from '../features/escrow';
 import license from "../features/license";
 
 const PRICE_FETCH_INTERVAL = 60000;
@@ -53,9 +54,13 @@ class App extends Component {
   constructor(props) {
     super(props);
     this.props.init();
+    this.watchingTrades = false;
     setInterval(() => {
       this.props.fetchExchangeRates();
     }, PRICE_FETCH_INTERVAL);
+    if (this.props.profile && this.props.profile.offers) {
+      this.watchTradesForOffers();
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -67,6 +72,16 @@ class App extends Component {
       this.props.checkLicenseOwner();
       this.props.setCurrentUser(web3.eth.defaultAccount);
     }
+    if (!this.watchingTrades && ((!prevProps.profile && this.props.profile && this.props.profile.offers) || (prevProps.profile && !prevProps.profile.offers && this.props.profile.offers))) {
+      this.watchTradesForOffers();
+    }
+  }
+
+  watchTradesForOffers() {
+    if (this.watchingTrades) {
+      return;
+    }
+    this.props.watchEscrowCreations(this.props.profile.offers);
   }
 
   shouldComponentUpdate(nextProps) {
@@ -152,7 +167,8 @@ const mapStateToProps = (state) => {
     isReady: network.selectors.isReady(state),
     hasToken: Object.keys(network.selectors.getTokens(state)).length > 0,
     error: network.selectors.getError(state),
-    profile: metadata.selectors.getProfile(state, address)
+    profile: metadata.selectors.getProfile(state, address),
+    newEscrow: escrow.selectors.newEscrow(state)
   };
 };
 
@@ -170,7 +186,8 @@ App.propTypes = {
   setCurrentUser: PropTypes.func,
   resetState: PropTypes.func,
   isLicenseOwner: PropTypes.bool,
-  currentUser: PropTypes.string
+  currentUser: PropTypes.string,
+  watchEscrowCreations: PropTypes.func
 };
 
 export default connect(
@@ -182,6 +199,7 @@ export default connect(
     resetState: network.actions.resetState,
     loadProfile: metadata.actions.load,
     checkLicenseOwner: license.actions.checkLicenseOwner,
-    setCurrentUser: metadata.actions.setCurrentUser
+    setCurrentUser: metadata.actions.setCurrentUser,
+    watchEscrowCreations: escrow.actions.watchEscrowCreations
   }
 )(App);

src/js/pages/Escrow/components/CancelDispute.jsx

@@ -3,7 +3,6 @@ import React, {Fragment, Component} from 'react';
 import {Row, Col} from 'reactstrap';
 import PropTypes from 'prop-types';
 import RoundedIcon from "../../../ui/RoundedIcon";
-import escrow from '../../../features/escrow';
 import ConfirmDialog from "../../../components/ConfirmDialog";
 import CancelIcon from "../../../../images/close.png";
 import classnames from 'classnames';
@@ -36,7 +35,7 @@ class CancelDispute extends Component {
             <h6 className="m-0 font-weight-normal">Cancel Dispute</h6>
           </Col>
         </Row>
-        
+
       </div>
       <ConfirmDialog display={this.state.displayDialog} onConfirm={this.cancelDispute} onCancel={this.displayDialog(false)} title="Cancel Dispute" content="Are you sure?" cancelText="No" />
     </Fragment>;