Displaying contract code in hex, not base64

.changelog/631.trivial.md

@@ -0,0 +1 @@
+Displaying contract code in hex, not base64

src/app/pages/AccountDetailsPage/ContractCodeCard.tsx

@@ -12,16 +12,18 @@ import { ScrollableDataDisplay } from '../../components/ScrollableDataDisplay'
 import Box from '@mui/material/Box'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
 import { useScreenSize } from '../../hooks/useScreensize'
+import { base64ToHex } from '../../utils/helpers'
 
 export const contractCodeContainerId = 'code'
 
-const CodeDisplay: FC<{ code: string | undefined; label: string; extraTopPadding?: boolean }> = ({
-  code,
+const CodeDisplay: FC<{ rawData: string | undefined; label: string; extraTopPadding?: boolean }> = ({
+  rawData,
   label,
   extraTopPadding,
 }) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
+  const code = rawData === undefined ? undefined : base64ToHex(rawData)
   return code === undefined ? null : (
     <>
       <Box
@@ -61,9 +63,9 @@ export const ContractCodeCard: FC = () => {
         {noCode && <CardEmptyState label={t('contract.noCode')} />}
         {contract && (contract.creation_bytecode || contract.runtime_bytecode) && (
           <CardContent>
-            <CodeDisplay code={contract.creation_bytecode} label={t('contract.creationByteCode')} />
+            <CodeDisplay rawData={contract.creation_bytecode} label={t('contract.creationByteCode')} />
             <CodeDisplay
-              code={contract.runtime_bytecode}
+              rawData={contract.runtime_bytecode}
               label={t('contract.runtimeByteCode')}
               extraTopPadding={!!contract.creation_bytecode}
             />

src/app/utils/__tests__/getEthAccountAddress.test.ts

@@ -1,11 +1,11 @@
-import { getEthAccountAddress } from '../helpers'
+import { getEthAccountAddressFromPreimage } from '../helpers'
 import { suggestedParsedAccount } from '../test-fixtures'
 
 describe('getEthAccountAddress', () => {
   // TODO: enable when jest fixes "TypeError: Expected Uint8Array"
   // https://github.com/facebook/jest/issues/4422
   it.skip('should convert preimage to evm addresses', () => {
-    expect(getEthAccountAddress(suggestedParsedAccount.address_preimage)).toEqual(
+    expect(getEthAccountAddressFromPreimage(suggestedParsedAccount.address_preimage)).toEqual(
       suggestedParsedAccount.address_eth,
     )
   })

src/app/utils/helpers.ts

@@ -48,14 +48,23 @@ export const isValidTxEthHash = (hash: string): boolean => /^0x[0-9a-fA-F]{64}$/
 
 export const isValidTxHash = (hash: string) => isValidTxOasisHash(hash) || isValidTxEthHash(hash)
 
-export function getEthAccountAddress(preimage: AddressPreimage | undefined): string | undefined {
+// Convert data from base64 to hex
+export const base64ToHex = (base64Data: string): string =>
+  `0x${Buffer.from(base64Data, 'base64').toString('hex')}`
+
+// Convert address from base64 to hex, add prefix, and convert to checksum address
+export function getEthAccountAddressFromBase64(base64Address: string): string {
+  return toChecksumAddress(base64ToHex(base64Address))
+}
+
+export function getEthAccountAddressFromPreimage(preimage: AddressPreimage | undefined): string | undefined {
   if (preimage?.context !== 'oasis-runtime-sdk/address: secp256k1eth' || !preimage.address_data) {
     // We can only determine the ETH address if there was a preimage,
     // and the generation context was secp256k1eth
     return undefined
   }
   // We need to convert from base64 to hex, add the prefix, and convert to checksum address
-  return toChecksumAddress(`0x${Buffer.from(preimage.address_data, 'base64').toString('hex')}`)
+  return getEthAccountAddressFromBase64(preimage.address_data)
 }
 
 export function uniq<T>(input: T[] | undefined): T[] {

src/oasis-indexer/api.ts

@@ -6,7 +6,7 @@ import * as generated from './generated/api'
 import BigNumber from 'bignumber.js'
 import { UseQueryOptions } from '@tanstack/react-query'
 import { Layer, RuntimeAccount } from './generated/api'
-import { getEthAccountAddress } from '../app/utils/helpers'
+import { getEthAccountAddressFromPreimage } from '../app/utils/helpers'
 import { Network } from '../types/network'
 import { SearchScope } from '../types/searchScope'
 import { getTickerForNetwork, NativeTicker } from '../types/ticker'
@@ -274,7 +274,7 @@ export const useGetRuntimeAccountsAddress: typeof generated.useGetRuntimeAccount
           if (status !== 200) return data
           return groupAccountTokenBalances({
             ...data,
-            address_eth: getEthAccountAddress(data.address_preimage),
+            address_eth: getEthAccountAddressFromPreimage(data.address_preimage),
             evm_contract: data.evm_contract && {
               ...data.evm_contract,
               eth_creation_tx: data.evm_contract.eth_creation_tx