mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-24 16:08:11 +00:00
Refactorize Detail component
- Rename it to "AccountBalance" - Convert component to class - CSS refactorization - Handle hidden toggle inside component instead of using actions/reducers
This commit is contained in:
parent
0f89de426f
commit
c32c30fa8c
@ -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),
|
||||
|
@ -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,106 +71,60 @@ const BalanceWrapper = styled.div`
|
||||
margin-right: 48px;
|
||||
`;
|
||||
|
||||
class AccountBalance extends Component<Props> {
|
||||
constructor(props) {
|
||||
class AccountBalance extends Component<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isHidden: false,
|
||||
};
|
||||
}
|
||||
|
||||
shouldHide(hide) {
|
||||
this.setState({
|
||||
isHidden: hide,
|
||||
});
|
||||
handleHideBallanceIconClick() {
|
||||
this.setState(previousState => ({ isHidden: !previousState.isHidden }));
|
||||
}
|
||||
|
||||
render() {
|
||||
const selectedCoin = props.coin;
|
||||
const fiatRate = props.fiat.find(f => f.network === selectedCoin.network);
|
||||
const selectedCoin = this.props.coin;
|
||||
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 (
|
||||
|
||||
<Wrapper>
|
||||
<HideBalanceIconWrapper
|
||||
onClick={() => this.handleHideBallanceIconClick()}
|
||||
>
|
||||
<Icon
|
||||
canAnimate
|
||||
isActive={this.state.isHidden}
|
||||
icon={ICONS.ARROW_UP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={26}
|
||||
/>
|
||||
</HideBalanceIconWrapper>
|
||||
{!this.state.isHidden && (
|
||||
<React.Fragment>
|
||||
<BalanceWrapper>
|
||||
<Label>Balance</Label>
|
||||
{fiatRate && (
|
||||
<FiatValue>${fiat}</FiatValue>
|
||||
)}
|
||||
<CoinBalace>{this.props.balance} {selectedCoin.symbol}</CoinBalace>
|
||||
</BalanceWrapper>
|
||||
{fiatRate && (
|
||||
<BalanceWrapper>
|
||||
<Label>Rate</Label>
|
||||
<FiatValue>${fiatRateValue.toFixed(2)}</FiatValue>
|
||||
<CoinBalace>1.00 {selectedCoin.symbol}</CoinBalace>
|
||||
</BalanceWrapper>
|
||||
)}
|
||||
</React.Fragment>
|
||||
)}
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const AccountBalance = (props: Props): ?React$Element<string> => {
|
||||
if (!props.summary.details) {
|
||||
return (
|
||||
<Wrapper>
|
||||
<HideBalanceIconWrapper
|
||||
onClick={props.onToggle}
|
||||
>
|
||||
<Icon
|
||||
canAnimate={props.summary.details}
|
||||
isActive
|
||||
icon={ICONS.ARROW_UP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={26}
|
||||
/>
|
||||
</HideBalanceIconWrapper>
|
||||
</Wrapper>
|
||||
);
|
||||
}
|
||||
|
||||
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>
|
||||
</BalanceWrapper>
|
||||
{fiatRate && (
|
||||
<BalanceWrapper>
|
||||
<Label>Rate</Label>
|
||||
<FiatValue>${fiatRateValue.toFixed(2)}</FiatValue>
|
||||
<CoinBalace>1.00 {selectedCoin.symbol}</CoinBalace>
|
||||
</BalanceWrapper>
|
||||
)}
|
||||
</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;
|
@ -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;
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user