From b27ec141f66de79733cbceba68867c3e7c3127df Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Thu, 29 Jun 2023 16:58:52 +0200
Subject: [PATCH] Properly display contract creator info

---
 .changelog/623.2.feature.md                   |  1 +
 .../Account/ContractCreatorInfo.tsx           | 51 +++++++++++++++++++
 src/app/components/Account/index.tsx          | 16 +++---
 .../TokenDashboardPage/TokenDetailsCard.tsx   |  5 +-
 src/locales/en/translation.json               |  2 +-
 5 files changed, 67 insertions(+), 8 deletions(-)
 create mode 100644 .changelog/623.2.feature.md
 create mode 100644 src/app/components/Account/ContractCreatorInfo.tsx

diff --git a/.changelog/623.2.feature.md b/.changelog/623.2.feature.md
new file mode 100644
index 0000000000..529e560744
--- /dev/null
+++ b/.changelog/623.2.feature.md
@@ -0,0 +1 @@
+Properly display creator info for contracts.
diff --git a/src/app/components/Account/ContractCreatorInfo.tsx b/src/app/components/Account/ContractCreatorInfo.tsx
new file mode 100644
index 0000000000..a29ff7f11e
--- /dev/null
+++ b/src/app/components/Account/ContractCreatorInfo.tsx
@@ -0,0 +1,51 @@
+import { FC } from 'react'
+import { SearchScope } from '../../../types/searchScope'
+import { Trans, useTranslation } from 'react-i18next'
+import { TransactionLink } from '../Transactions/TransactionLink'
+import { Layer, useGetRuntimeTransactionsTxHash } from '../../../oasis-indexer/api'
+import { AppErrors } from '../../../types/errors'
+import { AccountLink } from './AccountLink'
+import Box from '@mui/material/Box'
+
+const TxSender: FC<{ scope: SearchScope; txHash: string }> = ({ scope, txHash }) => {
+  const { t } = useTranslation()
+  if (scope.layer === Layer.consensus) {
+    throw AppErrors.UnsupportedLayer
+  }
+  const query = useGetRuntimeTransactionsTxHash(scope.network, scope.layer, txHash)
+  const tx = query.data?.data.transactions[0]
+  const senderAddress = tx?.sender_0_eth || tx?.sender_0
+  return senderAddress ? (
+    <AccountLink scope={scope} address={senderAddress} alwaysTrim />
+  ) : (
+    t('common.missing')
+  )
+}
+
+export const ContractCreatorInfo: FC<{ scope: SearchScope; address: string | undefined }> = ({
+  scope,
+  address,
+}) => {
+  const { t } = useTranslation()
+  return address === undefined ? (
+    t('common.missing')
+  ) : (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 3,
+      }}
+    >
+      <TxSender scope={scope} txHash={address} />
+      &nbsp;
+      <Trans
+        t={t}
+        i18nKey={'contract.createdAt'}
+        components={{
+          TransactionLink: <TransactionLink scope={scope} hash={address} alwaysTrim />,
+        }}
+      />
+    </Box>
+  )
+}
diff --git a/src/app/components/Account/index.tsx b/src/app/components/Account/index.tsx
index 678b0b3238..9a8c77efd6 100644
--- a/src/app/components/Account/index.tsx
+++ b/src/app/components/Account/index.tsx
@@ -19,7 +19,7 @@ import Link from '@mui/material/Link'
 import { DashboardLink } from '../../pages/ParatimeDashboardPage/DashboardLink'
 import { getNameForTicker, Ticker } from '../../../types/ticker'
 import { TokenPriceInfo } from '../../../coin-gecko/api'
-import { TransactionLink } from '../Transactions/TransactionLink'
+import { ContractCreatorInfo } from './ContractCreatorInfo'
 import { ContractVerificationIcon } from '../ContractVerificationIcon'
 import { TokenLink } from '../Tokens/TokenLink'
 
@@ -62,7 +62,6 @@ export const Account: FC<AccountProps> = ({ account, token, isLoading, tokenPric
   const { isMobile } = useScreenSize()
   const balance = account?.balances[0]?.balance
   const address = account ? account.address_eth ?? account.address : undefined
-  const creationTxHash = account?.evm_contract?.eth_creation_tx ?? account?.evm_contract?.creation_tx
 
   const transactionsLabel = account ? account.stats.num_txns.toLocaleString() : ''
   const transactionsAnchor = account
@@ -80,6 +79,7 @@ export const Account: FC<AccountProps> = ({ account, token, isLoading, tokenPric
     isFree: isTokenFree,
     hasUsedCoinGecko,
   } = tokenPriceInfo
+  const contract = account?.evm_contract
 
   return (
     <>
@@ -115,7 +115,7 @@ export const Account: FC<AccountProps> = ({ account, token, isLoading, tokenPric
             </>
           )}
 
-          {account?.evm_contract && (
+          {contract && (
             <>
               <dt>{t('contract.verification.title')}</dt>
               <dd>
@@ -126,11 +126,15 @@ export const Account: FC<AccountProps> = ({ account, token, isLoading, tokenPric
               </dd>
             </>
           )}
-          {creationTxHash && (
+
+          {contract && (
             <>
-              <dt>{t('common.createdAt')}</dt>
+              <dt>{t('contract.creator')}</dt>
               <dd>
-                <TransactionLink scope={account} hash={creationTxHash} />
+                <ContractCreatorInfo
+                  scope={account}
+                  address={contract.eth_creation_tx || contract.creation_tx}
+                />
               </dd>
             </>
           )}
diff --git a/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx b/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx
index 1359b2ebd9..7484a5db23 100644
--- a/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx
+++ b/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx
@@ -13,6 +13,7 @@ import { CopyToClipboard } from '../../components/CopyToClipboard'
 import { ContractVerificationIcon } from '../../components/ContractVerificationIcon'
 import { getTokenTypeName } from './TokenTypeCard'
 import { getNameForTicker, Ticker } from '../../../types/ticker'
+import { ContractCreatorInfo } from '../../components/Account/ContractCreatorInfo'
 
 export const TokenDetailsCard: FC = () => {
   const { t } = useTranslation()
@@ -57,7 +58,9 @@ export const TokenDetailsCard: FC = () => {
           <dd>{getTokenTypeName(t, token.type)} </dd>
 
           <dt>{t('contract.creator')}</dt>
-          <dd> {contract.creation_tx ? contract.creation_tx : t('common.missing')}</dd>
+          <dd>
+            <ContractCreatorInfo scope={account} address={contract.eth_creation_tx || contract.creation_tx} />
+          </dd>
 
           <dt>{t('common.balance')} </dt>
           <dd>
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 0f29483a87..1c88a273cf 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -38,7 +38,6 @@
     "bytes": "{{value, number}}",
     "cancel": "Cancel",
     "copy": "Copy",
-    "createdAt": "Created at",
     "data": "Data",
     "emerald": "Emerald",
     "cipher": "Cipher",
@@ -98,6 +97,7 @@
     "copyButton": "Copy {{subject}}",
     "creationByteCode": "Creation ByteCode",
     "creator": "Creator",
+    "createdAt": "at <TransactionLink>",
     "noCode": "There is no bytecode on record for this account. (Are you sure this is a contract?)",
     "title": "Contract",
     "runtimeByteCode": "Runtime ByteCode",