Merge pull request #1422 from oasisprotocol/csillag/search-for-consen…

…sus-accounts

Support searching for consensus accounts

.changelog/1422.trivial.md

@@ -0,0 +1 @@
+Support searching for consensus accounts (by address)

src/app/components/Account/index.tsx

@@ -5,7 +5,7 @@ import { useScreenSize } from '../../hooks/useScreensize'
 import { StyledDescriptionList, StyledListTitleWithAvatar } from '../../components/StyledDescriptionList'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
 import { TextSkeleton } from '../../components/Skeleton'
-import { EvmToken, type RuntimeAccount } from '../../../oasis-nexus/api'
+import { Account, EvmToken, type RuntimeAccount } from '../../../oasis-nexus/api'
 import { TokenPills } from './TokenPills'
 import { AccountLink } from './AccountLink'
 import { RouteUtils } from '../../utils/route-utils'
@@ -23,16 +23,25 @@ import { RuntimeBalanceDisplay } from '../Balance/RuntimeBalanceDisplay'
 import { calculateFiatValue } from '../Balance/hooks'
 import { FiatMoneyAmount } from '../Balance/FiatMoneyAmount'
 import { getFiatCurrencyForScope, getTokensForScope, showFiatValues } from '../../../config'
+import Box from '@mui/material/Box'
+import { AccountSizeBadge } from '../AccountSizeBadge'
+import { StyledListTitle } from '../../pages/ConsensusAccountDetailsPage/ConsensusAccountDetailsCard'
 
-type AccountProps = {
+type RuntimeAccountDataProps = {
   account?: RuntimeAccount
   token?: EvmToken
   isLoading: boolean
   tokenPrices: AllTokenPrices
   showLayer?: boolean
 }
 
-export const Account: FC<AccountProps> = ({ account, token, isLoading, tokenPrices, showLayer }) => {
+export const RuntimeAccountData: FC<RuntimeAccountDataProps> = ({
+  account,
+  token,
+  isLoading,
+  tokenPrices,
+  showLayer,
+}) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
   const address = account ? account.address_eth ?? account.address : undefined
@@ -160,3 +169,84 @@ export const Account: FC<AccountProps> = ({ account, token, isLoading, tokenPric
     </>
   )
 }
+
+export type ConsensusAccountDataProps = {
+  account?: Account
+  isLoading?: boolean
+  showLayer?: boolean
+  standalone?: boolean
+}
+
+export const ConsensusAccountData: FC<ConsensusAccountDataProps> = ({
+  account,
+  isLoading,
+  showLayer,
+  standalone,
+}) => {
+  const { t } = useTranslation()
+  const { isMobile } = useScreenSize()
+
+  if (!account || isLoading) return <TextSkeleton numberOfRows={7} />
+
+  return (
+    <StyledDescriptionList titleWidth={isMobile ? '160px' : '200px'} standalone={standalone}>
+      {showLayer && (
+        <>
+          <dt>{t('common.layer')}</dt>
+          <dd>
+            <DashboardLink scope={account} />
+          </dd>
+        </>
+      )}
+      <StyledListTitleWithAvatar>
+        <Box gap={1} sx={{ display: 'flex', alignItems: 'center' }}>
+          <AccountAvatar account={account} />
+          <AccountSizeBadge size={account.size} />
+        </Box>
+      </StyledListTitleWithAvatar>
+      <dd>
+        <AccountLink scope={account} address={account.address} />
+        <CopyToClipboard value={account.address} />
+      </dd>
+      <dt>
+        <strong>{t('account.totalBalance')}</strong>
+      </dt>
+      <dd>
+        <strong>
+          {t('common.valueInToken', {
+            ...getPreciseNumberFormat(account.total),
+            ticker: account.ticker,
+          })}
+        </strong>
+      </dd>
+      <StyledListTitle>{t('account.available')}</StyledListTitle>
+      <dd>
+        {t('common.valueInToken', {
+          ...getPreciseNumberFormat(account.available),
+          ticker: account.ticker,
+        })}
+      </dd>
+      <StyledListTitle>{t('common.staking')}</StyledListTitle>
+      <dd>
+        {t('common.valueInToken', {
+          ...getPreciseNumberFormat(account.delegations_balance!),
+          ticker: account.ticker,
+        })}
+      </dd>
+      <StyledListTitle>{t('account.debonding')}</StyledListTitle>
+      <dd>
+        {t('common.valueInToken', {
+          ...getPreciseNumberFormat(account.debonding_delegations_balance!),
+          ticker: account.ticker,
+        })}
+      </dd>
+      <dt>{t('account.lastNonce')}</dt>
+      <dd>{account.nonce}</dd>
+      <dt>{t('account.birth')}</dt>
+      <dd>
+        {/* TODO: provide date when it is implemented in the API */}
+        <>-</>
+      </dd>
+    </StyledDescriptionList>
+  )
+}

src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountDetailsCard.tsx

@@ -1,18 +1,9 @@
 import { FC } from 'react'
 import { styled } from '@mui/material/styles'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
 import { Account } from '../../../oasis-nexus/api'
-import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
-import { useScreenSize } from '../../hooks/useScreensize'
-import { StyledDescriptionList, StyledListTitleWithAvatar } from '../../components/StyledDescriptionList'
-import { AccountLink } from '../../components/Account/AccountLink'
-import { AccountSizeBadge } from '../../components/AccountSizeBadge'
-import { TextSkeleton } from '../../components/Skeleton'
 import { SubPageCard } from '../../components/SubPageCard'
-import { CopyToClipboard } from '../../components/CopyToClipboard'
-import { AccountAvatar } from '../../components/AccountAvatar'
-import { CardEmptyState } from '../../components/CardEmptyState'
+import { ConsensusAccountDetailsView } from './ConsensusAccountDetailsView'
 
 export const StyledListTitle = styled('dt')(({ theme }) => ({
   marginLeft: theme.spacing(4),
@@ -33,70 +24,7 @@ export const ConsensusAccountDetailsCard: FC<ConsensusAccountDetailsCardProps> =
 
   return (
     <SubPageCard featured isLoadingTitle={isLoading} title={t('account.title')} mainTitle>
-      <ConsensusAccountDetails isError={isError} isLoading={isLoading} account={account} />
+      <ConsensusAccountDetailsView isError={isError} isLoading={isLoading} account={account} />
     </SubPageCard>
   )
 }
-
-const ConsensusAccountDetails: FC<ConsensusAccountDetailsCardProps> = ({ account, isError, isLoading }) => {
-  const { t } = useTranslation()
-  const { isMobile } = useScreenSize()
-
-  if (isLoading) return <TextSkeleton numberOfRows={7} />
-  if (isError) return <CardEmptyState label={t('account.cantLoadDetails')} />
-  if (!account) return null
-
-  return (
-    <StyledDescriptionList titleWidth={isMobile ? '160px' : '200px'}>
-      <StyledListTitleWithAvatar>
-        <Box gap={1} sx={{ display: 'flex', alignItems: 'center' }}>
-          <AccountAvatar account={account} />
-          <AccountSizeBadge size={account.size} />
-        </Box>
-      </StyledListTitleWithAvatar>
-      <dd>
-        <AccountLink scope={account} address={account.address} />
-        <CopyToClipboard value={account.address} />
-      </dd>
-      <dt>
-        <strong>{t('account.totalBalance')}</strong>
-      </dt>
-      <dd>
-        <strong>
-          {t('common.valueInToken', {
-            ...getPreciseNumberFormat(account.total),
-            ticker: account.ticker,
-          })}
-        </strong>
-      </dd>
-      <StyledListTitle>{t('account.available')}</StyledListTitle>
-      <dd>
-        {t('common.valueInToken', {
-          ...getPreciseNumberFormat(account.available),
-          ticker: account.ticker,
-        })}
-      </dd>
-      <StyledListTitle>{t('common.staking')}</StyledListTitle>
-      <dd>
-        {t('common.valueInToken', {
-          ...getPreciseNumberFormat(account.delegations_balance!),
-          ticker: account.ticker,
-        })}
-      </dd>
-      <StyledListTitle>{t('account.debonding')}</StyledListTitle>
-      <dd>
-        {t('common.valueInToken', {
-          ...getPreciseNumberFormat(account.debonding_delegations_balance!),
-          ticker: account.ticker,
-        })}
-      </dd>
-      <dt>{t('account.lastNonce')}</dt>
-      <dd>{account.nonce}</dd>
-      <dt>{t('account.birth')}</dt>
-      <dd>
-        {/* TODO: provide date when it is implemented in the API */}
-        <>-</>
-      </dd>
-    </StyledDescriptionList>
-  )
-}

src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountDetailsView.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { CardEmptyState } from '../../components/CardEmptyState'
+import { ConsensusAccountData, ConsensusAccountDataProps } from '../../components/Account'
+
+type ConsensusAccountDetailsViewProps = ConsensusAccountDataProps & {
+  isError?: boolean | undefined
+}
+
+export const ConsensusAccountDetailsView: FC<ConsensusAccountDetailsViewProps> = ({
+  account,
+  isError,
+  isLoading,
+  showLayer,
+  standalone,
+}) => {
+  const { t } = useTranslation()
+
+  if (isError || !account) return <CardEmptyState label={t('account.cantLoadDetails')} />
+
+  return (
+    <ConsensusAccountData
+      isLoading={!!isLoading}
+      account={account}
+      showLayer={showLayer}
+      standalone={standalone}
+    />
+  )
+}

src/app/pages/ConsensusAccountDetailsPage/index.tsx

@@ -2,14 +2,9 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useHref, useLoaderData } from 'react-router-dom'
 import Grid from '@mui/material/Grid'
-import { Account, useGetConsensusAccountsAddress } from '../../../oasis-nexus/api'
+import { useGetConsensusAccountsAddress } from '../../../oasis-nexus/api'
 import { useScreenSize } from '../../hooks/useScreensize'
-import { StyledDescriptionList } from '../../components/StyledDescriptionList'
 import { PageLayout } from '../../components/PageLayout'
-import { TextSkeleton } from '../../components/Skeleton'
-import { AccountSizeBadge } from '../../components/AccountSizeBadge'
-import { AccountLink } from '../../components/Account/AccountLink'
-import { RoundedBalance } from '../..//components/RoundedBalance'
 import { AddressLoaderData } from '../../utils/route-utils'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { ConsensusAccountDetailsCard } from './ConsensusAccountDetailsCard'
@@ -45,53 +40,3 @@ export const ConsensusAccountDetailsPage: FC = () => {
     </PageLayout>
   )
 }
-
-export const ConsensusAccountDetailsView: FC<{
-  isLoading?: boolean
-  account: Account | undefined
-  standalone?: boolean
-}> = ({ account, isLoading, standalone = false }) => {
-  const { t } = useTranslation()
-  const { isMobile } = useScreenSize()
-
-  if (isLoading) return <TextSkeleton numberOfRows={10} />
-  if (!account) return null
-
-  return (
-    <StyledDescriptionList titleWidth={isMobile ? '160px' : '200px'} standalone={standalone}>
-      {/* TODO: provide missing props when API is ready */}
-      <dt>{t('common.size')}</dt>
-      <dd>
-        <AccountSizeBadge size={account.size} />
-      </dd>
-      <dt>{t('common.address')}</dt>
-      <dd>
-        <AccountLink scope={account} address={account.address} />,
-      </dd>
-      <dt>{t('account.birth')}</dt>
-      <dd>
-        <>-</>
-      </dd>
-      <dt>{t('account.available')}</dt>
-      <dd>
-        <RoundedBalance value={account.available} ticker={account.ticker} />
-      </dd>
-      <dt>{t('common.staked')}</dt>
-      <dd>
-        <>-</>
-      </dd>
-      <dt>{t('account.debonding')}</dt>
-      <dd>
-        <>-</>
-      </dd>
-      <dt>
-        <strong>{t('account.totalBalance')}</strong>
-      </dt>
-      <dd>
-        <strong>
-          <RoundedBalance value={account.total} ticker={account.ticker} />
-        </strong>
-      </dd>
-    </StyledDescriptionList>
-  )
-}

src/app/pages/ConsensusAccountsPage/index.tsx

@@ -14,7 +14,7 @@ import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { CardHeaderWithCounter } from '../../components/CardHeaderWithCounter'
 import { VerticalList } from '../../components/VerticalList'
 import { AccountList } from 'app/components/AccountList'
-import { ConsensusAccountDetailsView } from '../ConsensusAccountDetailsPage'
+import { ConsensusAccountDetailsView } from '../ConsensusAccountDetailsPage/ConsensusAccountDetailsView'
 
 export const ConsensusAccountsPage: FC = () => {
   const [tableView, setTableView] = useState<TableLayout>(TableLayout.Horizontal)

src/app/pages/RuntimeAccountDetailsPage/AccountDetailsCard.tsx → src/app/pages/RuntimeAccountDetailsPage/RuntimeAccountDetailsCard.tsx

@@ -2,10 +2,10 @@ import { FC } from 'react'
 import { SubPageCard } from '../../components/SubPageCard'
 import { useTranslation } from 'react-i18next'
 import { EvmToken, RuntimeAccount } from '../../../oasis-nexus/api'
-import { AccountDetailsView } from './AccountDetailsView'
+import { RuntimeAccountDetailsView } from './RuntimeAccountDetailsView'
 import { AllTokenPrices } from '../../../coin-gecko/api'
 
-type AccountDetailsProps = {
+type RuntimeAccountDetailsProps = {
   isLoading: boolean
   isError: boolean
   isContract: boolean
@@ -14,7 +14,7 @@ type AccountDetailsProps = {
   tokenPrices: AllTokenPrices
 }
 
-export const AccountDetailsCard: FC<AccountDetailsProps> = ({
+export const RuntimeAccountDetailsCard: FC<RuntimeAccountDetailsProps> = ({
   isLoading,
   isError,
   isContract,
@@ -30,7 +30,7 @@ export const AccountDetailsCard: FC<AccountDetailsProps> = ({
       title={isContract ? t('contract.title') : t('account.title')}
       mainTitle
     >
-      <AccountDetailsView
+      <RuntimeAccountDetailsView
         isLoading={isLoading}
         isError={isError}
         account={account}

src/app/pages/RuntimeAccountDetailsPage/AccountDetailsView.tsx → src/app/pages/RuntimeAccountDetailsPage/RuntimeAccountDetailsView.tsx

@@ -3,9 +3,9 @@ import { EvmToken, RuntimeAccount } from '../../../oasis-nexus/api'
 import { useTranslation } from 'react-i18next'
 import { AllTokenPrices } from '../../../coin-gecko/api'
 import { CardEmptyState } from '../../components/CardEmptyState'
-import { Account } from '../../components/Account'
+import { RuntimeAccountData } from '../../components/Account'
 
-export const AccountDetailsView: FC<{
+export const RuntimeAccountDetailsView: FC<{
   isLoading: boolean
   isError: boolean
   account: RuntimeAccount | undefined
@@ -17,7 +17,7 @@ export const AccountDetailsView: FC<{
   return isError ? (
     <CardEmptyState label={t('account.cantLoadDetails')} />
   ) : (
-    <Account
+    <RuntimeAccountData
       account={account}
       token={token}
       isLoading={isLoading}

src/app/pages/RuntimeAccountDetailsPage/index.tsx

@@ -14,7 +14,7 @@ import { useTokenInfo } from '../TokenDashboardPage/hook'
 import { accountTokenTransfersContainerId } from './AccountTokenTransfersCard'
 import { getTokenTypePluralName } from '../../../types/tokens'
 import { SearchScope } from '../../../types/searchScope'
-import { AccountDetailsCard } from './AccountDetailsCard'
+import { RuntimeAccountDetailsCard } from './RuntimeAccountDetailsCard'
 import { AccountEventsCard } from './AccountEventsCard'
 import { DappBanner } from '../../components/DappBanner'
 import { AddressLoaderData } from '../../utils/route-utils'
@@ -55,7 +55,7 @@ export const RuntimeAccountDetailsPage: FC = () => {
 
   return (
     <PageLayout>
-      <AccountDetailsCard
+      <RuntimeAccountDetailsCard
         isLoading={isLoading}
         isError={isError}
         isContract={isContract}