1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00

AccountSummary added React.Fragment

This commit is contained in:
Szymon Lesisz 2018-10-03 18:47:43 +02:00
parent 200c0ea4cf
commit 15ed36f2b5

View File

@ -78,84 +78,86 @@ const AccountSummary = (props: Props) => {
return (
<Content>
<AccountHeading>
<AccountName>
<StyledCoinLogo coinNetwork={account.network} />
<H2>Account #{parseInt(account.index, 10) + 1}</H2>
</AccountName>
<Link
target="_blank"
rel="noreferrer noopener"
href={explorerLink}
isGray
>See full transaction history
</Link>
</AccountHeading>
<AccountBalance
coin={network}
summary={props.summary}
balance={balance}
network={network.network}
fiat={props.fiat}
localStorage={props.localStorage}
/>
<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>
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
{/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */}
{/* TODO: Input's box-shadow */}
<AsyncSelectWrapper>
<AsyncSelect
isSearchable
defaultOptions
value={null}
isMulti={false}
placeholder="Search for the token"
loadingMessage={() => 'Loading...'}
noOptionsMessage={() => 'Token not found'}
onChange={(token) => {
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}
<React.Fragment>
<AccountHeading>
<AccountName>
<StyledCoinLogo coinNetwork={account.network} />
<H2>Account #{parseInt(account.index, 10) + 1}</H2>
</AccountName>
<Link
target="_blank"
rel="noreferrer noopener"
href={explorerLink}
isGray
>See full transaction history
</Link>
</AccountHeading>
<AccountBalance
coin={network}
summary={props.summary}
balance={balance}
network={network.network}
fiat={props.fiat}
localStorage={props.localStorage}
/>
</AsyncSelectWrapper>
<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>
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 Lahod */}
{/* 0x58cda554935e4a1f2acbe15f8757400af275e084 T01 */}
<AddedTokensWrapper>
{tokens.map(token => (
<AddedToken
key={token.symbol}
token={token}
pending={pending}
removeToken={props.removeToken}
{/* TOOO: AsyncSelect is lagging when dropdown menu must show more than 200 items */}
{/* TODO: Input's box-shadow */}
<AsyncSelectWrapper>
<AsyncSelect
isSearchable
defaultOptions
value={null}
isMulti={false}
placeholder="Search for the token"
loadingMessage={() => 'Loading...'}
noOptionsMessage={() => 'Token not found'}
onChange={(token) => {
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}
/>
))}
</AddedTokensWrapper>
</AsyncSelectWrapper>
<AddedTokensWrapper>
{tokens.map(token => (
<AddedToken
key={token.symbol}
token={token}
pending={pending}
removeToken={props.removeToken}
/>
))}
</AddedTokensWrapper>
</React.Fragment>
</Content>
);
};