/* @flow */
import React from 'react';
import BigNumber from 'bignumber.js';
import styled, { css } from 'styled-components';
import { NavLink } from 'react-router-dom';
import { FormattedMessage, FormattedNumber } from 'react-intl';
import { toFiatCurrency } from 'utils/fiatConverter';
import * as stateUtils from 'reducers/utils';
import { findDeviceAccounts } from 'reducers/AccountsReducer';
import { Loader, icons as ICONS, colors } from 'trezor-ui-components';
import { FONT_SIZE, BORDER_WIDTH, LEFT_NAVIGATION_ROW } from 'config/variables';
import type { Accounts } from 'flowtype';
import l10nCommonMessages from 'views/common.messages';
import { SETTINGS } from 'config/app';
import type { Props } from '../common';
import Row from '../Row';
import RowCoin from '../RowCoin';
import l10nMessages from './index.messages';
import AddAccountButton from './components/AddAccountButton';
const Wrapper = styled.div``;
const Text = styled.span`
font-size: ${FONT_SIZE.SMALL};
color: ${colors.TEXT_SECONDARY};
`;
const RowAccountWrapper = styled.div`
width: 100%;
display: flex;
padding: ${LEFT_NAVIGATION_ROW.PADDING};
font-size: ${FONT_SIZE.BASE};
color: ${colors.TEXT_PRIMARY};
border-left: ${BORDER_WIDTH.SELECTED} solid transparent;
border-bottom: 1px solid ${colors.DIVIDER};
&:hover {
background-color: ${colors.GRAY_LIGHT};
}
${props =>
props.borderTop &&
css`
border-top: 1px solid ${colors.DIVIDER};
`}
${props =>
props.isSelected &&
css`
border-left: ${BORDER_WIDTH.SELECTED} solid ${colors.GREEN_PRIMARY};
background: ${colors.WHITE};
&:hover {
background-color: ${colors.WHITE};
}
`}
`;
const DiscoveryLoadingWrapper = styled.div`
display: flex;
align-items: center;
padding: ${LEFT_NAVIGATION_ROW.PADDING};
font-size: ${FONT_SIZE.BASE};
white-space: nowrap;
color: ${colors.TEXT_SECONDARY};
`;
const DiscoveryLoadingText = styled.span`
margin-left: 14px;
`;
const Col = styled.div`
display: flex;
flex: 1;
flex-direction: column;
`;
const RightCol = styled(Col)`
justify-content: center;
`;
const Badge = styled.div`
padding: 4px 8px;
background: lightslategray;
color: white;
font-size: ${FONT_SIZE.BADGE};
border-radius: 3px;
align-self: flex-end;
`;
// TODO: Refactorize deviceStatus & selectedAccounts
const AccountMenu = (props: Props) => {
const selected = props.wallet.selectedDevice;
const { location } = props.router;
const urlParams = location.state;
const { accounts } = props;
const baseUrl: string = urlParams.deviceInstance
? `/device/${urlParams.device}:${urlParams.deviceInstance}`
: `/device/${urlParams.device}`;
const { config } = props.localStorage;
const network = config.networks.find(c => c.shortcut === location.state.network);
if (!selected || !network) return null;
const deviceAccounts: Accounts = findDeviceAccounts(accounts, selected, location.state.network);
const discoveryAccounts: Accounts = deviceAccounts.filter(
account => account.imported === false
);
const selectedAccounts = deviceAccounts.map((account, i) => {
// const url: string = `${baseUrl}/network/${location.state.network}/account/${i}`;
let url: string;
if (account.imported) {
url = location.pathname.replace(/account+\/(i?[0-9]*)/, `account/i${account.index}`);
} else {
url = location.pathname.replace(/account+\/(i?[0-9]*)/, `account/${account.index}`);
}
let balance: ?string = null;
const fiatRates = props.fiat.find(f => f.network === network.shortcut);
const { localCurrency } = props.wallet;
let fiat = '';
if (account.balance !== '') {
const pending = stateUtils.getAccountPendingTx(props.pending, account);
const pendingAmount: BigNumber = stateUtils.getPendingAmount(pending, network.symbol);
const availableBalance: string = new BigNumber(account.balance)
.minus(pendingAmount)
.toString(10);
balance = `${availableBalance} ${network.symbol}`;
if (fiatRates) {
fiat = toFiatCurrency(availableBalance, localCurrency, fiatRates);
balance = `${availableBalance} ${network.symbol} / `;
}
}
return (
{balance && !props.wallet.hideBalance && (
{balance}
{fiatRates && (
)}
)}
{!balance && (
)}
{account.imported && (
watch-only
)}
);
});
let discoveryStatus = null;
const discovery = props.discovery.find(
d => d.deviceState === selected.state && d.network === location.state.network
);
if (discovery && discovery.completed) {
const lastAccount = discoveryAccounts[discoveryAccounts.length - 1];
if (!selected.connected) {
discoveryStatus = (
}
/>
);
} else if (discoveryAccounts.length >= SETTINGS.MAX_ACCOUNTS) {
discoveryStatus = (
}
/>
);
} else if (lastAccount && !lastAccount.empty) {
discoveryStatus = ;
} else {
discoveryStatus = (
}
/>
);
}
} else {
discoveryStatus = (
);
}
if (discovery && (discovery.fwNotSupported || discovery.fwOutdated)) {
discoveryStatus = null;
}
return (
{selectedAccounts}
{discoveryStatus}
);
};
export default AccountMenu;