From 20625055f1878e679fe42c7052f23a191069d89f Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Fri, 16 Jun 2023 01:29:01 +0200
Subject: [PATCH] First steps towards displaying contract info

- When displaying a contract, say so in the title
- Show link to TX that created the contract
---
 .changelog/544.feature.md                   |  1 +
 .changelog/544.internal.md                  |  1 +
 src/app/components/AddressDetails/index.tsx | 11 +++++++++++
 src/app/components/Transactions/index.tsx   |  4 ++--
 src/app/pages/AddressDetailsPage/index.tsx  |  8 +++++++-
 src/locales/en/translation.json             |  6 +++++-
 6 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 .changelog/544.feature.md
 create mode 100644 .changelog/544.internal.md

diff --git a/.changelog/544.feature.md b/.changelog/544.feature.md
new file mode 100644
index 0000000000..3aa4cf0157
--- /dev/null
+++ b/.changelog/544.feature.md
@@ -0,0 +1 @@
+At address page, recognize contracts, and use appropriate title
diff --git a/.changelog/544.internal.md b/.changelog/544.internal.md
new file mode 100644
index 0000000000..3f1c76e475
--- /dev/null
+++ b/.changelog/544.internal.md
@@ -0,0 +1 @@
+Rename many Account-related pieces of code to use Address instead
diff --git a/src/app/components/AddressDetails/index.tsx b/src/app/components/AddressDetails/index.tsx
index 41dc7e4971..77e463ca3b 100644
--- a/src/app/components/AddressDetails/index.tsx
+++ b/src/app/components/AddressDetails/index.tsx
@@ -19,6 +19,7 @@ import Link from '@mui/material/Link'
 import { DashboardLink } from '../../pages/DashboardPage/DashboardLink'
 import { getNameForTicker, Ticker } from '../../../types/ticker'
 import { TokenPriceInfo } from '../../../coin-gecko/api'
+import { TransactionLink } from '../Transactions/TransactionLink'
 
 export const StyledAvatarContainer = styled('dt')(({ theme }) => ({
   '&&': {
@@ -61,6 +62,7 @@ export const AddressDetails: FC<AddressDetailsProps> = ({
 }) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
+  const creationTxHash = addressDetails?.evm_contract?.creation_tx // TODO: use evm_hash if available
   const balance = addressDetails?.balances[0]?.balance ?? '0'
   const address = addressDetails ? addressDetails.address_eth ?? addressDetails.address : undefined
 
@@ -102,6 +104,15 @@ export const AddressDetails: FC<AddressDetailsProps> = ({
             <CopyToClipboard value={address!} />
           </dd>
 
+          {creationTxHash && (
+            <>
+              <dt>{t('common.createdAt')}</dt>
+              <dd>
+                <TransactionLink scope={addressDetails} hash={creationTxHash} />
+              </dd>
+            </>
+          )}
+
           <dt>{t('common.balance')}</dt>
           <dd>{t('common.valueInToken', { value: balance, ticker: tickerName })}</dd>
 
diff --git a/src/app/components/Transactions/index.tsx b/src/app/components/Transactions/index.tsx
index 50c17d0bb7..36cebe7b06 100644
--- a/src/app/components/Transactions/index.tsx
+++ b/src/app/components/Transactions/index.tsx
@@ -150,7 +150,7 @@ export const Transactions: FC<TransactionsProps> = ({
                       {trimLongString(transaction.sender_0_eth || transaction.sender_0)}
                     </Typography>
                   ) : (
-              <AddressLink
+                    <AddressLink
                       scope={transaction}
                       address={transaction.sender_0_eth || transaction.sender_0}
                       alwaysTrim={true}
@@ -178,7 +178,7 @@ export const Transactions: FC<TransactionsProps> = ({
                     {trimLongString(transaction.to_eth || transaction.to!)}
                   </Typography>
                 ) : (
-            <AddressLink
+                  <AddressLink
                     scope={transaction}
                     address={transaction.to_eth || transaction.to!}
                     alwaysTrim={true}
diff --git a/src/app/pages/AddressDetailsPage/index.tsx b/src/app/pages/AddressDetailsPage/index.tsx
index 9b0a97d79c..c62352f02b 100644
--- a/src/app/pages/AddressDetailsPage/index.tsx
+++ b/src/app/pages/AddressDetailsPage/index.tsx
@@ -22,6 +22,8 @@ export const AddressDetailsPage: FC = () => {
   const address = useLoaderData() as string
   const { addressDetails, isLoading, isError } = useAddressDetails(scope, address)
 
+  const isContract = !!addressDetails?.evm_contract
+
   const tokenPriceInfo = useTokenPrice(addressDetails?.ticker || Ticker.ROSE)
 
   const showErc20 = showEmptyAccountDetails || !!addressDetails?.tokenBalances[EvmTokenType.ERC20].length
@@ -33,7 +35,11 @@ export const AddressDetailsPage: FC = () => {
 
   return (
     <PageLayout>
-      <SubPageCard featured title={t('account.title')}>
+      <SubPageCard
+        featured
+        isLoadingTitle={isLoading}
+        title={isContract ? t('contract.title') : t('account.title')}
+      >
         <AddressDetailsView
           isLoading={isLoading}
           isError={isError}
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 30ed8411ce..05ed836550 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -1,6 +1,6 @@
 {
   "account": {
-      "emptyTokenList": "This account holds no {{token}} tokens.",
+    "emptyTokenList": "This account holds no {{token}} tokens.",
     "emptyTransactionList": "There are no transactions on record for this account.",
     "ERC20": "ERC-20",
     "noTokens": "This account holds no tokens",
@@ -40,6 +40,7 @@
     "block": "Block",
     "bytes": "{{value, number}}",
     "cancel": "Cancel",
+    "createdAt": "Created at",
     "data": "Data",
     "emerald": "Emerald",
     "cipher": "Cipher",
@@ -91,6 +92,9 @@
     "testnet": "Testnet",
     "valuePair": "{{value, number}}"
   },
+  "contract": {
+    "title": "Contract"
+  },
   "nodes": {
     "title": "Active nodes",
     "unknown": "Consensus layer indexer is not caught up with the latest blocks. The number of active nodes is unknown.",