feat: add support for todo / canceled toast steps

mrgnlabs · Nov 19, 2023 · c26bb26 · c26bb26
1 parent 19d3832
commit c26bb26
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/common/Toast/MultiStepToast.tsx b/apps/marginfi-v2-ui/src/components/common/Toast/MultiStepToast.tsx
@@ -1,5 +1,6 @@
-import { FC } from "react";
-import { IconLoader, IconCheck, IconAlertTriangle, IconClockHour4 } from "~/components/ui/icons";
+import { IconLoader, IconCheck, IconAlertTriangle } from "~/components/ui/icons";
+
+import { cn } from "~/utils";
 
 export interface MultiStepToastProps {
   title: string;
@@ -17,17 +18,23 @@ export interface ToastStepWithStatus extends ToastStep {
   message?: string;
 }
 
-export const MultiStepToast: FC<MultiStepToastProps> = ({ title, steps }) => {
+export const MultiStepToast = ({ title, steps }: MultiStepToastProps) => {
   return (
     <div className="w-full h-full bg-black text-white rounded-xl shadow-lg z-50">
       <h2 className="text-xl font-medium">{title}</h2>
       <div className="pb-3 pt-6 space-y-2">
         {steps.map((step, index) => {
-          if (step.status === "todo" || step.status === "canceled") return null;
           return (
-            <div key={index}>
+            <div
+              className={cn(
+                "text-gray-400",
+                (step.status === "todo" || step.status === "canceled") && "text-gray-400/50",
+                step.status === "canceled" && "line-through"
+              )}
+              key={index}
+            >
               <div className="flex items-center space-x-2">
-                <h3 className="text-gray-400">
+                <h3>
                   {steps.length > 0 && <>{index + 1}</>}. {step.label}
                 </h3>
                 {step.status === "success" && <IconCheck size={18} className="text-green-400" />}