fix onstreamcreate

sdk/js/index.ts

@@ -2,7 +2,6 @@ import {
   Abi,
   Address,
   ByteArray,
-  Log,
   PublicClient,
   stringToHex,
   WalletClient,
@@ -19,6 +18,29 @@ export interface StreamInfo {
   reason: ByteArray;
 }
 
+interface LogArgs {
+  token: string;
+  creator: string;
+  stream_id: number;
+  amount_per_second: number;
+  start_time: number;
+  reason: string;
+}
+
+interface Log {
+  address: string;
+  topics: string[];
+  data: string;
+  blockNumber: number;
+  transactionHash: string;
+  transactionIndex: number;
+  blockHash: string;
+  logIndex: number;
+  removed: boolean;
+  args: LogArgs;
+  eventName: string;
+}
+
 export class Stream {
   streamManager: StreamManager;
   creator: Address;
@@ -272,32 +294,34 @@ export default class StreamManager {
   }
 
   onStreamCreated(
-    handleStream: (stream: Stream) => null,
+    handleStream: (stream: Stream) => void,
     creator?: Address
   ): void {
-    const onLogs = (logs: Log[]) => {
-      logs
-        .map(
-          // Log is StreamCreated
-          (log: Log) =>
-            new Stream(
-              this,
-              log.topics[2] as Address, // creator
-              Number(log.topics[3]), // streamId
-              log.topics[4] as Address, // token
-              BigInt(log.topics[5] as string), //amount per second
-              this.publicClient,
-              this.walletClient
+    try {
+      this.publicClient.watchContractEvent({
+        address: this.address,
+        abi: StreamManagerContractType.abi as Abi,
+        eventName: "StreamCreated",
+        args: creator ? { creator } : {},
+        onLogs: (logs: Log[]) => {
+          logs
+            .map(
+              (log) =>
+                new Stream(
+                  this,
+                  log.args.creator as `0x${string}`,
+                  log.args.stream_id,
+                  log.args.token as `0x${string}`,
+                  BigInt(log.args.amount_per_second),
+                  this.publicClient,
+                  this.walletClient
+                )
             )
-        )
-        .forEach(handleStream);
-    };
-    this.publicClient.watchContractEvent({
-      address: this.address,
-      abi: StreamManagerContractType.abi as Abi,
-      eventName: "StreamCreated",
-      args: creator ? { creator } : {},
-      onLogs,
-    });
+            .forEach(handleStream);
+        },
+      });
+    } catch (error) {
+      console.error("Exception thrown while watching contract event:", error);
+    }
   }
 }

ui/app/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { TokenInfo } from "@uniswap/token-lists";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import config from "./config";
@@ -9,7 +9,13 @@ import CreateStream from "lib/CreateStream";
 import StreamStatus from "lib/StreamStatus";
 import CancelStream from "lib/CancelStream";
 import UpdateStream from "lib/UpdateStream";
-import { Stream } from "sdk/js/index";
+import StreamManager, { Stream } from "sdk/js/index";
+import {
+  usePublicClient,
+  useWalletClient,
+  WalletClient,
+  useAccount,
+} from "wagmi";
 
 function App() {
   const tokenList: TokenInfo[] = config.tokens;
@@ -61,8 +67,50 @@ function App() {
     return Math.random().toString(36).substring(7);
   };
 
-  // Get stream from CreateStream to pass it as props
+  const publicClient = usePublicClient();
+  const walletClient = useWalletClient()?.data;
+  const { address } = useAccount();
+
   const [stream, setStream] = useState<Stream | null>(null);
+  const [SM, setSM] = useState<StreamManager | null>(null);
+  const [createdStreams, setCreatedStreams] = useState<Stream[]>([]);
+
+  // Manage callback from onstreamcreate
+  const handleStreams = (newStream: Stream) => {
+      setCreatedStreams((prevStreams) => [...prevStreams, newStream]);
+  };
+
+  // Fetch the StreamManager and its streams
+  useEffect(() => {
+    const fetchStreamManager = async () => {
+      if (SM === null) {
+        try {
+          const newSM = await StreamManager.fromAddress(
+            config.streamManagerAddress as `0x${string}`,
+            publicClient,
+            walletClient as WalletClient
+          );
+          setSM(newSM);
+        } catch (error) {
+          console.error("Stream Manager Error:", error);
+        }
+      }
+    };
+    fetchStreamManager();
+
+    // Fetch create streams when SM has been fetched
+    const interval: NodeJS.Timeout = setInterval(() => {
+      if (SM != null && createdStreams.length === 0) {
+        SM.onStreamCreated(handleStreams, address);
+      }
+    }, 3000);
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [SM, createdStreams, handleStreams, address]);
 
   return (
     <>
@@ -121,20 +169,20 @@ function App() {
           <option value="pie">Pie Chart</option>
         </select>
 
-        {stream && (
+        {createdStreams.length > 0 && (
           <StreamStatus
-            stream={stream}
+            stream={createdStreams.slice(-1)[0]}
             chartType={chartType}
             background="#110036"
             color="#B40C4C"
           />
         )}
       </div>
-      {stream && (
+      {createdStreams.length > 0 && (
         <>
           <div>
             <CancelStream
-              stream={stream}
+              stream={createdStreams.slice(-1)[0]}
               onComplete={() => setCancelStatus(!cancelStatus)}
             />
           </div>
@@ -147,11 +195,11 @@ function App() {
           )}
         </>
       )}
-      {stream && (
+      {createdStreams.length > 0 && (
         <>
           <div>
             <UpdateStream
-              stream={stream}
+              stream={createdStreams.slice(-1)[0]}
               onComplete={() => setUpdateStatus(!updateStatus)}
             />
           </div>

ui/lib/CreateStream.tsx

@@ -166,6 +166,7 @@ const CreateStream = (props: CreateStreamProps) => {
     args: [SM?.address, selectedTime * Number(props.amountPerSecond)],
   });
 
+
   const {
     data,
     isLoading,