diff --git a/src/views/Wallet/Container.js b/src/views/Wallet/Container.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/views/Wallet/views/Account/Summary/components/Balance/index.js b/src/views/Wallet/views/Account/Summary/components/Balance/index.js index c7c978fc..9ac46d64 100644 --- a/src/views/Wallet/views/Account/Summary/components/Balance/index.js +++ b/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 { Props as BaseProps } from '../../Container'; +import type { Network, State as ReducersState } from 'flowtype'; type Props = { network: Network, balance: string, - fiat: $ElementType, + fiat: $ElementType, } type State = { diff --git a/src/views/Wallet/views/Account/Summary/Container.js b/src/views/Wallet/views/Account/Summary/containers/EthereumSummary/Container.js similarity index 100% rename from src/views/Wallet/views/Account/Summary/Container.js rename to src/views/Wallet/views/Account/Summary/containers/EthereumSummary/Container.js diff --git a/src/views/Wallet/views/Account/Summary/containers/EthereumSummary/index.js b/src/views/Wallet/views/Account/Summary/containers/EthereumSummary/index.js new file mode 100644 index 00000000..fc88851b --- /dev/null +++ b/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 ( + + + + + + Account #{parseInt(account.index, 10) + 1} + + See full transaction history + + + +

Tokens

+ + + +
+ + '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} + /> + + + {tokens.map(token => ( + + ))} + +
+
+ ); +}; + +export default AccountSummary; diff --git a/src/views/Wallet/views/Account/Summary/index.js b/src/views/Wallet/views/Account/Summary/index.js index 197b285c..4fc7082b 100644 --- a/src/views/Wallet/views/Account/Summary/index.js +++ b/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 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 { connect } from 'react-redux'; -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 AddTokenMessage from './components/AddTokenMessage'; +import type { State } from 'flowtype'; +import EthereumSummary from './containers/EthereumSummary/Container'; -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, - loader, - shouldRender, - } = props.selectedAccount; - - const { type, title, message } = loader; - - if (!device || !account || !network || !shouldRender) return ; - - 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 ( - - - - - - Account #{parseInt(account.index, 10) + 1} - - See full transaction history - - - -

Tokens

- - - -
- - '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} - /> - - - { tokens.length < 1 && () } - {tokens.map(token => ( - - ))} - -
-
- ); +type StateProps = { + selectedAccount: $ElementType, + summary: $ElementType, + wallet: $ElementType, + tokens: $ElementType, + fiat: $ElementType, + localStorage: $ElementType, }; -export default AccountSummary; +export type Props = StateProps; + +type WrapperProps = { + selectedAccount: $ElementType, +} + +// 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 ; + } + return ; +}); diff --git a/src/views/index.js b/src/views/index.js index 20542adf..e772cfbe 100644 --- a/src/views/index.js +++ b/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';