Skip to content

Commit be6a22e

Browse files
authored
Fix/transaction toast success (#1647)
1 parent 81eb905 commit be6a22e

File tree

4 files changed

+98
-12
lines changed

4 files changed

+98
-12
lines changed

src/internal/components/Toast.test.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,46 @@ describe('Toast component', () => {
262262
vi.useRealTimers();
263263
});
264264

265+
it('should reset the timer when re-triggered while already visible', async () => {
266+
vi.useFakeTimers();
267+
const handleClose = vi.fn();
268+
const durationMs = 5000;
269+
270+
const { rerender } = render(
271+
<Toast
272+
isVisible={true}
273+
position="bottom-right"
274+
onClose={handleClose}
275+
durationMs={durationMs}
276+
startTimeout={false}
277+
>
278+
<div>Test Child</div>
279+
</Toast>,
280+
);
281+
vi.advanceTimersByTime(2000);
282+
expect(handleClose).not.toHaveBeenCalled();
283+
284+
rerender(
285+
<Toast
286+
isVisible={true}
287+
position="bottom-right"
288+
onClose={handleClose}
289+
durationMs={durationMs}
290+
startTimeout={true}
291+
>
292+
<div>Updated Child</div>
293+
</Toast>,
294+
);
295+
296+
vi.advanceTimersByTime(4000);
297+
expect(handleClose).not.toHaveBeenCalled();
298+
299+
vi.advanceTimersByTime(2000);
300+
expect(handleClose).toHaveBeenCalled();
301+
302+
vi.useRealTimers();
303+
});
304+
265305
it('should not fire timer after manual close', () => {
266306
vi.useFakeTimers();
267307
const handleClose = vi.fn();

src/internal/components/Toast.tsx

+16-12
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { getToastPosition } from '../utils/getToastPosition';
66
type ToastProps = {
77
className?: string;
88
durationMs?: number;
9+
startTimeout?: boolean;
910
position: 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';
1011
animation?: 'animate-enterRight' | 'animate-enterUp' | 'animate-enterDown';
1112
isVisible: boolean;
@@ -22,7 +23,8 @@ const defaultAnimationByPosition = {
2223

2324
export function Toast({
2425
className,
25-
durationMs = 3000,
26+
durationMs = 5000,
27+
startTimeout = true,
2628
position = 'bottom-center',
2729
animation,
2830
isVisible,
@@ -33,18 +35,20 @@ export function Toast({
3335
const animationClass = animation ?? defaultAnimationByPosition[position];
3436

3537
useEffect(() => {
36-
const timer = setTimeout(() => {
37-
if (isVisible) {
38-
onClose();
39-
}
40-
}, durationMs);
38+
if (startTimeout) {
39+
const timer = setTimeout(() => {
40+
if (isVisible) {
41+
onClose();
42+
}
43+
}, durationMs);
4144

42-
return () => {
43-
if (timer) {
44-
clearTimeout(timer);
45-
}
46-
};
47-
}, [durationMs, isVisible, onClose]);
45+
return () => {
46+
if (timer) {
47+
clearTimeout(timer);
48+
}
49+
};
50+
}
51+
}, [durationMs, isVisible, onClose, startTimeout]);
4852

4953
if (!isVisible) {
5054
return null;

src/transaction/components/TransactionToast.test.tsx

+41
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ describe('TransactionToast', () => {
1616
(useTransactionContext as Mock).mockReturnValue({
1717
isLoading: true,
1818
isToastVisible: true,
19+
lifecycleStatus: {
20+
statusName: 'test-status',
21+
},
1922
});
2023

2124
render(
@@ -37,6 +40,9 @@ describe('TransactionToast', () => {
3740
setIsToastVisible: vi.fn(),
3841
transactionHash: '',
3942
transactionId: '',
43+
lifecycleStatus: {
44+
statusName: 'test-status',
45+
},
4046
});
4147

4248
render(<TransactionToast>Test Message</TransactionToast>);
@@ -53,6 +59,9 @@ describe('TransactionToast', () => {
5359
setIsToastVisible,
5460
transactionHash: '0x123',
5561
transactionId: '',
62+
lifecycleStatus: {
63+
statusName: 'test-status',
64+
},
5665
});
5766

5867
render(<TransactionToast>Test Message</TransactionToast>);
@@ -67,6 +76,9 @@ describe('TransactionToast', () => {
6776
isToastVisible: true,
6877
transactionHash: '',
6978
errorMessage: '',
79+
lifecycleStatus: {
80+
statusName: 'test-status',
81+
},
7082
});
7183

7284
render(<TransactionToast>Transaction in progress</TransactionToast>);
@@ -81,6 +93,9 @@ describe('TransactionToast', () => {
8193
isToastVisible: true,
8294
transactionHash: mockTransactionHash,
8395
errorMessage: '',
96+
lifecycleStatus: {
97+
statusName: 'test-status',
98+
},
8499
});
85100

86101
render(<TransactionToast>Transaction completed</TransactionToast>);
@@ -89,12 +104,17 @@ describe('TransactionToast', () => {
89104
});
90105

91106
it('displays error message when present', () => {
107+
const setIsToastVisible = vi.fn();
92108
const mockErrorMessage = 'Transaction failed';
93109
(useTransactionContext as Mock).mockReturnValue({
94110
isLoading: false,
95111
isToastVisible: true,
96112
transactionHash: '',
97113
errorMessage: mockErrorMessage,
114+
setIsToastVisible,
115+
lifecycleStatus: {
116+
statusName: 'test-status',
117+
},
98118
});
99119

100120
render(<TransactionToast>Error occurred</TransactionToast>);
@@ -110,6 +130,9 @@ describe('TransactionToast', () => {
110130
errorMessage: '',
111131
receipt: null,
112132
transactionId: '',
133+
lifecycleStatus: {
134+
statusName: 'test-status',
135+
},
113136
});
114137

115138
render(<TransactionToast>In Progress</TransactionToast>);
@@ -125,6 +148,9 @@ describe('TransactionToast', () => {
125148
errorMessage: '',
126149
receipt: null,
127150
transactionId: 'test-id',
151+
lifecycleStatus: {
152+
statusName: 'test-status',
153+
},
128154
});
129155

130156
const { container } = render(
@@ -143,6 +169,9 @@ describe('TransactionToast', () => {
143169
errorMessage: '',
144170
receipt: null,
145171
transactionId: 'test-id',
172+
lifecycleStatus: {
173+
statusName: 'test-status',
174+
},
146175
});
147176

148177
const { container } = render(
@@ -161,6 +190,9 @@ describe('TransactionToast', () => {
161190
errorMessage: '',
162191
receipt: null,
163192
transactionId: 'test-id',
193+
lifecycleStatus: {
194+
statusName: 'test-status',
195+
},
164196
});
165197

166198
const { container } = render(
@@ -179,6 +211,9 @@ describe('TransactionToast', () => {
179211
errorMessage: '',
180212
receipt: null,
181213
transactionId: 'test-id',
214+
lifecycleStatus: {
215+
statusName: 'test-status',
216+
},
182217
});
183218

184219
const { container } = render(<TransactionToast>Test</TransactionToast>);
@@ -197,6 +232,9 @@ describe('TransactionToast', () => {
197232
errorMessage: '',
198233
receipt: {},
199234
setIsToastVisible,
235+
lifecycleStatus: {
236+
statusName: 'test-status',
237+
},
200238
});
201239

202240
render(<TransactionToast durationMs={2000}>Test</TransactionToast>);
@@ -216,6 +254,9 @@ describe('TransactionToast', () => {
216254
errorMessage: 'Error',
217255
receipt: null,
218256
setIsToastVisible,
257+
lifecycleStatus: {
258+
statusName: 'test-status',
259+
},
219260
});
220261

221262
render(<TransactionToast durationMs={2000}>Test</TransactionToast>);

src/transaction/components/TransactionToast.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export function TransactionToast({
4141
durationMs={durationMs}
4242
isVisible={isToastVisible}
4343
onClose={closeToast}
44+
startTimeout={!!receipt || !!errorMessage}
4445
>
4546
{children}
4647
</Toast>

0 commit comments

Comments
 (0)