feat(sb): add fiat to balances, brokeen

packages/blockchain-wallet-v4-frontend/src/components/Balances/total/selectors.js → packages/blockchain-wallet-v4-frontend/src/components/Balances/total/selectors.ts

@@ -7,15 +7,18 @@ import {
   getBchBalance as getBchWalletBalance,
   getBtcBalance as getBtcWalletBalance,
   getEthBalance as getEthWalletBalance,
+  getFiatBalance,
   getPaxBalance as getPaxWalletBalance,
   getUsdtBalance as getUsdtWalletBalance,
   getXlmBalance as getXlmWalletBalance
 } from '../wallet/selectors'
 import { INVALID_COIN_TYPE } from 'blockchain-wallet-v4/src/model'
+import { InvitationsType, WalletCurrencyType } from 'core/types'
 import { selectors } from 'data'
 
 export const getBtcBalance = createDeepEqualSelector(
   [
+    // @ts-ignore
     state => getBtcWalletBalance(state),
     state =>
       selectors.core.kvStore.lockbox
@@ -33,12 +36,14 @@ export const getBtcBalance = createDeepEqualSelector(
     }
     const balancesR = lift(modulesToBalance)(walletBalance, lockboxBalancesR)
 
+    // @ts-ignore
     return balancesR.map(reduce(add, 0))
   }
 )
 
 export const getBchBalance = createDeepEqualSelector(
   [
+    // @ts-ignore
     state => getBchWalletBalance(state),
     state =>
       selectors.core.kvStore.lockbox
@@ -55,6 +60,7 @@ export const getBchBalance = createDeepEqualSelector(
       return lbBalances.concat(walletBalance)
     }
     const balancesR = lift(modulesToBalance)(walletBalancesR, lockboxBalancesR)
+    // @ts-ignore
     return balancesR.map(reduce(add, 0))
   }
 )
@@ -75,6 +81,7 @@ export const getBtcBalanceInfo = createDeepEqualSelector(
     const value = btcBalanceR.getOrElse(0)
     const transform = (rates, toCurrency) =>
       Exchange.convertBtcToFiat({
+        // @ts-ignore
         value,
         fromUnit: 'SAT',
         toCurrency,
@@ -94,6 +101,7 @@ export const getBchBalanceInfo = createDeepEqualSelector(
     const value = bchBalanceR.getOrElse(0)
     const transform = (rates, toCurrency) =>
       Exchange.convertBchToFiat({
+        // @ts-ignore
         value,
         fromUnit: 'SAT',
         toCurrency,
@@ -131,7 +139,9 @@ export const getPaxBalanceInfo = createDeepEqualSelector(
     selectors.core.settings.getInvitations
   ],
   (paxBalanceR, erc20RatesR, currencyR, invitationsR) => {
-    const invitations = invitationsR.getOrElse({ PAX: false })
+    const invitations = invitationsR.getOrElse({
+      PAX: false
+    } as InvitationsType)
     const invited = prop('PAX', invitations)
     const transform = (value, rates, toCurrency) => {
       return Exchange.convertPaxToFiat({
@@ -156,7 +166,9 @@ export const getUsdtBalanceInfo = createDeepEqualSelector(
     selectors.core.settings.getInvitations
   ],
   (usdtBalanceR, erc20RatesR, currencyR, invitationsR) => {
-    const invitations = invitationsR.getOrElse({ USDT: false })
+    const invitations = invitationsR.getOrElse({
+      USDT: false
+    } as InvitationsType)
     const invited = prop('USDT', invitations)
     const transform = (value, rates, toCurrency) => {
       return Exchange.convertUsdtToFiat({
@@ -267,7 +279,7 @@ export const getTotalBalance = createDeepEqualSelector(
   }
 )
 
-export const getBalanceSelector = coin => {
+export const getBalanceSelector = (coin: WalletCurrencyType) => {
   switch (coin) {
     case 'BTC':
       return getBtcBalance
@@ -283,6 +295,9 @@ export const getBalanceSelector = coin => {
       return getUsdtBalance
     case 'ALGO':
       return getAlgoBalance
+    case 'EUR':
+    case 'GBP':
+      return getFiatBalance(coin)
     default:
       return Remote.Failure(INVALID_COIN_TYPE)
   }

packages/blockchain-wallet-v4-frontend/src/components/Balances/wallet/selectors.ts

@@ -1,10 +1,11 @@
-import { add, lift, pathOr, prop, reduce } from 'ramda'
+import { add, curry, lift, pathOr, prop, reduce } from 'ramda'
 import {
-  CoinType,
   InterestAccountBalanceType,
   InvitationsType,
   RemoteDataType,
-  SBBalancesType
+  SBBalancesType,
+  WalletCurrencyType,
+  WalletFiatType
 } from 'core/types'
 
 import { createDeepEqualSelector } from 'services/ReselectHelper'
@@ -18,6 +19,7 @@ import {
   getXlmBalance as getXlmNonCustodialBalance
 } from '../nonCustodial/selectors'
 import { INVALID_COIN_TYPE } from 'blockchain-wallet-v4/src/model'
+import { RootState } from 'data/rootReducer'
 import { selectors } from 'data'
 import BigNumber from 'bignumber.js'
 
@@ -209,6 +211,16 @@ export const getAlgoBalance = createDeepEqualSelector(
   }
 )
 
+export const getFiatBalance = curry(
+  (currency: WalletFiatType, state: RootState) => {
+    const sbBalancesR = selectors.components.simpleBuy.getSBBalances(state)
+    const fiatBalance = sbBalancesR.getOrElse({
+      [currency]: DEFAULT_SB_BALANCE
+    })[currency]
+    return Remote.of(fiatBalance)
+  }
+)
+
 export const getBtcBalanceInfo = createDeepEqualSelector(
   [
     getBtcBalance,
@@ -370,7 +382,7 @@ export const getTotalBalance = createDeepEqualSelector(
   }
 )
 
-export const getBalanceSelector = (coin: CoinType) => {
+export const getBalanceSelector = (coin: WalletCurrencyType) => {
   switch (coin) {
     case 'BTC':
       return getBtcBalance
@@ -386,6 +398,9 @@ export const getBalanceSelector = (coin: CoinType) => {
       return getUsdtBalance
     case 'ALGO':
       return getAlgoBalance
+    case 'EUR':
+    case 'GBP':
+      return getFiatBalance(coin)
     default:
       return Remote.Failure(INVALID_COIN_TYPE)
   }

packages/blockchain-wallet-v4-frontend/src/data/components/selectors.ts

@@ -18,6 +18,7 @@ import * as sendXlm from './sendXlm/selectors'
 import * as signMessage from './signMessage/selectors'
 import * as simpleBuy from './simpleBuy/selectors'
 import * as uploadDocuments from './uploadDocuments/selectors'
+import * as utils from './utils/selectors'
 import * as veriff from './veriff/selectors'
 
 export {
@@ -41,5 +42,6 @@ export {
   signMessage,
   simpleBuy,
   uploadDocuments,
+  utils,
   veriff
 }

packages/blockchain-wallet-v4-frontend/src/data/components/utils/selectors.ts

@@ -0,0 +1,44 @@
+import {
+  CoinTypeEnum,
+  ExtractSuccess,
+  SupportedWalletCurrencyType
+} from 'blockchain-wallet-v4/src/types'
+import { lift, mapObjIndexed, values } from 'ramda'
+import { RootState } from 'data/rootReducer'
+import { selectors } from 'data'
+
+export const getSupportedCoinsWithMethodAndOrder = (state: RootState) => {
+  const sbMethodsR = selectors.components.simpleBuy.getSBPaymentMethods(state)
+  const supportedCoinsR = selectors.core.walletOptions.getSupportedCoins(state)
+
+  const transform = (
+    paymentMethods: ExtractSuccess<typeof sbMethodsR>,
+    supportedCoins: ExtractSuccess<typeof supportedCoinsR>
+  ) => {
+    const coinOrder = [
+      supportedCoins.EUR,
+      supportedCoins.GBP,
+      supportedCoins.BTC,
+      supportedCoins.ETH,
+      supportedCoins.BCH,
+      supportedCoins.XLM,
+      supportedCoins.ALGO,
+      supportedCoins.PAX,
+      supportedCoins.USDT
+    ]
+    return values(
+      mapObjIndexed((coin: SupportedWalletCurrencyType) => {
+        return {
+          ...coin,
+          method:
+            coin.coinCode in CoinTypeEnum ||
+            !!paymentMethods.methods.find(
+              method => method.currency === coin.coinCode
+            )
+        }
+      }, coinOrder)
+    )
+  }
+
+  return lift(transform)(sbMethodsR, supportedCoinsR)
+}

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/selectors.ts

@@ -1,83 +1,44 @@
-import {
-  CoinTypeEnum,
-  ExtractSuccess,
-  SupportedCoinType,
-  SupportedFiatType
-} from 'core/types'
 import { createDeepEqualSelector } from 'services/ReselectHelper'
-import { lift, mapObjIndexed, values } from 'ramda'
+import { ExtractSuccess } from 'core/types'
+import { lift } from 'ramda'
 import { selectors } from 'data'
 
 export const getData = createDeepEqualSelector(
   [
     selectors.components.layoutWallet.getMenuOpened,
-    selectors.components.simpleBuy.getSBPaymentMethods,
+    selectors.components.utils.getSupportedCoinsWithMethodAndOrder,
     selectors.auth.getFirstLogin,
     selectors.router.getPathname,
     selectors.core.kvStore.lockbox.getDevices,
     selectors.core.settings.getCountryCode,
-    selectors.core.walletOptions.getDomains,
-    selectors.core.walletOptions.getSupportedCoins
+    selectors.core.walletOptions.getDomains
   ],
   (
     menuOpened: boolean,
-    paymentMethodsR,
+    coinsR,
     firstLogin: boolean,
     pathname,
     lockboxDevicesR,
     countryCodeR,
-    domainsR,
-    supportedCoinsR
+    domainsR
   ) => {
     const transform = (
+      coins: ExtractSuccess<typeof coinsR>,
       countryCode,
       domains: ExtractSuccess<typeof domainsR>,
-      paymentMethods: ExtractSuccess<typeof paymentMethodsR>,
-      lockboxDevices,
-      supportedCoins: ExtractSuccess<typeof supportedCoinsR>
+      lockboxDevices
     ) => {
-      const coinOrder = [
-        supportedCoins.EUR,
-        supportedCoins.GBP,
-        supportedCoins.BTC,
-        supportedCoins.ETH,
-        supportedCoins.BCH,
-        supportedCoins.XLM,
-        supportedCoins.ALGO,
-        supportedCoins.PAX,
-        supportedCoins.USDT
-      ]
-      const coins = values(
-        mapObjIndexed((coin: SupportedCoinType | SupportedFiatType) => {
-          return {
-            ...coin,
-            method:
-              coin.coinCode in CoinTypeEnum ||
-              !!paymentMethods.methods.find(
-                method => method.currency === coin.coinCode
-              )
-          }
-        }, coinOrder)
-      )
-
       return {
         coins,
         countryCode,
         domains,
         firstLogin,
         lockboxDevices,
         menuOpened,
-        pathname,
-        paymentMethods
+        pathname
       }
     }
 
-    return lift(transform)(
-      countryCodeR,
-      domainsR,
-      paymentMethodsR,
-      lockboxDevicesR,
-      supportedCoinsR
-    )
+    return lift(transform)(coinsR, countryCodeR, domainsR, lockboxDevicesR)
   }
 )

packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/CoinBalance/index.tsx

@@ -1,11 +1,11 @@
 import { actions, selectors } from 'data'
 import { bindActionCreators } from 'redux'
-import { CoinType } from 'core/types'
 import { connect, ConnectedProps } from 'react-redux'
 import { getData } from './selectors'
 import { includes, toLower } from 'ramda'
 import { SkeletonRectangle } from 'blockchain-info-components'
 import { Props as TableProps } from '../Table'
+import { WalletCurrencyType } from 'core/types'
 import Error from './template.error'
 import React from 'react'
 import Success from './template.success'
@@ -53,7 +53,7 @@ const mapDispatchToProps = dispatch => ({
 
 const connector = connect(mapStateToProps, mapDispatchToProps)
 
-export type OwnProps = TableProps & { coin: CoinType }
+export type OwnProps = TableProps & { coin: WalletCurrencyType }
 type Props = OwnProps & ConnectedProps<typeof connector>
 
 export default connector(CoinBalance)

packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/CoinBalance/template.error.tsx

@@ -1,6 +1,6 @@
-import { CoinType } from 'core/types'
 import { FormattedMessage } from 'react-intl'
 import { Link } from 'blockchain-info-components'
+import { WalletCurrencyType } from 'core/types'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -12,7 +12,10 @@ const ErrorLink = styled(Link)`
   text-decoration: underline;
 `
 
-export default (props: { coin: CoinType; onRefresh: (e) => void }) => (
+export default (props: {
+  coin: WalletCurrencyType
+  onRefresh: (e) => void
+}) => (
   <Wrapper>
     <ErrorLink size='14px' weight={500} onClick={e => props.onRefresh(e)}>
       <FormattedMessage

packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/CoinBalance/template.success.tsx

@@ -1,10 +1,13 @@
-import { CoinType } from 'core/types'
+import { WalletCurrencyType } from 'core/types'
 import CoinDisplay from 'components/Display/CoinDisplay'
 import FiatDisplay from 'components/Display/FiatDisplay'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-const Success = (props: { balance: number | string; coin: CoinType }) => {
+const Success = (props: {
+  balance: number | string
+  coin: WalletCurrencyType
+}) => {
   const { balance, coin } = props
 
   return (