Merge pull request #252 from oasisprotocol/csillag/transactions-link-…

…in-account-details Add transactions link to account details
oasisprotocol · May 1, 2023 · 0c12631 · 0c12631
2 parents 2846a75 + de487d4
commit 0c12631
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/src/app/components/Account/index.tsx b/src/app/components/Account/index.tsx
@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import { Link as RouterLink } from 'react-router-dom'
 import { staking } from '@oasisprotocol/client'
 import Box from '@mui/material/Box'
 import useMediaQuery from '@mui/material/useMediaQuery'
@@ -13,6 +14,9 @@ import { TextSkeleton } from '../../components/Skeleton'
 import { type RuntimeAccount } from '../../../oasis-indexer/api'
 import { TokenPills } from './TokenPills'
 import { AccountLink } from './AccountLink'
+import { RouteUtils } from '../../utils/route-utils'
+import { accountTransactionsContainerId } from '../../pages/AccountDetailsPage/TransactionsCard'
+import Link from '@mui/material/Link'
 
 export const StyledAvatarContainer = styled('dt')(({ theme }) => ({
   '&&': {
@@ -54,6 +58,13 @@ export const Account: FC<AccountProps> = ({ account, isLoading, roseFiatValue, s
   const balance = account?.balances[0]?.balance ?? '0'
   const address = account ? account.address_eth ?? account.address : undefined
 
+  const transactionsAnchor = account
+    ? `${RouteUtils.getAccountRoute(
+        account.address_eth ?? account.address,
+        account.layer,
+      )}#${accountTransactionsContainerId}`
+    : undefined
+
   return (
     <>
       {isLoading && <TextSkeleton numberOfRows={8} />}
@@ -95,7 +106,11 @@ export const Account: FC<AccountProps> = ({ account, isLoading, roseFiatValue, s
           )}
 
           <dt>{t('common.transactions')}</dt>
-          <dd>{account.stats.num_txns}</dd>
+          <dd>
+            <Link component={RouterLink} to={transactionsAnchor!}>
+              {t('common.transactionsNumber', { count: account.stats.num_txns })}
+            </Link>
+          </dd>
 
           <dt>{t('account.evmTokens')}</dt>
           <dd>

diff --git a/src/app/pages/AccountDetailsPage/TransactionsCard.tsx b/src/app/pages/AccountDetailsPage/TransactionsCard.tsx
@@ -11,6 +11,7 @@ import { useSearchParamsPagination } from '../../components/Table/useSearchParam
 import { ErrorBoundary } from '../../components/ErrorBoundary'
 import { AppErrors } from '../../../types/errors'
 import { useLayerParam } from '../../hooks/useLayerParam'
+import { ScrollingDiv } from '../../components/PageLayout/ScrollingDiv'
 
 export const TransactionsList: FC<{ layer: Layer; address: string }> = ({ layer, address }) => {
   const txsPagination = useSearchParamsPagination('page')
@@ -46,13 +47,17 @@ export const TransactionsList: FC<{ layer: Layer; address: string }> = ({ layer,
   )
 }
 
+export const accountTransactionsContainerId = 'transactions'
+
 export const TransactionsCard: FC = () => {
   const { t } = useTranslation()
   const layer = useLayerParam()
   const address = useLoaderData() as string
   return (
     <Card>
-      <CardHeader disableTypography component="h3" title={t('account.transactionsListTitle')} />
+      <ScrollingDiv id={accountTransactionsContainerId}>
+        <CardHeader disableTypography component="h3" title={t('account.transactionsListTitle')} />
+      </ScrollingDiv>
       <CardContent>
         <ErrorBoundary light={true}>
           <TransactionsList layer={layer} address={address} />