feat(simple buy): better balance errs

blockchain · Mar 23, 2020 · 183ebff · 183ebff
1 parent f287b9d
commit 183ebff
Show file tree

Hide file tree

Showing 15 changed files with 61 additions and 174 deletions.
diff --git a/packages/blockchain-info-components/index.d.ts b/packages/blockchain-info-components/index.d.ts
@@ -139,7 +139,7 @@ export const Link: StatelessComponent<{
   target?: string
   rel?: string
   style?: CSSProperties
-  onClick?: () => void
+  onClick?: (e?: KeyboardEvent) => void
 }>
 export const Modal: StatelessComponent<{
   size?: '' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Balances/lockbox/selectors.js b/packages/blockchain-wallet-v4-frontend/src/components/Balances/lockbox/selectors.js
@@ -164,37 +164,3 @@ export const getTotalBalance = createDeepEqualSelector(
     )
   }
 )
-
-export const getCoinAndTotalBalances = createDeepEqualSelector(
-  [
-    getLockboxBtcBalance,
-    getLockboxBchBalance,
-    getLockboxEthBalance,
-    getLockboxXlmBalance,
-    getTotalBalance
-  ],
-  (
-    btcBalanceInfoR,
-    bchBalanceInfoR,
-    ethBalanceInfoR,
-    xlmBalanceInfoR,
-    getTotalBalanceR
-  ) => {
-    const transform = (
-      btcBalance,
-      bchBalance,
-      ethBalance,
-      xlmBalance,
-      totalBalance
-    ) => {
-      return { btcBalance, bchBalance, ethBalance, xlmBalance, totalBalance }
-    }
-    return lift(transform)(
-      btcBalanceInfoR,
-      bchBalanceInfoR,
-      ethBalanceInfoR,
-      xlmBalanceInfoR,
-      getTotalBalanceR
-    )
-  }
-)
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.js
@@ -205,48 +205,3 @@ export const getTotalBalance = createDeepEqualSelector(
     )
   }
 )
-
-export const getCoinAndTotalBalances = createDeepEqualSelector(
-  [
-    getBtcBalance,
-    getBchBalance,
-    getEthBalance,
-    getPaxBalance,
-    getXlmBalance,
-    getTotalBalance
-  ],
-  (
-    btcBalanceR,
-    bchBalanceR,
-    ethBalanceR,
-    paxBalanceR,
-    xlmBalanceR,
-    getTotalBalanceR
-  ) => {
-    const transform = (
-      btcBalance,
-      bchBalance,
-      ethBalance,
-      paxBalance,
-      xlmBalance,
-      totalBalance
-    ) => {
-      return {
-        btcBalance,
-        bchBalance,
-        ethBalance,
-        paxBalance,
-        xlmBalance,
-        totalBalance
-      }
-    }
-    return lift(transform)(
-      btcBalanceR,
-      bchBalanceR,
-      ethBalanceR,
-      paxBalanceR,
-      xlmBalanceR,
-      getTotalBalanceR
-    )
-  }
-)
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
@@ -262,48 +262,3 @@ export const getTotalBalance = createDeepEqualSelector(
     )
   }
 )
-
-export const getCoinAndTotalBalances = createDeepEqualSelector(
-  [
-    getBtcBalance,
-    getBchBalance,
-    getEthBalance,
-    getPaxBalance,
-    getXlmBalance,
-    getTotalBalance
-  ],
-  (
-    btcBalanceR,
-    bchBalanceR,
-    ethBalanceR,
-    paxBalanceR,
-    xlmBalanceR,
-    getTotalBalanceR
-  ) => {
-    const transform = (
-      btcBalance,
-      bchBalance,
-      ethBalance,
-      paxBalance,
-      xlmBalance,
-      totalBalance
-    ) => {
-      return {
-        btcBalance,
-        bchBalance,
-        ethBalance,
-        paxBalance,
-        xlmBalance,
-        totalBalance
-      }
-    }
-    return lift(transform)(
-      btcBalanceR,
-      bchBalanceR,
-      ethBalanceR,
-      paxBalanceR,
-      xlmBalanceR,
-      getTotalBalanceR
-    )
-  }
-)
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Display/CoinDisplay/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Display/CoinDisplay/index.js
@@ -12,7 +12,7 @@ class CoinDisplayContainer extends React.PureComponent {
     const { data, ...rest } = this.props
     return data.cata({
       Success: value => <Success {...rest}>{value}</Success>,
-      Failure: message => <Error>{message}</Error>,
+      Failure: message => <Error {...rest}>{message}</Error>,
       Loading: () => <Loading {...rest} />,
       NotAsked: () => <Loading {...rest} />
     })

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Display/CoinDisplay/template.error.js b/packages/blockchain-wallet-v4-frontend/src/components/Display/CoinDisplay/template.error.js
@@ -11,11 +11,17 @@ const Wrapper = styled.div`
   padding: 5px;
   box-sizing: border-box;
 `
+const ErrorText = styled(Text)`
+  font-weight: 500;
+  color: ${props => props.theme.red600};
+  font-size: ${props => props.mobileSize};
+  @media (min-width: 480px) {
+    font-size: ${props => props.size};
+  }
+`
 
 export default props => (
   <Wrapper>
-    <Text size='12px' weight={400} color='red600'>
-      {props.children}
-    </Text>
+    <ErrorText {...props}>{props.children}</ErrorText>
   </Wrapper>
 )
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Display/FiatDisplay/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Display/FiatDisplay/index.js
@@ -26,7 +26,7 @@ class FiatDisplayContainer extends React.PureComponent {
     const { data, ...rest } = this.props
     return data.cata({
       Success: value => <Success {...rest}>{value}</Success>,
-      Failure: () => <Error />,
+      Failure: () => <Error {...rest} />,
       Loading: () => <Loading {...rest} />,
       NotAsked: () => <Loading {...rest} />
     })

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Display/FiatDisplay/template.error.js b/packages/blockchain-wallet-v4-frontend/src/components/Display/FiatDisplay/template.error.js
@@ -11,14 +11,22 @@ const Wrapper = styled.div`
   align-items: center;
   box-sizing: border-box;
 `
+const ErrorText = styled(Text)`
+  font-weight: 500;
+  color: ${props => props.theme.red600};
+  font-size: ${props => props.mobileSize};
+  @media (min-width: 480px) {
+    font-size: ${props => props.size};
+  }
+`
 
-export default () => (
+export default props => (
   <Wrapper>
-    <Text size='10px' weight={400} color='red600'>
+    <ErrorText weight={400} {...props}>
       <FormattedMessage
         id='components.fiatdisplay.error'
         defaultMessage='Failed to fetch rates'
       />
-    </Text>
+    </ErrorText>
   </Wrapper>
 )
diff --git a/.../blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/TotalBalance/index.js b/.../blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/TotalBalance/index.js
@@ -11,7 +11,6 @@ const ErrorWrapper = styled.div`
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: 5px;
   box-sizing: border-box;
 `
 
@@ -55,8 +54,8 @@ class TotalBalance extends React.PureComponent {
       ),
       Failure: e => (
         <ErrorWrapper>
-          <Text size='12px' weight={400} color='red600'>
-            {typeof e === 'object' ? (e.message ? e.message : 'N/A') : e}
+          <Text size='14px' weight={600} color='red600'>
+            Error Fetching Balance
           </Text>
         </ErrorWrapper>
       ),

diff --git a/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/template.failure.js b/packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/template.failure.js
@@ -2,23 +2,20 @@ import { BlockchainLoader, Text } from 'blockchain-info-components'
 import { Container } from './template.success'
 import { FormattedMessage } from 'react-intl'
 import { MenuItem, Wrapper } from 'components/MenuLeft'
-import { prop } from 'ramda'
 import React from 'react'
 
-const Failure = props => {
+const Failure = () => {
   return (
     <Container>
       <Wrapper>
         <MenuItem>
           <BlockchainLoader height='30px' width='30px' />
         </MenuItem>
-        <Text color='error'>
-          {prop('msg', props) || (
-            <FormattedMessage
-              id='layouts.wallet.menuleft.failure'
-              defaultMessage='Something went wrong. Please refresh'
-            />
-          )}
+        <Text color='red600' size='14px' weight={600}>
+          <FormattedMessage
+            id='layouts.wallet.menuleft.failure'
+            defaultMessage='Something went wrong. Please refresh.'
+          />
         </Text>
       </Wrapper>
     </Container>

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
@@ -31,7 +31,10 @@ class CoinBalance extends React.PureComponent<Props> {
     this.handleRefresh()
   }
 
-  handleRefresh = () => {
+  handleRefresh = (e?: KeyboardEvent) => {
+    if (e) {
+      e.preventDefault()
+    }
     const { coin } = this.props
     const coinLower = toLower(coin)
     if (includes(coin, this.props.erc20List)) {
@@ -46,7 +49,9 @@ class CoinBalance extends React.PureComponent<Props> {
 
     return data.cata({
       Success: value => <Success balance={value} coin={coin} />,
-      Failure: () => <Error onRefresh={this.handleRefresh} />,
+      Failure: () => (
+        <Error coin={coin} onRefresh={e => this.handleRefresh(e)} />
+      ),
       Loading: () => <SkeletonRectangle height='35px' width='60px' />,
       NotAsked: () => <SkeletonRectangle height='35px' width='60px' />
     })

diff --git a/...me/Balances/CoinBalance/template.error.js → ...e/Balances/CoinBalance/template.error.tsx b/...me/Balances/CoinBalance/template.error.js → ...e/Balances/CoinBalance/template.error.tsx
@@ -1,3 +1,4 @@
+import { CoinType } from 'core/types'
 import { FormattedMessage } from 'react-intl'
 import { Link } from 'blockchain-info-components'
 import React from 'react'
@@ -11,13 +12,13 @@ const ErrorLink = styled(Link)`
   text-decoration: underline;
 `
 
-export default props => (
+export default (props: { coin: CoinType; onRefresh: (e) => void }) => (
   <Wrapper>
-    <ErrorLink size='12px' weight={400} onClick={() => props.onRefresh()}>
+    <ErrorLink size='14px' weight={500} onClick={e => props.onRefresh(e)}>
       <FormattedMessage
-        id='wallet.menutop.balance.error.refresh'
-        defaultMessage='Refresh {curr} data'
-        values={{ curr: props.coinTicker ? props.coinTicker : props.coin }}
+        id='home.balances.error.refresh'
+        defaultMessage='Refresh {curr} Data'
+        values={{ curr: props.coin }}
       />
     </ErrorLink>
   </Wrapper>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/TotalRow/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/TotalRow/index.tsx
@@ -12,12 +12,7 @@ export type OwnProps = {
   currentTab: 'wallet' | 'hardware' | 'total'
 }
 export type SuccessStateType = {
-  bchBalance: number
-  btcBalance: number
-  ethBalance: number
-  paxBalance: number
-  totalBalance: { path: string; totalBalance: string }
-  xlmBalance: number
+  totalBalance: string
 }
 type LinkDispatchPropsType = {}
 type LinkStatePropsType = {
@@ -34,10 +29,10 @@ class TotalRow extends PureComponent<Props, State> {
       Success: val => <Success {...val} {...this.props} />,
       Failure: e => (
         <Text
-          size='12px'
+          size='14px'
           weight={600}
           color='red600'
-          style={{ marginBottom: '24px' }}
+          style={{ marginBottom: '24px', paddingBottom: '12px' }}
         >
           Error Fetching Balance
         </Text>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/TotalRow/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/TotalRow/selectors.ts
@@ -1,21 +1,21 @@
 import { createDeepEqualSelector } from 'services/ReselectHelper'
-import { getCoinAndTotalBalances as lockboxBalances } from 'components/Balances/lockbox/selectors'
-import { getCoinAndTotalBalances as totalBalances } from 'components/Balances/total/selectors'
-import { getCoinAndTotalBalances as walletBalances } from 'components/Balances/wallet/selectors'
+import { getTotalBalance as lockboxBalance } from 'components/Balances/lockbox/selectors'
+import { getTotalBalance as totalBalance } from 'components/Balances/total/selectors'
+import { getTotalBalance as walletBalance } from 'components/Balances/wallet/selectors'
 
 export const getData = createDeepEqualSelector(
   [
-    state => lockboxBalances(state),
-    state => totalBalances(state),
-    state => walletBalances(state),
-    (state, { viewType }) => viewType
+    state => lockboxBalance(state),
+    state => totalBalance(state),
+    state => walletBalance(state),
+    (state, { currentTab }) => currentTab
   ],
-  (lockboxBalancesR, totalBalancesR, walletBalancesR, viewType) => {
-    if (viewType === 'Wallet') {
-      return walletBalancesR
-    } else if (viewType === 'Hardware') {
-      return lockboxBalancesR
+  (lockboxBalanceR, totalBalanceR, walletBalanceR, currentTab) => {
+    if (currentTab === 'wallet') {
+      return walletBalanceR
+    } else if (currentTab === 'lockbox') {
+      return lockboxBalanceR
     }
-    return totalBalancesR
+    return totalBalanceR
   }
 )
diff --git a/...ages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/TotalRow/template.success.tsx b/...ages/blockchain-wallet-v4-frontend/src/scenes/Home/Balances/TotalRow/template.success.tsx
@@ -44,7 +44,7 @@ const Success: React.FC<Props> = props => {
       </Text>
       <HomeBalanceAmount data-e2e='homeBalanceAmt'>
         <JoyrideSpotlight className='wallet-intro-tour-step-1' />
-        {props.totalBalance.totalBalance}
+        {props.totalBalance}
       </HomeBalanceAmount>
     </TotalRow>
   )