Skip to content

Commit

Permalink
Added token info popover to TokenCard and TokensTab
Browse files Browse the repository at this point in the history
  • Loading branch information
ArmandoGraterol committed Dec 21, 2021
1 parent fdd5892 commit fe0ff3c
Showing 4 changed files with 51 additions and 40 deletions.
1 change: 1 addition & 0 deletions src/modules/dashboard/components/TokenCard/TokenCard.css
Original file line number Diff line number Diff line change
@@ -11,6 +11,7 @@
display: flex;
align-items: center;
height: headerFooterHeights;
cursor: pointer;
}

.iconContainer {
40 changes: 23 additions & 17 deletions src/modules/dashboard/components/TokenCard/TokenCard.tsx
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ import Card from '~core/Card';
import EthUsd from '~core/EthUsd';
import Numeral from '~core/Numeral';
import CopyableAddress from '~core/CopyableAddress';
import InfoPopover from '~core/InfoPopover';
import TokenIcon from '~dashboard/HookedTokenIcon';
import { Address } from '~types/index';
import { ColonyTokens, UserTokens } from '~data/index';
@@ -42,24 +43,29 @@ const TokenCard = ({ domainId, nativeTokenAddress, token }: Props) => {

return (
<Card key={token.address} className={styles.main}>
<div className={styles.cardHeading}>
<TokenIcon token={token} name={token.name || undefined} size="xs" />
<div className={styles.tokenSymbol}>
{token.symbol ? (
token.symbol
) : (
<>
<FormattedMessage {...MSG.unknownToken} />
<CopyableAddress>{token.address}</CopyableAddress>
</>
)}
{token.address === nativeTokenAddress && (
<span className={styles.nativeTokenText}>
<FormattedMessage {...MSG.nativeToken} />
</span>
)}
<InfoPopover
token={token}
isTokenNative={token.address === nativeTokenAddress}
>
<div className={styles.cardHeading}>
<TokenIcon token={token} name={token.name || undefined} size="xs" />
<div className={styles.tokenSymbol}>
{token.symbol ? (
token.symbol
) : (
<>
<FormattedMessage {...MSG.unknownToken} />
<CopyableAddress>{token.address}</CopyableAddress>
</>
)}
{token.address === nativeTokenAddress && (
<span className={styles.nativeTokenText}>
<FormattedMessage {...MSG.nativeToken} />
</span>
)}
</div>
</div>
</div>
</InfoPopover>
<div
className={
tokenBalanceIsNotPositive(token, parseInt(domainId as string, 10))
Original file line number Diff line number Diff line change
@@ -54,6 +54,7 @@
padding: 16px;
min-height: 60px;
width: 100%;
cursor: pointer;
}

.tokenSymbol {
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import { BigNumber } from 'ethers/utils';

import { SMALL_TOKEN_AMOUNT_FORMAT } from '~constants';
import Icon from '~core/Icon';
import InfoPopover from '~core/InfoPopover';
import TokenIcon from '~dashboard/HookedTokenIcon';

import { UserToken } from '~data/generated';
@@ -119,30 +120,32 @@ const TokensTab = ({

return (
<>
<div className={styles.totalTokensContainer}>
<div
className={
totalTokensWidth <= widthLimit
? styles.tokenSymbol
: styles.tokenSymbolSmall
}
>
<TokenIcon
token={token || {}}
size={totalTokensWidth <= widthLimit ? 'xs' : 'xxs'}
/>
<InfoPopover token={token} isTokenNative>
<div className={styles.totalTokensContainer}>
<div
className={
totalTokensWidth <= widthLimit
? styles.tokenSymbol
: styles.tokenSymbolSmall
}
>
<TokenIcon
token={token || {}}
size={totalTokensWidth <= widthLimit ? 'xs' : 'xxs'}
/>
</div>
<p
ref={targetRef}
className={
totalTokensWidth <= widthLimit
? styles.totalTokens
: styles.totalTokensSmall
}
>
{formattedTotalAmount} <span>{token?.symbol}</span>
</p>
</div>
<p
ref={targetRef}
className={
totalTokensWidth <= widthLimit
? styles.totalTokens
: styles.totalTokensSmall
}
>
{formattedTotalAmount} <span>{token?.symbol}</span>
</p>
</div>
</InfoPopover>
<div className={styles.tokensDetailsContainer}>
<ul>
<li>

0 comments on commit fe0ff3c

Please sign in to comment.