[W.I.P.] Display contract bytecode

.changelog/616.feature.md

@@ -0,0 +1 @@
+For contracts, display token transfers and bytecode

src/app/components/ScrollingDataDisplay/index.tsx

@@ -11,7 +11,7 @@ export const ScrollingDataDisplay: FC<{ data: string; fontWeight?: number }> = (
     <Box
       sx={{
         display: 'flex',
-        padding: '10px 0px 0px 15px',
+        padding: '10px 0px 0px 0px',
         flexDirection: 'column',
         alignItems: 'flex-start',
         gap: '10px',

src/app/pages/AccountDetailsPage/ContractCodeCard.tsx

@@ -0,0 +1,93 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import { ScrollingDiv } from '../../components/PageLayout/ScrollingDiv'
+import { useAccount } from './hook'
+import { useRequiredScopeParam } from '../../hooks/useScopeParam'
+import { useLoaderData } from 'react-router-dom'
+import { CardEmptyState } from './CardEmptyState'
+import Typography from '@mui/material/Typography'
+import { ScrollingDataDisplay } from '../../components/ScrollingDataDisplay'
+import Box from '@mui/material/Box'
+import { CopyToClipboard } from '../../components/CopyToClipboard'
+import { useScreenSize } from '../../hooks/useScreensize'
+
+export const contractCodeContainerId = 'code'
+
+export const ContractCodeCard: FC = () => {
+  const { t } = useTranslation()
+  const scope = useRequiredScopeParam()
+  const address = useLoaderData() as string
+  const { isMobile } = useScreenSize()
+
+  const { isFetched, account } = useAccount(scope, address)
+  const contract = account?.evm_contract
+  const hasCreation = !!contract?.creation_bytecode
+  const hasRuntime = !!contract?.runtime_bytecode
+  const noCode = isFetched && !hasCreation && !hasRuntime
+  return (
+    <Card>
+      <ScrollingDiv id={contractCodeContainerId}>
+        {noCode && <CardEmptyState label={t('contract.noCode')} />}
+        {(hasCreation || hasRuntime) && (
+          <CardContent>
+            {hasCreation && (
+              <>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    mb: '10px',
+                  }}
+                >
+                  <Typography variant="h4" component="h4">
+                    {t('contract.creationByteCode')}
+                  </Typography>
+                  <CopyToClipboard
+                    value={contract?.creation_bytecode!}
+                    label={
+                      isMobile
+                        ? t('common.copy')
+                        : t('contract.copyButton', { subject: t('contract.creationByteCode') })
+                    }
+                  />
+                </Box>
+
+                <ScrollingDataDisplay data={contract.creation_bytecode!} />
+              </>
+            )}
+            {hasRuntime && (
+              <>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    mt: '10px',
+                    pt: '20px',
+                    mb: '10px',
+                  }}
+                >
+                  <Typography variant="h4" component="h4">
+                    {t('contract.runtimeByteCode')}
+                  </Typography>
+                  <CopyToClipboard
+                    value={contract?.runtime_bytecode!}
+                    label={
+                      isMobile
+                        ? t('common.copy')
+                        : t('contract.copyButton', { subject: t('contract.runtimeByteCode') })
+                    }
+                  />
+                </Box>
+                <ScrollingDataDisplay data={contract.runtime_bytecode!} />
+              </>
+            )}
+          </CardContent>
+        )}
+      </ScrollingDiv>
+    </Card>
+  )
+}

src/app/pages/AccountDetailsPage/hook.ts

@@ -17,9 +17,9 @@ export const useAccount = (scope: SearchScope, address: string) => {
   }
   const query = useGetRuntimeAccountsAddress(network, layer, address!)
   const account = query.data?.data
-  const isLoading = query.isLoading
-  const isError = query.isError
-  return { account, isLoading, isError }
+  const { isLoading, isError, isFetched } = query
+
+  return { account, isLoading, isError, isFetched }
 }
 
 export const useAccountTransactions = (scope: SearchScope, address: string) => {

src/app/pages/AccountDetailsPage/index.tsx

@@ -15,6 +15,7 @@ import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { showEmptyAccountDetails } from '../../../config'
 import { CardEmptyState } from './CardEmptyState'
 import { accountTokenTransfersContainerId } from './AccountTokenTransfersCard'
+import { contractCodeContainerId } from './ContractCodeCard'
 
 export const AccountDetailsPage: FC = () => {
   const { t } = useTranslation()
@@ -33,6 +34,8 @@ export const AccountDetailsPage: FC = () => {
   const erc20Link = useHref(`tokens/erc-20#${accountTokenContainerId}`)
   const showTxs = showEmptyAccountDetails || showErc20 || !!account?.stats.num_txns
   const txLink = useHref('')
+  const showCode = isContract
+  const codeLink = useHref(`code#${contractCodeContainerId}`)
 
   const showDetails = showTxs || showErc20
 
@@ -56,6 +59,7 @@ export const AccountDetailsPage: FC = () => {
             { label: t('common.transactions'), to: txLink, visible: showTxs },
             { label: t('tokens.transfers'), to: tokenTransfersLink, visible: showTokenTransfers },
             { label: t('tokens.title'), to: erc20Link, visible: showErc20 },
+            { label: t('contract.code'), to: codeLink, visible: showCode },
           ]}
         />
       )}

src/locales/en/translation.json

@@ -38,6 +38,7 @@
     "block": "Block",
     "bytes": "{{value, number}}",
     "cancel": "Cancel",
+    "copy": "Copy",
     "createdAt": "Created at",
     "data": "Data",
     "emerald": "Emerald",
@@ -93,6 +94,12 @@
     "valuePair": "{{value, number}}"
   },
   "contract": {
+    "code": "Code",
+    "copyButton": "Copy {{subject}}",
+    "creationByteCode": "Creation ByteCode",
+    "noCode": "There is no bytecode on record for this account. (Are you sure this is a contract?)",
+    "title": "Contract",
+    "runtimeByteCode": "Runtime ByteCode",
     "title": "Contract",
     "verification": {
       "title": "Verification",

src/routes.tsx

@@ -21,6 +21,7 @@ import { ThemeByNetwork, withDefaultTheme } from './app/components/ThemeByNetwor
 import { useRequiredScopeParam } from './app/hooks/useScopeParam'
 import { TokensPage } from './app/pages/TokensPage'
 import { AccountTokenTransfersCard } from './app/pages/AccountDetailsPage/AccountTokenTransfersCard'
+import { ContractCodeCard } from './app/pages/AccountDetailsPage/ContractCodeCard'
 
 const NetworkSpecificPart = () => (
   <ThemeByNetwork network={useRequiredScopeParam().network}>
@@ -92,6 +93,11 @@ export const routes: RouteObject[] = [
                 element: <AccountTokensCard type="ERC20" />,
                 loader: addressParamLoader,
               },
+              {
+                path: 'code',
+                element: <ContractCodeCard />,
+                loader: addressParamLoader,
+              },
             ],
           },
           {