fix(coinify monitor buy quote expiry)

packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/sagas.js

@@ -1,8 +1,9 @@
-import { put, call, select } from 'redux-saga/effects'
+import { put, call, select, take } from 'redux-saga/effects'
 import { any, merge, path, prop, equals, head } from 'ramda'
 import { delay } from 'redux-saga'
 import * as A from './actions'
 import * as actions from '../../actions'
+import * as actionTypes from '../../actionTypes'
 import * as selectors from '../../selectors.js'
 import * as C from 'services/AlertService'
 import * as service from 'services/CoinifyService'
@@ -328,6 +329,7 @@ export default ({ coreSagas }) => {
     const tradeToFinish = data.payload
     try {
       if (tradeToFinish.state === 'awaiting_transfer_in') {
+        yield put(actions.core.data.coinify.handleTradeSuccess(tradeToFinish))
         if (tradeToFinish.medium === 'card') {
           yield call(coreSagas.data.coinify.kycAsTrade, { kyc: tradeToFinish }) // core expects obj key to be 'kyc'
           yield put(A.coinifyNextCheckoutStep('isx'))

packages/blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/ISignThis/index.js

@@ -2,13 +2,15 @@ import React, { Component, Fragment } from 'react'
 import styled from 'styled-components'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { actions, selectors } from 'data'
-import { path } from 'ramda'
+import { actions } from 'data'
+import { path, prop } from 'ramda'
 import { Button, Text, Tooltip } from 'blockchain-info-components'
 import { FormattedMessage } from 'react-intl'
+
 import Helper from 'components/BuySell/FAQ'
 import CountdownTimer from 'components/Form/CountdownTimer'
 import * as Currency from 'blockchain-wallet-v4/src/exchange/currency'
+import { getData } from './selectors'
 
 const ISXContainer = styled.div`
   display: flex;
@@ -127,7 +129,7 @@ class ISignThisContainer extends Component {
         }
 
         let frame = document.getElementById('isx-iframe')
-        if (e.source !== frame.contentWindow) {
+        if (e.source !== prop('contentWindow', frame)) {
           // Source of message isn't from the iframe
           return
         }
@@ -201,6 +203,7 @@ class ISignThisContainer extends Component {
   }
 
   onQuoteExpiration () {
+    console.log('Quote expired')
     this.setState({ quoteExpired: true })
   }
 
@@ -229,9 +232,10 @@ class ISignThisContainer extends Component {
                 </Fragment>
               )
             } else {
+              console.log(q.expiresAt, q.expiresAt.getTime())
               return (
                 <CountdownTimer
-                  expiryDate={q.expiresAt.getTime()}
+                  expiryDate={trade.map(prop('quoteExpireTime')).getOrElse(q.expiresAt.getTime())}
                   handleExpiry={this.onQuoteExpiration}
                   tooltipExpiryTime='15 minutes'
                   hideTooltip
@@ -269,11 +273,7 @@ class ISignThisContainer extends Component {
   }
 }
 
-const mapStateToProps = (state) => ({
-  walletOptions: path(['walletOptionsPath'], state),
-  quoteR: selectors.core.data.coinify.getQuote(state),
-  trade: selectors.core.data.coinify.getTrade(state)
-})
+const mapStateToProps = (state) => getData(state)
 
 const mapDispatchToProps = (dispatch) => ({
   formActions: bindActionCreators(actions.form, dispatch),

packages/blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/ISignThis/selectors.js

@@ -0,0 +1,8 @@
+import { path } from 'ramda'
+import { selectors } from 'data'
+
+export const getData = (state) => ({
+  walletOptions: path(['walletOptionsPath'], state),
+  quoteR: selectors.core.data.coinify.getQuote(state),
+  trade: selectors.core.data.coinify.getTrade(state)
+})

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/index.js

@@ -30,7 +30,7 @@ class CoinifyBuyContainer extends React.Component {
   render () {
     const { data, modalActions, coinifyActions, coinifyDataActions, buyQuoteR, currency, paymentMedium, trade, formActions, canTrade, ...rest } = this.props
     const { step, checkoutBusy, coinifyBusy, subscriptions, trades } = rest
-    const { handleTrade, fetchQuote, refreshBuyQuote } = coinifyDataActions
+    const { fetchQuote, refreshBuyQuote } = coinifyDataActions
     const { showModal } = modalActions
     const { coinifyNotAsked, openKYC, coinifyNextCheckoutStep } = coinifyActions
     const { change } = formActions
@@ -45,7 +45,6 @@ class CoinifyBuyContainer extends React.Component {
     return data.cata({
       Success: (value) => <Success
         value={value}
-        handleTrade={handleTrade}
         showModal={showModal}
         buyQuoteR={buyQuoteR}
         fetchBuyQuote={quote => fetchQuote({ quote, nextAddress: value.nextAddress })}

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/selectors.js

@@ -11,34 +11,17 @@ export const getProfileData = (state) => {
 export const getTrades = (state) =>
   selectors.core.data.coinify.getTrades(state).getOrElse(null)
 
-export const getSubscriptions = (state) => selectors.core.data.coinify.getSubscriptions(state).getOrElse([])
-
-export const getRateQuote = (state) => {
-  try {
-    return selectors.core.data.coinify.getRateQuote(state)
-  } catch (e) {
-    return null
-  }
-}
+export const getSubscriptions = (state) =>
+  selectors.core.data.coinify.getSubscriptions(state).getOrElse([])
 
 export const getTrade = (state) =>
   selectors.core.data.coinify.getTrade(state).getOrElse(null)
 
-export const getQuote = (state) => {
-  try {
-    return selectors.core.data.coinify.getQuote(state)
-  } catch (e) {
-    return null
-  }
-}
+export const getQuote = (state) =>
+  selectors.core.data.coinify.getQuote(state)
 
-export const getCurrency = (state) => {
-  try {
-    return selectors.core.data.coinify.getLevel(state)
-  } catch (e) {
-    return null
-  }
-}
+export const getCurrency = (state) =>
+  selectors.core.data.coinify.getLevel(state)
 
 export const getBase = (state) =>
   path(['form', 'exchangeCheckout', 'active'], state)

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/OrderCheckout.js

@@ -24,14 +24,13 @@ const OrderCheckout = ({ changeTab, quoteR, account, onFetchQuote, reason, limit
     return checkoutButtonLimitsHelper(quoteR, limits, type)
   }
 
-  const rateHelper = () => {
-    return quoteR.map(getRateFromQuote).getOrElse(
+  const rateHelper = () =>
+    quoteR.map(getRateFromQuote).getOrElse(
       <Fragment>
         <FormattedMessage id='scenes.buysell.coinifycheckout.content.ordercheckout.loading' defaultMessage='Loading' />
         {'...'}
       </Fragment>
     )
-  }
 
   const submitButtonHelper = () => (
     reason.indexOf('has_remaining') > -1

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/OrderHistory/index.js

@@ -19,11 +19,17 @@ class OrderHistoryContainer extends React.Component {
   }
 
   render () {
-    const { data, modalActions, coinifyActions, formActions, step, trade, busy, cancelTradeId, canTrade } = this.props
+    const { data, modalActions, coinifyActions, formActions, step,
+      trade, busy, cancelTradeId, canTrade } = this.props
     const { showModal } = modalActions
     const { finishTrade, cancelTrade, cancelSubscription } = coinifyActions
     const { change } = formActions
-    const status = busy.cata({ Success: () => false, Failure: (err) => err, Loading: () => true, NotAsked: () => false })
+    const status = busy.cata({
+      Success: () => false,
+      Failure: (err) => err,
+      Loading: () => true,
+      NotAsked: () => false
+    })
 
     return data.cata({
       Success: (value) => <Success

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/OrderHistory/selectors.js

@@ -2,13 +2,8 @@ import { selectors } from 'data'
 import { lift } from 'ramda'
 import { createDeepEqualSelector } from 'services/ReselectHelper'
 
-export const getTrade = (state) => {
-  try {
-    return selectors.core.data.coinify.getTrade(state).data
-  } catch (e) {
-    return null
-  }
-}
+export const getTrade = (state) =>
+  selectors.core.data.coinify.getTrade(state).getOrElse(null)
 
 export const getData = createDeepEqualSelector(
   [

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/OrderHistory/template.success.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
-import { filter, contains, path } from 'ramda'
+import { filter, contains, path, prop } from 'ramda'
 import { Text } from 'blockchain-info-components'
 import ISignThis from 'modals/CoinifyExchangeData/ISignThis'
 
@@ -23,12 +23,15 @@ const OrderHistoryContent = styled.div`
     margin-bottom: 20px;
   }
 `
-const isPending = (t) => (t.state === 'processing' || t.state === 'awaiting_transfer_in') && !t.tradeSubscriptionId
-const isCompleted = (t) => contains(t.state, ['completed', 'rejected', 'cancelled', 'expired']) && !t.tradeSubscriptionId
-const isPartOfSubscription = (t) => t.tradeSubscriptionId
+const isPending = (t) =>
+  contains(prop('state', t), ['processing', 'awaiting_transfer_in']) && !prop('tradeSubscriptionId', t)
+const isCompleted = (t) =>
+  contains(prop('state', t), ['completed', 'rejected', 'cancelled', 'expired']) && !prop('tradeSubscriptionId', t)
+const isPartOfSubscription = (t) => prop('tradeSubscriptionId', t)
 
 const OrderHistory = (props) => {
-  const { showModal, finishTrade, cancelTrade, step, status, cancelTradeId, trade, changeTab, canTrade, value, onCancelSubscription } = props
+  const { showModal, finishTrade, cancelTrade, step, status, cancelTradeId,
+    trade, changeTab, canTrade, value, onCancelSubscription } = props
   const { trades, subscriptions } = value
   const pendingTrades = filter(isPending, trades)
 
@@ -91,7 +94,10 @@ const OrderHistory = (props) => {
           <Text size='15px' weight={400}>
             <FormattedMessage id='scenes.buysell.coinifycheckout.trades.completed' defaultMessage='Completed Orders' />
           </Text>
-          <OrderHistoryTable trades={filter(isCompleted, trades)} conversion={conversion} handleDetailsClick={trade => showModal('CoinifyTradeDetails', { trade })} />
+          <OrderHistoryTable
+            trades={filter(isCompleted, trades)}
+            conversion={conversion}
+            handleDetailsClick={trade => showModal('CoinifyTradeDetails', { trade })} />
         </OrderHistoryContent>
       </OrderHistoryWrapper>
     )

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/index.js

@@ -34,7 +34,7 @@ class SellContainer extends React.Component {
     const { data, modalActions, coinifyActions, coinifyDataActions, formActions,
       sellQuoteR, currency, paymentMedium, trade, ...rest } = this.props
     const { canTrade, step, checkoutBusy, coinifyBusy, checkoutError } = rest
-    const { handleTrade, fetchQuote, refreshSellQuote } = coinifyDataActions
+    const { fetchQuote, refreshSellQuote } = coinifyDataActions
     const { showModal } = modalActions
     const { coinifyNotAsked, openKYC } = coinifyActions
     const { change } = formActions
@@ -51,7 +51,6 @@ class SellContainer extends React.Component {
         value={value}
         canTrade={canTrade}
         changeTab={tab => change('buySellTabStatus', 'status', tab)}
-        handleTrade={handleTrade}
         showModal={showModal}
         sellQuoteR={sellQuoteR}
         fetchSellQuote={(quote) => fetchQuote({ quote, nextAddress: value.nextAddress })}

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/selectors.js

@@ -12,9 +12,6 @@ export const getUserData = (state) => {
 export const getTrades = (state) =>
   selectors.core.data.coinify.getTrades(state).getOrElse(null)
 
-export const getRateQuote = (state) =>
-  selectors.core.data.coinify.getRateQuote(state)
-
 export const getTrade = (state) =>
   selectors.core.data.coinify.getTrade(state).getOrElse(null)
 

packages/blockchain-wallet-v4/src/redux/data/coinify/actionTypes.js

@@ -27,7 +27,6 @@ export const COINIFY_FETCH_PROFILE_LOADING = '@CORE.COINIFY_FETCH_PROFILE_LOADIN
 export const COINIFY_FETCH_PROFILE_SUCCESS = '@CORE.COINIFY_FETCH_PROFILE_SUCCESS'
 export const COINIFY_FETCH_PROFILE_FAILURE = '@CORE.COINIFY_FETCH_PROFILE_FAILURE'
 
-export const HANDLE_TRADE = '@CORE.HANDLE_TRADE'
 export const HANDLE_TRADE_LOADING = '@CORE.HANDLE_TRADE_LOADING'
 export const HANDLE_TRADE_SUCCESS = '@CORE.HANDLE_TRADE_SUCCESS'
 export const HANDLE_TRADE_FAILURE = '@CORE.HANDLE_TRADE_FAILURE'

packages/blockchain-wallet-v4/src/redux/data/coinify/actions.js

@@ -29,7 +29,6 @@ export const coinifyFetchProfileLoading = () => ({ type: AT.COINIFY_FETCH_PROFIL
 export const coinifyFetchProfileSuccess = (data) => ({ type: AT.COINIFY_FETCH_PROFILE_SUCCESS, payload: data })
 export const coinifyFetchProfileFailure = (error) => ({ type: AT.COINIFY_FETCH_PROFILE_FAILURE, payload: error })
 
-export const handleTrade = (data) => ({ type: AT.HANDLE_TRADE, payload: data })
 export const handleTradeLoading = () => ({ type: AT.HANDLE_TRADE_LOADING })
 export const handleTradeSuccess = (data) => ({ type: AT.HANDLE_TRADE_SUCCESS, payload: data })
 export const handleTradeFailure = (error) => ({ type: AT.HANDLE_TRADE_FAILURE, payload: error })

packages/blockchain-wallet-v4/src/redux/data/coinify/sagas.js

@@ -80,13 +80,14 @@ export default ({ api, options }) => {
       const qData = path(['data'], quote)
 
       let quotePayload = {
+        amount: qData.baseCurrency === 'BTC'
+          ? (qData.baseAmount * -1) / 1e8
+          : (qData.baseAmount * -1) * 100,
         baseCurrency: qData.baseCurrency,
         quoteCurrency: qData.quoteCurrency,
         type: 'buy'
       }
 
-      if (qData.baseCurrency !== 'BTC') quotePayload['amount'] = (qData.baseAmount * -1) * 100
-      else quotePayload['amount'] = (qData.baseAmount * -1) / 1e8
       const refreshedQuote = yield call(fetchQuote, {quote: quotePayload})
       yield call(getPaymentMediums, {payload: refreshedQuote})
     } catch (e) {
@@ -116,6 +117,7 @@ export default ({ api, options }) => {
 
   const fetchQuoteAndMediums = function * (data) {
     try {
+      console.log('Fetch quote and mediums')
       const { amt, baseCurrency, quoteCurrency, medium, type } = data.payload
       const getQuote = type === 'sell'
         ? coinify.data.getSellQuote
@@ -134,6 +136,7 @@ export default ({ api, options }) => {
   const fetchRateQuote = function * (data) {
     try {
       yield put(A.fetchQuoteLoading())
+      console.log('Fetch rate quote')
       const { currency, type } = data.payload
       const getQuote = type === 'sell' ? coinify.getSellQuote : coinify.getBuyQuote
       const quote = yield apply(coinify, getQuote, [-1e8, 'BTC', currency])