feat(sb): triangulate fiats

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

@@ -8,6 +8,7 @@ import {
   WalletFiatType
 } from 'core/types'
 
+import { convertBaseToStandard } from 'data/components/exchange/services'
 import { createDeepEqualSelector } from 'services/ReselectHelper'
 import { DEFAULT_INTEREST_BALANCE } from 'data/components/interest/model'
 import { DEFAULT_SB_BALANCE } from 'data/components/simpleBuy/model'
@@ -214,10 +215,11 @@ 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)
+    const fiatBalance =
+      sbBalancesR.getOrElse({
+        [currency]: DEFAULT_SB_BALANCE
+      })[currency]?.available || '0'
+    return Remote.of(convertBaseToStandard('FIAT', fiatBalance))
   }
 )
 

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

@@ -2,9 +2,10 @@ import { Exchange, Remote } from 'blockchain-wallet-v4/src'
 import { lift } from 'ramda'
 
 export const getData = (coin, amount, hideCoinTicker) => {
-  const convert = (coin, value) =>
-    hideCoinTicker
+  const convert = (coin, value) => {
+    return hideCoinTicker
       ? Exchange.convertCoinToCoin({ value, coin, baseToStandard: true }).value
       : Exchange.displayCoinToCoin(value, coin)
+  }
   return lift(convert)(Remote.of(coin), Remote.of(amount))
 }

packages/blockchain-wallet-v4-frontend/src/components/Display/FiatDisplay/index.tsx

@@ -4,7 +4,7 @@ import { includes, toLower } from 'ramda'
 import React from 'react'
 
 import { actions, selectors } from 'data'
-import { CoinType } from 'core/types'
+import { CoinType, FiatTypeEnum } from 'blockchain-wallet-v4/src/types'
 import { getData } from './selectors'
 import { Remote } from 'blockchain-wallet-v4/src'
 import Error from './template.error'
@@ -15,6 +15,9 @@ class FiatDisplayContainer extends React.PureComponent<Props> {
   componentDidMount () {
     if (Remote.NotAsked.is(this.props.data)) {
       const { coin, erc20List } = this.props
+      if (coin in FiatTypeEnum) {
+        return
+      }
       if (includes(coin, erc20List)) {
         return this.props.ethActions.fetchErc20Rates(toLower(this.props.coin))
       }

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

@@ -0,0 +1,45 @@
+import { CoinTypeEnum, FiatTypeEnum } from 'blockchain-wallet-v4/src/types'
+import { Exchange } from 'blockchain-wallet-v4/src'
+import { fiatToString } from 'blockchain-wallet-v4/src/exchange/currency'
+import { lift, prop } from 'ramda'
+import { selectors } from 'data'
+
+export const getData = (state, coin, amount, defaultCurrency, defaultRates) => {
+  const currencyR = selectors.core.settings
+    .getSettings(state)
+    .map(prop('currency'))
+
+  const ratesR = selectors.core.data.misc.getRatesSelector(coin, state)
+
+  let value
+  if (coin in CoinTypeEnum) {
+    value = Exchange.convertCoinToCoin({
+      value: amount,
+      coin,
+      baseToStandard: true
+    }).value
+  }
+
+  const convert = (currency, rates) => {
+    if (coin in FiatTypeEnum) {
+      if (coin === currency)
+        return fiatToString({ value: amount, unit: currency })
+
+      value = Exchange.convertFiatToFiat({
+        value: amount,
+        fromCurrency: coin,
+        toCurrency: currency,
+        rates
+      }).value
+      return fiatToString({ value, unit: currency })
+    }
+    return Exchange.displayCoinToFiat({
+      value,
+      fromCoin: coin,
+      fromUnit: coin,
+      toCurrency: defaultCurrency || currency,
+      rates: defaultRates || rates
+    })
+  }
+  return lift(convert)(currencyR, ratesR)
+}

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/WalletBalanceDropdown/index.tsx

@@ -10,6 +10,7 @@ import {
   WalletFiatType
 } from 'core/types'
 import { connect, ConnectedProps } from 'react-redux'
+import { convertBaseToStandard } from 'data/components/exchange/services'
 import { fiatToString } from 'core/exchange/currency'
 import { Field } from 'redux-form'
 import { flatten } from 'ramda'
@@ -228,24 +229,15 @@ export class WalletBalanceDropdown extends Component<Props> {
             <FormattedMessage id='copy.balance' defaultMessage='Balance' />
           </Text>
           <AmountContainer>
-            {coinCode in CoinTypeEnum ? (
-              <FiatDisplay
-                coin={this.props.coin}
-                size='24px'
-                weight={500}
-                cursor='pointer'
-                color='grey800'
-              >
-                {balance}
-              </FiatDisplay>
-            ) : (
-              <Text size='24px' weight={500} color='grey800'>
-                {fiatToString({
-                  value: unsafe_data.sbBalance?.available || '0',
-                  unit: this.props.coin as WalletFiatType
-                })}
-              </Text>
-            )}
+            <FiatDisplay
+              coin={this.props.coin}
+              size='24px'
+              weight={500}
+              cursor='pointer'
+              color='grey800'
+            >
+              {balance}
+            </FiatDisplay>
           </AmountContainer>
 
           {this.props.coin in CoinTypeEnum ? (
@@ -278,7 +270,10 @@ export class WalletBalanceDropdown extends Component<Props> {
               <FormattedMessage id='copy.pending' defaultMessage='Pending' />
               {': '}
               {fiatToString({
-                value: unsafe_data.sbBalance?.pending || '0',
+                value: convertBaseToStandard(
+                  'FIAT',
+                  unsafe_data.sbBalance?.pending || '0'
+                ),
                 unit: this.props.coin as WalletFiatType
               })}
             </Text>

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/WalletBalanceDropdown/selectors.ts

@@ -84,6 +84,12 @@ export const getData = (state, ownProps: OwnProps) => {
       balanceDataR = balanceSelectors.getAlgoBalance(state)
       coinRatesR = selectors.core.data.algo.getRates(state)
       break
+    case 'EUR':
+    case 'GBP':
+      addressDataR = Remote.Success({ data: [] })
+      balanceDataR = balanceSelectors.getFiatBalance(coin, state)
+      coinRatesR = selectors.core.data.btc.getRates(state)
+      break
     default:
       addressDataR = Remote.Success({ data: [] })
       balanceDataR = Remote.Success(0)

packages/blockchain-wallet-v4/src/exchange/index.ts

@@ -2,7 +2,12 @@ import * as Currency from './currency'
 import * as Pairs from './pairs'
 import { assoc, assocPath, path, prop } from 'ramda'
 import { BigNumber } from 'bignumber.js'
-import { CoinType, RatesType } from 'core/types'
+import {
+  CoinType,
+  RatesType,
+  WalletCurrencyType,
+  WalletFiatType
+} from 'core/types'
 import Currencies, { CurrenciesType } from './currencies'
 
 type KeysOfUnion<T> = T extends any ? keyof T : never
@@ -850,7 +855,7 @@ const convertCoinToCoin = ({
   baseToStandard
 }: {
   baseToStandard: boolean
-  coin: CoinType | 'FIAT'
+  coin: WalletCurrencyType | 'FIAT'
   value: number | string
 }) => {
   switch (coin) {
@@ -882,6 +887,8 @@ const convertCoinToCoin = ({
       return baseToStandard
         ? convertAlgoToAlgo({ value, fromUnit: 'mALGO', toUnit: 'ALGO' })
         : convertAlgoToAlgo({ value, fromUnit: 'ALGO', toUnit: 'mALGO' })
+    case 'EUR':
+    case 'GBP':
     case 'FIAT':
       return baseToStandard
         ? { value: new BigNumber(value).dividedBy(100).valueOf() }
@@ -1145,8 +1152,8 @@ const displayCoinToFiat = ({
   }
 }
 
-const displayFiatToFiat = ({ value }: { value: number }) => {
-  return value.toFixed(2)
+const displayFiatToFiat = ({ value }: { value: number | string }) => {
+  return new BigNumber(value).toFixed(2)
 }
 
 const getSymbol = currency => {
@@ -1277,7 +1284,33 @@ const convertCoinToFiat = (
   }
 }
 
-const displayCoinToCoin = (value: number | string, toUnit: CoinType) => {
+// 🔺Triangulate Wallet Fiat -> BTC -> To other Fiat
+const convertFiatToFiat = ({
+  value,
+  fromCurrency,
+  toCurrency,
+  rates
+}: {
+  fromCurrency: WalletFiatType
+  rates: RatesType
+  toCurrency: WalletFiatType
+  value: number | string
+}) => {
+  const btcAmt = convertFiatToBtc({ value, fromCurrency, toUnit: 'BTC', rates })
+  const fiatAmt = convertBtcToFiat({
+    value: btcAmt.value,
+    fromUnit: 'BTC',
+    toCurrency,
+    rates
+  })
+
+  return fiatAmt
+}
+
+const displayCoinToCoin = (
+  value: number | string,
+  toUnit: WalletCurrencyType
+) => {
   switch (toUnit) {
     case 'BCH':
       return displayBchToBch({
@@ -1324,6 +1357,9 @@ const displayCoinToCoin = (value: number | string, toUnit: CoinType) => {
         toUnit,
         value
       })
+    case 'EUR':
+    case 'GBP':
+      return Currency.fiatToString({ value, unit: toUnit })
   }
 }
 
@@ -1359,6 +1395,7 @@ export const convertCoinToCoinFromTransaction = (coin, tx) => {
 export {
   DefaultConversion,
   DefaultDisplay,
+  convertFiatToFiat,
   convertFiatToCoin,
   convertCoinToFiat,
   convertAlgoToFiat,

packages/blockchain-wallet-v4/src/redux/data/misc/selectors.ts

@@ -1,5 +1,10 @@
 import * as selectors from '../../selectors'
-import { CoinType, RatesType, RemoteDataType } from 'core/types'
+import {
+  CoinType,
+  RatesType,
+  RemoteDataType,
+  WalletCurrencyType
+} from 'core/types'
 import { dataPath } from '../../paths'
 import { INVALID_COIN_TYPE } from 'blockchain-wallet-v4/src/model'
 import { path } from 'ramda'
@@ -28,10 +33,12 @@ export const getPrice24H = (coin: CoinType, state: RootState) =>
   state.dataPath.misc.price_24h[coin]
 
 export const getRatesSelector = (
-  coin: CoinType,
+  coin: WalletCurrencyType,
   state
 ): RemoteDataType<string, RatesType> => {
   switch (coin) {
+    case 'EUR':
+    case 'GBP':
     case 'BTC':
       return selectors.data.btc.getRates(state)
     case 'BCH':