@b3dotfun/sdk 0.1.69-alpha.6 → 0.1.69-alpha.7

package/dist/cjs/anyspend/react/components/common/OrderDetails.js

@@ -140,6 +140,11 @@ function roundTokenAmount(amount) {
 exports.OrderDetails = (0, react_5.memo)(function OrderDetails({ mode = "modal", order, depositTxs, relayTxs, executeTx, refundTxs, cryptoPaymentMethod, selectedCryptoPaymentMethod, onPaymentMethodChange, onBack, disableUrlParamManagement = false, points, returnToHomeUrl, returnHomeLabel, classes, }) {
     const router = (0, hooks_1.useRouter)();
     const searchParams = (0, hooks_1.useSearchParams)();
+    const { setHeaderMode } = (0, react_1.useToastContext)();
+    (0, react_5.useEffect)(() => {
+        setHeaderMode(true);
+        return () => setHeaderMode(false);
+    }, [setHeaderMode]);
     // Get theme from B3Provider context
     const { theme } = (0, react_1.useB3Config)();
     const colorMode = theme || "light";

package/dist/cjs/anyspend/react/components/common/OrderStatus.js

@@ -5,7 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const anyspend_1 = require("../../../../anyspend");
 const react_1 = require("../../../../shared/react");
 const lucide_react_1 = require("lucide-react");
-const react_2 = require("react");
+const react_2 = require("../../../../global-account/react");
+const react_3 = require("react");
 const AnySpendCustomizationContext_1 = require("../context/AnySpendCustomizationContext");
 const AnimatedCheckmark_1 = require("../icons/AnimatedCheckmark");
 const StepProgress_1 = require("./StepProgress");
@@ -17,15 +18,28 @@ function getStepIndex(status) {
         return 1;
     return -1;
 }
-exports.OrderStatus = (0, react_2.memo)(function OrderStatus({ order, selectedCryptoPaymentMethod, }) {
+function getToastIcon(type) {
+    const iconClass = "h-5 w-5";
+    switch (type) {
+        case "success":
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle, { className: `${iconClass} text-green-500` });
+        case "error":
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { className: `${iconClass} text-red-500` });
+        case "info":
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: `${iconClass} text-blue-500` });
+        case "warning":
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { className: `${iconClass} text-amber-500` });
+    }
+}
+exports.OrderStatus = (0, react_3.memo)(function OrderStatus({ order, selectedCryptoPaymentMethod, }) {
     const { text: defaultText, description: defaultDescription } = (0, anyspend_1.getStatusDisplay)(order);
     const { content, slots } = (0, AnySpendCustomizationContext_1.useAnySpendCustomization)();
     const searchParams = (0, react_1.useSearchParams)();
     const cryptoPaymentMethod = selectedCryptoPaymentMethod || searchParams.get("cryptoPaymentMethod");
     const currentStepIndex = getStepIndex(order.status);
-    const prevStepIndexRef = (0, react_2.useRef)(currentStepIndex);
+    const prevStepIndexRef = (0, react_3.useRef)(currentStepIndex);
     const shouldAnimateCheck = currentStepIndex > prevStepIndexRef.current;
-    (0, react_2.useEffect)(() => {
+    (0, react_3.useEffect)(() => {
         prevStepIndexRef.current = currentStepIndex;
     }, [currentStepIndex]);
     // Resolve content overrides based on order status
@@ -61,9 +75,26 @@ exports.OrderStatus = (0, react_2.memo)(function OrderStatus({ order, selectedCr
         if (content.processingDescription)
             description = content.processingDescription;
     }
+    const { latestToast } = (0, react_2.useToastContext)();
+    // Override subtitle with toast notification when present (title stays unchanged)
+    let notificationIcon = undefined;
+    if (latestToast && currentStepIndex >= 0) {
+        description = latestToast.message;
+        notificationIcon = getToastIcon(latestToast.type);
+    }
     const paymentSteps = [
-        { id: 1, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
-        { id: 2, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
+        {
+            id: 1,
+            title: text,
+            description: typeof description === "string" ? description : defaultDescription || "",
+            icon: notificationIcon,
+        },
+        {
+            id: 2,
+            title: text,
+            description: typeof description === "string" ? description : defaultDescription || "",
+            icon: notificationIcon,
+        },
     ];
     if (currentStepIndex === 0) {
         if (!(order.status === "scanning_deposit_transaction" && cryptoPaymentMethod === "transfer_crypto")) {

package/dist/cjs/anyspend/react/components/common/StepProgress.d.ts

@@ -1,7 +1,9 @@
+import React from "react";
 export interface Step {
     id: string | number;
     title: string;
     description?: string;
+    icon?: React.ReactNode;
 }
 export interface StepProgressProps {
     steps: Step[];

package/dist/cjs/anyspend/react/components/common/StepProgress.js

@@ -1,17 +1,22 @@
 "use strict";
 "use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepProgress = StepProgress;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const framer_motion_1 = require("framer-motion");
+const react_2 = require("torph/react");
 const AnimatedCheckmark_1 = require("../icons/AnimatedCheckmark");
 function StepProgress({ steps, currentStepIndex, className = "", animateCompletedSteps = true, }) {
     const currentStep = steps[currentStepIndex];
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex w-full flex-col items-center gap-4 ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: steps.map((_, index) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center", children: index < currentStepIndex ? (
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex w-full flex-col items-center gap-4 ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center gap-2", children: steps.map((_, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center", children: index < currentStepIndex ? (
                             // Completed step - checkmark replaces the whole circle
                             (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.2 }, children: (0, jsx_runtime_1.jsx)(AnimatedCheckmark_1.AnimatedCheckmark, { className: "h-10 w-10", strokeWidth: 2.5, static: !animateCompletedSteps }) })) : ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.2 }, className: `border-as-border-secondary relative flex h-10 w-10 items-center justify-center rounded-full border-[3px]`, children: index === currentStepIndex ? (
                                 // Current step - show spinning border and step number
                                 (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "border-t-as-primary absolute -inset-0.5 animate-spin rounded-full border-[3px] border-transparent" }), (0, jsx_runtime_1.jsx)("span", { className: "text-as-primary font-semibold", children: index + 1 })] })) : (
                                 // Future step - show step number with disabled styling
-                                (0, jsx_runtime_1.jsx)("span", { className: "text-as-content-disabled font-semibold", children: index + 1 })) })) }, index), index < steps.length - 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex w-8 items-center justify-center gap-1", children: Array.from({ length: 6 }).map((_, dotIndex) => ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-primary/30 h-[2px] w-[2px] rounded-full" }, dotIndex))) }))] }))) }), currentStep && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: currentStep.title }), currentStep.description && (0, jsx_runtime_1.jsx)("p", { className: "text-as-tertiary mt-1 text-sm", children: currentStep.description })] }))] }));
+                                (0, jsx_runtime_1.jsx)("span", { className: "text-as-content-disabled font-semibold", children: index + 1 })) })) }), index < steps.length - 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex w-8 items-center justify-center gap-1", children: Array.from({ length: 6 }).map((_, dotIndex) => ((0, jsx_runtime_1.jsx)("div", { className: "bg-as-primary/30 h-[2px] w-[2px] rounded-full" }, dotIndex))) }))] }, index))) }), currentStep && ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, className: "text-center", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-as-primary text-xl font-semibold", children: (0, jsx_runtime_1.jsx)(react_2.TextMorph, { children: currentStep.title }) }), currentStep.description && ((0, jsx_runtime_1.jsxs)("p", { className: "text-as-tertiary mt-1 flex items-center justify-center gap-1.5 text-sm", children: [currentStep.icon, (0, jsx_runtime_1.jsx)(react_2.TextMorph, { children: currentStep.description })] }))] }))] }));
 }

package/dist/cjs/global-account/react/components/B3DynamicModal.js

@@ -37,7 +37,7 @@ function B3DynamicModal() {
     const navigateBack = (0, react_2.useModalStore)(state => state.navigateBack);
     const { theme } = (0, react_2.useB3Config)();
     const isMobile = (0, react_2.useIsMobile)();
-    const { toasts, removeToast } = (0, index_1.useToastContext)();
+    const { toasts, removeToast, headerMode } = (0, index_1.useToastContext)();
     // Define arrays for different modal type groups
     const fullWidthTypes = [
         "anySpend",
@@ -168,7 +168,7 @@ function B3DynamicModal() {
                     contentType?.type === "send" ||
                     contentType?.type === "avatarEditor" ||
                     contentType?.type === "notifications") &&
-                    "p-0", "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, hideGABranding: isAnySpendType, onEscapeKeyDown: !isClosable ? e => e.preventDefault() : undefined, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("b3-modal-content no-scrollbar dark:bg-b3-background flex max-h-[90dvh] flex-col overflow-auto sm:max-h-[80dvh]"), children: [!hideCloseButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("span", { className: "font-inter text-sm font-semibold", children: "Back" })] })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: renderContent() }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: toasts.length > 0 && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0 }, transition: { duration: 0.3, ease: "easeInOut" }, className: "toast-section relative z-10 overflow-hidden bg-white dark:border-neutral-800 dark:bg-neutral-900", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2, delay: 0.1 }, className: "p-4 pt-0", children: (0, jsx_runtime_1.jsx)(index_1.ToastContainer, { toasts: toasts, onDismiss: removeToast, theme: theme }) }) })) })] })] }), isOpen && !isAnySpendType && ((0, jsx_runtime_1.jsx)("style", { children: `
+                    "p-0", "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, hideGABranding: isAnySpendType, onEscapeKeyDown: !isClosable ? e => e.preventDefault() : undefined, children: [(0, jsx_runtime_1.jsx)(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), (0, jsx_runtime_1.jsx)(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), (0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("b3-modal-content no-scrollbar dark:bg-b3-background flex max-h-[90dvh] flex-col overflow-auto sm:max-h-[80dvh]"), children: [!hideCloseButton && ((0, jsx_runtime_1.jsxs)("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [(0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), (0, jsx_runtime_1.jsx)("span", { className: "font-inter text-sm font-semibold", children: "Back" })] })), (0, jsx_runtime_1.jsx)("div", { className: "flex-1", children: renderContent() }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: !headerMode && toasts.length > 0 && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0 }, transition: { duration: 0.3, ease: "easeInOut" }, className: "toast-section relative z-10 overflow-hidden bg-white dark:border-neutral-800 dark:bg-neutral-900", children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2, delay: 0.1 }, className: "p-4 pt-0", children: (0, jsx_runtime_1.jsx)(index_1.ToastContainer, { toasts: toasts, onDismiss: removeToast, theme: theme }) }) })) })] })] }), isOpen && !isAnySpendType && ((0, jsx_runtime_1.jsx)("style", { children: `
           .modal-inner-content {
             transition: margin-bottom 0.3s ease-in-out;
             margin-bottom: ${toasts.length > 0 ? "0px" : "23px"} !important;

package/dist/cjs/global-account/react/components/Toast/ToastContext.d.ts

@@ -11,6 +11,9 @@ interface ToastContextType {
     addToast: (type: ToastType, message: string, duration?: number) => string;
     removeToast: (id: string) => void;
     clearAll: () => void;
+    headerMode: boolean;
+    setHeaderMode: (enabled: boolean) => void;
+    latestToast: ToastItem | null;
 }
 export declare function ToastProvider({ children }: {
     children: React.ReactNode;

package/dist/cjs/global-account/react/components/Toast/ToastContext.js

@@ -8,6 +8,9 @@ const ToastContext = (0, react_1.createContext)(undefined);
 let globalToastCounter = 0;
 function ToastProvider({ children }) {
     const [toasts, setToasts] = (0, react_1.useState)([]);
+    const [headerMode, setHeaderMode] = (0, react_1.useState)(false);
+    const headerModeRef = (0, react_1.useRef)(false);
+    const [latestToast, setLatestToast] = (0, react_1.useState)(null);
     const timeoutsRef = (0, react_1.useRef)(new Map());
     const removeToast = (0, react_1.useCallback)((id) => {
         setToasts(prev => prev.filter(toast => toast.id !== id));
@@ -26,12 +29,23 @@ function ToastProvider({ children }) {
             duration,
             createdAt: Date.now(),
         };
-        setToasts(prev => [...prev, newToast]);
-        if (duration > 0) {
-            const timeout = setTimeout(() => {
-                removeToast(id);
-            }, duration);
-            timeoutsRef.current.set(id, timeout);
+        if (headerModeRef.current) {
+            setLatestToast(newToast);
+            if (duration > 0) {
+                const timeout = setTimeout(() => {
+                    setLatestToast(null);
+                }, duration);
+                timeoutsRef.current.set(id, timeout);
+            }
+        }
+        else {
+            setToasts(prev => [...prev, newToast]);
+            if (duration > 0) {
+                const timeout = setTimeout(() => {
+                    removeToast(id);
+                }, duration);
+                timeoutsRef.current.set(id, timeout);
+            }
         }
         return id;
     }, [removeToast]);
@@ -40,6 +54,15 @@ function ToastProvider({ children }) {
         timeoutsRef.current.clear();
         setToasts([]);
     }, []);
+    const setHeaderModeCallback = (0, react_1.useCallback)((enabled) => {
+        setHeaderMode(enabled);
+        headerModeRef.current = enabled;
+        if (!enabled) {
+            setLatestToast(null);
+            timeoutsRef.current.forEach(timeout => clearTimeout(timeout));
+            timeoutsRef.current.clear();
+        }
+    }, []);
     // Cleanup on unmount
     (0, react_1.useEffect)(() => {
         const timeouts = timeoutsRef.current;
@@ -48,7 +71,7 @@ function ToastProvider({ children }) {
             timeouts.clear();
         };
     }, []);
-    return (0, jsx_runtime_1.jsx)(ToastContext.Provider, { value: { toasts, addToast, removeToast, clearAll }, children: children });
+    return ((0, jsx_runtime_1.jsx)(ToastContext.Provider, { value: { toasts, addToast, removeToast, clearAll, headerMode, setHeaderMode: setHeaderModeCallback, latestToast }, children: children }));
 }
 function useToastContext() {
     const context = (0, react_1.useContext)(ToastContext);

package/dist/esm/anyspend/react/components/common/OrderDetails.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ALL_CHAINS, getChainName, getErrorDisplay, getExplorerTxUrl, getPaymentUrl, getStatusDisplay, isNativeToken, RELAY_SOLANA_MAINNET_CHAIN_ID, ZERO_ADDRESS, } from "../../../../anyspend/index.js";
-import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useB3Config, useModalStore, useProfile, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
+import { Badge, Button, CopyToClipboard, ShinyButton, Skeleton, TextLoop, TextShimmer, useAccountWallet, useB3Config, useModalStore, useProfile, useToastContext, useUnifiedChainSwitchAndExecute, } from "../../../../global-account/react/index.js";
 import { useRouter, useSearchParams } from "../../../../shared/react/hooks/index.js";
 import { cn } from "../../../../shared/utils/index.js";
 import centerTruncate from "../../../../shared/utils/centerTruncate.js";
@@ -134,6 +134,11 @@ function roundTokenAmount(amount) {
 export const OrderDetails = memo(function OrderDetails({ mode = "modal", order, depositTxs, relayTxs, executeTx, refundTxs, cryptoPaymentMethod, selectedCryptoPaymentMethod, onPaymentMethodChange, onBack, disableUrlParamManagement = false, points, returnToHomeUrl, returnHomeLabel, classes, }) {
     const router = useRouter();
     const searchParams = useSearchParams();
+    const { setHeaderMode } = useToastContext();
+    useEffect(() => {
+        setHeaderMode(true);
+        return () => setHeaderMode(false);
+    }, [setHeaderMode]);
     // Get theme from B3Provider context
     const { theme } = useB3Config();
     const colorMode = theme || "light";

package/dist/esm/anyspend/react/components/common/OrderStatus.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { getStatusDisplay } from "../../../../anyspend/index.js";
 import { useSearchParams } from "../../../../shared/react/index.js";
-import { Clock, Loader2, RotateCcw, X } from "lucide-react";
+import { AlertCircle, AlertTriangle, CheckCircle, Clock, Info, Loader2, RotateCcw, X } from "lucide-react";
+import { useToastContext } from "../../../../global-account/react/index.js";
 import { memo, useEffect, useRef } from "react";
 import { useAnySpendCustomization } from "../context/AnySpendCustomizationContext.js";
 import { AnimatedCheckmark } from "../icons/AnimatedCheckmark.js";
@@ -14,6 +15,19 @@ function getStepIndex(status) {
         return 1;
     return -1;
 }
+function getToastIcon(type) {
+    const iconClass = "h-5 w-5";
+    switch (type) {
+        case "success":
+            return _jsx(CheckCircle, { className: `${iconClass} text-green-500` });
+        case "error":
+            return _jsx(AlertCircle, { className: `${iconClass} text-red-500` });
+        case "info":
+            return _jsx(Info, { className: `${iconClass} text-blue-500` });
+        case "warning":
+            return _jsx(AlertTriangle, { className: `${iconClass} text-amber-500` });
+    }
+}
 export const OrderStatus = memo(function OrderStatus({ order, selectedCryptoPaymentMethod, }) {
     const { text: defaultText, description: defaultDescription } = getStatusDisplay(order);
     const { content, slots } = useAnySpendCustomization();
@@ -58,9 +72,26 @@ export const OrderStatus = memo(function OrderStatus({ order, selectedCryptoPaym
         if (content.processingDescription)
             description = content.processingDescription;
     }
+    const { latestToast } = useToastContext();
+    // Override subtitle with toast notification when present (title stays unchanged)
+    let notificationIcon = undefined;
+    if (latestToast && currentStepIndex >= 0) {
+        description = latestToast.message;
+        notificationIcon = getToastIcon(latestToast.type);
+    }
     const paymentSteps = [
-        { id: 1, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
-        { id: 2, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
+        {
+            id: 1,
+            title: text,
+            description: typeof description === "string" ? description : defaultDescription || "",
+            icon: notificationIcon,
+        },
+        {
+            id: 2,
+            title: text,
+            description: typeof description === "string" ? description : defaultDescription || "",
+            icon: notificationIcon,
+        },
     ];
     if (currentStepIndex === 0) {
         if (!(order.status === "scanning_deposit_transaction" && cryptoPaymentMethod === "transfer_crypto")) {

package/dist/esm/anyspend/react/components/common/StepProgress.d.ts

@@ -1,7 +1,9 @@
+import React from "react";
 export interface Step {
     id: string | number;
     title: string;
     description?: string;
+    icon?: React.ReactNode;
 }
 export interface StepProgressProps {
     steps: Step[];

package/dist/esm/anyspend/react/components/common/StepProgress.js

@@ -1,14 +1,16 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { motion } from "framer-motion";
+import { TextMorph } from "torph/react";
 import { AnimatedCheckmark } from "../icons/AnimatedCheckmark.js";
 export function StepProgress({ steps, currentStepIndex, className = "", animateCompletedSteps = true, }) {
     const currentStep = steps[currentStepIndex];
-    return (_jsxs("div", { className: `flex w-full flex-col items-center gap-4 ${className}`, children: [_jsx("div", { className: "flex items-center gap-2", children: steps.map((_, index) => (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center", children: index < currentStepIndex ? (
+    return (_jsxs("div", { className: `flex w-full flex-col items-center gap-4 ${className}`, children: [_jsx("div", { className: "flex items-center gap-2", children: steps.map((_, index) => (_jsxs(React.Fragment, { children: [_jsx("div", { className: "flex items-center", children: index < currentStepIndex ? (
                             // Completed step - checkmark replaces the whole circle
                             _jsx(motion.div, { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.2 }, children: _jsx(AnimatedCheckmark, { className: "h-10 w-10", strokeWidth: 2.5, static: !animateCompletedSteps }) })) : (_jsx(motion.div, { initial: { scale: 0.8, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { delay: index * 0.2 }, className: `border-as-border-secondary relative flex h-10 w-10 items-center justify-center rounded-full border-[3px]`, children: index === currentStepIndex ? (
                                 // Current step - show spinning border and step number
                                 _jsxs(_Fragment, { children: [_jsx("div", { className: "border-t-as-primary absolute -inset-0.5 animate-spin rounded-full border-[3px] border-transparent" }), _jsx("span", { className: "text-as-primary font-semibold", children: index + 1 })] })) : (
                                 // Future step - show step number with disabled styling
-                                _jsx("span", { className: "text-as-content-disabled font-semibold", children: index + 1 })) })) }, index), index < steps.length - 1 && (_jsx("div", { className: "flex w-8 items-center justify-center gap-1", children: Array.from({ length: 6 }).map((_, dotIndex) => (_jsx("div", { className: "bg-as-primary/30 h-[2px] w-[2px] rounded-full" }, dotIndex))) }))] }))) }), currentStep && (_jsxs(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, className: "text-center", children: [_jsx("h2", { className: "text-as-primary text-xl font-semibold", children: currentStep.title }), currentStep.description && _jsx("p", { className: "text-as-tertiary mt-1 text-sm", children: currentStep.description })] }))] }));
+                                _jsx("span", { className: "text-as-content-disabled font-semibold", children: index + 1 })) })) }), index < steps.length - 1 && (_jsx("div", { className: "flex w-8 items-center justify-center gap-1", children: Array.from({ length: 6 }).map((_, dotIndex) => (_jsx("div", { className: "bg-as-primary/30 h-[2px] w-[2px] rounded-full" }, dotIndex))) }))] }, index))) }), currentStep && (_jsxs(motion.div, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, className: "text-center", children: [_jsx("h2", { className: "text-as-primary text-xl font-semibold", children: _jsx(TextMorph, { children: currentStep.title }) }), currentStep.description && (_jsxs("p", { className: "text-as-tertiary mt-1 flex items-center justify-center gap-1.5 text-sm", children: [currentStep.icon, _jsx(TextMorph, { children: currentStep.description })] }))] }))] }));
 }

package/dist/esm/global-account/react/components/B3DynamicModal.js

@@ -31,7 +31,7 @@ export function B3DynamicModal() {
     const navigateBack = useModalStore(state => state.navigateBack);
     const { theme } = useB3Config();
     const isMobile = useIsMobile();
-    const { toasts, removeToast } = useToastContext();
+    const { toasts, removeToast, headerMode } = useToastContext();
     // Define arrays for different modal type groups
     const fullWidthTypes = [
         "anySpend",
@@ -162,7 +162,7 @@ export function B3DynamicModal() {
                     contentType?.type === "send" ||
                     contentType?.type === "avatarEditor" ||
                     contentType?.type === "notifications") &&
-                    "p-0", "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, hideGABranding: isAnySpendType, onEscapeKeyDown: !isClosable ? e => e.preventDefault() : undefined, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("b3-modal-content no-scrollbar dark:bg-b3-background flex max-h-[90dvh] flex-col overflow-auto sm:max-h-[80dvh]"), children: [!hideCloseButton && (_jsxs("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "font-inter text-sm font-semibold", children: "Back" })] })), _jsx("div", { className: "flex-1", children: renderContent() }), _jsx(AnimatePresence, { children: toasts.length > 0 && (_jsx(motion.div, { initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0 }, transition: { duration: 0.3, ease: "easeInOut" }, className: "toast-section relative z-10 overflow-hidden bg-white dark:border-neutral-800 dark:bg-neutral-900", children: _jsx(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2, delay: 0.1 }, className: "p-4 pt-0", children: _jsx(ToastContainer, { toasts: toasts, onDismiss: removeToast, theme: theme }) }) })) })] })] }), isOpen && !isAnySpendType && (_jsx("style", { children: `
+                    "p-0", "mx-auto w-full max-w-md sm:max-w-lg"), hideCloseButton: hideCloseButton, hideGABranding: isAnySpendType, onEscapeKeyDown: !isClosable ? e => e.preventDefault() : undefined, children: [_jsx(ModalTitle, { className: "sr-only hidden", children: contentType?.type || "Modal" }), _jsx(ModalDescription, { className: "sr-only hidden", children: contentType?.type || "Modal Body" }), _jsxs("div", { className: cn("b3-modal-content no-scrollbar dark:bg-b3-background flex max-h-[90dvh] flex-col overflow-auto sm:max-h-[80dvh]"), children: [!hideCloseButton && (_jsxs("button", { onClick: navigateBack, className: "flex items-center gap-2 px-6 py-4 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-white", children: [_jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M15.8337 10H4.16699", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M10.0003 15.8334L4.16699 10L10.0003 4.16669", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("span", { className: "font-inter text-sm font-semibold", children: "Back" })] })), _jsx("div", { className: "flex-1", children: renderContent() }), _jsx(AnimatePresence, { children: !headerMode && toasts.length > 0 && (_jsx(motion.div, { initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0 }, transition: { duration: 0.3, ease: "easeInOut" }, className: "toast-section relative z-10 overflow-hidden bg-white dark:border-neutral-800 dark:bg-neutral-900", children: _jsx(motion.div, { initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2, delay: 0.1 }, className: "p-4 pt-0", children: _jsx(ToastContainer, { toasts: toasts, onDismiss: removeToast, theme: theme }) }) })) })] })] }), isOpen && !isAnySpendType && (_jsx("style", { children: `
           .modal-inner-content {
             transition: margin-bottom 0.3s ease-in-out;
             margin-bottom: ${toasts.length > 0 ? "0px" : "23px"} !important;

package/dist/esm/global-account/react/components/Toast/ToastContext.d.ts

@@ -11,6 +11,9 @@ interface ToastContextType {
     addToast: (type: ToastType, message: string, duration?: number) => string;
     removeToast: (id: string) => void;
     clearAll: () => void;
+    headerMode: boolean;
+    setHeaderMode: (enabled: boolean) => void;
+    latestToast: ToastItem | null;
 }
 export declare function ToastProvider({ children }: {
     children: React.ReactNode;

package/dist/esm/global-account/react/components/Toast/ToastContext.js

@@ -4,6 +4,9 @@ const ToastContext = createContext(undefined);
 let globalToastCounter = 0;
 export function ToastProvider({ children }) {
     const [toasts, setToasts] = useState([]);
+    const [headerMode, setHeaderMode] = useState(false);
+    const headerModeRef = useRef(false);
+    const [latestToast, setLatestToast] = useState(null);
     const timeoutsRef = useRef(new Map());
     const removeToast = useCallback((id) => {
         setToasts(prev => prev.filter(toast => toast.id !== id));
@@ -22,12 +25,23 @@ export function ToastProvider({ children }) {
             duration,
             createdAt: Date.now(),
         };
-        setToasts(prev => [...prev, newToast]);
-        if (duration > 0) {
-            const timeout = setTimeout(() => {
-                removeToast(id);
-            }, duration);
-            timeoutsRef.current.set(id, timeout);
+        if (headerModeRef.current) {
+            setLatestToast(newToast);
+            if (duration > 0) {
+                const timeout = setTimeout(() => {
+                    setLatestToast(null);
+                }, duration);
+                timeoutsRef.current.set(id, timeout);
+            }
+        }
+        else {
+            setToasts(prev => [...prev, newToast]);
+            if (duration > 0) {
+                const timeout = setTimeout(() => {
+                    removeToast(id);
+                }, duration);
+                timeoutsRef.current.set(id, timeout);
+            }
         }
         return id;
     }, [removeToast]);
@@ -36,6 +50,15 @@ export function ToastProvider({ children }) {
         timeoutsRef.current.clear();
         setToasts([]);
     }, []);
+    const setHeaderModeCallback = useCallback((enabled) => {
+        setHeaderMode(enabled);
+        headerModeRef.current = enabled;
+        if (!enabled) {
+            setLatestToast(null);
+            timeoutsRef.current.forEach(timeout => clearTimeout(timeout));
+            timeoutsRef.current.clear();
+        }
+    }, []);
     // Cleanup on unmount
     useEffect(() => {
         const timeouts = timeoutsRef.current;
@@ -44,7 +67,7 @@ export function ToastProvider({ children }) {
             timeouts.clear();
         };
     }, []);
-    return _jsx(ToastContext.Provider, { value: { toasts, addToast, removeToast, clearAll }, children: children });
+    return (_jsx(ToastContext.Provider, { value: { toasts, addToast, removeToast, clearAll, headerMode, setHeaderMode: setHeaderModeCallback, latestToast }, children: children }));
 }
 export function useToastContext() {
     const context = useContext(ToastContext);

package/dist/types/anyspend/react/components/common/StepProgress.d.ts

@@ -1,7 +1,9 @@
+import React from "react";
 export interface Step {
     id: string | number;
     title: string;
     description?: string;
+    icon?: React.ReactNode;
 }
 export interface StepProgressProps {
     steps: Step[];

package/dist/types/global-account/react/components/Toast/ToastContext.d.ts

@@ -11,6 +11,9 @@ interface ToastContextType {
     addToast: (type: ToastType, message: string, duration?: number) => string;
     removeToast: (id: string) => void;
     clearAll: () => void;
+    headerMode: boolean;
+    setHeaderMode: (enabled: boolean) => void;
+    latestToast: ToastItem | null;
 }
 export declare function ToastProvider({ children }: {
     children: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.1.69-alpha.6",
+  "version": "0.1.69-alpha.7",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",
@@ -338,6 +338,7 @@
     "socket.io-client": "4.7.5",
     "sonner": "1.7.4",
     "tailwind-merge": "2.6.0",
+    "torph": "^0.0.9",
     "typescript": "5.8.2",
     "vaul": "^1.1.2",
     "zustand": "4.5.6"

package/src/anyspend/react/components/common/OrderDetails.tsx

@@ -24,6 +24,7 @@ import {
   useB3Config,
   useModalStore,
   useProfile,
+  useToastContext,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
 import { useRouter, useSearchParams } from "@b3dotfun/sdk/shared/react/hooks";
@@ -231,6 +232,13 @@ export const OrderDetails = memo(function OrderDetails({
   const router = useRouter();
   const searchParams = useSearchParams();
 
+  const { setHeaderMode } = useToastContext();
+
+  useEffect(() => {
+    setHeaderMode(true);
+    return () => setHeaderMode(false);
+  }, [setHeaderMode]);
+
   // Get theme from B3Provider context
   const { theme } = useB3Config();
   const colorMode = theme || "light";

package/src/anyspend/react/components/common/OrderStatus.tsx

@@ -1,7 +1,9 @@
 import { getStatusDisplay } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { useSearchParams } from "@b3dotfun/sdk/shared/react";
-import { Clock, Loader2, RotateCcw, X } from "lucide-react";
+import { AlertCircle, AlertTriangle, CheckCircle, Clock, Info, Loader2, RotateCcw, X } from "lucide-react";
+import { useToastContext } from "@b3dotfun/sdk/global-account/react";
+import type { ToastType } from "@b3dotfun/sdk/global-account/react";
 import React, { memo, useEffect, useRef } from "react";
 import { useAnySpendCustomization } from "../context/AnySpendCustomizationContext";
 import { AnimatedCheckmark } from "../icons/AnimatedCheckmark";
@@ -15,6 +17,20 @@ function getStepIndex(status: string): number {
   return -1;
 }
 
+function getToastIcon(type: ToastType): React.ReactNode {
+  const iconClass = "h-5 w-5";
+  switch (type) {
+    case "success":
+      return <CheckCircle className={`${iconClass} text-green-500`} />;
+    case "error":
+      return <AlertCircle className={`${iconClass} text-red-500`} />;
+    case "info":
+      return <Info className={`${iconClass} text-blue-500`} />;
+    case "warning":
+      return <AlertTriangle className={`${iconClass} text-amber-500`} />;
+  }
+}
+
 export const OrderStatus = memo(function OrderStatus({
   order,
   selectedCryptoPaymentMethod,
@@ -56,9 +72,28 @@ export const OrderStatus = memo(function OrderStatus({
     if (content.processingDescription) description = content.processingDescription;
   }
 
+  const { latestToast } = useToastContext();
+
+  // Override subtitle with toast notification when present (title stays unchanged)
+  let notificationIcon: React.ReactNode = undefined;
+  if (latestToast && currentStepIndex >= 0) {
+    description = latestToast.message;
+    notificationIcon = getToastIcon(latestToast.type);
+  }
+
   const paymentSteps: Step[] = [
-    { id: 1, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
-    { id: 2, title: text, description: typeof description === "string" ? description : defaultDescription || "" },
+    {
+      id: 1,
+      title: text,
+      description: typeof description === "string" ? description : defaultDescription || "",
+      icon: notificationIcon,
+    },
+    {
+      id: 2,
+      title: text,
+      description: typeof description === "string" ? description : defaultDescription || "",
+      icon: notificationIcon,
+    },
   ];
 
   if (currentStepIndex === 0) {

package/src/anyspend/react/components/common/StepProgress.tsx

@@ -1,12 +1,15 @@
 "use client";
 
+import React from "react";
 import { motion } from "framer-motion";
+import { TextMorph } from "torph/react";
 import { AnimatedCheckmark } from "../icons/AnimatedCheckmark";
 
 export interface Step {
   id: string | number;
   title: string;
   description?: string;
+  icon?: React.ReactNode;
 }
 
 export interface StepProgressProps {
@@ -32,8 +35,8 @@ export function StepProgress({
       {/* Step Progress Indicator */}
       <div className="flex items-center gap-2">
         {steps.map((_, index) => (
-          <>
-            <div key={index} className="flex items-center">
+          <React.Fragment key={index}>
+            <div className="flex items-center">
               {index < currentStepIndex ? (
                 // Completed step - checkmark replaces the whole circle
                 <motion.div
@@ -71,7 +74,7 @@ export function StepProgress({
                 ))}
               </div>
             )}
-          </>
+          </React.Fragment>
         ))}
       </div>
 
@@ -83,8 +86,15 @@ export function StepProgress({
           transition={{ delay: 0.3 }}
           className="text-center"
         >
-          <h2 className="text-as-primary text-xl font-semibold">{currentStep.title}</h2>
-          {currentStep.description && <p className="text-as-tertiary mt-1 text-sm">{currentStep.description}</p>}
+          <h2 className="text-as-primary text-xl font-semibold">
+            <TextMorph>{currentStep.title}</TextMorph>
+          </h2>
+          {currentStep.description && (
+            <p className="text-as-tertiary mt-1 flex items-center justify-center gap-1.5 text-sm">
+              {currentStep.icon}
+              <TextMorph>{currentStep.description}</TextMorph>
+            </p>
+          )}
         </motion.div>
       )}
     </div>

package/src/global-account/react/components/B3DynamicModal.tsx

@@ -43,7 +43,7 @@ export function B3DynamicModal() {
   const navigateBack = useModalStore(state => state.navigateBack);
   const { theme } = useB3Config();
   const isMobile = useIsMobile();
-  const { toasts, removeToast } = useToastContext();
+  const { toasts, removeToast, headerMode } = useToastContext();
 
   // Define arrays for different modal type groups
   const fullWidthTypes = [
@@ -247,7 +247,7 @@ export function B3DynamicModal() {
 
           {/* Toast Container - Part of modal-inner-content layer */}
           <AnimatePresence>
-            {toasts.length > 0 && (
+            {!headerMode && toasts.length > 0 && (
               <motion.div
                 initial={{ height: 0 }}
                 animate={{ height: "auto" }}

package/src/global-account/react/components/Toast/ToastContext.tsx

@@ -15,6 +15,9 @@ interface ToastContextType {
   addToast: (type: ToastType, message: string, duration?: number) => string;
   removeToast: (id: string) => void;
   clearAll: () => void;
+  headerMode: boolean;
+  setHeaderMode: (enabled: boolean) => void;
+  latestToast: ToastItem | null;
 }
 
 const ToastContext = createContext<ToastContextType | undefined>(undefined);
@@ -23,6 +26,9 @@ let globalToastCounter = 0;
 
 export function ToastProvider({ children }: { children: React.ReactNode }) {
   const [toasts, setToasts] = useState<ToastItem[]>([]);
+  const [headerMode, setHeaderMode] = useState(false);
+  const headerModeRef = useRef(false);
+  const [latestToast, setLatestToast] = useState<ToastItem | null>(null);
   const timeoutsRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
 
   const removeToast = useCallback((id: string) => {
@@ -45,13 +51,23 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
         createdAt: Date.now(),
       };
 
-      setToasts(prev => [...prev, newToast]);
+      if (headerModeRef.current) {
+        setLatestToast(newToast);
+        if (duration > 0) {
+          const timeout = setTimeout(() => {
+            setLatestToast(null);
+          }, duration);
+          timeoutsRef.current.set(id, timeout);
+        }
+      } else {
+        setToasts(prev => [...prev, newToast]);
 
-      if (duration > 0) {
-        const timeout = setTimeout(() => {
-          removeToast(id);
-        }, duration);
-        timeoutsRef.current.set(id, timeout);
+        if (duration > 0) {
+          const timeout = setTimeout(() => {
+            removeToast(id);
+          }, duration);
+          timeoutsRef.current.set(id, timeout);
+        }
       }
 
       return id;
@@ -65,6 +81,16 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
     setToasts([]);
   }, []);
 
+  const setHeaderModeCallback = useCallback((enabled: boolean) => {
+    setHeaderMode(enabled);
+    headerModeRef.current = enabled;
+    if (!enabled) {
+      setLatestToast(null);
+      timeoutsRef.current.forEach(timeout => clearTimeout(timeout));
+      timeoutsRef.current.clear();
+    }
+  }, []);
+
   // Cleanup on unmount
   useEffect(() => {
     const timeouts = timeoutsRef.current;
@@ -74,7 +100,13 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
     };
   }, []);
 
-  return <ToastContext.Provider value={{ toasts, addToast, removeToast, clearAll }}>{children}</ToastContext.Provider>;
+  return (
+    <ToastContext.Provider
+      value={{ toasts, addToast, removeToast, clearAll, headerMode, setHeaderMode: setHeaderModeCallback, latestToast }}
+    >
+      {children}
+    </ToastContext.Provider>
+  );
 }
 
 export function useToastContext() {

package/src/types/torph.d.ts

@@ -0,0 +1,4 @@
+declare module "torph/react" {
+  import type { JSX } from "react";
+  export function TextMorph(props: { children: string; className?: string }): JSX.Element;
+}