Refactorize Detail component

- Rename it to "AccountBalance"
- Convert component to class
- CSS refactorization
- Handle hidden toggle inside component instead of using actions/reducers

src/views/Wallet/views/AccountSummary/Container.js

@@ -3,7 +3,6 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
-import * as SummaryActions from 'actions/SummaryActions';
 import * as TokenActions from 'actions/TokenActions';
 
 import type { State, Dispatch } from 'flowtype';
@@ -20,7 +19,6 @@ type StateProps = BaseStateProps & {
 };
 
 type DispatchProps = BaseDispatchProps & {
-    onDetailsToggle: typeof SummaryActions.onDetailsToggle,
     addToken: typeof TokenActions.add,
     loadTokens: typeof TokenActions.load,
     removeToken: typeof TokenActions.remove,
@@ -40,7 +38,6 @@ const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: St
 });
 
 const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
-    onDetailsToggle: bindActionCreators(SummaryActions.onDetailsToggle, dispatch),
     addToken: bindActionCreators(TokenActions.add, dispatch),
     loadTokens: bindActionCreators(TokenActions.load, dispatch),
     removeToken: bindActionCreators(TokenActions.remove, dispatch),

src/views/Wallet/views/AccountSummary/components/AccountBalance/index.js

@@ -1,26 +1,25 @@
 /* @flow */
 import React, { Component } from 'react';
-import styled, { css } from 'styled-components';
+import BigNumber from 'bignumber.js';
+import styled from 'styled-components';
 import Icon from 'components/Icon';
 import colors from 'config/colors';
 import ICONS from 'config/icons';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
-import BigNumber from 'bignumber.js';
-
 
 import type { Coin } from 'reducers/LocalStorageReducer';
 import type { Props as BaseProps } from '../../Container';
 
 type Props = {
-    // coin: $PropertyType<$ElementType<BaseProps, 'selectedAccount'>, 'coin'>,
     coin: Coin,
-    summary: $ElementType<BaseProps, 'summary'>,
     balance: string,
-    network: string,
     fiat: $ElementType<BaseProps, 'fiat'>,
-    onToggle: $ElementType<BaseProps, 'onDetailsToggle'>
 }
 
+type State = {
+    isHidden: boolean,
+};
+
 const Wrapper = styled.div`
     padding: 0 48px 25px;
     position: relative;
@@ -72,81 +71,47 @@ const BalanceWrapper = styled.div`
     margin-right: 48px;
 `;
 
-class AccountBalance extends Component<Props> {
+class AccountBalance extends Component<Props, State> {
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
         this.state = {
             isHidden: false,
         };
     }
 
-    shouldHide(hide) {
+    handleHideBallanceIconClick() {
-        this.setState({
+        this.setState(previousState => ({ isHidden: !previousState.isHidden }));
-            isHidden: hide,
-        });
     }
 
     render() {
-        const selectedCoin = props.coin;
+        const selectedCoin = this.props.coin;
-        const fiatRate = props.fiat.find(f => f.network === selectedCoin.network);
+        const fiatRate: any = this.props.fiat.find(f => f.network === selectedCoin.network);
 
-        const accountBalance = new BigNumber(props.balance);
+        const accountBalance = new BigNumber(this.props.balance);
         const fiatRateValue = new BigNumber(fiatRate.value);
         const fiat = accountBalance.times(fiatRateValue).toFixed(2);
 
-        return (
-
-        );
-    }
-}
-
-
-const AccountBalance = (props: Props): ?React$Element<string> => {
-    if (!props.summary.details) {
         return (
             <Wrapper>
                 <HideBalanceIconWrapper
-                    onClick={props.onToggle}
+                    onClick={() => this.handleHideBallanceIconClick()}
                 >
                     <Icon
-                        canAnimate={props.summary.details}
+                        canAnimate
-                        isActive
+                        isActive={this.state.isHidden}
                         icon={ICONS.ARROW_UP}
                         color={colors.TEXT_SECONDARY}
                         size={26}
                     />
                 </HideBalanceIconWrapper>
-            </Wrapper>
+                {!this.state.isHidden && (
-        );
-    }
-
-    const selectedCoin = props.coin;
-    const fiatRate = props.fiat.find(f => f.network === selectedCoin.network);
-
-    const accountBalance = new BigNumber(props.balance);
-    const fiatRateValue = new BigNumber(fiatRate.value);
-    const fiat = accountBalance.times(fiatRateValue).toFixed(2);
-
-    return (
-        <Wrapper>
-            {props.summary.details && (
                     <React.Fragment>
-                    <HideBalanceIconWrapper
-                        onClick={props.onToggle}
-                    >
-                        <Icon
-                            icon={ICONS.ARROW_UP}
-                            color={colors.TEXT_SECONDARY}
-                            size={26}
-                        />
-                    </HideBalanceIconWrapper>
-
                         <BalanceWrapper>
                             <Label>Balance</Label>
                             {fiatRate && (
                                 <FiatValue>${fiat}</FiatValue>
                             )}
-                        <CoinBalace>{props.balance} {selectedCoin.symbol}</CoinBalace>
+                            <CoinBalace>{this.props.balance} {selectedCoin.symbol}</CoinBalace>
                         </BalanceWrapper>
                         {fiatRate && (
                             <BalanceWrapper>
@@ -157,21 +122,9 @@ const AccountBalance = (props: Props): ?React$Element<string> => {
                         )}
                     </React.Fragment>
                 )}
-
-            {!props.summary.details && (
-                <HideBalanceIconWrapper
-                    isBalanceHidden
-                    onClick={props.onToggle}
-                >
-                    <Icon
-                        icon={ICONS.ARROW_UP}
-                        color={colors.TEXT_SECONDARY}
-                        size={26}
-                    />
-                </HideBalanceIconWrapper>
-            )}
             </Wrapper>
         );
-};
+    }
+}
 
 export default AccountBalance;

src/views/Wallet/views/AccountSummary/components/Details/index.js

@@ -1,75 +0,0 @@
-/* @flow */
-
-
-import React from 'react';
-import BigNumber from 'bignumber.js';
-
-import type { Coin } from 'reducers/LocalStorageReducer';
-import type { Props as BaseProps } from '../../Container';
-
-type Props = {
-    // coin: $PropertyType<$ElementType<BaseProps, 'selectedAccount'>, 'coin'>,
-    coin: Coin,
-    summary: $ElementType<BaseProps, 'summary'>,
-    balance: string,
-    network: string,
-    fiat: $ElementType<BaseProps, 'fiat'>,
-    onToggle: $ElementType<BaseProps, 'onDetailsToggle'>
-}
-
-const SummaryDetails = (props: Props): ?React$Element<string> => {
-    if (!props.summary.details) {
-        return (
-            <div className="summary-details">
-                <div className="toggle" onClick={props.onToggle} />
-            </div>
-        );
-    }
-
-    const selectedCoin = props.coin;
-    const fiatRate = props.fiat.find(f => f.network === selectedCoin.network);
-
-    let balanceColumn = null;
-    let rateColumn = null;
-
-    if (fiatRate) {
-        const accountBalance = new BigNumber(props.balance);
-        const fiatValue = new BigNumber(fiatRate.value);
-        const fiat = accountBalance.times(fiatValue).toFixed(2);
-
-        balanceColumn = (
-            <div className="column">
-                <div className="label">Balance</div>
-                <div className="fiat-value">${ fiat }</div>
-                <div className="value">{ props.balance } { selectedCoin.symbol }</div>
-            </div>
-        );
-
-        rateColumn = (
-            <div className="column">
-                <div className="label">Rate</div>
-                <div className="fiat-value">${ fiatValue.toFixed(2) }</div>
-                <div className="value">1.00 { selectedCoin.symbol }</div>
-            </div>
-        );
-    } else {
-        balanceColumn = (
-            <div className="column">
-                <div className="label">Balance</div>
-                <div className="fiat-value">{ props.balance } { selectedCoin.symbol }</div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="summary-details opened">
-            <div className="toggle" onClick={props.onToggle} />
-            <div className="content">
-                { balanceColumn }
-                { rateColumn }
-            </div>
-        </div>
-    );
-};
-
-export default SummaryDetails;

src/views/Wallet/views/AccountSummary/index.js

@@ -14,7 +14,7 @@ import CoinLogo from 'components/CoinLogo';
 import * as stateUtils from 'reducers/utils';
 import SelectedAccount from 'views/Wallet/components/SelectedAccount';
 import Link from 'components/Link';
-import SummaryDetails from './components/Details';
+import AccountBalance from './components/AccountBalance';
 import SummaryTokens from './components/Tokens';
 
 import type { Props } from './Container';
@@ -83,7 +83,7 @@ const Summary = (props: Props) => {
                 </Link>
             </AccountHeading>
 
-            <SummaryDetails
+            <AccountBalance
                 coin={network}
                 summary={props.summary}
                 balance={balance}