diff --git a/src/components/primitives/toast/specialized-toasts.tsx b/src/components/primitives/toast/specialized-toasts.tsx index f2bd89a6..b43abcc4 100644 --- a/src/components/primitives/toast/specialized-toasts.tsx +++ b/src/components/primitives/toast/specialized-toasts.tsx @@ -445,19 +445,14 @@ const TransactionToast = memo( className="text-foreground animate-spin min-w-6" /> ) : ( - [ - , - ] + )} {status === "confirming" ? "Confirming" : "Confirmed"} {status === "confirming" && ( -
+
@@ -481,8 +476,10 @@ const TransactionToast = memo( TransactionToast.displayName = "TransactionToast"; // Convenience functions for using with the existing toast system +type ToastPropsToOmit = "safeToClose" | "variant" | "children"; + export const showAchievementToast = ( - props: Omit, + props: Omit, ) => { const toastId = props.toastId || `achievement-${Date.now()}`; return { @@ -494,7 +491,7 @@ export const showAchievementToast = ( }; export const showMarketplaceToast = ( - props: Omit, + props: Omit, ) => { const toastId = props.toastId || `marketplace-${Date.now()}`; return { @@ -506,7 +503,7 @@ export const showMarketplaceToast = ( }; export const showNetworkSwitchToast = ( - props: Omit, + props: Omit, ) => { const toastId = props.toastId || `network-${Date.now()}`; return { @@ -520,7 +517,7 @@ export const showNetworkSwitchToast = ( }; export const showErrorToast = ( - props: Omit, + props: Omit, ) => { const toastId = props.toastId || `error-${Date.now()}`; return { @@ -533,7 +530,7 @@ export const showErrorToast = ( }; export const showSuccessToast = ( - props: Omit, + props: Omit, ) => { const toastId = props.toastId || `success-${Date.now()}`; return { @@ -546,7 +543,7 @@ export const showSuccessToast = ( }; export const showTransactionToast = ( - props: Omit, + props: Omit, ) => { const toastId = props.toastId || `transaction-${Date.now()}`; return { diff --git a/src/components/primitives/toast/toast.tsx b/src/components/primitives/toast/toast.tsx index 814adcb3..6e14d26b 100644 --- a/src/components/primitives/toast/toast.tsx +++ b/src/components/primitives/toast/toast.tsx @@ -58,7 +58,10 @@ export interface ToastProps VariantProps { showClose?: boolean; toastId?: string; + // compatibility with controller events toasterId?: string; + safeToClose?: boolean; + iconUrl?: string; } export const Toast = React.forwardRef( @@ -70,6 +73,8 @@ export const Toast = React.forwardRef( showClose = true, toastId, toasterId, + safeToClose, + iconUrl, ...props }, ref, diff --git a/src/stories/toast-controller-integration.stories.tsx b/src/stories/toast-controller-integration.stories.tsx index 4efffabd..33cb6141 100644 --- a/src/stories/toast-controller-integration.stories.tsx +++ b/src/stories/toast-controller-integration.stories.tsx @@ -50,6 +50,8 @@ function ControllerToasterDemo() { ControllerNotificationTypes[] >([]); const [position, setPosition] = useState("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() { +