feat(sell p3): add back balance movement

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/BalanceMovement/index.tsx

@@ -0,0 +1,69 @@
+import { CoinType } from 'core/types'
+import { connect, ConnectedProps } from 'react-redux'
+import { getData } from './selectors'
+import { RootState } from 'data/rootReducer'
+import { SkeletonRectangle } from 'blockchain-info-components'
+import CoinDisplay from 'components/Display/CoinDisplay'
+import FiatDisplay from 'components/Display/FiatDisplay'
+import React, { PureComponent } from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+`
+const FiatDisplayTitle = styled(FiatDisplay)`
+  display: flex;
+  align-items: center;
+`
+const CoinDisplayTitle = styled(CoinDisplay)`
+  display: flex;
+  margin-left: 4px;
+`
+
+class BalancesMovement extends PureComponent<Props, State> {
+  render () {
+    return this.props.data.cata({
+      Success: val => (
+        <Container>
+          <FiatDisplayTitle
+            coin={this.props.coin}
+            size='14px'
+            weight={500}
+            color='grey800'
+          >
+            {val.balances[this.props.coin]?.available}
+          </FiatDisplayTitle>
+          <CoinDisplayTitle
+            coin={this.props.coin}
+            size='14px'
+            weight={500}
+            color='grey600'
+          >
+            {val.balances[this.props.coin]?.available}
+          </CoinDisplayTitle>
+        </Container>
+      ),
+      Loading: () => <SkeletonRectangle height={'12px'} width={'40px'} />,
+      Failure: () => null,
+      NotAsked: () => null
+    })
+  }
+}
+
+const mapStateToProps = (state: RootState) => ({
+  data: getData(state)
+})
+
+export const mapDispatchToProps = () => ({})
+
+const connector = connect(mapStateToProps, mapDispatchToProps)
+
+export type OwnProps = {
+  coin: CoinType
+}
+
+type Props = OwnProps & ConnectedProps<typeof connector>
+type State = {}
+
+export default connector(BalancesMovement)

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/BalanceMovement/selectors.ts

@@ -0,0 +1,13 @@
+import { ExtractSuccess } from 'core/types'
+import { lift } from 'ramda'
+import { RootState } from 'data/rootReducer'
+
+import { selectors } from 'data'
+
+export const getData = (state: RootState) => {
+  const balancesR = selectors.components.simpleBuy.getSBBalances(state)
+
+  return lift((balances: ExtractSuccess<typeof balancesR>) => ({
+    balances
+  }))(balancesR)
+}

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/template.success.tsx

@@ -12,6 +12,7 @@ import {
   SuccessStateType
 } from '.'
 import { Title, Value } from 'components/Flyout'
+import BalanceMovement from '../BalanceMovement'
 import PriceMovement from '../PriceMovement'
 
 const CheckoutDisplayContainer = styled(DisplayContainer)`
@@ -81,6 +82,7 @@ const Success: React.FC<Props> = props => {
               <PriceMovement {...props} />
             </>
           )}
+          {props.orderType === 'SELL' && <BalanceMovement coin={coin} />}
         </DisplayTitle>
       </Display>
       {props.onClick && (