diff --git a/src/app/components/Account/ShowMoreTokensLink.tsx b/src/app/components/Account/ShowMoreTokensLink.tsx index eabf06258..469899033 100644 --- a/src/app/components/Account/ShowMoreTokensLink.tsx +++ b/src/app/components/Account/ShowMoreTokensLink.tsx @@ -9,6 +9,7 @@ export const StyledLink = styled(RouterLink)(({ theme }) => ({ color: COLORS.brandDark, fontWeight: 600, textDecoration: 'none', + whiteSpace: 'nowrap', marginLeft: theme.spacing(4), })) diff --git a/src/app/components/Account/TokenPills.tsx b/src/app/components/Account/TokenPills.tsx index 40baee293..8b040b6a7 100644 --- a/src/app/components/Account/TokenPills.tsx +++ b/src/app/components/Account/TokenPills.tsx @@ -1,5 +1,7 @@ import { FC } from 'react' import { useTranslation } from 'react-i18next' +import { useHref } from 'react-router-dom' +import Link from '@mui/material/Link' import Chip from '@mui/material/Chip' import Typography from '@mui/material/Typography' import { ShowMoreTokensLink } from './ShowMoreTokensLink' @@ -9,38 +11,43 @@ type TokenPillsProps = { tokens: Token[] } -const prioritizedTokensSymbols = ['ROSE', 'WROSE', 'ETH'] - export const TokenPills: FC = ({ tokens }) => { const { t } = useTranslation() - - if (!tokens) { + if (!tokens?.length) { return {t('account.noTokens')} } - - const prioritizedPills = tokens?.filter( - item => item.token_symbol && prioritizedTokensSymbols.includes(item.token_symbol), - ) - const numberOfMissingPills = prioritizedTokensSymbols.length - prioritizedPills.length - const additionalPills = numberOfMissingPills - ? tokens - .filter(item => !item.token_symbol || !prioritizedTokensSymbols.includes(item.token_symbol)) - .slice(0, numberOfMissingPills) - : [] - const pills = [...prioritizedPills, ...additionalPills] + const pills = tokens.slice(0, 3) return ( <> {pills.map(item => ( - + ))} + ) } + +type PillProps = { + pill: Token +} + +export const Pill: FC = ({ pill }) => { + const href = `${useHref(pill.token_type === 'ERC20' ? 'tokens/erc-20' : 'tokens/erc-721')}#${ + pill.token_contract_addr + }` + + return ( + + ) +} diff --git a/src/app/components/Account/index.tsx b/src/app/components/Account/index.tsx index 28375a0d9..4b1cb99e2 100644 --- a/src/app/components/Account/index.tsx +++ b/src/app/components/Account/index.tsx @@ -68,7 +68,7 @@ export const Account: FC = ({ account, roseFiatValue }) => { )} -
{t('account.tokens')}
+
{t('account.evmTokens')}
diff --git a/src/app/components/Blocks/index.tsx b/src/app/components/Blocks/index.tsx index cd9e5d945..5ae5ba576 100644 --- a/src/app/components/Blocks/index.tsx +++ b/src/app/components/Blocks/index.tsx @@ -103,7 +103,7 @@ export const Blocks = (props: BlocksProps) => { ] : []), ], - markAsNew: block.markAsNew, + highlight: block.markAsNew, })) return ( diff --git a/src/app/components/Table/index.tsx b/src/app/components/Table/index.tsx index dd02a9167..01600be22 100644 --- a/src/app/components/Table/index.tsx +++ b/src/app/components/Table/index.tsx @@ -40,14 +40,14 @@ const backgroundColorAnimation = keyframes` const backgroundColorAnimationDuration = `${Math.max(500, REFETCH_INTERVAL - 2000)}ms` type StyledTableRowProps = MuiTableRowProps & { - markAsNew?: boolean + highlight?: boolean } const StyledTableRow = styled(TableRow, { - shouldForwardProp: prop => prop !== 'markAsNew', + shouldForwardProp: prop => prop !== 'highlight', })( - ({ markAsNew }) => css` - ${markAsNew && + ({ highlight }) => css` + ${highlight && css` animation-name: ${backgroundColorAnimation}; animation-duration: ${backgroundColorAnimationDuration}; @@ -71,7 +71,7 @@ type TableCellProps = { export type TableRowProps = { key: string data: TableCellProps[] - markAsNew?: boolean + highlight?: boolean } export type TableColProps = { @@ -137,7 +137,7 @@ export const Table: FC = ({ )} {rows?.map(row => ( - + {row.data.map((cell, index) => ( = ({ isLoading, limit, paginatio key: 'value', }, ], - markAsNew: transaction.markAsNew, + highlight: transaction.markAsNew, })) return ( diff --git a/src/app/pages/AccountDetailsPage/TokensCard.tsx b/src/app/pages/AccountDetailsPage/TokensCard.tsx index ab2d54cae..105ae504e 100644 --- a/src/app/pages/AccountDetailsPage/TokensCard.tsx +++ b/src/app/pages/AccountDetailsPage/TokensCard.tsx @@ -1,6 +1,8 @@ import { FC } from 'react' import { useTranslation } from 'react-i18next' import { useLoaderData } from 'react-router-dom' +import { useLocation } from 'react-router-dom' +import Box from '@mui/material/Box' import Card from '@mui/material/Card' import CardHeader from '@mui/material/CardHeader' import CardContent from '@mui/material/CardContent' @@ -18,6 +20,7 @@ type TokensCardProps = { export const TokensCard: FC = ({ type }) => { const { t } = useTranslation() const address = useLoaderData() as string + const locationHash = useLocation().hash.replace('#', '') const tokenLabel = t(`account.${type}`) const tokenListLabel = t('account.tokensListTitle', { token: tokenLabel }) const tableColumns = [ @@ -38,7 +41,11 @@ export const TokensCard: FC = ({ type }) => { key: 'name', }, { - content: , + content: ( + + + + ), key: 'hash', }, { @@ -52,6 +59,7 @@ export const TokensCard: FC = ({ type }) => { key: 'ticker', }, ], + highlight: item.token_contract_addr === locationHash, })) return ( diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index c9c693526..3f54cbe79 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -6,7 +6,7 @@ "noTokens": "This account holds no tokens", "showMore": "+ {{counter}} more", "title": "Account", - "tokens": "Tokens", + "evmTokens": "EVM tokens", "tokensListTitle": "{{token}} Tokens", "transactionsListTitle": "Account Transactions" },