From 66a766bbbbf90e62e279829fe953ff69346c310d Mon Sep 17 00:00:00 2001
From: "Tom (plebeius.eth)" <tom@plebbit.com>
Date: Fri, 24 Jan 2025 15:51:53 +0100
Subject: [PATCH] feat(challenge modal): close with escape key

---
 src/components/challenge-modal/challenge-modal.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/challenge-modal/challenge-modal.tsx b/src/components/challenge-modal/challenge-modal.tsx
index 1aa6737c..252a05ea 100644
--- a/src/components/challenge-modal/challenge-modal.tsx
+++ b/src/components/challenge-modal/challenge-modal.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FloatingFocusManager, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import { Challenge as ChallengeType, useComment } from '@plebbit/plebbit-react-hooks';
 import { useTranslation } from 'react-i18next';
@@ -54,6 +54,16 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => {
     }
   };
 
+  useEffect(() => {
+    const onEscapeKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        closeModal();
+      }
+    };
+    document.addEventListener('keydown', onEscapeKey);
+    return () => document.removeEventListener('keydown', onEscapeKey);
+  }, [closeModal]);
+
   return (
     <div className={styles.container}>
       <div className={styles.title}>{t('challenge_from', { subplebbit: shortSubplebbitAddress || subplebbitAddress })}</div>