feat(sb): type supported coins, deelay nav for methods

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

@@ -2,6 +2,7 @@ import { add, lift, pathOr, prop, reduce } from 'ramda'
 import {
   CoinType,
   InterestAccountBalanceType,
+  InvitationsType,
   RemoteDataType,
   SBBalancesType
 } from 'core/types'
@@ -105,7 +106,7 @@ export const getEthBalance = createDeepEqualSelector(
     const sbBalance = sbEthBalance ? sbEthBalance.available : '0'
 
     return Remote.of(
-      new BigNumber(balancesR.getOrElse(0))
+      new BigNumber(balancesR.getOrElse(new BigNumber(0)))
         .plus(new BigNumber(sbBalance))
         .plus(new BigNumber(interestBalance))
     )
@@ -268,7 +269,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({

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

@@ -41,7 +41,7 @@ const mapStateToProps = (state, ownProps) => ({
     ownProps.currency,
     ownProps.rates
   ),
-  erc20List: selectors.core.walletOptions.getErc20CoinList(state).getOrFail()
+  erc20List: selectors.core.walletOptions.getErc20CoinList(state).getOrElse([])
 })
 
 const mapDispatchToProps = dispatch => ({

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

@@ -9,7 +9,7 @@ export const getData = (state, ownProps) => {
   const currencyR = selectors.core.settings.getCurrency(state)
   const erc20List = selectors.core.walletOptions
     .getErc20CoinList(state)
-    .getOrFail()
+    .getOrElse([])
   const supportedCoinsR = selectors.core.walletOptions.getSupportedCoins(state)
   let ratesR
 

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

@@ -157,7 +157,7 @@ export const getErc20Data = (
     includeCustodial
   } = ownProps
   const supportedCoinsR = selectors.core.walletOptions.getSupportedCoins(state)
-  const supportedCoins = supportedCoinsR.getOrElse({}) as SupportedCoinsType
+  const supportedCoins = supportedCoinsR.getOrElse({} as SupportedCoinsType)
   const displayErc20Fixed = data => {
     // TODO: ERC20 make more generic
     if (coin === 'PAX') {

packages/blockchain-wallet-v4-frontend/src/components/Send/ExchangePromo/index.tsx

@@ -9,6 +9,7 @@ import styled, { css } from 'styled-components'
 import { actions, model, selectors } from 'data'
 import { Icon, Link, Text } from 'blockchain-info-components'
 import { RootState } from 'data/rootReducer'
+import { WalletOptionsType } from 'core/types'
 
 const Wrapper = styled.div`
   display: flex;
@@ -169,9 +170,9 @@ class ExchangePromo extends PureComponent<Props> {
 }
 
 const mapStateToProps = (state: RootState) => ({
-  domains: selectors.core.walletOptions
-    .getDomains(state)
-    .getOrElse({ exchange: 'https://exchange.blockchain.com' }),
+  domains: selectors.core.walletOptions.getDomains(state).getOrElse({
+    exchange: 'https://exchange.blockchain.com'
+  } as WalletOptionsType['domains']),
   isExchangeLinked: selectors.modules.profile
     .isExchangeAccountLinked(state)
     .getOrElse(false),

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

@@ -1,7 +1,7 @@
 import { any } from 'ramda'
 import { connect } from 'react-redux'
 import { RootState } from 'data/rootReducer'
-import { SBOrderType } from 'core/types'
+import { SBOrderType, WalletOptionsType } from 'core/types'
 
 import { selectors } from 'data'
 import { UserDataType } from 'data/types'
@@ -94,7 +94,7 @@ class ZendeskWidget extends React.PureComponent<Props, State> {
 const mapStateToProps = (state: RootState): LinkStatePropsType => ({
   domains: selectors.core.walletOptions.getDomains(state).getOrElse({
     walletHelper: 'https://wallet-helper.blockchain.com'
-  }),
+  } as WalletOptionsType['domains']),
   sbOrders: selectors.components.simpleBuy.getSBOrders(state).getOrElse([]),
   userData: selectors.modules.profile
     .getUserData(state)

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

@@ -15,7 +15,8 @@ import {
   SBOrderType,
   SBProviderDetailsType,
   SBQuoteType,
-  SupportedCoinsType
+  SupportedCoinsType,
+  WalletOptionsType
 } from 'blockchain-wallet-v4/src/types'
 import {
   convertBaseToStandard,
@@ -65,7 +66,7 @@ export default ({
       const domainsR = selectors.core.walletOptions.getDomains(yield select())
       const domains = domainsR.getOrElse({
         walletHelper: 'https://wallet-helper.blockchain.com'
-      })
+      } as WalletOptionsType['domains'])
       if (card.partner === 'EVERYPAY') {
         providerDetails = yield call(
           api.activateSBCard,
@@ -255,7 +256,7 @@ export default ({
       const domainsR = selectors.core.walletOptions.getDomains(yield select())
       const domains = domainsR.getOrElse({
         walletHelper: 'https://wallet-helper.blockchain.com'
-      })
+      } as WalletOptionsType['domains'])
       const attributes = order.paymentMethodId
         ? {
             everypay: {
@@ -414,7 +415,7 @@ export default ({
       )
       const supportedCoins = selectors.core.walletOptions
         .getSupportedCoins(yield select())
-        .getOrElse({}) as SupportedCoinsType
+        .getOrElse({} as SupportedCoinsType)
       const filteredPairs = pairs.filter(pair => {
         return (
           getCoinFromPair(pair.pair) in CoinTypeEnum &&

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/WalletBalance/Balance/index.tsx

@@ -1,6 +1,6 @@
 import { actions, selectors } from 'data'
 import { bindActionCreators } from 'redux'
-import { CoinType, Erc20CoinType, RemoteDataType } from 'core/types'
+import { CoinType } from 'core/types'
 import { connect, ConnectedProps } from 'react-redux'
 import { getData } from './selectors'
 import { includes, toLower } from 'ramda'
@@ -39,9 +39,9 @@ class Balance extends React.PureComponent<Props> {
   }
 }
 
-const mapStateToProps = (state, ownProps): LinkStatePropsType => ({
+const mapStateToProps = (state, ownProps) => ({
   data: getData(state, ownProps),
-  erc20List: selectors.core.walletOptions.getErc20CoinList(state).getOrFail()
+  erc20List: selectors.core.walletOptions.getErc20CoinList(state).getOrElse([])
 })
 
 const mapDispatchToProps = dispatch => ({
@@ -59,10 +59,6 @@ type OwnProps = {
   coinTicker: string
   large: boolean
 }
-type LinkStatePropsType = {
-  data: RemoteDataType<string, string | number>
-  erc20List: Array<Erc20CoinType>
-}
 type Props = OwnProps & ConnectedProps<typeof connector>
 
 export default connector(Balance)

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Navigation/index.tsx

@@ -1,32 +1,11 @@
-import { actions, selectors } from 'data'
+import { actions } from 'data'
 import { bindActionCreators, compose } from 'redux'
 import { concat, prop } from 'ramda'
-import { connect } from 'react-redux'
-import { InvitationsType, SupportedCoinsType } from 'core/types'
-import { KycStateType } from 'data/types'
+import { connect, ConnectedProps } from 'react-redux'
 import Navigation from './template'
 import React from 'react'
 
-type OwnProps = {
-  invitations?: InvitationsType
-  lockboxDevices: Array<any>
-  userKYCState: KycStateType
-}
-
-type LinkDispatchPropsType = {
-  actions: typeof actions.components.layoutWallet
-  analyticsActions: typeof actions.analytics
-  modalActions: typeof actions.modals
-  preferencesActions: typeof actions.preferences
-  simpleBuyActions: typeof actions.components.simpleBuy
-}
-
-type LinkStatePropsType = {
-  domains: { [key in string]: string }
-  supportedCoins: SupportedCoinsType
-}
-
-export type Props = OwnProps & LinkDispatchPropsType & LinkStatePropsType
+import { Props as OwnProps } from '../template.success'
 
 class NavigationContainer extends React.PureComponent<Props> {
   render () {
@@ -41,14 +20,6 @@ class NavigationContainer extends React.PureComponent<Props> {
   }
 }
 
-const mapStateToProps = state => ({
-  domains: selectors.core.walletOptions
-    .getDomains(state)
-    .getOrElse({ exchange: 'https://exchange.blockchain.com' }),
-  supportedCoins: selectors.core.walletOptions
-    .getSupportedCoins(state)
-    .getOrFail()
-})
 const mapDispatchToProps = dispatch => ({
   actions: bindActionCreators(actions.components.layoutWallet, dispatch),
   analyticsActions: bindActionCreators(actions.analytics, dispatch),
@@ -57,6 +28,10 @@ const mapDispatchToProps = dispatch => ({
   simpleBuyActions: bindActionCreators(actions.components.simpleBuy, dispatch)
 })
 
-const enhance = compose(connect(mapStateToProps, mapDispatchToProps))
+const connector = connect(null, mapDispatchToProps)
+
+const enhance = compose(connector)
+
+export type Props = OwnProps & ConnectedProps<typeof connector>
 
 export default enhance(NavigationContainer)

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Navigation/template.tsx

@@ -11,9 +11,8 @@ import { FormattedMessage } from 'react-intl'
 import { LinkContainer } from 'react-router-bootstrap'
 import { mapObjIndexed, toLower, values } from 'ramda'
 import { Props } from '.'
-import { SupportedCoinType } from 'core/types'
+import { SupportedCoinType, SupportedFiatType } from 'core/types'
 import { Text, TooltipHost, TooltipIcon } from 'blockchain-info-components'
-import PropTypes from 'prop-types'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -69,18 +68,7 @@ const ExchangeNavItem = props => (
 
 const Navigation = (props: OwnProps & Props) => {
   const { ...rest } = props
-  const { supportedCoins } = rest
-  const coinOrder = [
-    supportedCoins.EUR,
-    supportedCoins.GBP,
-    supportedCoins.BTC,
-    supportedCoins.ETH,
-    supportedCoins.BCH,
-    supportedCoins.XLM,
-    supportedCoins.ALGO,
-    supportedCoins.PAX,
-    supportedCoins.USDT
-  ]
+
   return (
     <Wrapper {...rest}>
       <LinkContainer to='/home' activeClassName='active'>
@@ -96,9 +84,10 @@ const Navigation = (props: OwnProps & Props) => {
       </LinkContainer>
       {values(
         mapObjIndexed(
-          (coin: SupportedCoinType, i) =>
+          (coin: SupportedCoinType | SupportedFiatType, i) =>
             coin &&
             coin.invited &&
+            coin.method &&
             coin.txListAppRoute && (
               <LinkContainer
                 key={i}
@@ -127,7 +116,7 @@ const Navigation = (props: OwnProps & Props) => {
                 </MenuItem>
               </LinkContainer>
             ),
-          coinOrder
+          props.coins
         )
       )}
       <Separator />
@@ -183,8 +172,4 @@ const Navigation = (props: OwnProps & Props) => {
   )
 }
 
-Navigation.propTypes = {
-  lockboxOpened: PropTypes.bool
-}
-
 export default Navigation

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/index.tsx

@@ -3,6 +3,7 @@ import { connect, ConnectedProps } from 'react-redux'
 import React from 'react'
 
 import { actions } from 'data'
+import { ExtractSuccess } from 'core/types'
 import { getData } from './selectors'
 import Failure from './template.failure'
 import Loading from './template.loading'
@@ -32,6 +33,8 @@ const mapDispatchToProps = dispatch => ({
 
 const connector = connect(mapStateToProps, mapDispatchToProps)
 
-type Props = ConnectedProps<typeof connector>
+export type SuccessStateType = ExtractSuccess<ReturnType<typeof getData>>
+
+export type Props = ConnectedProps<typeof connector>
 
 export default connector(MenuLeftContainer)