Unified Modal System
Centralized state. High-fidelity variants. Built-in accessibility focus traps, keyboard navigation listeners, and auto-mapping for Web3 errors.
Trigger Modal States
Confirmation Modals
Verify important user actions like staking, agent updates, and wallet connections.
Dynamic Flow Loader
Demonstrates changing modal status/types in-place without flashing the backdrop.
Success & Auto-Close
Success banner with customizable auto-close delay, complete with a visual timer bar.
Web3 Error Mapper
Intercepts raw smart contract/network errors and translates them to human wording.
Risk Warnings
Alert users to locked unbonding schedules, protocol cooldown events, or slashing conditions.
Blockchain TX Status
Monitors transactional states (Pending -> Confirming -> Success) linked to Block Explorers.
Technical Architecture & Specs
The system uses a Centralized State Store (React Context) to handle a strict modal FIFO (First-In, First-Out) queue. Only the primary modal in the queue is rendered by the container, avoiding overlap flashes.
ModalTrigger (showModal)
│
▼
Context Queue State: [Modal_A, Modal_B]
│
▼ (Extract active element: index 0)
ModalContainer Renderer (Framer Motion scale + fade)
│
▼ (onClose calls closeModal)
Queue shifts -> Renders next modalimport { useModal } from "@/hooks/useModal";
function MyComponent() {
const { showConfirm, showLoading, showSuccess, showError } = useModal();
const handleAction = async () => {
// 1. Ask for confirmation
showConfirm("Are you sure?", "This will burn gas.", async () => {
// 2. Open loader
const loaderId = showLoading("Processing on Arc...");
try {
await executeTransaction();
// 3. Update in-place to Success
updateModal(loaderId, {
type: "success",
title: "Succeeded!",
description: "USDC bridged."
});
} catch (err) {
// 4. Update in-place to mapped Error
updateModal(loaderId, {
type: "error",
title: "Failed",
description: err.message
});
}
});
};
}