refactor(balances): file and component consolidation

packages/blockchain-wallet-v4-frontend/src/components/Balances/index.js

@@ -27,5 +27,4 @@ export const Header = styled.div`
 `
 
 export * from './Home'
-export * from './TopMenu'
 export * from './Lockbox'

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/CurrencySwitch/index.js

@@ -1,20 +1,64 @@
-import { actions, selectors } from 'data'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
+import { FormattedMessage } from 'react-intl'
 import React from 'react'
-import Template from './template'
+import styled from 'styled-components'
+
+import { actions, selectors } from 'data'
+import { Button, Text } from 'blockchain-info-components'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: center;
+  margin: 12px 0 20px;
+`
+
+const SwitchButton = styled(Button)`
+  width: 200px;
+  height: 30px;
+  padding: 0;
+
+  &:hover {
+    border: 1px solid ${props => props.theme.blue600};
+    background-color: transparent;
+  }
+`
+const ButtonText = styled(Text)`
+  color: ${props => props.theme.blue600};
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 150%;
+`
 
 class CurrencySwitchContainer extends React.PureComponent {
   render () {
     const { settings, coinDisplayed, preferencesActions } = this.props
     const { currency } = settings.getOrElse({})
 
     return (
-      <Template
-        currency={currency}
-        coinDisplayed={coinDisplayed}
-        toggleCoinDisplayed={preferencesActions.toggleCoinDisplayed}
-      />
+      <Wrapper>
+        <SwitchButton
+          onClick={preferencesActions.toggleCoinDisplayed}
+          data-e2e='balanceDropdown-currency-switch'
+        >
+          <ButtonText>
+            {coinDisplayed ? (
+              <FormattedMessage
+                id='layouts.wallet.menutop.balance.walletbalance.showfiat'
+                defaultMessage='Show {currency}'
+                values={{ currency: currency }}
+              />
+            ) : (
+              <FormattedMessage
+                id='layouts.wallet.menutop.balance.walletbalance.showcrypto'
+                defaultMessage='Show Crypto'
+              />
+            )}
+          </ButtonText>
+        </SwitchButton>
+      </Wrapper>
     )
   }
 }

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/LockboxBalance/BchLockboxBalance/index.js

@@ -4,7 +4,7 @@ import React from 'react'
 
 import { actions } from 'data'
 import { getData } from './selectors'
-import { LoadingBalance } from 'components/Balances'
+import { LoadingBalance } from '../../model'
 import Error from './template.error'
 import Success from './template.success'
 
@@ -23,7 +23,7 @@ class BchLockboxBalance extends React.PureComponent {
 
     return data.cata({
       Success: value => <Success balance={value} />,
-      Failure: message => <Error onRefresh={this.handleRefresh} />,
+      Failure: () => <Error onRefresh={this.handleRefresh} />,
       Loading: () => <LoadingBalance coin='BCH' />,
       NotAsked: () => <LoadingBalance coin='BCH' />
     })

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/LockboxBalance/BchLockboxBalance/template.success.js

@@ -1,22 +1,16 @@
-import { CoinBalanceWrapper } from 'components/Balances'
 import { LinkContainer } from 'react-router-bootstrap'
 import PropTypes from 'prop-types'
 import React from 'react'
-import styled from 'styled-components'
 
-const Success = props => {
-  const { balance } = props
+import { CoinBalanceWrapper } from '../../model'
 
-  const Wrapper = styled.div``
-
-  return (
-    <LinkContainer to='/lockbox'>
-      <Wrapper data-e2e='balanceDropdown-lockbox-bch'>
-        <CoinBalanceWrapper coin='BCH' balance={balance} />
-      </Wrapper>
-    </LinkContainer>
-  )
-}
+const Success = props => (
+  <LinkContainer to='/lockbox'>
+    <div data-e2e='balanceDropdown-lockbox-bch'>
+      <CoinBalanceWrapper coin='BCH' balance={props.balance} />
+    </div>
+  </LinkContainer>
+)
 
 Success.propTypes = {
   balance: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/LockboxBalance/BtcLockboxBalance/index.js

@@ -4,7 +4,7 @@ import React from 'react'
 
 import { actions } from 'data'
 import { getData } from './selectors'
-import { LoadingBalance } from 'components/Balances'
+import { LoadingBalance } from '../../model'
 import Error from './template.error'
 import Success from './template.success'
 
@@ -23,7 +23,7 @@ class BtcLockboxBalance extends React.PureComponent {
 
     return data.cata({
       Success: value => <Success balance={value} />,
-      Failure: message => <Error onRefresh={this.handleRefresh} />,
+      Failure: () => <Error onRefresh={this.handleRefresh} />,
       Loading: () => <LoadingBalance coin='BTC' />,
       NotAsked: () => <LoadingBalance coin='BTC' />
     })

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/LockboxBalance/BtcLockboxBalance/template.success.js

@@ -1,22 +1,16 @@
-import { CoinBalanceWrapper } from 'components/Balances'
 import { LinkContainer } from 'react-router-bootstrap'
 import PropTypes from 'prop-types'
 import React from 'react'
-import styled from 'styled-components'
 
-const Success = props => {
-  const { balance } = props
+import { CoinBalanceWrapper } from '../../model'
 
-  const Wrapper = styled.div``
-
-  return (
-    <LinkContainer to='/lockbox'>
-      <Wrapper data-e2e='balanceDropdown-lockbox-btc'>
-        <CoinBalanceWrapper coin='BTC' balance={balance} />
-      </Wrapper>
-    </LinkContainer>
-  )
-}
+const Success = props => (
+  <LinkContainer to='/lockbox'>
+    <div data-e2e='balanceDropdown-lockbox-btc'>
+      <CoinBalanceWrapper coin='BTC' balance={props.balance} />
+    </div>
+  </LinkContainer>
+)
 
 Success.propTypes = {
   balance: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/LockboxBalance/EthLockboxBalance/index.js

@@ -4,7 +4,7 @@ import React from 'react'
 
 import { actions } from 'data'
 import { getData } from './selectors'
-import { LoadingBalance } from 'components/Balances'
+import { LoadingBalance } from '../../model'
 import Error from './template.error'
 import Success from './template.success'
 
@@ -23,7 +23,7 @@ class EthLockboxBalance extends React.PureComponent {
 
     return data.cata({
       Success: value => <Success balance={value} />,
-      Failure: message => <Error onRefresh={this.handleRefresh} />,
+      Failure: () => <Error onRefresh={this.handleRefresh} />,
       Loading: () => <LoadingBalance coin='ETH' />,
       NotAsked: () => <LoadingBalance coin='ETH' />
     })

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/LockboxBalance/EthLockboxBalance/template.success.js

@@ -1,22 +1,16 @@
-import { CoinBalanceWrapper } from 'components/Balances'
 import { LinkContainer } from 'react-router-bootstrap'
 import PropTypes from 'prop-types'
 import React from 'react'
-import styled from 'styled-components'
 
-const Success = props => {
-  const { balance } = props
+import { CoinBalanceWrapper } from '../../model'
 
-  const Wrapper = styled.div``
-
-  return (
-    <LinkContainer to='/lockbox'>
-      <Wrapper data-e2e='balanceDropdown-lockbox-eth'>
-        <CoinBalanceWrapper coin='ETH' balance={balance} />
-      </Wrapper>
-    </LinkContainer>
-  )
-}
+const Success = props => (
+  <LinkContainer to='/lockbox'>
+    <div data-e2e='balanceDropdown-lockbox-eth'>
+      <CoinBalanceWrapper coin='ETH' balance={props.balance} />
+    </div>
+  </LinkContainer>
+)
 
 Success.propTypes = {
   balance: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/LockboxBalance/TotalBalance/index.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux'
 import { getTotalBalance } from 'components/Balances/lockbox/selectors'
 import React from 'react'
 
-import { LoadingBalance } from 'components/Balances'
+import { LoadingBalance } from '../../model'
 import Error from './template.error'
 import Success from './template.success'
 

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/LockboxBalance/XlmLockboxBalance/index.js

@@ -4,7 +4,7 @@ import React from 'react'
 
 import { actions } from 'data'
 import { getData } from './selectors'
-import { LoadingBalance } from 'components/Balances'
+import { LoadingBalance } from '../../model'
 import Error from './template.error'
 import Success from './template.success'
 
@@ -23,7 +23,7 @@ class XlmLockboxBalance extends React.PureComponent {
 
     return data.cata({
       Success: value => <Success balance={value} />,
-      Failure: message => <Error onRefresh={this.handleRefresh} />,
+      Failure: () => <Error onRefresh={this.handleRefresh} />,
       Loading: () => <LoadingBalance coin='XLM' />,
       NotAsked: () => <LoadingBalance coin='XLM' />
     })

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/LockboxBalance/XlmLockboxBalance/template.success.js

@@ -1,22 +1,16 @@
-import { CoinBalanceWrapper } from 'components/Balances'
 import { LinkContainer } from 'react-router-bootstrap'
 import PropTypes from 'prop-types'
 import React from 'react'
-import styled from 'styled-components'
 
-const Success = props => {
-  const { balance } = props
+import { CoinBalanceWrapper } from '../../model'
 
-  const Wrapper = styled.div``
-
-  return (
-    <LinkContainer to='/lockbox'>
-      <Wrapper data-e2e='balanceDropdown-lockbox-xlm'>
-        <CoinBalanceWrapper coin='XLM' balance={balance} />
-      </Wrapper>
-    </LinkContainer>
-  )
-}
+const Success = props => (
+  <LinkContainer to='/lockbox'>
+    <div data-e2e='balanceDropdown-lockbox-xlm'>
+      <CoinBalanceWrapper coin='XLM' balance={props.balance} />
+    </div>
+  </LinkContainer>
+)
 
 Success.propTypes = {
   balance: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/LockboxBalance/template.js

@@ -2,9 +2,10 @@ import { FormattedMessage } from 'react-intl'
 import React from 'react'
 import styled from 'styled-components'
 
-import { BalancesWrapper, Header, Wrapper } from 'components/Balances'
+import { Header, Wrapper } from 'components/Balances'
 import { Icon, Text } from 'blockchain-info-components'
 
+import { BalancesWrapper } from '../model'
 import BchLockboxBalance from './BchLockboxBalance'
 import BtcLockboxBalance from './BtcLockboxBalance'
 import EthLockboxBalance from './EthLockboxBalance'