ApeWorX · fubuloubu · Nov 27, 2023 · Nov 22, 2023 · Nov 22, 2023 · Nov 22, 2023
diff --git a/sdk/js/index.ts b/sdk/js/index.ts
@@ -36,6 +36,7 @@ export class Stream {
   streamId: number;
   token: Address;
   amountPerSecond: bigint;
+  startTime: number;
   publicClient: PublicClient;
   walletClient?: WalletClient;
 
@@ -45,6 +46,7 @@ export class Stream {
     streamId: number,
     token: Address,
     amountPerSecond: bigint,
+    startTime: number,
     publicClient: PublicClient,
     walletClient?: WalletClient,
   ) {
@@ -53,6 +55,7 @@ export class Stream {
     this.streamId = streamId;
     this.token = token;
     this.amountPerSecond = amountPerSecond;
+    this.startTime = startTime;
     this.publicClient = publicClient;
     this.walletClient = walletClient;
   }
@@ -65,6 +68,7 @@ export class Stream {
   ): Promise<Stream> {
     const creator = ("0x" + (log.topics[2] as string).slice(-40)) as Address;
     const streamId = Number(log.topics[3]);
+    const startTime = Number(log.topics[4]);
     const token = ("0x" + (log.topics[1] as string).slice(-40)) as Address;
 
     const streamInfo: StreamInfo = (await publicClient.readContract({
@@ -81,6 +85,7 @@ export class Stream {
       token,
       // amount_per_second can't be changed once the stream has been created
       BigInt(streamInfo.amount_per_second),
+      startTime,
       publicClient,
       walletClient,
     );
@@ -162,13 +167,8 @@ export class Stream {
     });
   }
 
-  async isCancelable(): Promise<boolean> {
-    return (await this.publicClient.readContract({
-      address: this.streamManager.address,
-      abi: StreamManagerContractType.abi as Abi,
-      functionName: "stream_is_cancelable",
-      args: [this.creator, this.streamId],
-    })) as boolean;
+  isCancelable(): boolean {
+    return this.streamManager.MIN_STREAM_LIFE < (Date.now() / 1000) - Number(this.startTime);
   }
 }
 
@@ -279,6 +279,7 @@ export default class StreamManager {
       streamId,
       token,
       amountPerSecond,
+      startTime as number,
       this.publicClient,
       this.walletClient,
     );
@@ -291,6 +292,7 @@ export default class StreamManager {
       log.args.stream_id as number,
       log.args.token,
       BigInt(log.args.amount_per_second),
+      log.args.start_time,
       this.publicClient,
       this.walletClient,
     );

diff --git a/ui/app/index.html b/ui/app/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/x-icon" href="./public/favicon.ico" />
     <title>ApePay</title>
   </head>
   <body>

diff --git a/ui/app/public/favicon.ico b/ui/app/public/favicon.ico
diff --git a/ui/app/src/StreamPage.tsx b/ui/app/src/StreamPage.tsx
@@ -132,19 +132,27 @@ const StreamPage = () => {
               </p>
               <p>
                 <strong>Token: </strong>
-                {String(streamInfo.token)}
+                {streamInfo.token ? String(streamInfo.token) : "fetching..."}
               </p>
               <p>
                 <strong>Creator: </strong>
                 {creator}
               </p>
               <p>
                 <strong>Amount per second: </strong>
-                {String(streamInfo.amountPerSecond)}
+                {streamInfo.amountPerSecond
+                  ? String(streamInfo.amountPerSecond)
+                  : "fetching..."}
               </p>
               <p>
                 <strong>Funded amount: </strong>
-                {String(streamInfo.fundedAmount)}
+                {streamInfo.fundedAmount
+                  ? String(streamInfo.fundedAmount)
+                  : "fetching..."}
+              </p>
+              <p>
+                <strong>Start time: </strong>
+                {new Date(Number(stream.startTime) * 1000).toLocaleString()}
               </p>
             </div>
 
@@ -179,14 +187,15 @@ const StreamPage = () => {
               <div>
                 <CancelStream
                   stream={stream}
+                  streamWording={"Simulation"}
                   onComplete={() => setCancelStatus(!cancelStatus)}
                 />
               </div>
 
               {/* CancelStream callback */}
               {cancelStatus && (
                 <p className="label-close-modal">
-                  -Deployment is being cancelled- Close modal
+                  -Stream is being cancelled- Close modal
                 </p>
               )}
             </div>
@@ -204,7 +213,7 @@ const StreamPage = () => {
               {/* UpdateStream callback */}
               {updateStatus && (
                 <p className="label-close-modal">
-                  -Deployment is being updated- Close modal
+                  -Stream is being updated- Close modal
                 </p>
               )}
             </div>

diff --git a/ui/app/src/styles.css b/ui/app/src/styles.css
@@ -297,3 +297,8 @@ li {
   width: 50%;
   overflow: auto;
 }
+
+.cancel-stream-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
diff --git a/ui/lib/CancelStream.tsx b/ui/lib/CancelStream.tsx
@@ -5,6 +5,7 @@ import { useCurrentTime } from "./utils";
 
 interface CancelStreamProps {
   stream: Stream;
+  streamWording?: string;
   onComplete: () => void;
 }
 
@@ -15,25 +16,20 @@ const CancelStream: React.FC<CancelStreamProps> = (props) => {
   const [inProgress, setInProgress] = useState(false);
   // Get the minimum stream life, before which a stream cannot be Canceled
   const minStreamLife = Number(props.stream.streamManager.MIN_STREAM_LIFE);
-  // Get the starting time of a stream
-  const [startTime, setStartTime] = useState<number>(0);
   // Manage error handling
   const [error, setError] = useState<string | null>(null);
   // currenTime updates every second
   const currentTime = useCurrentTime();
+  // Calculate the time in seconds before a stream can be cancelled
+  const timeBeforeCancellability =
+    Number(props.stream.startTime) + minStreamLife - currentTime;
 
   // Check if the stream is cancellable and set the button state accordingly.
   useEffect(() => {
-    // Check if the stream is cancellable and set the button state accordingly
-    const checkStreamCancelable = async () => {
-      try {
-        const isCancelable = await props.stream.isCancelable();
-        if (isCancelable) {
-          setButtonEnabled(isCancelable);
-          clearInterval(interval);
-        }
-      } catch (error) {
-        console.error("Error checking stream cancellability:", error);
+    const checkStreamCancelable = () => {
+      if (props.stream.isCancelable()) {
+        setButtonEnabled(true);
+        clearInterval(interval);
       }
     };
     checkStreamCancelable;
@@ -62,42 +58,13 @@ const CancelStream: React.FC<CancelStreamProps> = (props) => {
     }
   };
 
-  // Fetch starttime
-  useEffect(() => {
-    const getStartTime = async () => {
-      try {
-        const streamInfo = await props.stream.streamInfo();
-        setStartTime(Number(streamInfo.start_time));
-        if (streamInfo && streamInfo.start_time !== 0n) {
-          clearInterval(interval);
-        }
-      } catch (error) {
-        console.error("Error getting stream token");
-      }
-    };
-    const interval = setInterval(getStartTime, 1000);
-    return () => clearInterval(interval);
-  }, [startTime]);
-
-  // Calculate the time in seconds before a stream can be cancelled
-  const timeBeforeCancellability = Math.max(
-    0,
-    startTime + minStreamLife - currentTime,
-  );
-
   return (
     <div className="stream-container">
-      {minStreamLife === null ? (
-        <div className="cancel-stream-label-loading">
-          Fetching minimum life...
-        </div>
-      ) : !isButtonEnabled &&
-        !inProgress &&
-        startTime !== 0 &&
-        Number(timeBeforeCancellability) !== 0 ? (
+      {!isButtonEnabled && !inProgress && timeBeforeCancellability > 0 ? (
         <>
           <div className="cancel-stream-label-min-life">
-            Deployment cannot be cancelled yet: its minimum life is
+            {props.streamWording || "Stream"} cannot be cancelled yet: its
+            minimum life is
             {formatTime(Number(minStreamLife))}.
           </div>
           <div className="cancel-stream-label-cancel-time">
@@ -118,7 +85,7 @@ const CancelStream: React.FC<CancelStreamProps> = (props) => {
         onClick={handleCancel}
         disabled={!isButtonEnabled}
       >
-        Cancel
+        Cancel {props.streamWording || "Stream"}
       </button>
       <div className="cancel-stream-error"> {error && error}</div>
     </div>

diff --git a/ui/lib/CreateStream.tsx b/ui/lib/CreateStream.tsx
@@ -135,7 +135,6 @@ const CreateStream = (props: CreateStreamProps) => {
     (tokenData?.value || BigInt(0)) / BigInt(props.amountPerSecond),
   );
 
-  // TODO: Increase stability of deployments beyond a week
   const maxTimeDays: number = Math.min(Math.floor(maxTime / SECS_PER_DAY), 7); // Up to a week
   const marks = Object.fromEntries(
     Array.from(Array(maxTimeDays).keys()).map((v: number) => [