mirror of https://github.com/trezor/trezor-wallet
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
4.6 KiB
126 lines
4.6 KiB
/* @flow */
|
|
'use strict';
|
|
|
|
import React, { Component } from 'react';
|
|
import BigNumber from 'bignumber.js';
|
|
import { Async } from 'react-select';
|
|
import Tooltip from 'rc-tooltip';
|
|
|
|
import { resolveAfter } from '~/js/utils/promiseUtils';
|
|
import AbstractAccount from '../AbstractAccount';
|
|
import { Notification } from '~/js/components/common/Notification';
|
|
import SummaryDetails from './SummaryDetails.js';
|
|
import SummaryTokens from './SummaryTokens.js';
|
|
|
|
import type { Props } from './index';
|
|
import type { AccountState } from '../AbstractAccount';
|
|
|
|
import type { TrezorDevice } from '~/flowtype';
|
|
import type { NetworkToken } from '~/js/reducers/LocalStorageReducer';
|
|
import type { Account } from '~/js/reducers/AccountsReducer';
|
|
import type { Discovery } from '~/js/reducers/DiscoveryReducer';
|
|
import { findAccountTokens } from '~/js/reducers/TokensReducer';
|
|
|
|
export default class Summary extends AbstractAccount<Props> {
|
|
render() {
|
|
return super.render() || _render(this.props, this.state);
|
|
}
|
|
}
|
|
|
|
const _render = (props: Props, state: AccountState): React$Element<string> => {
|
|
|
|
const {
|
|
device,
|
|
account,
|
|
deviceStatusNotification
|
|
} = state;
|
|
const abstractAccount = props.abstractAccount;
|
|
|
|
if (!device || !account || !abstractAccount) return <section></section>;
|
|
|
|
|
|
const tokens = findAccountTokens(props.tokens, account);
|
|
const explorerLink: string = `${abstractAccount.coin.explorer.address}${account.address}`;
|
|
|
|
const tokensTooltip = (
|
|
<div className="tooltip-wrapper">
|
|
Insert token name, symbol or address to be able to send it.
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
|
|
<section className="summary">
|
|
{ deviceStatusNotification }
|
|
|
|
<h2 className={ `summary-header ${abstractAccount.network}` }>
|
|
Account #{ parseInt(abstractAccount.index) + 1 }
|
|
<a href={ explorerLink } className="gray" target="_blank" rel="noreferrer noopener">See full transaction history</a>
|
|
</h2>
|
|
|
|
<SummaryDetails
|
|
coin={ abstractAccount.coin }
|
|
summary={ props.summary }
|
|
balance={ account.balance }
|
|
network={ abstractAccount.network }
|
|
fiat={ props.fiat }
|
|
localStorage={ props.localStorage }
|
|
onToggle={ props.onDetailsToggle } />
|
|
|
|
<h2>
|
|
Tokens
|
|
<Tooltip
|
|
arrowContent={<div className="rc-tooltip-arrow-inner"></div>}
|
|
overlay={ tokensTooltip }
|
|
placement="top">
|
|
<span className="what-is-it"></span>
|
|
</Tooltip>
|
|
</h2>
|
|
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
|
|
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
|
|
<div className="filter">
|
|
<Async
|
|
className="token-select"
|
|
multi={ false }
|
|
autoload={ false }
|
|
ignoreCase={ true }
|
|
backspaceRemoves={ true }
|
|
value={ null }
|
|
onChange={ token => props.addToken(token, account) }
|
|
loadOptions={ input => props.loadTokens(input, account.network) }
|
|
filterOptions= {
|
|
(options: Array<NetworkToken>, search: string, values: Array<NetworkToken>) => {
|
|
return options.map(o => {
|
|
const added = tokens.find(t => t.symbol === o.symbol);
|
|
if (added) {
|
|
return {
|
|
...o,
|
|
name: `${o.name} (Already added)`,
|
|
disabled: true
|
|
};
|
|
} else {
|
|
return o;
|
|
}
|
|
});
|
|
|
|
// return options.filter(o => {
|
|
// return !tokens.find(t => t.symbol === o.symbol);
|
|
// });
|
|
}
|
|
}
|
|
valueKey="symbol"
|
|
labelKey="name"
|
|
placeholder="Search for token"
|
|
searchPromptText="Type token name or address"
|
|
noResultsText="Token not found"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<SummaryTokens tokens={ tokens } removeToken={ props.removeToken } />
|
|
|
|
</section>
|
|
|
|
);
|
|
} |