explicit timeout starter prop

Author: brendan-defi

src/internal/components/Toast.test.tsx

@@ -273,6 +273,7 @@ describe('Toast component', () => {
         position="bottom-right"
         onClose={handleClose}
         durationMs={durationMs}
+        startTimeout={false}
       >
         <div>Test Child</div>
       </Toast>,
@@ -286,6 +287,7 @@ describe('Toast component', () => {
         position="bottom-right"
         onClose={handleClose}
         durationMs={durationMs}
+        startTimeout={true}
       >
         <div>Updated Child</div>
       </Toast>,

src/internal/components/Toast.tsx

@@ -6,6 +6,7 @@ import { getToastPosition } from '../utils/getToastPosition';
 type ToastProps = {
   className?: string;
   durationMs?: number;
+  startTimeout?: boolean;
   position: 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';
   animation?: 'animate-enterRight' | 'animate-enterUp' | 'animate-enterDown';
   isVisible: boolean;
@@ -23,6 +24,7 @@ const defaultAnimationByPosition = {
 export function Toast({
   className,
   durationMs = 5000,
+  startTimeout = true,
   position = 'bottom-center',
   animation,
   isVisible,
@@ -32,20 +34,21 @@ export function Toast({
   const positionClass = getToastPosition(position);
   const animationClass = animation ?? defaultAnimationByPosition[position];
 
-  /* biome-ignore lint/correctness/useExhaustiveDependencies: retrigger durationMs on updates to children  */
   useEffect(() => {
-    const timer = setTimeout(() => {
-      if (isVisible) {
-        onClose();
-      }
-    }, durationMs);
+    if (startTimeout) {
+      const timer = setTimeout(() => {
+        if (isVisible) {
+          onClose();
+        }
+      }, durationMs);
 
-    return () => {
-      if (timer) {
-        clearTimeout(timer);
-      }
-    };
-  }, [durationMs, isVisible, onClose, children]);
+      return () => {
+        if (timer) {
+          clearTimeout(timer);
+        }
+      };
+    }
+  }, [durationMs, isVisible, onClose, startTimeout]);
 
   if (!isVisible) {
     return null;

src/transaction/components/TransactionToast.tsx

@@ -1,10 +1,4 @@
-import {
-  Children,
-  cloneElement,
-  isValidElement,
-  useCallback,
-  useEffect,
-} from 'react';
+import { useCallback } from 'react';
 import { Toast } from '../../internal/components/Toast';
 import type { TransactionToastReact } from '../types';
 import { useTransactionContext } from './TransactionProvider';
@@ -23,7 +17,6 @@ export function TransactionToast({
     setIsToastVisible,
     transactionHash,
     transactionId,
-    lifecycleStatus,
   } = useTransactionContext();
 
   const closeToast = useCallback(() => {
@@ -37,12 +30,6 @@ export function TransactionToast({
     !errorMessage &&
     !transactionId;
 
-  useEffect(() => {
-    if (receipt || errorMessage) {
-      setIsToastVisible(true);
-    }
-  }, [receipt, errorMessage, setIsToastVisible]);
-
   if (!isToastVisible || isInProgress) {
     return null;
   }
@@ -54,13 +41,9 @@ export function TransactionToast({
       durationMs={durationMs}
       isVisible={isToastVisible}
       onClose={closeToast}
+      startTimeout={!!receipt || !!errorMessage}
     >
-      {Children.map(children, (child) => {
-        if (isValidElement(child)) {
-          return cloneElement(child, { key: lifecycleStatus.statusName });
-        }
-        return child;
-      })}
+      {children}
     </Toast>
   );
 }