Fix owner link formatting in NFT gallery

.changelog/1109.bugfix.md

@@ -0,0 +1 @@
+Fix owner link formatting in NFT gallery

src/app/pages/TokenDashboardPage/NFTLinks.tsx

@@ -8,6 +8,7 @@ import { styled } from '@mui/material/styles'
 import { RouteUtils } from '../../utils/route-utils'
 import { SearchScope } from '../../../types/searchScope'
 import { trimLongString } from '../../utils/trimLongString'
+import { AccountLink } from '../../components/Account/AccountLink'
 
 type NFTLinkProps = {
   scope: SearchScope
@@ -61,3 +62,23 @@ export const NFTInstanceLink: FC<NFTLinkProps> = ({ scope, instance }) => {
     </StyledTypography>
   )
 }
+
+type NFTOwnerLinkProps = {
+  scope: SearchScope
+  owner: string
+}
+export const NFTOwnerLink: FC<NFTOwnerLinkProps> = ({ scope, owner }) => {
+  const { t } = useTranslation()
+
+  return (
+    <StyledTypography>
+      <Trans
+        i18nKey="nft.ownerLink"
+        t={t}
+        components={{
+          OwnerLink: <AccountLink scope={scope} address={owner} alwaysTrim={true} />,
+        }}
+      />
+    </StyledTypography>
+  )
+}

src/app/pages/TokenDashboardPage/TokenInventoryCard.tsx

@@ -11,12 +11,11 @@ import { ErrorBoundary } from '../../components/ErrorBoundary'
 import { LinkableDiv } from '../../components/PageLayout/LinkableDiv'
 import { CardEmptyState } from '../AccountDetailsPage/CardEmptyState'
 import { TokenDashboardContext } from './index'
-import { AccountLink } from '../../components/Account/AccountLink'
 import { RouteUtils } from '../../utils/route-utils'
 import { TablePagination } from '../../components/Table/TablePagination'
 import { useTokenInventory } from './hook'
 import { ImageListItemImage } from './ImageListItemImage'
-import { NFTInstanceLink } from './NFTLinks'
+import { NFTInstanceLink, NFTOwnerLink } from './NFTLinks'
 import { CardHeaderWithCounter } from 'app/components/CardHeaderWithCounter'
 import { EvmNft } from 'oasis-nexus/api'
 import { To } from 'react-router-dom'
@@ -94,9 +93,7 @@ const TokenInventoryView: FC<TokenInventoryViewProps> = ({
                   <ImageListItemImage instance={instance} to={to} />
                   <ImageListItemBar
                     title={<NFTInstanceLink scope={scope} instance={instance} />}
-                    subtitle={
-                      owner ? <AccountLink scope={scope} address={owner} alwaysTrim={true} /> : undefined
-                    }
+                    subtitle={owner ? <NFTOwnerLink scope={scope} owner={owner} /> : undefined}
                     position="below"
                   />
                 </ImageListItem>

src/locales/en/translation.json

@@ -135,6 +135,7 @@
     "noPreview": "No preview available",
     "openInFullscreen": "Open in fullscreen",
     "owner": "Owner",
+    "ownerLink": "Owner: <OwnerLink />",
     "switchBackgroundColor": "Switch between dark and light background",
     "transfers": "Transfers"
   },