diff --git a/src/js/views/Wallet/components/Summary/Container.js b/src/js/views/Wallet/views/Account/Container.js similarity index 100% rename from src/js/views/Wallet/components/Summary/Container.js rename to src/js/views/Wallet/views/Account/Container.js diff --git a/src/js/views/Wallet/components/Summary/components/Details/index.js b/src/js/views/Wallet/views/Account/components/Details/index.js similarity index 100% rename from src/js/views/Wallet/components/Summary/components/Details/index.js rename to src/js/views/Wallet/views/Account/components/Details/index.js diff --git a/src/js/views/Wallet/components/Summary/components/Tokens/index.js b/src/js/views/Wallet/views/Account/components/Tokens/index.js similarity index 100% rename from src/js/views/Wallet/components/Summary/components/Tokens/index.js rename to src/js/views/Wallet/views/Account/components/Tokens/index.js diff --git a/src/js/views/Wallet/components/Summary/index.js b/src/js/views/Wallet/views/Account/index.js similarity index 77% rename from src/js/views/Wallet/components/Summary/index.js rename to src/js/views/Wallet/views/Account/index.js index 6877fe23..367a5ecd 100644 --- a/src/js/views/Wallet/components/Summary/index.js +++ b/src/js/views/Wallet/views/Account/index.js @@ -1,5 +1,5 @@ /* @flow */ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import React, { Component } from 'react'; import { H2 } from 'components/Heading'; import BigNumber from 'bignumber.js'; @@ -8,18 +8,36 @@ import Tooltip from 'rc-tooltip'; import { resolveAfter } from 'utils/promiseUtils'; import { Notification } from 'components/Notification'; +import CoinLogo from 'components/CoinLogo'; import * as stateUtils from 'reducers/utils'; import type { NetworkToken } from 'reducers/LocalStorageReducer'; -import SelectedAccount from '../SelectedAccount'; +import SelectedAccount from 'views/Wallet/components/SelectedAccount'; // TODO: SekectedAccount component +import Link from 'components/Link'; import SummaryDetails from './components/Details'; import SummaryTokens from './components/Tokens'; import type { Props } from './index'; +const AccountHeading = styled.div` + padding: 20px 48px 20px 45px; + display: flex; + justify-content: space-between; + align-items: center; +`; + const StyledH2 = styled(H2)` padding: 20px 48px; `; +const AccountName = styled.div` + display: flex; + align-items: center; +`; + +const StyledCoinLogo = styled(CoinLogo)` + margin-right: 10px; +`; + const Summary = (props: Props) => { const device = props.wallet.selectedDevice; const { @@ -44,10 +62,19 @@ const Summary = (props: Props) => { return (
- - Account #{ parseInt(account.index) + 1 } - See full transaction history - + + + +

Account #{parseInt(account.index, 10) + 1}

+
+ See full transaction history + +
{