From 871d6994e077539b64570cded0b1aa0c52921db0 Mon Sep 17 00:00:00 2001
From: hzrd149 <github@hzrd149.com>
Date: Sun, 2 Jul 2023 10:32:28 -0500
Subject: [PATCH] fix bug with blurred images

---
 .changeset/silver-keys-fetch.md       |  5 +++++
 src/components/embed-types/common.tsx | 15 ++++++++++++++-
 src/components/zap-modal.tsx          |  2 --
 3 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/silver-keys-fetch.md

diff --git a/.changeset/silver-keys-fetch.md b/.changeset/silver-keys-fetch.md
new file mode 100644
index 000000000..f7b05e8e1
--- /dev/null
+++ b/.changeset/silver-keys-fetch.md
@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Fix blured images opening when clicked
diff --git a/src/components/embed-types/common.tsx b/src/components/embed-types/common.tsx
index 5de4dcfee..8908cfd4e 100644
--- a/src/components/embed-types/common.tsx
+++ b/src/components/embed-types/common.tsx
@@ -9,7 +9,20 @@ const BlurredImage = (props: ImageProps) => {
   const { isOpen, onOpen } = useDisclosure();
   return (
     <Box overflow="hidden">
-      <Image onClick={onOpen} cursor="pointer" filter={isOpen ? "" : "blur(1.5rem)"} {...props} />
+      <Image
+        onClick={
+          !isOpen
+            ? (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                onOpen();
+              }
+            : undefined
+        }
+        cursor="pointer"
+        filter={isOpen ? "" : "blur(1.5rem)"}
+        {...props}
+      />
     </Box>
   );
 };
diff --git a/src/components/zap-modal.tsx b/src/components/zap-modal.tsx
index d8a324b72..e77e9d61f 100644
--- a/src/components/zap-modal.tsx
+++ b/src/components/zap-modal.tsx
@@ -23,8 +23,6 @@ import { useUserMetadata } from "../hooks/use-user-metadata";
 import { UserLink } from "./user-link";
 import { parsePaymentRequest, readablizeSats } from "../helpers/bolt11";
 import { ExternalLinkIcon, LightningIcon, QrCodeIcon } from "./icons";
-import lnurlMetadataService from "../services/lnurl-metadata";
-import { useAsync } from "react-use";
 import { nip57 } from "nostr-tools";
 import clientRelaysService from "../services/client-relays";
 import { getEventRelays } from "../services/event-relays";