chore: bundle error fixes

mrgnlabs · Feb 20, 2025 · 8b64eea · 8b64eea
1 parent 1f8b105
commit 8b64eea
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 22 deletions.
diff --git a/packages/mrgn-toasts/src/components/toasts/multi-step-toast/multi-step-toast.tsx b/packages/mrgn-toasts/src/components/toasts/multi-step-toast/multi-step-toast.tsx
@@ -78,13 +78,7 @@ function StepComponent({
         />
       );
     case "error":
-      return (
-        <ErrorStep
-          label={step.label}
-          message={step.message}
-          onRetry={isLastFailed && step.onRetry ? step.onRetry : undefined}
-        />
-      );
+      return <ErrorStep label={step.label} message={step.message} onRetry={step.onRetry} isLastFailed={isLastFailed} />;
     case "pending":
       return <PendingStep label={step.label} />;
     case "canceled":
@@ -142,15 +136,25 @@ const SuccessStep = ({
   </div>
 );
 
-const ErrorStep = ({ label, message, onRetry }: { label: string; message?: string; onRetry?: () => void }) => (
+const ErrorStep = ({
+  label,
+  message,
+  onRetry,
+  isLastFailed,
+}: {
+  label: string;
+  message?: string;
+  onRetry?: () => void;
+  isLastFailed: boolean;
+}) => (
   <div className="flex flex-col">
     <div className="flex items-center space-x-2">
       <IconX size={16} className="flex-shrink-0 text-mrgn-error" />
       <span>{label}</span>
     </div>
-    <div className="flex space-x-2 w-full px-6">
-      {message && <div className="py-1 text-xs text-muted-foreground">{message}</div>}
-      {onRetry && (
+    <div className="flex items-center space-x-2 w-full px-6">
+      {isLastFailed && message && <div className="py-1 text-xs text-muted-foreground">{message}</div>}
+      {isLastFailed && onRetry && (
         <button
           className="ml-2 w-16 h-max py-2 inline-flex gap-2 items-center justify-center text-[10px] font-medium rounded-md bg-accent text-primary px-2 py-0.5 shadow-sm hover:bg-accent/80 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-600"
           onClick={onRetry}

diff --git a/packages/mrgn-toasts/src/utils/toast-manager.tsx b/packages/mrgn-toasts/src/utils/toast-manager.tsx
@@ -64,7 +64,7 @@ const toastManager = {
     const toastId: string = Math.random().toString(36).substring(2, 9);
 
     // Create MultiStepToastStep objects for each step.
-    const stepsWithStatus: MultiStepToastStep[] = steps.map((step, index) => ({
+    let stepsWithStatus: MultiStepToastStep[] = steps.map((step, index) => ({
       ...step,
       status: index === 0 ? ToastStatus.PENDING : ToastStatus.TODO,
     }));
@@ -143,18 +143,20 @@ const toastManager = {
         setTimeout(() => toast.dismiss(toastId), 5000);
       },
 
-      // Function to set the current step to error.
+      // Function to set all current steps in PENDING state to ERROR.
       // If message && onRetry are provided, the message will be displayed in the toast & the onRetry function will be called.
       setFailed: (message?: string, onRetry?: () => void) => {
-        const currentIndex = stepsWithStatus.findIndex((s) => s.status === ToastStatus.PENDING);
-        if (currentIndex === -1) return;
-
-        stepsWithStatus[currentIndex] = {
-          ...stepsWithStatus[currentIndex],
-          status: ToastStatus.ERROR,
-          message,
-          onRetry,
-        };
+        stepsWithStatus = stepsWithStatus.map((step) => {
+          if (step.status === ToastStatus.PENDING) {
+            return {
+              ...step,
+              status: ToastStatus.ERROR,
+              message,
+              onRetry,
+            };
+          }
+          return step;
+        });
 
         updateToast();
       },