From df4ede9399f6e1f149cf933b9409806c4b9e4947 Mon Sep 17 00:00:00 2001 From: Philip London Date: Tue, 21 Jul 2020 20:19:38 +0200 Subject: [PATCH] feat(sb): add fiat to balances, brokeen --- .../total/{selectors.js => selectors.ts} | 21 ++++++- .../components/Balances/wallet/selectors.ts | 23 ++++++-- .../src/data/components/selectors.ts | 2 + .../src/data/components/utils/selectors.ts | 44 ++++++++++++++ .../src/layouts/Wallet/MenuLeft/selectors.ts | 59 ++++--------------- .../Home/Balances/CoinBalance/index.tsx | 4 +- .../Balances/CoinBalance/template.error.tsx | 7 ++- .../Balances/CoinBalance/template.success.tsx | 7 ++- .../src/scenes/Home/Balances/Table/index.tsx | 22 +++---- .../scenes/Home/Balances/Table/selectors.ts | 15 +++++ .../scenes/Home/Balances/Table/template.tsx | 22 +++---- .../src/redux/settings/index.d.ts | 2 + .../src/redux/settings/model.ts | 2 + .../src/redux/walletOptions/types.ts | 10 ++-- .../blockchain-wallet-v4/src/types/index.ts | 1 + 15 files changed, 150 insertions(+), 91 deletions(-) rename packages/blockchain-wallet-v4-frontend/src/components/Balances/total/{selectors.js => selectors.ts} (93%) create mode 100644 packages/blockchain-wallet-v4-frontend/src/data/components/utils/selectors.ts create mode 100644 packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/Table/selectors.ts diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Balances/total/selectors.js b/packages/blockchain-wallet-v4-frontend/src/components/Balances/total/selectors.ts similarity index 93% rename from packages/blockchain-wallet-v4-frontend/src/components/Balances/total/selectors.js rename to packages/blockchain-wallet-v4-frontend/src/components/Balances/total/selectors.ts index 1fa5cd6a288..cae28069021 100644 --- a/packages/blockchain-wallet-v4-frontend/src/components/Balances/total/selectors.js +++ b/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) } diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Balances/wallet/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/components/Balances/wallet/selectors.ts index cfa7bbdb623..3a431f391ef 100644 --- a/packages/blockchain-wallet-v4-frontend/src/components/Balances/wallet/selectors.ts +++ b/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) } diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/selectors.ts index 0e060436842..c0c1634a7f7 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/selectors.ts +++ b/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 } diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/utils/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/utils/selectors.ts new file mode 100644 index 00000000000..d44b01c8adb --- /dev/null +++ b/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, + supportedCoins: ExtractSuccess + ) => { + 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) +} diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/selectors.ts index 63281e33977..0b849f3de40 100644 --- a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/selectors.ts +++ b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/selectors.ts @@ -1,65 +1,33 @@ -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, countryCode, domains: ExtractSuccess, - paymentMethods: ExtractSuccess, - lockboxDevices, - supportedCoins: ExtractSuccess + 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, @@ -67,17 +35,10 @@ export const getData = createDeepEqualSelector( firstLogin, lockboxDevices, menuOpened, - pathname, - paymentMethods + pathname } } - return lift(transform)( - countryCodeR, - domainsR, - paymentMethodsR, - lockboxDevicesR, - supportedCoinsR - ) + return lift(transform)(coinsR, countryCodeR, domainsR, lockboxDevicesR) } ) diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/CoinBalance/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/CoinBalance/index.tsx index 1f6dba8e90b..cd68d1365fa 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/CoinBalance/index.tsx +++ b/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 export default connector(CoinBalance) diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/CoinBalance/template.error.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/CoinBalance/template.error.tsx index 0be6adb71f8..f0e480c396e 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/CoinBalance/template.error.tsx +++ b/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 +}) => ( props.onRefresh(e)}> { +const Success = (props: { + balance: number | string + coin: WalletCurrencyType +}) => { const { balance, coin } = props return ( diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/Table/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/Table/index.tsx index b11ca2c3fcc..63cac957e54 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/Table/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/Table/index.tsx @@ -1,20 +1,24 @@ -import { actions, selectors } from 'data' +import { actions } from 'data' import { bindActionCreators } from 'redux' import { connect, ConnectedProps } from 'react-redux' -import { SupportedCoinsType } from 'core/types' +import { ExtractSuccess } from 'core/types' +import { getData } from './selectors' import React from 'react' import Template from './template' class Table extends React.PureComponent { render () { - return