feat(Jumio): add pending trade balance

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/SfoxPendingBalance/index.js

@@ -2,7 +2,6 @@ import React from 'react'
 import { connect } from 'react-redux'
 
 import { getData } from './selectors'
-import Error from './template.error'
 import Loading from './template.loading'
 import Success from './template.success'
 
@@ -12,9 +11,9 @@ class SfoxPendingBalance extends React.PureComponent {
 
     return data.cata({
       Success: value => <Success balance={value} />,
-      Failure: message => <Error />,
       Loading: () => <Loading />,
-      NotAsked: () => <Loading />
+      Failure: () => null,
+      NotAsked: () => null
     })
   }
 }

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/SfoxPendingBalance/selectors.js

@@ -0,0 +1,22 @@
+import { selectors } from 'data'
+import { add, compose, filter, reduce, pathOr } from 'ramda'
+import { Exchange } from 'blockchain-wallet-v4/src'
+
+const isBuyProcessing = trade => trade.isBuy && trade.state === 'processing'
+
+const extractPendingBalance = trades => {
+  const pendingBuyTrades = compose(filter(isBuyProcessing))(trades)
+  const pendingAmounts = pendingBuyTrades.map(x =>
+    pathOr(0, ['receiveAmount'], x)
+  )
+  return Exchange.convertBitcoinToBitcoin({
+    value: reduce(add, 0, pendingAmounts),
+    fromUnit: 'BTC',
+    toUnit: 'SAT'
+  }).value
+}
+
+export const getData = state => {
+  const tradesR = selectors.core.data.sfox.getTrades(state)
+  return tradesR.map(extractPendingBalance)
+}

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/SfoxPendingBalance/template.loading.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { FlatLoader } from 'blockchain-info-components'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+  box-sizing: border-box;
+`
+
+export default props => {
+  return (
+    <Wrapper>
+      <FlatLoader width='50px' height='14px' />
+    </Wrapper>
+  )
+}

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuTop/Balance/SfoxPendingBalance/template.success.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import FiatDisplay from 'components/Display/FiatDisplay'
+import { LinkContainer } from 'react-router-bootstrap'
+import { FormattedMessage } from 'react-intl'
+import { Banner, Text } from 'blockchain-info-components'
+
+const Wrapper = styled.div`
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 5px;
+  margin-bottom: 10px;
+  padding-right: ${props => (props.large ? '15px' : '25px')};
+  > div:last-child {
+    margin-left: 10px;
+    > div {
+      color: ${props => props.theme['gray-3']};
+    }
+  }
+`
+
+const Success = props => {
+  return props.balance === 0 ? null : (
+    <LinkContainer to='/buy-sell'>
+      <Wrapper>
+        <Text size='10px' weight={300}>
+          BTC
+        </Text>
+        <Banner inline>
+          <FiatDisplay coin='BTC' cursor='pointer' size='10px' weight={300}>
+            {props.balance}
+          </FiatDisplay>
+          <span>&nbsp;</span>
+          <Text size='10px' weight={300}>
+            <FormattedMessage
+              id='scenes.wallet.menutop.balance.sfoxpendingbalance'
+              defaultMessage='Pending Balance'
+            />
+          </Text>
+        </Banner>
+      </Wrapper>
+    </LinkContainer>
+  )
+}
+
+Success.propTypes = {
+  balance: PropTypes.number.isRequired
+}
+
+export default Success