Fix/transaction toast success (#1647)

coinbase · Nov 21, 2024 · be6a22e · be6a22e
1 parent 81eb905
commit be6a22e
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 12 deletions.
diff --git a/src/internal/components/Toast.test.tsx b/src/internal/components/Toast.test.tsx
@@ -262,6 +262,46 @@ describe('Toast component', () => {
     vi.useRealTimers();
   });
 
+  it('should reset the timer when re-triggered while already visible', async () => {
+    vi.useFakeTimers();
+    const handleClose = vi.fn();
+    const durationMs = 5000;
+
+    const { rerender } = render(
+      <Toast
+        isVisible={true}
+        position="bottom-right"
+        onClose={handleClose}
+        durationMs={durationMs}
+        startTimeout={false}
+      >
+        <div>Test Child</div>
+      </Toast>,
+    );
+    vi.advanceTimersByTime(2000);
+    expect(handleClose).not.toHaveBeenCalled();
+
+    rerender(
+      <Toast
+        isVisible={true}
+        position="bottom-right"
+        onClose={handleClose}
+        durationMs={durationMs}
+        startTimeout={true}
+      >
+        <div>Updated Child</div>
+      </Toast>,
+    );
+
+    vi.advanceTimersByTime(4000);
+    expect(handleClose).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(2000);
+    expect(handleClose).toHaveBeenCalled();
+
+    vi.useRealTimers();
+  });
+
   it('should not fire timer after manual close', () => {
     vi.useFakeTimers();
     const handleClose = vi.fn();

diff --git a/src/internal/components/Toast.tsx b/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;
@@ -22,7 +23,8 @@ const defaultAnimationByPosition = {
 
 export function Toast({
   className,
-  durationMs = 3000,
+  durationMs = 5000,
+  startTimeout = true,
   position = 'bottom-center',
   animation,
   isVisible,
@@ -33,18 +35,20 @@ export function Toast({
   const animationClass = animation ?? defaultAnimationByPosition[position];
 
   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]);
+      return () => {
+        if (timer) {
+          clearTimeout(timer);
+        }
+      };
+    }
+  }, [durationMs, isVisible, onClose, startTimeout]);
 
   if (!isVisible) {
     return null;

diff --git a/src/transaction/components/TransactionToast.test.tsx b/src/transaction/components/TransactionToast.test.tsx
@@ -16,6 +16,9 @@ describe('TransactionToast', () => {
     (useTransactionContext as Mock).mockReturnValue({
       isLoading: true,
       isToastVisible: true,
+      lifecycleStatus: {
+        statusName: 'test-status',
+      },
     });
 
     render(
@@ -37,6 +40,9 @@ describe('TransactionToast', () => {
       setIsToastVisible: vi.fn(),
       transactionHash: '',
       transactionId: '',
+      lifecycleStatus: {
+        statusName: 'test-status',
+      },
     });
 
     render(<TransactionToast>Test Message</TransactionToast>);
@@ -53,6 +59,9 @@ describe('TransactionToast', () => {
       setIsToastVisible,
       transactionHash: '0x123',
       transactionId: '',
+      lifecycleStatus: {
+        statusName: 'test-status',
+      },
     });
 
     render(<TransactionToast>Test Message</TransactionToast>);
@@ -67,6 +76,9 @@ describe('TransactionToast', () => {
       isToastVisible: true,
       transactionHash: '',
       errorMessage: '',
+      lifecycleStatus: {
+        statusName: 'test-status',
+      },
     });
 
     render(<TransactionToast>Transaction in progress</TransactionToast>);
@@ -81,6 +93,9 @@ describe('TransactionToast', () => {
       isToastVisible: true,
       transactionHash: mockTransactionHash,
       errorMessage: '',
+      lifecycleStatus: {
+        statusName: 'test-status',
+      },
     });
 
     render(<TransactionToast>Transaction completed</TransactionToast>);
@@ -89,12 +104,17 @@ describe('TransactionToast', () => {
   });
 
   it('displays error message when present', () => {
+    const setIsToastVisible = vi.fn();
     const mockErrorMessage = 'Transaction failed';
     (useTransactionContext as Mock).mockReturnValue({
       isLoading: false,
       isToastVisible: true,
       transactionHash: '',
       errorMessage: mockErrorMessage,
+      setIsToastVisible,
+      lifecycleStatus: {
+        statusName: 'test-status',
+      },
     });
 
     render(<TransactionToast>Error occurred</TransactionToast>);
@@ -110,6 +130,9 @@ describe('TransactionToast', () => {
       errorMessage: '',
       receipt: null,
       transactionId: '',
+      lifecycleStatus: {
+        statusName: 'test-status',
+      },
     });
 
     render(<TransactionToast>In Progress</TransactionToast>);
@@ -125,6 +148,9 @@ describe('TransactionToast', () => {
       errorMessage: '',
       receipt: null,
       transactionId: 'test-id',
+      lifecycleStatus: {
+        statusName: 'test-status',
+      },
     });
 
     const { container } = render(
@@ -143,6 +169,9 @@ describe('TransactionToast', () => {
       errorMessage: '',
       receipt: null,
       transactionId: 'test-id',
+      lifecycleStatus: {
+        statusName: 'test-status',
+      },
     });
 
     const { container } = render(
@@ -161,6 +190,9 @@ describe('TransactionToast', () => {
       errorMessage: '',
       receipt: null,
       transactionId: 'test-id',
+      lifecycleStatus: {
+        statusName: 'test-status',
+      },
     });
 
     const { container } = render(
@@ -179,6 +211,9 @@ describe('TransactionToast', () => {
       errorMessage: '',
       receipt: null,
       transactionId: 'test-id',
+      lifecycleStatus: {
+        statusName: 'test-status',
+      },
     });
 
     const { container } = render(<TransactionToast>Test</TransactionToast>);
@@ -197,6 +232,9 @@ describe('TransactionToast', () => {
       errorMessage: '',
       receipt: {},
       setIsToastVisible,
+      lifecycleStatus: {
+        statusName: 'test-status',
+      },
     });
 
     render(<TransactionToast durationMs={2000}>Test</TransactionToast>);
@@ -216,6 +254,9 @@ describe('TransactionToast', () => {
       errorMessage: 'Error',
       receipt: null,
       setIsToastVisible,
+      lifecycleStatus: {
+        statusName: 'test-status',
+      },
     });
 
     render(<TransactionToast durationMs={2000}>Test</TransactionToast>);

diff --git a/src/transaction/components/TransactionToast.tsx b/src/transaction/components/TransactionToast.tsx
@@ -41,6 +41,7 @@ export function TransactionToast({
       durationMs={durationMs}
       isVisible={isToastVisible}
       onClose={closeToast}
+      startTimeout={!!receipt || !!errorMessage}
     >
       {children}
     </Toast>