split Summary components to coin specific files

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

@@ -7,13 +7,12 @@ import colors from 'config/colors';
 import ICONS from 'config/icons';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 
-import type { Network } from 'flowtype';
+import type { Network, State as ReducersState } from 'flowtype';
-import type { Props as BaseProps } from '../../Container';
 
 type Props = {
     network: Network,
     balance: string,
-    fiat: $ElementType<BaseProps, 'fiat'>,
+    fiat: $ElementType<ReducersState, 'fiat'>,
 }
 
 type State = {

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

@@ -0,0 +1,160 @@
+/* @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 { AsyncSelect } from 'components/Select';
+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 AddedToken from '../../components/Token';
+
+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 AsyncSelectWrapper = styled.div`
+    padding-bottom: 32px;
+`;
+
+const AddedTokensWrapper = styled.div``;
+
+const AccountSummary = (props: Props) => {
+    const device = props.wallet.selectedDevice;
+    const {
+        account,
+        network,
+        tokens,
+        pending,
+        shouldRender,
+    } = props.selectedAccount;
+
+    // flow
+    if (!device || !account || !network || !shouldRender) return null;
+
+    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>Tokens</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>
+                <AsyncSelectWrapper>
+                    <AsyncSelect
+                        isSearchable
+                        defaultOptions
+                        value={null}
+                        isMulti={false}
+                        placeholder="Search for the token"
+                        loadingMessage={() => 'Loading...'}
+                        noOptionsMessage={() => 'Token not found'}
+                        onChange={(token) => {
+                            if (token.name) {
+                                const isAdded = tokens.find(t => t.symbol === token.symbol);
+                                if (!isAdded) {
+                                    props.addToken(token, account);
+                                }
+                            }
+                        }}
+                        loadOptions={input => props.loadTokens(input, account.network)}
+                        formatOptionLabel={(option) => {
+                            const isAdded = tokens.find(t => t.symbol === option.symbol);
+                            if (isAdded) {
+                                return `${option.name} (Already added)`;
+                            }
+                            return option.name;
+                        }}
+                        getOptionLabel={option => option.name}
+                        getOptionValue={option => option.symbol}
+                    />
+                </AsyncSelectWrapper>
+                <AddedTokensWrapper>
+                    {tokens.map(token => (
+                        <AddedToken
+                            key={token.symbol}
+                            token={token}
+                            pending={pending}
+                            removeToken={props.removeToken}
+                        />
+                    ))}
+                </AddedTokensWrapper>
+            </React.Fragment>
+        </Content>
+    );
+};
+
+export default AccountSummary;

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

@@ -1,165 +1,34 @@
 /* @flow */
-import styled from 'styled-components';
 import React from 'react';
-import { H2 } from 'components/Heading';
+import { connect } from 'react-redux';
-import BigNumber from 'bignumber.js';
-import Icon from 'components/Icon';
-import { AsyncSelect } from 'components/Select';
-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 type { State } from 'flowtype';
-import * as stateUtils from 'reducers/utils';
+import EthereumSummary from './containers/EthereumSummary/Container';
-import Link from 'components/Link';
-import { FONT_WEIGHT, FONT_SIZE } from 'config/variables';
-import AccountBalance from './components/Balance';
-import AddedToken from './components/Token';
-import AddTokenMessage from './components/AddTokenMessage';
 
-import type { Props } from './Container';
+type StateProps = {
-
+    selectedAccount: $ElementType<State, 'selectedAccount'>,
-const AccountHeading = styled.div`
+    summary: $ElementType<State, 'summary'>,
-    padding: 0 0 30px 0;
+    wallet: $ElementType<State, 'wallet'>,
-    display: flex;
+    tokens: $ElementType<State, 'tokens'>,
-    justify-content: space-between;
+    fiat: $ElementType<State, 'fiat'>,
-    align-items: center;
+    localStorage: $ElementType<State, 'localStorage'>,
-`;
-
-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 AsyncSelectWrapper = styled.div`
-    padding-bottom: 32px;
-`;
-
-const AddedTokensWrapper = styled.div``;
-
-const AccountSummary = (props: Props) => {
-    const device = props.wallet.selectedDevice;
-    const {
-        account,
-        network,
-        tokens,
-        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>Tokens</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>
-                <AsyncSelectWrapper>
-                    <AsyncSelect
-                        isSearchable
-                        defaultOptions
-                        value={null}
-                        isMulti={false}
-                        placeholder="Search for the token"
-                        loadingMessage={() => 'Loading...'}
-                        noOptionsMessage={() => 'Token not found'}
-                        onChange={(token) => {
-                            if (token.name) {
-                                const isAdded = tokens.find(t => t.symbol === token.symbol);
-                                if (!isAdded) {
-                                    props.addToken(token, account);
-                                }
-                            }
-                        }}
-                        loadOptions={input => props.loadTokens(input, account.network)}
-                        formatOptionLabel={(option) => {
-                            const isAdded = tokens.find(t => t.symbol === option.symbol);
-                            if (isAdded) {
-                                return `${option.name} (Already added)`;
-                            }
-                            return option.name;
-                        }}
-                        getOptionLabel={option => option.name}
-                        getOptionValue={option => option.symbol}
-                    />
-                </AsyncSelectWrapper>
-                <AddedTokensWrapper>
-                    { tokens.length < 1 && (<AddTokenMessage />) }
-                    {tokens.map(token => (
-                        <AddedToken
-                            key={token.symbol}
-                            token={token}
-                            pending={pending}
-                            removeToken={props.removeToken}
-                        />
-                    ))}
-                </AddedTokensWrapper>
-            </React.Fragment>
-        </Content>
-    );
 };
 
-export default AccountSummary;
+export type Props = StateProps;
+
+type WrapperProps = {
+    selectedAccount: $ElementType<State, 'selectedAccount'>,
+}
+
+// wrapper will 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') {
+        return <EthereumSummary />;
+    }
+    return <EthereumSummary />;
+});

src/views/index.js

@@ -16,7 +16,7 @@ import ImportView from 'views/Landing/views/Import/Container';
 
 // wallet views
 import WalletContainer from 'views/Wallet';
-import AccountSummary from 'views/Wallet/views/Account/Summary/Container';
+import AccountSummary from 'views/Wallet/views/Account/Summary';
 import AccountSend from 'views/Wallet/views/Account/Send/Container';
 import AccountReceive from 'views/Wallet/views/Account/Receive/Container';
 import AccountSignVerify from 'views/Wallet/views/Account/SignVerify/Container';