feat: add Esc keyboard hint support for dialogs

src/components/common/PendingTxModal.tsx

@@ -52,6 +52,7 @@ const PendingTxModal: React.FC<PendingTxModalProps> = ({
 		<Dialog open={open} onOpenChange={handleOpenChange}>
 			<DialogContent
 				showCloseButton={!(blockDismissal && isLoading)}
+				showEscapeHint={!(blockDismissal && isLoading)}
 				className="max-w-sm"
 				// Prevent closing via Escape when dismissal is blocked
 				onEscapeKeyDown={(e: KeyboardEvent) => {

src/components/common/TradeDialog.tsx

@@ -59,6 +59,7 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 			<DialogContent
 				className="max-w-md"
 				showCloseButton={!isSubmitting}
+				showEscapeHint={!isSubmitting}
 				onOpenAutoFocus={event => {
 					event.preventDefault();
 					amountInputRef.current?.focus();
@@ -154,4 +155,3 @@ const TradeDialog: React.FC<TradeDialogProps> = ({
 };
 
 export default TradeDialog;
-

src/components/ui/dialog.test.tsx

@@ -17,4 +17,24 @@ describe('DialogContent', () => {
 		);
 		expect(content.className).toContain('sm:pb-6');
 	});
-});
+
+	it('shows the escape hint by default', () => {
+		render(
+			<Dialog open>
+				<DialogContent>Dialog body</DialogContent>
+			</Dialog>
+		);
+
+		expect(screen.getByText('Esc to close')).toBeInTheDocument();
+	});
+
+	it('hides the escape hint when explicitly disabled', () => {
+		render(
+			<Dialog open>
+				<DialogContent showEscapeHint={false}>Dialog body</DialogContent>
+			</Dialog>
+		);
+
+		expect(screen.queryByText('Esc to close')).not.toBeInTheDocument();
+	});
+});

src/components/ui/dialog.tsx

@@ -49,9 +49,11 @@ function DialogContent({
 	className,
 	children,
 	showCloseButton = true,
+	showEscapeHint = true,
 	...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
 	showCloseButton?: boolean;
+	showEscapeHint?: boolean;
 }) {
 	return (
 		<DialogPortal data-slot="dialog-portal">
@@ -65,6 +67,14 @@ function DialogContent({
 				{...props}
 			>
 				{children}
+				{showEscapeHint && (
+					<p
+						aria-hidden="true"
+						className="pointer-events-none absolute right-4 bottom-3 select-none text-[11px] text-white/45"
+					>
+						Esc to close
+					</p>
+				)}
 				{showCloseButton && (
 					<DialogPrimitive.Close
 						data-slot="dialog-close"