refactor: consolidate event filter hooks, UI components, and shared utilities

- Extract shared useEventFilters hook replacing 3 duplicated filter hooks
- Create EventsFilterBar and EventsMobileFiltersModal shared components
- Add mobile filter validation for tick range and date range
- Centralize TickRangeValue type and toTickRangeValue helper
- Compose formatRangeLabel inside getAmountRangeLabel
- Extract AddressCell component for highlighted address pattern
- Centralize buildTickFilter and parseTickRange utilities

Author: sallymoc

src/pages/network/address/AddressPage.tsx

@@ -20,7 +20,13 @@ import { useGetSmartContractsQuery } from '@app/store/apis/qubic-static'
 import { clsxTwMerge, formatEllipsis, formatString, isValidQubicAddress } from '@app/utils'
 import { useGetAddressName } from '@app/hooks'
 import { HomeLink } from '../components'
-import { AddressDetails, ContractOverview, OwnedAssets, TransactionsOverview } from './components'
+import {
+  AddressDetails,
+  AddressEvents,
+  ContractOverview,
+  OwnedAssets,
+  TransactionsOverview
+} from './components'
 
 function AddressPage() {
   const { t } = useTranslation('network-page')
@@ -80,13 +86,14 @@ function AddressPage() {
   const tabParam = searchParams.get('tab')
 
   const selectedTabIndex = useMemo(() => {
-    if (tabParam === 'contract' && isSmartContract) return 1
+    if (tabParam === 'events') return 1
+    if (tabParam === 'contract' && isSmartContract) return 2
     return 0
   }, [tabParam, isSmartContract])
 
   // Normalize invalid tab params so URL always reflects the visible tab
   useEffect(() => {
-    const isValidTab = tabParam === 'contract' && isSmartContract
+    const isValidTab = tabParam === 'events' || (tabParam === 'contract' && isSmartContract)
     if (tabParam && !isValidTab) {
       setSearchParams(
         (prev) => {
@@ -103,6 +110,8 @@ function AddressPage() {
       setSearchParams(
         (prev) => {
           if (index === 1) {
+            prev.set('tab', 'events')
+          } else if (index === 2) {
             prev.set('tab', 'contract')
           } else {
             prev.delete('tab')
@@ -219,12 +228,16 @@ function AddressPage() {
       >
         <Tabs.List>
           <Tabs.Tab>{t('transactions')}</Tabs.Tab>
+          <Tabs.Tab>{t('events')}</Tabs.Tab>
           {isSmartContract && <Tabs.Tab>{t('contract')}</Tabs.Tab>}
         </Tabs.List>
         <Tabs.Panels>
           <Tabs.Panel>
             <TransactionsOverview addressId={addressId} />
           </Tabs.Panel>
+          <Tabs.Panel>
+            <AddressEvents addressId={addressId} />
+          </Tabs.Panel>
           {isSmartContract && smartContractDetails && (
             <Tabs.Panel>
               <ContractOverview

src/pages/network/address/components/AddressEvents.tsx

@@ -0,0 +1,69 @@
+import { useTranslation } from 'react-i18next'
+
+import { Alert } from '@app/components/ui'
+import BetaBanner from '../../components/BetaBanner'
+import { EventsFilterBar } from '../../components/filters'
+import TransactionEvents from '../../components/TxItem/TransactionEvents'
+import { useEventFilters } from '../../hooks'
+import { useAddressEvents } from '../hooks'
+
+type Props = Readonly<{
+  addressId: string
+}>
+
+export default function AddressEvents({ addressId }: Props) {
+  const { t } = useTranslation('network-page')
+  const {
+    events,
+    total,
+    eventType,
+    tickStart,
+    tickEnd,
+    dateRange,
+    sourceFilter,
+    destinationFilter,
+    isLoading,
+    hasError
+  } = useAddressEvents(addressId)
+
+  const filters = useEventFilters({
+    tickStart,
+    tickEnd,
+    eventType,
+    dateRange,
+    sourceFilter,
+    destinationFilter
+  })
+
+  return (
+    <div className="flex flex-col gap-16">
+      <BetaBanner />
+
+      <EventsFilterBar
+        filters={filters}
+        eventType={eventType}
+        tickStart={tickStart}
+        tickEnd={tickEnd}
+        dateRange={dateRange}
+        sourceFilter={sourceFilter}
+        destinationFilter={destinationFilter}
+        idPrefix="addr-events"
+      />
+
+      {hasError ? (
+        <Alert variant="error">{t('eventsLoadFailed')}</Alert>
+      ) : (
+        <TransactionEvents
+          events={events}
+          total={total}
+          isLoading={isLoading}
+          paginated
+          showTxId
+          showTickAndTimestamp
+          showBetaBanner={false}
+          highlightAddress={addressId}
+        />
+      )}
+    </div>
+  )
+}

src/pages/network/address/components/TransactionsOverview/TransactionFiltersBar.tsx

@@ -15,7 +15,12 @@ import {
   RangeFilterContent,
   ResetFiltersButton
 } from '../../../components/filters'
-import { formatRangeLabel, useAmountPresetHandler, useClearFilterHandler } from '../../../hooks'
+import {
+  formatRangeLabel,
+  getAmountRangeLabel,
+  useAmountPresetHandler,
+  useClearFilterHandler
+} from '../../../hooks'
 import type {
   AddressFilter,
   TransactionDirection,
@@ -271,21 +276,13 @@ export default function TransactionFiltersBar({
     return `${t('destination')}: ${prefix}${destinationAddresses.length}`
   }
 
-  const getAmountLabel = () => {
-    if (!isAmountActive) return t('amount')
-    const { start, end, presetKey } = activeFilters.amountRange || {}
-
-    if (presetKey) {
-      const preset = AMOUNT_PRESETS.find((p) => p.labelKey === presetKey)
-      if (preset) return `${t('amount')}: ${t(preset.labelKey)}`
-    }
-
-    if (start && end)
-      return `${t('amount')}: ${formatAmountShort(start, t)} - ${formatAmountShort(end, t)}`
-    if (start) return `${t('amount')}: >= ${formatAmountShort(start, t)}`
-    if (end) return `${t('amount')}: <= ${formatAmountShort(end, t)}`
-    return t('amount')
-  }
+  const amountLabel = getAmountRangeLabel(
+    t('amount'),
+    activeFilters.amountRange,
+    AMOUNT_PRESETS,
+    t,
+    formatAmountShort
+  )
 
   const getDateLabel = () => {
     if (!isDateActive) return t('date')
@@ -339,9 +336,7 @@ export default function TransactionFiltersBar({
             {isDestinationActive && (
               <ActiveFilterChip label={getDestinationLabel()} onClear={clearDestinationFilter} />
             )}
-            {isAmountActive && (
-              <ActiveFilterChip label={getAmountLabel()} onClear={clearAmountFilter} />
-            )}
+            {isAmountActive && <ActiveFilterChip label={amountLabel} onClear={clearAmountFilter} />}
             {isDateActive && <ActiveFilterChip label={getDateLabel()} onClear={clearDateFilter} />}
             {isTickActive && <ActiveFilterChip label={getTickLabel()} onClear={clearTickFilter} />}
             {isInputTypeActive && (
@@ -432,7 +427,7 @@ export default function TransactionFiltersBar({
 
         {/* Amount Filter */}
         <FilterDropdown
-          label={getAmountLabel()}
+          label={amountLabel}
           isActive={isAmountActive}
           show={openDropdown === 'amount'}
           onToggle={() => handleToggle('amount')}

src/pages/network/address/components/index.ts

@@ -1,4 +1,5 @@
 export { default as AddressDetails } from './AddressDetails'
+export { default as AddressEvents } from './AddressEvents'
 export { default as ContractOverview } from './ContractOverview'
 export { default as OwnedAssets } from './OwnedAssets'
 export { default as LatestTransactions } from './TransactionsOverview/LatestTransactions'

src/pages/network/address/hooks/index.ts

@@ -1 +1,2 @@
+export { default as useAddressEvents } from './useAddressEvents'
 export { default as useLatestTransactions } from './useLatestTransactions'

src/pages/network/address/hooks/useAddressEvents.ts

@@ -0,0 +1,92 @@
+import { useMemo } from 'react'
+import { useSearchParams } from 'react-router-dom'
+
+import {
+  usePageAutoCorrect,
+  useSanitizedEventType,
+  useValidatedPage,
+  useValidatedPageSize
+} from '@app/hooks'
+import { type ShouldFilter, type TransactionEvent, useGetEventsQuery } from '@app/store/apis/events'
+import type { AddressFilter } from '../components/TransactionsOverview/filterUtils'
+import {
+  buildEventAddressFilter,
+  buildTickFilter,
+  buildTimestampRange,
+  type DateRangeValue,
+  parseAddressFilter,
+  parseDateRange,
+  parseTickRange
+} from '../../utils/eventFilterUtils'
+
+export default function useAddressEvents(addressId: string): {
+  events: TransactionEvent[]
+  total: number
+  eventType: number | undefined
+  tickStart: string | undefined
+  tickEnd: string | undefined
+  dateRange: DateRangeValue | undefined
+  sourceFilter: AddressFilter | undefined
+  destinationFilter: AddressFilter | undefined
+  isLoading: boolean
+  hasError: boolean
+} {
+  const [searchParams] = useSearchParams()
+
+  const { start: tickStart, end: tickEnd } = parseTickRange(searchParams)
+
+  const dateRange = parseDateRange(searchParams)
+  const sourceFilter = parseAddressFilter(searchParams, 'source', 'sourceMode')
+  const destinationFilter = parseAddressFilter(searchParams, 'destination', 'destMode')
+
+  const page = useValidatedPage()
+  const pageSize = useValidatedPageSize()
+  const offset = (page - 1) * pageSize
+
+  const eventType = useSanitizedEventType()
+
+  const should = useMemo<ShouldFilter[]>(
+    () => [{ terms: { source: addressId, destination: addressId } }],
+    [addressId]
+  )
+
+  const { tickNumber, tickRange } = buildTickFilter(tickStart, tickEnd)
+
+  const timestampRange = buildTimestampRange(dateRange)
+  const sourceResult = buildEventAddressFilter(sourceFilter)
+  const destResult = buildEventAddressFilter(destinationFilter)
+
+  const { data, isFetching, isError } = useGetEventsQuery(
+    {
+      should,
+      tickNumber,
+      tickRange,
+      timestampRange,
+      offset,
+      size: pageSize,
+      logType: eventType,
+      source: sourceResult.include,
+      excludeSource: sourceResult.exclude,
+      destination: destResult.include,
+      excludeDestination: destResult.exclude
+    },
+    { skip: !addressId }
+  )
+
+  const total = data?.total ?? 0
+
+  usePageAutoCorrect(!!data, total, pageSize)
+
+  return {
+    events: data?.events ?? [],
+    total,
+    eventType,
+    tickStart,
+    tickEnd,
+    dateRange,
+    sourceFilter,
+    destinationFilter,
+    isLoading: isFetching,
+    hasError: isError
+  }
+}