Evm tokens section updates

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),
 }))
 

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<TokenPillsProps> = ({ tokens }) => {
   const { t } = useTranslation()
-
-  if (!tokens) {
+  if (!tokens?.length) {
     return <Typography sx={{ opacity: '0.5' }}>{t('account.noTokens')}</Typography>
   }
-
-  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 => (
-        <Chip
-          key={item.token_contract_addr}
-          sx={{ mr: 2 }}
-          label={`${item.balance} ${item.token_name}`}
-          variant="outlined"
-          color="tertiary"
-        />
+        <Pill key={item.token_contract_addr} pill={item} />
       ))}
+
       <ShowMoreTokensLink tokens={tokens} pills={pills} />
     </>
   )
 }
+
+type PillProps = {
+  pill: Token
+}
+
+export const Pill: FC<PillProps> = ({ pill }) => {
+  const href = `${useHref(pill.token_type === 'ERC20' ? 'tokens/erc-20' : 'tokens/erc-721')}#${
+    pill.token_contract_addr
+  }`
+
+  return (
+    <Chip
+      clickable
+      color="tertiary"
+      component={Link}
+      href={href}
+      key={pill.token_contract_addr}
+      label={`${pill.balance} ${pill.token_name}`}
+      sx={{ mr: 2 }}
+      variant="outlined"
+    />
+  )
+}

src/app/components/Account/index.tsx

@@ -68,7 +68,7 @@ export const Account: FC<AccountProps> = ({ account, roseFiatValue }) => {
           </dd>
         </>
       )}
-      <dt>{t('account.tokens')}</dt>
+      <dt>{t('account.evmTokens')}</dt>
       <dd>
         <TokenPills tokens={account.runtime_evm_balances} />
       </dd>

src/app/components/Blocks/index.tsx

@@ -103,7 +103,7 @@ export const Blocks = (props: BlocksProps) => {
           ]
         : []),
     ],
-    markAsNew: block.markAsNew,
+    highlight: block.markAsNew,
   }))
 
   return (

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',
 })<StyledTableRowProps>(
-  ({ 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<TableProps> = ({
               <SkeletonTableRows rowsNumber={rowsNumber} columnsNumber={columns.length} />
             )}
             {rows?.map(row => (
-              <StyledTableRow key={row.key} markAsNew={row.markAsNew}>
+              <StyledTableRow key={row.key} highlight={row.highlight}>
                 {row.data.map((cell, index) => (
                   <TableCell
                     key={cell.key}

src/app/components/Transactions/index.tsx

@@ -127,7 +127,7 @@ export const Transactions: FC<TransactionProps> = ({ isLoading, limit, paginatio
         key: 'value',
       },
     ],
-    markAsNew: transaction.markAsNew,
+    highlight: transaction.markAsNew,
   }))
 
   return (

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<TokensCardProps> = ({ 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<TokensCardProps> = ({ type }) => {
         key: 'name',
       },
       {
-        content: <CopyToClipboard value={item.token_contract_addr} />,
+        content: (
+          <Box id={item.token_contract_addr}>
+            <CopyToClipboard value={item.token_contract_addr} />
+          </Box>
+        ),
         key: 'hash',
       },
       {
@@ -52,6 +59,7 @@ export const TokensCard: FC<TokensCardProps> = ({ type }) => {
         key: 'ticker',
       },
     ],
+    highlight: item.token_contract_addr === locationHash,
   }))
 
   return (

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"
   },