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:
parent
200c0ea4cf
commit
15ed36f2b5
@ -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>
|
||||
);
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user