Filter events by user accounts (#11728)

* feat: created toggle component for events

* chore: added translation

* feat: integrated event filtering logic with ui

* chore: increased cache size

* feat: add toggle for user-specific events in Extrinsics component

* style: wrap EventsToggle in a styled div for improved styling

packages/apps/public/locales/en/app-explorer.json

@@ -10,6 +10,7 @@
   "No justifications available": "No justifications available",
   "No logs available": "No logs available",
   "Node info": "Node info",
+  "Show my events": "Show my events",
   "Unable to decode the block events. {{error}}": "Unable to decode the block events. {{error}}",
   "Unable to retrieve the specified block details. {{error}}": "Unable to retrieve the specified block details. {{error}}",
   "Waiting for next block...": "Waiting for next block...",

packages/apps/public/locales/en/translation.json

@@ -701,6 +701,7 @@
   "Setup account as recoverable": "",
   "Share": "",
   "Show address on hardware device": "",
+  "Show my events": "",
   "Sign (no submission)": "",
   "Sign and Submit": "",
   "Sign and Upload": "",

packages/page-explorer/src/BlockInfo/Extrinsics.tsx

@@ -2,12 +2,17 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { KeyedEvent } from '@polkadot/react-hooks/ctx/types';
+import type { GenericExtrinsic } from '@polkadot/types';
 import type { BlockNumber, Extrinsic } from '@polkadot/types/interfaces';
+import type { Vec } from '@polkadot/types-codec';
+import type { AnyTuple } from '@polkadot/types-codec/types';
 import type { BN } from '@polkadot/util';
 
 import React, { useMemo } from 'react';
 
-import { Table } from '@polkadot/react-components';
+import { styled, Table, Toggle } from '@polkadot/react-components';
+import { useAccounts, useToggle } from '@polkadot/react-hooks';
+import { isEventFromMyAccounts } from '@polkadot/react-hooks/utils/isEventFromMyAccounts';
 
 import { useTranslation } from '../translate.js';
 import ExtrinsicDisplay from './Extrinsic.js';
@@ -24,17 +29,34 @@ interface Props {
 
 function Extrinsics ({ blockNumber, className = '', events, label, maxBlockWeight, value, withLink }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const { allAccounts } = useAccounts();
+  const [showOnlyUserEvents, onToggleUserEvents] = useToggle();
 
   const header = useMemo<[React.ReactNode?, string?, number?][]>(
     () => [
       [label || t('extrinsics'), 'start', 2],
       [t('events'), 'start media--1000', 2],
       [t('weight'), 'media--1400'],
-      [undefined, 'address media--1200']
+      [
+        <EventsToggle
+          key='eventsToggle'
+          onToggleUserEvents={onToggleUserEvents}
+          showOnlyUserEvents={showOnlyUserEvents}
+        />,
+        'end media--1000'
+      ]
     ],
-    [label, t]
+    [label, onToggleUserEvents, showOnlyUserEvents, t]
   );
 
+  const filteredEvents = useMemo(() => {
+    if (!showOnlyUserEvents) {
+      return events;
+    }
+
+    return events?.filter((event) => isEventFromMyAccounts(event.record, value as Vec<GenericExtrinsic<AnyTuple>>, undefined, allAccounts));
+  }, [allAccounts, events, showOnlyUserEvents, value]);
+
   return (
     <Table
       className={className}
@@ -45,7 +67,7 @@ function Extrinsics ({ blockNumber, className = '', events, label, maxBlockWeigh
       {value?.map((extrinsic, index): React.ReactNode =>
         <ExtrinsicDisplay
           blockNumber={blockNumber}
-          events={events}
+          events={filteredEvents}
           index={index}
           key={`extrinsic:${index}`}
           maxBlockWeight={maxBlockWeight}
@@ -57,4 +79,31 @@ function Extrinsics ({ blockNumber, className = '', events, label, maxBlockWeigh
   );
 }
 
+interface EventsToggleProps {
+  showOnlyUserEvents: boolean;
+  onToggleUserEvents: () => void;
+}
+
+const EventsToggle = ({ onToggleUserEvents, showOnlyUserEvents }: EventsToggleProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <StyledDiv>
+      <Toggle
+        label={t('Show my events')}
+        onChange={onToggleUserEvents}
+        value={showOnlyUserEvents}
+      />
+    </StyledDiv>
+  );
+};
+
+const StyledDiv = styled.div`
+  .ui--Toggle {
+    label{
+      font-size: var(--font-size-base);
+    }
+  }
+`;
+
 export default React.memo(Extrinsics);

packages/page-explorer/src/Events.tsx

@@ -2,16 +2,24 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { KeyedEvent } from '@polkadot/react-hooks/ctx/types';
+import type { GenericExtrinsic, Vec } from '@polkadot/types';
+import type { AccountId } from '@polkadot/types/interfaces';
+import type { AnyTuple } from '@polkadot/types-codec/types';
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import { MarkError, Table } from '@polkadot/react-components';
+import { MarkError, styled, Table, Toggle } from '@polkadot/react-components';
+import { useAccounts, useApi, useToggle } from '@polkadot/react-hooks';
+import { isEventFromMyAccounts } from '@polkadot/react-hooks/utils/isEventFromMyAccounts';
 import { formatNumber } from '@polkadot/util';
 
 import Event from './Event.js';
 import { useTranslation } from './translate.js';
 
+const MAX_CACHE = 200;
+const blockCache = new Map<string, { author: AccountId | undefined; extrinsics: Vec<GenericExtrinsic<AnyTuple>>}>();
+
 interface Props {
   className?: string;
   error?: Error | null;
@@ -19,6 +27,7 @@ interface Props {
   events?: KeyedEvent[] | null;
   eventClassName?: string;
   label?: React.ReactNode;
+  showToggle?: boolean
 }
 
 function renederEvent (className: string | undefined, { blockHash, blockNumber, indexes, key, record }: KeyedEvent): React.ReactNode {
@@ -40,8 +49,12 @@ function renederEvent (className: string | undefined, { blockHash, blockNumber,
   );
 }
 
-function Events ({ className = '', emptyLabel, error, eventClassName, events, label }: Props): React.ReactElement<Props> {
+function Events ({ className = '', emptyLabel, error, eventClassName, events, label, showToggle = false }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
+  const { api } = useApi();
+  const { allAccounts } = useAccounts();
+  const [showOnlyUserEvents, onToggleUserEvents] = useToggle();
+  const [filteredEvents, setFilteredEvents] = useState<Props['events']>([]);
 
   const header = useMemo<[React.ReactNode?, string?, number?][]>(
     () => [
@@ -50,25 +63,98 @@ function Events ({ className = '', emptyLabel, error, eventClassName, events, la
     [label, t]
   );
 
-  return (
-    <Table
-      className={className}
-      empty={emptyLabel || t('No events available')}
-      header={header}
-    >
-      {error
-        ? (
-          <tr
-            className={eventClassName}
-            key='error'
-          >
-            <td><MarkError content={t('Unable to decode the block events. {{error}}', { replace: { error: error.message } })} /></td>
-          </tr>
-        )
-        : events?.map((e) => renederEvent(eventClassName, e))
+  useEffect(() => {
+    const filter = async () => {
+      if (!events || !showOnlyUserEvents) {
+        return;
       }
-    </Table>
+
+      for (const event of events) {
+        const { blockHash, record } = event;
+
+        if (!blockHash) {
+          continue;
+        }
+
+        // use cached block info if available
+        let blockData = blockCache.get(blockHash);
+
+        if (!blockData) {
+          const [{ author }, block] = await Promise.all([
+            await api.derive.chain.getHeader(blockHash),
+            await api.rpc.chain.getBlock(blockHash)
+          ]);
+          const extrinsics = block.block.extrinsics;
+
+          blockData = { author, extrinsics };
+          blockCache.set(blockHash, blockData);
+
+          // Evict oldest key
+          if (blockCache.size > MAX_CACHE) {
+            const oldest = blockCache.keys().next().value;
+
+            oldest && blockCache.delete(oldest);
+          }
+        }
+
+        const { author, extrinsics } = blockData;
+
+        if (isEventFromMyAccounts(record, extrinsics, author, allAccounts)) {
+          setFilteredEvents((prev) => {
+            const alreadyExists = (prev ?? []).some((e) => e.key === event.key);
+
+            if (alreadyExists) {
+              return prev;
+            }
+
+            return [event, ...(prev ?? [])];
+          });
+        }
+      }
+    };
+
+    filter().catch(console.error);
+  }, [allAccounts, api.derive.chain, api.rpc.chain, events, showOnlyUserEvents]);
+
+  return (
+    <StyledSection>
+      <Table
+        className={className}
+        empty={emptyLabel || t('No events available')}
+        header={header}
+      >
+        {error
+          ? (
+            <tr
+              className={eventClassName}
+              key='error'
+            >
+              <td><MarkError content={t('Unable to decode the block events. {{error}}', { replace: { error: error.message } })} /></td>
+            </tr>
+          )
+          : (showOnlyUserEvents ? filteredEvents : events)?.map((e) => renederEvent(eventClassName, e))
+        }
+      </Table>
+      {showToggle &&
+        <Toggle
+          label={t('Show my events')}
+          onChange={onToggleUserEvents}
+          value={showOnlyUserEvents}
+        />
+      }
+    </StyledSection>
   );
 }
 
+const StyledSection = styled.section`
+  position: relative;
+
+  .ui--Toggle {
+    position: absolute;
+    top: 1.4rem;
+    right: 1rem;
+    z-index: 999;
+  }
+`;
+
 export default React.memo(Events);

packages/page-explorer/src/Main.tsx

@@ -29,7 +29,10 @@ function Main ({ eventCount, events, headers }: Props): React.ReactElement<Props
           <BlockHeaders headers={headers} />
         </Columar.Column>
         <Columar.Column>
-          <Events events={events} />
+          <Events
+            events={events}
+            showToggle
+          />
         </Columar.Column>
       </Columar>
     </>

packages/react-hooks/src/utils/isEventFromMyAccounts.ts

@@ -0,0 +1,34 @@
+// Copyright 2017-2025 @polkadot/react-hooks authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { GenericExtrinsic, Vec } from '@polkadot/types';
+import type { AccountId, EventRecord } from '@polkadot/types/interfaces';
+import type { AnyTuple } from '@polkadot/types-codec/types';
+
+import { stringToHex } from '@polkadot/util';
+
+export const isEventFromMyAccounts = (newEvent: EventRecord, extrinsics: Vec<GenericExtrinsic<AnyTuple>>, author: AccountId | undefined, allAccounts: string[]) => {
+  const { event, phase } = newEvent;
+
+  // 1. check if any event arg matches one of the accounts
+  const involvesInArgs = event.data.some((args) =>
+    allAccounts.some((account) => args.toString().includes(account) || args.toString().includes(stringToHex(account)))
+  );
+
+  // 2. check if extrinsic signer matches
+  let involvesInSigner = false;
+
+  if (phase.isApplyExtrinsic) {
+    const index = phase.asApplyExtrinsic.toNumber();
+    const ext = extrinsics[index];
+
+    if (ext?.signer) {
+      involvesInSigner = allAccounts.includes(ext.signer.toString());
+    }
+  }
+
+  // 3. check if block author is in user's accounts
+  const involvesInAuthor = author && allAccounts.includes(author.toString());
+
+  return involvesInArgs || involvesInSigner || involvesInAuthor;
+};