fix types

at least one bug probably

src/App.tsx

···
 import './App.css'
 import '@mui/x-charts-vendor/d3-scale'
 import Relay from './Relay'
-import knownRelays from './knownRelays'
+import knownRelays from './knownRelays.json'
 
 const INTERVAL = 1600;
 const SERIES_LEN = 6;
 const KEEPALIVE = 10 * 60 * 1000;
 
+interface Relay {
+  url: string,
+  desc: string,
+};
+
+interface Counts {
+  [k: string]: number,
+};
+
+interface CountBatch {
+  t: number,
+  dt: number,
+  counts: Counts,
+};
+
+const noopReceiver = (_url: string, _type: string, _event: any) => {};
+
 function App() {
-  const [relays, setRelays] = useState([]);
-  const [receiver, setReceiver] = useState(() => () => null);
-  const [keepalive, setKeepalive] = useState(() => () => null);
-  const [rateBars, setRateBars] = useState({ series: [] });
+  const [relays, setRelays] = useState([] as string[]);
+  const [receiver, setReceiver] = useState(() => noopReceiver);
+  const [keepalive, setKeepalive] = useState(() => () => {});
+  const [rateBars, setRateBars] = useState({ series: [] } as any);
   const [died, setDied] = useState(false);
 
   useEffect(() => {
     let lastChangeover = performance.now();
-    let currentCounts = {};
-    let series = [];
+    let currentCounts: Counts = {};
+    let series: CountBatch[] = [];
     let raf = requestAnimationFrame(update);
     let ttl = setTimeout(die, KEEPALIVE);
 
-    setReceiver(() => (url, type, event) => {
+    setReceiver(() => (url: string, _type: string, _event: any) => {
       if (!currentCounts[url]) currentCounts[url] = 0;
       currentCounts[url] += 1;
     });
···
 
     function update() {
       let now = performance.now();
-      let dt = (now - lastChangeover) / 1000;
       const relays = Object.keys(series.at(-1)?.counts || {}).toSorted();
 
       setRateBars({
···
             .concat(['now']),
           label: 'bucket (seconds ago)',
         }],
-        series: relays.map(r => ({
+        series: relays.map((r: string) => ({
           label: r,
           data: series
             .map(({ dt, counts }) => {
···
     };
 
     return () => {
-      setReceiver(() => () => null);
+      setReceiver(() => noopReceiver);
       setKeepalive(() => () => null);
       clearInterval(nextBlock);
       cancelAnimationFrame(raf);
···
   }, []);
 
 
-  function showRelay(url, show) {
+  function showRelay(url: string, show: boolean) {
     setDied(false);
     if (show) {
-      setRelays(rs => rs.includes(url) ? rs : [...rs, url]);
+      setRelays((rs: string[]) => rs.includes(url) ? rs : [...rs, url]);
     } else {
-      setRelays(rs => rs.includes(url) ? rs.filter(u => u !== url) : rs);
+      setRelays((rs: string[]) => rs.includes(url) ? rs.filter(u => u !== url) : rs);
     }
     keepalive();
   }
···
       <p><em>warning: enabling many relay connections requires a lot of bandwidth</em></p>
 
       <form style={{ display: 'block', textAlign: 'left' }}>
-        {knownRelays.map(({ url, desc }) => (
+        {knownRelays.map(({ url, desc }: Relay) => (
           <p key={url} style={{margin: 0}}>
             <label>
               <input
···
 
       <div style={{ display: 'flex', flexWrap: 'wrap', gap: '2em', textAlign: 'left' }}>
         {relays.map(url => {
-          const { desc } = knownRelays.find(e => e.url === url);
+          const { desc } = knownRelays.find((r: Relay) => r.url === url)!;
           return (
             <div key={url}>
               <Relay
                 url={url}
                 desc={desc}
-                onRecieveEvent={(type, event) => receiver(url, type, event)}
+                onRecieveEvent={(type: string, event: any) => receiver(url, type, event)}
               />
             </div>
           );

src/Relay.tsx

···
 import { Firehose } from '@skyware/firehose';
 import './Relay.css';
 
-type firehoseState = 'connecting' | 'connected' | 'errored' | 'closed';
+type HoseState = 'connecting' | 'connected' | 'errored' | 'closed';
 
-function Relay({ url, desc, onRecieveEvent }) {
-  const [state, setState] = useState('connecting');
+function Relay({ url, desc, onRecieveEvent }: {
+  url: string,
+  desc: string,
+  onRecieveEvent: (type: string, event: any) => void,
+}) {
+  const [state, setState] = useState('connecting' as HoseState);
   const [commits, setCommits] = useState(0);
   const [reconnects, setReconnects] = useState(0);
 
   useEffect(() => {
-    const sendIt = (type, event) => {
+    const sendIt = (type: string, event: any) => {
       onRecieveEvent(type, event);
       setCommits(n => n + 1);
     };
···
     firehose.on('open', () => setState('connected'));
     firehose.on('close', () => setState('closed'));
     firehose.on('reconnect', () => setReconnects(n => n + 1));
-    firehose.on('error', e => console.error('oops', e) || setState('errored'));
+    firehose.on('error', e => {
+      console.error('oops', e);
+      setState('errored');
+    });
     firehose.on('websocketError', () => setState('errored'));
     firehose.on('commit', (ev) => sendIt('commit', ev));
     firehose.on('sync', (ev) => sendIt('sync', ev));

tsconfig.app.json

···
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,