split Summary view into networks

src/views/Wallet/views/Account/Summary/ethereum/index.js

@@ -14,9 +14,9 @@ import CoinLogo from 'components/images/CoinLogo';
 import * as stateUtils from 'reducers/utils';
 import Link from 'components/Link';
 import { FONT_WEIGHT, FONT_SIZE } from 'config/variables';
-import AccountBalance from '../../components/Balance';
+import AccountBalance from '../components/Balance';
-import AddedToken from '../../components/Token';
+import AddedToken from '../components/Token';
-import AddTokenMessage from '../../components/AddTokenMessage';
+import AddTokenMessage from '../components/AddTokenMessage';
 
 import type { Props } from './Container';
 

src/views/Wallet/views/Account/Summary/index.js

@@ -3,32 +3,26 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import type { State } from 'flowtype';
-import EthereumSummary from './containers/EthereumSummary/Container';
+import EthereumSummary from './ethereum/Container';
-
+import RippleSummary from './ripple/Container';
-type StateProps = {
-    selectedAccount: $ElementType<State, 'selectedAccount'>,
-    summary: $ElementType<State, 'summary'>,
-    wallet: $ElementType<State, 'wallet'>,
-    tokens: $ElementType<State, 'tokens'>,
-    fiat: $ElementType<State, 'fiat'>,
-    localStorage: $ElementType<State, 'localStorage'>,
-};
-
-export type Props = StateProps;
 
 type WrapperProps = {
     selectedAccount: $ElementType<State, 'selectedAccount'>,
 }
 
-// wrapper will return container for requested network type
+// return container for requested network type
 export default connect((state: State): WrapperProps => ({
     selectedAccount: state.selectedAccount,
 }), null)((props) => {
     const { network } = props.selectedAccount;
     if (!network) return null;
 
-    if (network.type === 'ripple') {
+    switch (network.type) {
-        return <EthereumSummary />;
+        case 'ethereum':
+            return <EthereumSummary />;
+        case 'ripple':
+            return <RippleSummary />;
+        default:
+            return null;
     }
-    return <EthereumSummary />;
 });

src/views/Wallet/views/Account/Summary/ripple/Container.js

@@ -0,0 +1,45 @@
+/* @flow */
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+
+import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
+import * as TokenActions from 'actions/TokenActions';
+
+import type { State, Dispatch } from 'flowtype';
+import Summary from './index';
+
+type OwnProps = { }
+
+type StateProps = {
+    selectedAccount: $ElementType<State, 'selectedAccount'>,
+    summary: $ElementType<State, 'summary'>,
+    wallet: $ElementType<State, 'wallet'>,
+    tokens: $ElementType<State, 'tokens'>,
+    fiat: $ElementType<State, 'fiat'>,
+    localStorage: $ElementType<State, 'localStorage'>,
+};
+
+type DispatchProps = {
+    addToken: typeof TokenActions.add,
+    loadTokens: typeof TokenActions.load,
+    removeToken: typeof TokenActions.remove,
+}
+
+export type Props = StateProps & DispatchProps;
+
+const mapStateToProps: MapStateToProps<State, OwnProps, StateProps> = (state: State): StateProps => ({
+    selectedAccount: state.selectedAccount,
+    summary: state.summary,
+    wallet: state.wallet,
+    tokens: state.tokens,
+    fiat: state.fiat,
+    localStorage: state.localStorage,
+});
+
+const mapDispatchToProps: MapDispatchToProps<Dispatch, OwnProps, DispatchProps> = (dispatch: Dispatch): DispatchProps => ({
+    addToken: bindActionCreators(TokenActions.add, dispatch),
+    loadTokens: bindActionCreators(TokenActions.load, dispatch),
+    removeToken: bindActionCreators(TokenActions.remove, dispatch),
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Summary);

src/views/Wallet/views/Account/Summary/ripple/index.js

@@ -0,0 +1,114 @@
+/* @flow */
+import styled from 'styled-components';
+import React from 'react';
+import { H2 } from 'components/Heading';
+import BigNumber from 'bignumber.js';
+import Icon from 'components/Icon';
+import ICONS from 'config/icons';
+import colors from 'config/colors';
+import Tooltip from 'components/Tooltip';
+import Content from 'views/Wallet/components/Content';
+
+import CoinLogo from 'components/images/CoinLogo';
+import * as stateUtils from 'reducers/utils';
+import Link from 'components/Link';
+import { FONT_WEIGHT, FONT_SIZE } from 'config/variables';
+import AccountBalance from '../components/Balance';
+
+import type { Props } from './Container';
+
+const AccountHeading = styled.div`
+    padding: 0 0 30px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+const H2Wrapper = styled.div`
+    display: flex;
+    align-items: center;
+    padding: 20px 0;
+`;
+
+const StyledTooltip = styled(Tooltip)`
+    position: relative;
+    top: 2px;
+`;
+
+const AccountName = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+const AccountTitle = styled.div`
+    font-size: ${FONT_SIZE.WALLET_TITLE};
+    font-weight: ${FONT_WEIGHT.BASE};
+    color: ${colors.WALLET_TITLE};
+`;
+
+const StyledCoinLogo = styled(CoinLogo)`
+    margin-right: 10px;
+`;
+
+const StyledIcon = styled(Icon)`
+    position: relative;
+    top: -7px;
+    &:hover {
+        cursor: pointer;
+    }
+`;
+
+const AccountSummary = (props: Props) => {
+    const device = props.wallet.selectedDevice;
+    const {
+        account,
+        network,
+        pending,
+        loader,
+        shouldRender,
+    } = props.selectedAccount;
+
+    const { type, title, message } = loader;
+
+    if (!device || !account || !network || !shouldRender) return <Content type={type} title={title} message={message} isLoading />;
+
+    const explorerLink: string = `${network.explorer.address}${account.address}`;
+    const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol);
+    const balance: string = new BigNumber(account.balance).minus(pendingAmount).toString(10);
+
+    return (
+        <Content>
+            <React.Fragment>
+                <AccountHeading>
+                    <AccountName>
+                        <StyledCoinLogo network={account.network} />
+                        <AccountTitle>Account #{parseInt(account.index, 10) + 1}</AccountTitle>
+                    </AccountName>
+                    <Link href={explorerLink} isGray>See full transaction history</Link>
+                </AccountHeading>
+                <AccountBalance
+                    network={network}
+                    balance={balance}
+                    fiat={props.fiat}
+                />
+                <H2Wrapper>
+                    <H2>History</H2>
+                    <StyledTooltip
+                        maxWidth={200}
+                        placement="top"
+                        content="Insert token name, symbol or address to be able to send it."
+                    >
+                        <StyledIcon
+                            icon={ICONS.HELP}
+                            color={colors.TEXT_SECONDARY}
+                            size={24}
+                        />
+                    </StyledTooltip>
+                </H2Wrapper>
+            </React.Fragment>
+        </Content>
+    );
+};
+
+export default AccountSummary;