From 80db4f9b96803dd2fffe5565bdc66c34b922cb11 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Tue, 19 Dec 2023 12:06:26 +0100
Subject: [PATCH] Fix owner link formatting in NFT gallery

---
 .changelog/1109.bugfix.md                     |  1 +
 src/app/pages/TokenDashboardPage/NFTLinks.tsx | 21 +++++++++++++++++++
 .../TokenDashboardPage/TokenInventoryCard.tsx |  7 ++-----
 src/locales/en/translation.json               |  1 +
 4 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 .changelog/1109.bugfix.md

diff --git a/.changelog/1109.bugfix.md b/.changelog/1109.bugfix.md
new file mode 100644
index 000000000..c587131f3
--- /dev/null
+++ b/.changelog/1109.bugfix.md
@@ -0,0 +1 @@
+Fix owner link formatting in NFT gallery
diff --git a/src/app/pages/TokenDashboardPage/NFTLinks.tsx b/src/app/pages/TokenDashboardPage/NFTLinks.tsx
index 6b867828f..e70dd170d 100644
--- a/src/app/pages/TokenDashboardPage/NFTLinks.tsx
+++ b/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>
+  )
+}
diff --git a/src/app/pages/TokenDashboardPage/TokenInventoryCard.tsx b/src/app/pages/TokenDashboardPage/TokenInventoryCard.tsx
index a5adfff07..eac26aeb1 100644
--- a/src/app/pages/TokenDashboardPage/TokenInventoryCard.tsx
+++ b/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>
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 01542ea1a..bd8ebd062 100644
--- a/src/locales/en/translation.json
+++ b/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"
   },