fix: fixed toast render errors

src/components/primitives/toast/specialized-toasts.tsx

@@ -445,19 +445,14 @@ const TransactionToast = memo<TransactionToastProps>(
                   className="text-foreground animate-spin min-w-6"
                 />
               ) : (
-                [
-                  <CheckIcon
-                    size="default"
-                    className="text-foreground min-w-6"
-                  />,
-                ]
+                <CheckIcon size="default" className="text-foreground min-w-6" />
               )}
             </div>
             <span className="text-foreground text-sm font-normal leading-5 tracking-[0.01em] truncate">
               {status === "confirming" ? "Confirming" : "Confirmed"}
             </span>
             {status === "confirming" && (
-              <div className="flex items-center px-2 py-1 bg-translucent-dark-100 rounded-[2px] ml-2 flex-shrink-0">
+              <div className="flex items-center py-1 bg-translucent-dark-100 rounded-[2px] flex-shrink-0">
                 <div className="w-4 h-4 mr-1 flex items-center justify-center">
                   <TransactionIcon className="w-[11px] h-[9px] text-achievement" />
                 </div>
@@ -481,8 +476,10 @@ const TransactionToast = memo<TransactionToastProps>(
 TransactionToast.displayName = "TransactionToast";
 
 // Convenience functions for using with the existing toast system
+type ToastPropsToOmit = "safeToClose" | "variant" | "children";
+
 export const showAchievementToast = (
-  props: Omit<AchievementToastProps, "variant" | "children">,
+  props: Omit<AchievementToastProps, ToastPropsToOmit>,
 ) => {
   const toastId = props.toastId || `achievement-${Date.now()}`;
   return {
@@ -494,7 +491,7 @@ export const showAchievementToast = (
 };
 
 export const showMarketplaceToast = (
-  props: Omit<MarketplaceToastProps, "variant" | "children">,
+  props: Omit<MarketplaceToastProps, ToastPropsToOmit>,
 ) => {
   const toastId = props.toastId || `marketplace-${Date.now()}`;
   return {
@@ -506,7 +503,7 @@ export const showMarketplaceToast = (
 };
 
 export const showNetworkSwitchToast = (
-  props: Omit<NetworkSwitchToastProps, "variant" | "children">,
+  props: Omit<NetworkSwitchToastProps, ToastPropsToOmit>,
 ) => {
   const toastId = props.toastId || `network-${Date.now()}`;
   return {
@@ -520,7 +517,7 @@ export const showNetworkSwitchToast = (
 };
 
 export const showErrorToast = (
-  props: Omit<ErrorToastProps, "variant" | "children">,
+  props: Omit<ErrorToastProps, ToastPropsToOmit>,
 ) => {
   const toastId = props.toastId || `error-${Date.now()}`;
   return {
@@ -533,7 +530,7 @@ export const showErrorToast = (
 };
 
 export const showSuccessToast = (
-  props: Omit<SuccessToastProps, "variant" | "children">,
+  props: Omit<SuccessToastProps, ToastPropsToOmit>,
 ) => {
   const toastId = props.toastId || `success-${Date.now()}`;
   return {
@@ -546,7 +543,7 @@ export const showSuccessToast = (
 };
 
 export const showTransactionToast = (
-  props: Omit<TransactionToastProps, "variant" | "children">,
+  props: Omit<TransactionToastProps, ToastPropsToOmit>,
 ) => {
   const toastId = props.toastId || `transaction-${Date.now()}`;
   return {

src/components/primitives/toast/toast.tsx

@@ -58,7 +58,10 @@ export interface ToastProps
     VariantProps<typeof toastVariants> {
   showClose?: boolean;
   toastId?: string;
+  // compatibility with controller events
   toasterId?: string;
+  safeToClose?: boolean;
+  iconUrl?: string;
 }
 
 export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
@@ -70,6 +73,8 @@ export const Toast = React.forwardRef<HTMLDivElement, ToastProps>(
       showClose = true,
       toastId,
       toasterId,
+      safeToClose,
+      iconUrl,
       ...props
     },
     ref,

src/stories/toast-controller-integration.stories.tsx

@@ -50,6 +50,8 @@ function ControllerToasterDemo() {
     ControllerNotificationTypes[]
   >([]);
   const [position, setPosition] = useState<ToastPosition>("bottom-right");
+  const [txCount, setTxCount] = useState(1);
+  const [txConfirming, setTxConfirming] = useState(false);
 
   // Debounced toast function to prevent multiple rapid clicks
   const showToastWithDebounce = useCallback(
@@ -109,23 +111,39 @@ function ControllerToasterDemo() {
     const options: TransactionToastOptions = {
       variant: "transaction",
       status: "confirming",
-      toastId: "0x1234", // transaction hash
+      toastId: `tx-${txCount}`,
       label: "Purchase",
       progress: 50,
       duration: 5000,
+      safeToClose: false,
     };
     emitControllerToast("transactionConfirming", options);
+    setTxConfirming(true);
   };
 
   const showTransactionConfirmed = () => {
     const options: TransactionToastOptions = {
       variant: "transaction",
       status: "confirmed",
-      toastId: "0x1234", // transaction hash
+      toastId: `tx-${txCount}`,
       progress: 50,
       duration: 5000,
     };
     emitControllerToast("transactionConfirmed", options);
+    setTxConfirming(false);
+    setTxCount((prev) => prev + 1);
+  };
+
+  const showTransactionError = () => {
+    const options: ErrorToastOptions = {
+      variant: "error",
+      message: "Transaction execution failed",
+      toastId: `tx-${txCount}`,
+      duration: 5000,
+    };
+    emitControllerToast("transactionError", options);
+    setTxConfirming(false);
+    setTxCount((prev) => prev + 1);
   };
 
   const showSwitchToStarknet = () => {
@@ -202,6 +220,7 @@ function ControllerToasterDemo() {
       isDraft: true,
       progress: 50,
       duration: 5000,
+      iconUrl: "",
     };
     emitControllerToast("achievementDraft", options);
   };
@@ -214,6 +233,7 @@ function ControllerToasterDemo() {
       xpAmount: 100,
       progress: 100,
       duration: 5000,
+      iconUrl: "",
     };
     emitControllerToast("achievement", options);
   };
@@ -286,20 +306,29 @@ function ControllerToasterDemo() {
           <Button
             onClick={showTransactionConfirming}
             className="w-full"
-            disabled={isLoading.transactionConfirming}
+            disabled={isLoading.transactionConfirming || txConfirming}
           >
             {isLoading.transactionConfirming
               ? "Loading..."
-              : "Transaction Confirming"}
+              : `Confirm TX${txCount}...`}
           </Button>
           <Button
             onClick={showTransactionConfirmed}
             className="w-full"
-            disabled={isLoading.transactionConfirmed}
+            disabled={isLoading.transactionConfirmed || !txConfirming}
           >
             {isLoading.transactionConfirmed
               ? "Loading..."
-              : "Transaction Confirmed"}
+              : `...TX${txCount} confirmed`}
+          </Button>
+          <Button
+            onClick={showTransactionError}
+            className="w-full"
+            disabled={isLoading.transactionError || !txConfirming}
+          >
+            {isLoading.transactionError
+              ? "Loading..."
+              : `...TX${txCount} error`}
           </Button>
           <Button
             onClick={showSwitchToStarknet}