feat(SFOX): sift science running

blockchain · Jun 18, 2018 · f58f3ae · f58f3ae
1 parent fe60899
commit f58f3ae
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 14 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modules/sfox/sagas.js b/packages/blockchain-wallet-v4-frontend/src/data/modules/sfox/sagas.js
@@ -35,6 +35,7 @@ export default ({ coreSagas }) => {
       const profile = yield select(selectors.core.data.sfox.getProfile)
       if (!profile.error) {
         yield put(A.sfoxSuccess())
+        yield put(A.enableSiftScience())
         yield put(A.nextStep('verify'))
       } else {
         yield put(A.sfoxNotAsked())
@@ -118,6 +119,7 @@ export default ({ coreSagas }) => {
         throw new Error(trade.message)
       }
       yield put(A.sfoxSuccess())
+      yield put(A.enableSiftScience())
       yield put(actions.form.change('buySellTabStatus', 'status', 'order_history'))
       yield put(modalActions.showModal('SfoxTradeDetails', { trade }))
     } catch (e) {

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/index.js
@@ -10,6 +10,7 @@ import Tray from 'components/Tray'
 import Create from './Create'
 import Verify from './Verify'
 import Link from './Link'
+import SiftScience from './sift-science'
 import { ModalHeader, ModalBody } from 'blockchain-info-components'
 import { FormattedMessage } from 'react-intl'
 import { getData } from './selectors'
@@ -62,6 +63,7 @@ class SfoxExchangeData extends React.PureComponent {
         </ModalHeader>
         <ModalBody>
           { this.getStepComponent(step)['component'] }
+          { this.props.siftScienceEnabled ? <SiftScience /> : null }
         </ModalBody>
       </Tray>
     )
@@ -75,7 +77,8 @@ SfoxExchangeData.propTypes = {
 
 const mapStateToProps = (state) => ({
   data: getData(state),
-  signupStep: path(['sfoxSignup', 'signupStep'], state)
+  signupStep: path(['sfoxSignup', 'signupStep'], state),
+  siftScienceEnabled: path(['sfoxSignup', 'siftScienceEnabled'], state)
 })
 
 const mapDispatchToProps = (dispatch) => ({

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/sift-science.js b/packages/blockchain-wallet-v4-frontend/src/modals/SfoxExchangeData/sift-science.js
@@ -1,10 +1,15 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
+import styled from 'styled-components'
 import { bindActionCreators } from 'redux'
 import { actions, selectors } from 'data'
-import { path } from 'ramda'
+import { path, head, sortBy, prop, reverse } from 'ramda'
 
-class ISignThisContainer extends Component {
+const SiftScienceIframe = styled.iframe`
+  display: none;
+`
+
+class SiftScience extends Component {
   constructor (props) {
     super(props)
     this.state = { enabled: false }
@@ -24,27 +29,30 @@ class ISignThisContainer extends Component {
         default:
           return null
       }
-
-    };
+    }
     window.addEventListener('message', receiveMessage, false)
   }
 
   render () {
-    const { options, userId, siftScienceEnabled } = this.props
+    const { options, userId, siftScienceEnabled, trades } = this.props
+
+    const sortByCreated = sortBy(prop('createdAt'))
+    const sortedTrades = reverse(sortByCreated(trades))
+    const tradeId = path(['id'], head(sortedTrades))
     const walletOptions = options || path(['data'], this.props.walletOptions)
     const helperDomain = path(['domains', 'walletHelper'], walletOptions)
     const sfoxSiftScience = path(['platforms', 'web', 'sfox', 'config', 'siftScience'], walletOptions)
 
     let url = `${helperDomain}/wallet-helper/sift-science/#/key/${sfoxSiftScience}/user/${userId}`
-    // url += scope.tradeId ? `/trade/${scope.tradeId}` : '';
+    url += tradeId ? `/trade/${tradeId}` : ''
 
-    if (userId) {
+    if (!userId) {
       return null
     }
 
     if (siftScienceEnabled) {
       return (
-        <iframe
+        <SiftScienceIframe
           src={url}
           sandbox='allow-same-origin allow-scripts'
           scrolling='no'
@@ -58,11 +66,12 @@ class ISignThisContainer extends Component {
 const mapStateToProps = (state) => ({
   walletOptions: path(['walletOptionsPath'], state),
   userId: selectors.core.kvStore.buySell.getSfoxUser(state),
-  siftScienceEnabled: path(['sfoxSignup', 'siftScienceEnabled'], state)
+  siftScienceEnabled: path(['sfoxSignup', 'siftScienceEnabled'], state),
+  trades: selectors.core.data.sfox.getTrades(state).getOrElse([])
 })
 
 const mapDispatchToProps = (dispatch) => ({
   sfoxFrontendActions: bindActionCreators(actions.modules.sfox, dispatch)
 })
 
-export default connect(mapStateToProps, mapDispatchToProps)(ISignThisContainer)
+export default connect(mapStateToProps, mapDispatchToProps)(SiftScience)
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/index.js
@@ -21,8 +21,12 @@ class SfoxCheckout extends React.PureComponent {
     this.props.sendBtcActions.initialized({ feeType: 'priority' })
   }
 
+  componentWillUnmount () {
+    this.props.sfoxActions.disableSiftScience()
+  }
+
   render () {
-    const { data, modalActions, sfoxActions, sfoxDataActions, payment, orderState, formActions } = this.props
+    const { data, modalActions, sfoxActions, sfoxDataActions, payment, orderState, formActions, siftScienceEnabled } = this.props
     const { handleTrade, fetchQuote, refreshQuote, refreshSellQuote, fetchSellQuote } = sfoxDataActions
     const { sfoxNotAsked } = sfoxActions
     const { showModal } = modalActions
@@ -53,6 +57,7 @@ class SfoxCheckout extends React.PureComponent {
         disableButton={() => this.setState({ buttonStatus: false })}
         enableButton={() => this.setState({ buttonStatus: true })}
         buttonStatus={this.state.buttonStatus}
+        siftScienceEnabled={siftScienceEnabled}
       />,
       Failure: (error) => <div>Failure: {error && error.message}</div>,
       Loading: () => <Loading />,
@@ -69,7 +74,8 @@ const mapStateToProps = state => ({
   trades: getTrades(state),
   errors: getErrors(state),
   payment: getPayment(state),
-  orderState: path(['sfoxSignup', 'sfoxBusy'], state)
+  orderState: path(['sfoxSignup', 'sfoxBusy'], state),
+  siftScienceEnabled: path(['sfoxSignup', 'siftScienceEnabled'], state)
 })
 
 const mapDispatchToProps = dispatch => ({

diff --git a/...blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/template.success.js b/...blockchain-wallet-v4-frontend/src/scenes/BuySell/SfoxCheckout/Content/template.success.js
@@ -12,6 +12,7 @@ import OrderCheckout from './OrderCheckout'
 import { OrderDetails, OrderSubmit } from './OrderReview'
 import Helper from 'components/BuySell/FAQ'
 import EmptyOrderHistoryContainer from 'components/BuySell/EmptyOrderHistory'
+import SiftScience from 'modals/SfoxExchangeData/sift-science.js'
 
 const CheckoutWrapper = styled.div`
   width: 50%;
@@ -56,7 +57,6 @@ const isCompleted = (t) => t.state !== 'processing'
 
 const Success = props => {
   const {
-    changeBuySellTabStatus,
     fetchBuyQuote,
     fetchSellQuote,
     refreshBuyQuote,
@@ -69,6 +69,7 @@ const Success = props => {
     base,
     errors,
     showModal,
+    siftScienceEnabled,
     handleTradeDetailsClick,
     clearTradeError,
     changeTab,
@@ -144,6 +145,7 @@ const Success = props => {
             </OrderSubmitWrapper>
           </div>
         </StepView>
+        {siftScienceEnabled ? <SiftScience /> : null}
       </Stepper>
     )
   } else if (type === 'sell') {
@@ -185,6 +187,7 @@ const Success = props => {
             </OrderSubmitWrapper>
           </div>
         </StepView>
+        {siftScienceEnabled ? <SiftScience /> : null}
       </Stepper>
     )
   } else if (trades) {
@@ -210,6 +213,7 @@ const Success = props => {
             </Text>
             <OrderHistoryTable trades={filter(isCompleted, trades)} conversion={conversion} handleDetailsClick={trade => showModal('SfoxTradeDetails', { trade })} />
           </OrderHistoryContent>
+          {siftScienceEnabled ? <SiftScience /> : null}
         </OrderHistoryWrapper>
       )
     }