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

@@ -0,0 +1 @@
+At address page, recognize contracts, and use appropriate title

.changelog/544.internal.md

@@ -0,0 +1 @@
+Rename many Account-related pieces of code to use Address instead

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>
 

src/app/pages/AddressDetailsPage/index.tsx

@@ -14,6 +14,7 @@ import { useAddressDetails } from './hook'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { showEmptyAccountDetails } from '../../../config'
 import { CardEmptyState } from './CardEmptyState'
+import Skeleton from '@mui/material/Skeleton'
 
 export const AddressDetailsPage: FC = () => {
   const { t } = useTranslation()
@@ -22,6 +23,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
@@ -31,9 +34,17 @@ export const AddressDetailsPage: FC = () => {
 
   const showDetails = showTxs || showErc20
 
+  const title = isLoading ? (
+    <Skeleton variant="text" />
+  ) : isContract ? (
+    t('contract.title')
+  ) : (
+    t('account.title')
+  )
+
   return (
     <PageLayout>
-      <SubPageCard featured title={t('account.title')}>
+      <SubPageCard featured title={title as string}>
         <AddressDetailsView
           isLoading={isLoading}
           isError={isError}

src/locales/en/translation.json

@@ -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.",