Create NFTCollectionLink

src/app/pages/AccountDetailsPage/AccountNFTCollectionCard.tsx

@@ -26,7 +26,7 @@ import { TablePagination } from '../../components/Table/TablePagination'
 import { useAccountTokenInventory } from '../TokenDashboardPage/hook'
 import { EvmNft } from 'oasis-nexus/api'
 import { SearchScope } from '../../../types/searchScope'
-import { NFTInstanceLink } from '../TokenDashboardPage/NFTLinks'
+import { NFTCollectionLink, NFTInstanceLink } from '../TokenDashboardPage/NFTLinks'
 
 export const accountTokenContainerId = 'nftCollection'
 
@@ -128,7 +128,7 @@ const AccountNFTCollection: FC<AccountNFTCollectionProps> = ({
                 <ImageListItem key={instance.id}>
                   <ImageListItemImage instance={instance} to={to} />
                   <ImageListItemBar
-                    title={'TODO'}
+                    title={<NFTCollectionLink instance={instance} scope={scope} />}
                     subtitle={<NFTInstanceLink instance={instance} scope={scope} />}
                     position="below"
                   />

src/app/pages/TokenDashboardPage/NFTLinks.tsx

@@ -1,18 +1,40 @@
 import { FC } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { Link as RouterLink } from 'react-router-dom'
+import { EvmNft } from 'oasis-nexus/api'
 import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
 import { RouteUtils } from '../../utils/route-utils'
-import { EvmNft } from 'oasis-nexus/api'
-import { SearchScope } from 'types/searchScope'
+import { SearchScope } from '../../../types/searchScope'
+import { trimLongString } from '../../utils/trimLongString'
 
-type NFTInstanceLinkProps = {
+type NFTLinkProps = {
   scope: SearchScope
   instance: EvmNft
 }
 
-export const NFTInstanceLink: FC<NFTInstanceLinkProps> = ({ scope, instance }) => {
+export const NFTCollectionLink: FC<NFTLinkProps> = ({ scope, instance }) => {
+  const { t } = useTranslation()
+  const to = RouteUtils.getTokenRoute(scope, instance.token?.contract_addr)
+
+  return (
+    <Typography>
+      <Trans
+        i18nKey="nft.collectionLink"
+        t={t}
+        components={{
+          CollectionLink: (
+            <Link component={RouterLink} to={to}>
+              {instance.token?.name ?? trimLongString(instance.token?.eth_contract_addr, 5, 5)}
+            </Link>
+          ),
+        }}
+      />
+    </Typography>
+  )
+}
+
+export const NFTInstanceLink: FC<NFTLinkProps> = ({ scope, instance }) => {
   const { t } = useTranslation()
   const to = RouteUtils.getNFTInstanceRoute(scope, instance.token?.contract_addr, instance.id)
 

src/locales/en/translation.json

@@ -125,6 +125,7 @@
   },
   "nft": {
     "accountCollection": "ERC-721 Tokens",
+    "collectionLink": "Collection: <CollectionLink />",
     "instanceIdLink": "ID: <InstanceLink />",
     "instanceTokenId": "Token ID",
     "instanceTitleSuffix": "(NFT Instance)",