From f7b76026be3d418c2844b228bf98ae05dd6393c3 Mon Sep 17 00:00:00 2001
From: Zach Pomerantz <zzmp@uniswap.org>
Date: Thu, 16 Mar 2023 13:06:32 -0700
Subject: [PATCH] test: add filter to event feed (#554)

* test: add filter to event feed

* fix: pr feedback
---
 src/cosmos/EventFeed.tsx | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/cosmos/EventFeed.tsx b/src/cosmos/EventFeed.tsx
index a1baefc20..bb9dd7546 100644
--- a/src/cosmos/EventFeed.tsx
+++ b/src/cosmos/EventFeed.tsx
@@ -1,5 +1,6 @@
 import { defaultTheme, SwapEventHandlers, TransactionEventHandlers, WidgetEventHandlers } from '@uniswap/widgets'
 import Row from 'components/Row'
+import { useState } from 'react'
 import styled from 'styled-components/macro'
 import * as Type from 'theme/type'
 
@@ -53,6 +54,8 @@ export const HANDLERS: (keyof SwapEventHandlers | keyof TransactionEventHandlers
   'onWrapSend',
 ]
 
+const SHOW_ALL_EVENTS = '(show all events)'
+
 export interface Event {
   name: string
   data: unknown
@@ -64,6 +67,7 @@ export interface EventFeedProps {
 }
 
 export default function EventFeed({ events, onClear }: EventFeedProps) {
+  const [selectedEventType, setSelectedEventType] = useState<string>(SHOW_ALL_EVENTS)
   return (
     <EventFeedWrapper>
       <Row>
@@ -72,15 +76,27 @@ export default function EventFeed({ events, onClear }: EventFeedProps) {
           <Type.Subhead1>clear</Type.Subhead1>
         </button>
       </Row>
+      <Row>
+        <Type.Subhead2>Filter: </Type.Subhead2>
+        <select onChange={(e) => setSelectedEventType(e.target.value)} value={selectedEventType}>
+          <option>{SHOW_ALL_EVENTS}</option>
+          {HANDLERS.map((name) => (
+            // Handlers should never have the same name - using key={name} will enforce that at runtime.
+            <option key={name}>{name}</option>
+          ))}
+        </select>
+      </Row>
       <EventColumn>
-        {events?.map(({ name, data }, i) => (
-          <EventRow key={i}>
-            <Type.Subhead2 margin={0} padding={0}>
-              {name}
-            </Type.Subhead2>
-            <EventData>{JSON.stringify(data, null, 2)}</EventData>
-          </EventRow>
-        ))}
+        {events
+          ?.filter(({ name }) => (selectedEventType === SHOW_ALL_EVENTS ? true : name === selectedEventType))
+          .map(({ name, data }, i) => (
+            <EventRow key={i}>
+              <Type.Subhead2 margin={0} padding={0}>
+                {name}
+              </Type.Subhead2>
+              <EventData>{JSON.stringify(data, null, 2)}</EventData>
+            </EventRow>
+          ))}
       </EventColumn>
     </EventFeedWrapper>
   )