Rename some account-related components to avoid confusion

Because some of them are just related to addresses,
which can belong to either accounts or contracts,
which we want to better distinguish now.

src/app/components/Account/AccountLink.tsx → src/app/components/AddressDetails/AddressLink.tsx

@@ -8,14 +8,14 @@ import Typography from '@mui/material/Typography'
 import { COLORS } from '../../../styles/theme/colors'
 import { SearchScope } from '../../../types/searchScope'
 
-export const AccountLink: FC<{
+export const AddressLink: FC<{
   scope: SearchScope
   address: string
   alwaysTrim?: boolean
   plain?: boolean
 }> = ({ scope, address, alwaysTrim, plain }) => {
   const { isMobile } = useScreenSize()
-  const to = RouteUtils.getAccountRoute(scope, address)
+  const to = RouteUtils.getAddressRoute(scope, address)
   return (
     <Typography
       variant="mono"

src/app/components/Account/ShowMoreTokensLink.tsx → src/app/components/AddressDetails/ShowMoreTokensLink.tsx

@@ -5,7 +5,7 @@ import { styled } from '@mui/material/styles'
 import { COLORS } from '../../../styles/theme/colors'
 import { EvmTokenType, RuntimeAccount, type Token } from '../../../oasis-indexer/api'
 import { RouteUtils } from '../../utils/route-utils'
-import { accountTokenContainerId } from '../../pages/AccountDetailsPage/TokensCard'
+import { accountTokenContainerId } from '../../pages/AddressDetailsPage/AddressTokensCard'
 
 export const StyledLink = styled(RouterLink)(({ theme }) => ({
   color: COLORS.brandDark,

src/app/components/Account/index.tsx → src/app/components/AddressDetails/index.tsx

@@ -12,9 +12,9 @@ import { CoinGeckoReferral } from '../../components/CoinGeckoReferral'
 import { TextSkeleton } from '../../components/Skeleton'
 import { type RuntimeAccount } from '../../../oasis-indexer/api'
 import { TokenPills } from './TokenPills'
-import { AccountLink } from './AccountLink'
+import { AddressLink } from './AddressLink'
 import { RouteUtils } from '../../utils/route-utils'
-import { accountTransactionsContainerId } from '../../pages/AccountDetailsPage/TransactionsCard'
+import { accountTransactionsContainerId } from '../../pages/AddressDetailsPage/AddressTransactionsCard'
 import Link from '@mui/material/Link'
 import { DashboardLink } from '../../pages/DashboardPage/DashboardLink'
 import { getNameForTicker, Ticker } from '../../../types/ticker'
@@ -46,28 +46,33 @@ export const FiatMoneyAmountBox = styled(Box)(() => ({
   flex: 1,
 }))
 
-type AccountProps = {
-  account?: RuntimeAccount
+type AddressDetailsProps = {
+  addressDetails?: RuntimeAccount
   isLoading: boolean
   tokenPriceInfo: TokenPriceInfo
   showLayer?: boolean
 }
 
-export const Account: FC<AccountProps> = ({ account, isLoading, tokenPriceInfo, showLayer }) => {
+export const AddressDetails: FC<AddressDetailsProps> = ({
+  addressDetails,
+  isLoading,
+  tokenPriceInfo,
+  showLayer,
+}) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
-  const balance = account?.balances[0]?.balance ?? '0'
-  const address = account ? account.address_eth ?? account.address : undefined
+  const balance = addressDetails?.balances[0]?.balance ?? '0'
+  const address = addressDetails ? addressDetails.address_eth ?? addressDetails.address : undefined
 
-  const transactionsLabel = account ? account.stats.num_txns.toLocaleString() : ''
-  const transactionsAnchor = account
-    ? `${RouteUtils.getAccountRoute(
-        account,
-        account.address_eth ?? account.address,
+  const transactionsLabel = addressDetails ? addressDetails.stats.num_txns.toLocaleString() : ''
+  const transactionsAnchor = addressDetails
+    ? `${RouteUtils.getAddressRoute(
+        addressDetails,
+        addressDetails.address_eth ?? addressDetails.address,
       )}#${accountTransactionsContainerId}`
     : undefined
 
-  const token = account?.ticker || Ticker.ROSE
+  const token = addressDetails?.ticker || Ticker.ROSE
   const tickerName = getNameForTicker(t, token)
   const {
     isLoading: isPriceLoading,
@@ -79,21 +84,21 @@ export const Account: FC<AccountProps> = ({ account, isLoading, tokenPriceInfo,
   return (
     <>
       {isLoading && <TextSkeleton numberOfRows={8} />}
-      {account && (
+      {addressDetails && (
         <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
           {showLayer && (
             <>
               <dt>{t('common.paratime')}</dt>
               <dd>
-                <DashboardLink scope={account} />
+                <DashboardLink scope={addressDetails} />
               </dd>
             </>
           )}
           <StyledAvatarContainer>
-            <JazzIcon diameter={isMobile ? 30 : 40} seed={addressToNumber(account.address)} />
+            <JazzIcon diameter={isMobile ? 30 : 40} seed={addressToNumber(addressDetails.address)} />
           </StyledAvatarContainer>
           <dd>
-            <AccountLink scope={account} address={address!} />
+            <AddressLink scope={addressDetails} address={address!} />
             <CopyToClipboard value={address!} />
           </dd>
 
@@ -102,7 +107,7 @@ export const Account: FC<AccountProps> = ({ account, isLoading, tokenPriceInfo,
 
           <dt>{t('account.evmTokens')}</dt>
           <dd>
-            <TokenPills account={account} tokens={account.evm_balances} />
+            <TokenPills account={addressDetails} tokens={addressDetails.evm_balances} />
           </dd>
 
           {!isPriceLoading && !isTokenFree && tokenFiatValue !== undefined && balance && (
@@ -126,7 +131,7 @@ export const Account: FC<AccountProps> = ({ account, isLoading, tokenPriceInfo,
 
           <dt>{t('common.transactions')}</dt>
           <dd>
-            {account.stats.num_txns ? (
+            {addressDetails.stats.num_txns ? (
               <Link component={RouterLink} to={transactionsAnchor!}>
                 {transactionsLabel}
               </Link>
@@ -136,10 +141,12 @@ export const Account: FC<AccountProps> = ({ account, isLoading, tokenPriceInfo,
           </dd>
 
           <dt>{t('account.totalReceived')}</dt>
-          <dd>{t('common.valueInToken', { value: account.stats.total_received, ticker: tickerName })}</dd>
+          <dd>
+            {t('common.valueInToken', { value: addressDetails.stats.total_received, ticker: tickerName })}
+          </dd>
 
           <dt>{t('account.totalSent')}</dt>
-          <dd>{t('common.valueInToken', { value: account.stats.total_sent, ticker: tickerName })}</dd>
+          <dd>{t('common.valueInToken', { value: addressDetails.stats.total_sent, ticker: tickerName })}</dd>
         </StyledDescriptionList>
       )}
     </>

src/app/components/Transactions/LogEvent.tsx

@@ -9,7 +9,7 @@ import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 import TableCell from '@mui/material/TableCell'
 import TableBody from '@mui/material/TableBody'
-import { AccountLink } from '../Account/AccountLink'
+import { AddressLink } from '../AddressDetails/AddressLink'
 import { CopyToClipboard } from '../CopyToClipboard'
 import { TransactionLink } from './TransactionLink'
 import { SearchScope } from '../../../types/searchScope'
@@ -32,7 +32,7 @@ const EvmEventParamData: FC<{
   switch (param.evm_type) {
     // TODO: handle more EVM types
     case 'address':
-      return address ? <AccountLink address={address} scope={scope} /> : null
+      return address ? <AddressLink address={address} scope={scope} /> : null
     case 'uint256':
       // TODO: format with BigNumber
       return <span>{param.value as string}</span>

src/app/components/Transactions/Logs.tsx

@@ -4,7 +4,7 @@ import { AppErrors } from '../../../types/errors'
 import { TransactionLogEvent } from './LogEvent'
 import { TextSkeleton } from '../../components/Skeleton'
 import { AddressSwitchOption } from '../AddressSwitch'
-import { CardEmptyState } from '../../pages/AccountDetailsPage/CardEmptyState'
+import { CardEmptyState } from '../../pages/AddressDetailsPage/CardEmptyState'
 import { useTranslation } from 'react-i18next'
 
 export const TransactionLogs: FC<{

src/app/components/Transactions/index.tsx

@@ -12,7 +12,7 @@ import { RuntimeTransaction } from '../../../oasis-indexer/api'
 import { COLORS } from '../../../styles/theme/colors'
 import { TablePaginationProps } from '../Table/TablePagination'
 import { BlockLink } from '../Blocks/BlockLink'
-import { AccountLink } from '../Account/AccountLink'
+import { AddressLink } from '../AddressDetails/AddressLink'
 import { TransactionLink } from './TransactionLink'
 import { trimLongString } from '../../utils/trimLongString'
 import Typography from '@mui/material/Typography'
@@ -150,7 +150,7 @@ export const Transactions: FC<TransactionsProps> = ({
                       {trimLongString(transaction.sender_0_eth || transaction.sender_0)}
                     </Typography>
                   ) : (
-                    <AccountLink
+              <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>
                 ) : (
-                  <AccountLink
+            <AddressLink
                     scope={transaction}
                     address={transaction.to_eth || transaction.to!}
                     alwaysTrim={true}

src/app/pages/AccountDetailsPage/TokensCard.tsx → src/app/pages/AddressDetailsPage/AddressTokensCard.tsx

@@ -14,15 +14,15 @@ import { EvmTokenType, Layer } from '../../../oasis-indexer/api'
 import { AppErrors } from '../../../types/errors'
 import { ScrollingDiv } from '../../components/PageLayout/ScrollingDiv'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
-import { useAccount } from './hook'
+import { useAddressDetails } from './hook'
 
 type TokensCardProps = {
   type: EvmTokenType
 }
 
 export const accountTokenContainerId = 'tokens'
 
-export const TokensCard: FC<TokensCardProps> = ({ type }) => {
+export const AddressTokensCard: FC<TokensCardProps> = ({ type }) => {
   const scope = useRequiredScopeParam()
   const address = useLoaderData() as string
   const { t } = useTranslation()
@@ -40,8 +40,8 @@ export const TokensCard: FC<TokensCardProps> = ({ type }) => {
     // There can be no ERC-20 or ERC-721 tokens on consensus
     throw AppErrors.UnsupportedLayer
   }
-  const { isLoading, account } = useAccount(scope, address)
-  const tableRows = (account?.tokenBalances[type] || []).map(item => ({
+  const { isLoading, addressDetails } = useAddressDetails(scope, address)
+  const tableRows = (addressDetails?.tokenBalances[type] || []).map(item => ({
     key: item.token_contract_addr,
     data: [
       {
@@ -80,7 +80,7 @@ export const TokensCard: FC<TokensCardProps> = ({ type }) => {
       <ScrollingDiv id={accountTokenContainerId}>
         <CardHeader disableTypography component="h3" title={tokenListLabel} />
         <CardContent>
-          {!isLoading && !account?.tokenBalances[type].length && (
+          {!isLoading && !addressDetails?.tokenBalances[type].length && (
             <CardEmptyState label={t('account.emptyTokenList', { token: tokenLabel })} />
           )}
 

src/app/pages/AccountDetailsPage/TransactionsCard.tsx → src/app/pages/AddressDetailsPage/AddressTransactionsCard.tsx

@@ -8,21 +8,19 @@ import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE } from '../../config'
 import { ErrorBoundary } from '../../components/ErrorBoundary'
 import { ScrollingDiv } from '../../components/PageLayout/ScrollingDiv'
 import { CardEmptyState } from './CardEmptyState'
-import { useTransactions } from './hook'
+import { useAddressTransactions } from './hook'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { useLoaderData } from 'react-router-dom'
 
 export const accountTransactionsContainerId = 'transactions'
 
-export const TransactionsCard: FC = () => {
+export const AddressTransactionsCard: FC = () => {
   const { t } = useTranslation()
   const scope = useRequiredScopeParam()
   const address = useLoaderData() as string
 
-  const { isLoading, isFetched, transactions, pagination, totalCount, isTotalCountClipped } = useTransactions(
-    scope,
-    address,
-  )
+  const { isLoading, isFetched, transactions, pagination, totalCount, isTotalCountClipped } =
+    useAddressTransactions(scope, address)
   return (
     <Card>
       <ScrollingDiv id={accountTransactionsContainerId}>

src/app/pages/AccountDetailsPage/hook.ts → src/app/pages/AddressDetailsPage/hook.ts

@@ -4,20 +4,20 @@ import { useSearchParamsPagination } from '../../components/Table/useSearchParam
 import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE } from '../../config'
 import { SearchScope } from '../../../types/searchScope'
 
-export const useAccount = (scope: SearchScope, address: string) => {
+export const useAddressDetails = (scope: SearchScope, address: string) => {
   const { network, layer } = scope
   if (layer === Layer.consensus) {
     // There can be no ERC-20 or ERC-721 tokens on consensus
     throw AppErrors.UnsupportedLayer
   }
   const query = useGetRuntimeAccountsAddress(network, layer, address!)
-  const account = query.data?.data
+  const addressDetails = query.data?.data
   const isLoading = query.isLoading
   const isError = query.isError
-  return { account, isLoading, isError }
+  return { addressDetails, isLoading, isError }
 }
 
-export const useTransactions = (scope: SearchScope, address: string) => {
+export const useAddressTransactions = (scope: SearchScope, address: string) => {
   const { network, layer } = scope
   const pagination = useSearchParamsPagination('page')
   const offset = (pagination.selectedPage - 1) * NUMBER_OF_ITEMS_ON_SEPARATE_PAGE

src/app/pages/AccountDetailsPage/index.tsx → src/app/pages/AddressDetailsPage/index.tsx

@@ -3,41 +3,41 @@ import { useTranslation } from 'react-i18next'
 import { useHref, useLoaderData } from 'react-router-dom'
 import { PageLayout } from '../../components/PageLayout'
 import { SubPageCard } from '../../components/SubPageCard'
-import { Account } from '../../components/Account'
+import { AddressDetails } from '../../components/AddressDetails'
 import { RouterTabs } from '../../components/RouterTabs'
 import { TokenPriceInfo, useTokenPrice } from '../../../coin-gecko/api'
 import { Ticker } from '../../../types/ticker'
 
 import { EvmTokenType, RuntimeAccount } from '../../../oasis-indexer/api'
-import { accountTokenContainerId } from './TokensCard'
-import { useAccount } from './hook'
+import { accountTokenContainerId } from './AddressTokensCard'
+import { useAddressDetails } from './hook'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { showEmptyAccountDetails } from '../../../config'
 import { CardEmptyState } from './CardEmptyState'
 
-export const AccountDetailsPage: FC = () => {
+export const AddressDetailsPage: FC = () => {
   const { t } = useTranslation()
 
   const scope = useRequiredScopeParam()
   const address = useLoaderData() as string
-  const { account, isLoading, isError } = useAccount(scope, address)
+  const { addressDetails, isLoading, isError } = useAddressDetails(scope, address)
 
-  const tokenPriceInfo = useTokenPrice(account?.ticker || Ticker.ROSE)
+  const tokenPriceInfo = useTokenPrice(addressDetails?.ticker || Ticker.ROSE)
 
-  const showErc20 = showEmptyAccountDetails || !!account?.tokenBalances[EvmTokenType.ERC20].length
+  const showErc20 = showEmptyAccountDetails || !!addressDetails?.tokenBalances[EvmTokenType.ERC20].length
   const erc20Link = useHref(`tokens/erc-20#${accountTokenContainerId}`)
-  const showTxs = showEmptyAccountDetails || showErc20 || !!account?.stats.num_txns
+  const showTxs = showEmptyAccountDetails || showErc20 || !!addressDetails?.stats.num_txns
   const txLink = useHref('')
 
   const showDetails = showTxs || showErc20
 
   return (
     <PageLayout>
       <SubPageCard featured title={t('account.title')}>
-        <AccountDetailsView
+        <AddressDetailsView
           isLoading={isLoading}
           isError={isError}
-          account={account}
+          addressDetails={addressDetails}
           tokenPriceInfo={tokenPriceInfo}
         />
       </SubPageCard>
@@ -53,17 +53,22 @@ export const AccountDetailsPage: FC = () => {
   )
 }
 
-export const AccountDetailsView: FC<{
+export const AddressDetailsView: FC<{
   isLoading: boolean
   isError: boolean
-  account: RuntimeAccount | undefined
+  addressDetails: RuntimeAccount | undefined
   tokenPriceInfo: TokenPriceInfo
   showLayer?: boolean
-}> = ({ isLoading, isError, account, tokenPriceInfo, showLayer }) => {
+}> = ({ isLoading, isError, addressDetails, tokenPriceInfo, showLayer }) => {
   const { t } = useTranslation()
   return isError ? (
-    <CardEmptyState label={t('account.cantLoadDetails')} />
+    <CardEmptyState label={t('address.cantLoadDetails')} />
   ) : (
-    <Account account={account} isLoading={isLoading} tokenPriceInfo={tokenPriceInfo} showLayer={showLayer} />
+    <AddressDetails
+      addressDetails={addressDetails}
+      isLoading={isLoading}
+      tokenPriceInfo={tokenPriceInfo}
+      showLayer={showLayer}
+    />
   )
 }

src/app/pages/SearchResultsPage/SearchResultsList.tsx

@@ -4,7 +4,7 @@ import { ResultsGroupByType } from './ResultsGroupByType'
 import { BlockDetailView } from '../BlockDetailPage'
 import { RouteUtils } from '../../utils/route-utils'
 import { TransactionDetailView } from '../TransactionDetailPage'
-import { AccountDetailsView } from '../AccountDetailsPage'
+import { AddressDetails } from '../../components/AddressDetails'
 import { AccountResult, BlockResult, SearchResults, TransactionResult } from './hooks'
 import { getThemesForNetworks } from '../../../styles/theme'
 import { Network } from '../../../types/network'
@@ -71,15 +71,14 @@ export const SearchResultsList: FC<{
           title={t('search.results.accounts.title')}
           results={searchResults.filter((item): item is AccountResult => item.resultType === 'account')}
           resultComponent={item => (
-            <AccountDetailsView
+            <AddressDetails
               isLoading={false}
-              isError={false}
-              account={item}
+              addressDetails={item}
               tokenPriceInfo={tokenPrices[item.network]}
               showLayer={true}
             />
           )}
-          link={acc => RouteUtils.getAccountRoute(acc, acc.address_eth ?? acc.address)}
+          link={acc => RouteUtils.getAddressRoute(acc, acc.address_eth ?? acc.address)}
           linkLabel={t('search.results.accounts.viewLink')}
         />
       </SubPageCard>