Make logs subscribe work across multiple nets

src/main/main.ts

@@ -82,7 +82,7 @@ ipcMain.on(
           await subscribeTransactionLogs(event, msg);
           break;
         case 'unsubscribe-transaction-logs':
-          await unsubscribeTransactionLogs();
+          await unsubscribeTransactionLogs(event, msg);
           break;
         default:
       }

src/main/transactionLogs.ts

@@ -1,28 +1,31 @@
 import * as sol from '@solana/web3.js';
 import Electron from 'electron';
+import { LogSubscriptionMap } from 'types/types';
 import { netToURL } from '../common/strings';
-import { logger } from './logger';
 
-let sub: any = {};
+const logSubscriptions: LogSubscriptionMap = {};
 const subscribeTransactionLogs = async (
   event: Electron.IpcMainEvent,
   msg: any
 ) => {
   const solConn = new sol.Connection(netToURL(msg.net));
-  sub = { solConn };
-  sub.subscriptionID = solConn.onLogs(
+  const subscriptionID = solConn.onLogs(
     'all',
     (logsInfo) => {
-      logger.info('logs', logsInfo);
       event.reply('transaction-logs', logsInfo);
     },
     'processed'
   );
+  logSubscriptions[msg.net] = { subscriptionID, solConn };
 };
 
-const unsubscribeTransactionLogs = async () => {
-  await sub.solConn.removeProgramAccountChangeListener(sub.subscriptionID);
-  sub.subscriptionID = 0;
+const unsubscribeTransactionLogs = async (
+  _event: Electron.IpcMainEvent,
+  msg: any
+) => {
+  const sub = logSubscriptions[msg.net];
+  await sub.solConn.removeOnLogsListener(sub.subscriptionID);
+  delete logSubscriptions[msg.net];
 };
 
 export { unsubscribeTransactionLogs, subscribeTransactionLogs };

src/renderer/components/LogView.tsx

@@ -1,37 +1,47 @@
 import { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-import { Net } from 'types/types';
+import { useSelector } from 'react-redux';
+import { RootState } from 'renderer/slices/mainSlice';
 
 const LogView = () => {
-  const [logs, setLogs] = useState('');
+  const [logs, setLogs] = useState<string[]>([]);
+  const validator = useSelector((state: RootState) => state.validator);
+  const { net } = validator;
 
   useEffect(() => {
     const listener = (logsResp: any) => {
-      console.log(logsResp);
       ReactDOM.unstable_batchedUpdates(() => {
-        setLogs(
-          (prevLogs: string) => `${prevLogs}\n${logsResp.logs.join('\n')}`
-        );
+        setLogs((prevLogs: string[]) => {
+          const newLogs = [...logsResp.logs.reverse(), ...prevLogs];
+
+          // utter pseudo-science -- determine max log lines from window size
+          const MAX_DISPLAYED_LOG_LINES = window.innerHeight / 22;
+          if (newLogs.length > MAX_DISPLAYED_LOG_LINES) {
+            return newLogs.slice(0, MAX_DISPLAYED_LOG_LINES);
+          }
+          return newLogs;
+        });
       });
     };
+    setLogs([]);
     window.electron.ipcRenderer.on('transaction-logs', listener);
     window.electron.ipcRenderer.subscribeTransactionLogs({
-      net: Net.Localhost,
+      net,
     });
 
     return () => {
-      window.electron.ipcRenderer.removeListener('transaction-logs', listener);
+      window.electron.ipcRenderer.removeAllListeners('transaction-logs');
       window.electron.ipcRenderer.unsubscribeTransactionLogs({
-        net: Net.Localhost,
+        net,
       });
     };
-  }, []);
+  }, [net]);
 
   return (
     <div>
-      {logs !== '' ? (
+      {logs.length > 0 ? (
         <pre>
-          <code>{logs}</code>
+          <code>{logs.join('\n')}</code>
         </pre>
       ) : (
         <p className="text-secondary">

src/renderer/nav/Accounts.tsx

@@ -216,7 +216,7 @@ const Accounts = () => {
                   dispatch(accountsActions.setSelected(''));
                 }}
               >
-                <small>Live</small>
+                <small>Logs</small>
               </li>
             </ul>
           </div>

src/types/types.tsx

@@ -120,6 +120,13 @@ export interface ChangeSubscriptionMap {
   };
 }
 
+export interface LogSubscriptionMap {
+  [net: string]: {
+    subscriptionID: number;
+    solConn: sol.Connection;
+  };
+}
+
 export interface ImportedAccountMap {
   [pubKey: string]: boolean;
 }