feat: allow direct image load when improxy fails

packages/app/src/Element/ProxyImg.tsx

@@ -1,5 +1,6 @@
 import useImgProxy from "Hooks/useImgProxy";
 import { useEffect, useState } from "react";
+import { FormattedMessage } from "react-intl";
 
 interface ProxyImgProps extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
   size?: number;
@@ -8,6 +9,8 @@ interface ProxyImgProps extends React.DetailedHTMLProps<React.ImgHTMLAttributes<
 export const ProxyImg = (props: ProxyImgProps) => {
   const { src, size, ...rest } = props;
   const [url, setUrl] = useState<string>();
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [bypass, setBypass] = useState(false);
   const { proxy } = useImgProxy();
 
   useEffect(() => {
@@ -17,5 +20,25 @@ export const ProxyImg = (props: ProxyImgProps) => {
     }
   }, [src]);
 
-  return <img src={url} {...rest} />;
+  if (loadFailed) {
+    if (bypass) {
+      return <img src={src} {...rest} />;
+    }
+    return (
+      <div
+        className="note-invoice error"
+        onClick={e => {
+          e.stopPropagation();
+          setBypass(true);
+        }}>
+        <FormattedMessage
+          defaultMessage="Failed to proxy image from {host}, click here to load directly"
+          values={{
+            host: new URL(src ?? "").hostname,
+          }}
+        />
+      </div>
+    );
+  }
+  return <img src={url} {...rest} onError={() => setLoadFailed(true)} />;
 };

packages/app/src/lang.json

@@ -157,6 +157,9 @@
   "5ykRmX": {
     "defaultMessage": "Send zap"
   },
+  "65BmHb": {
+    "defaultMessage": "Failed to proxy image from {host}, click here to load directly"
+  },
   "6Yfvvp": {
     "defaultMessage": "Get an identifier"
   },

packages/app/src/translations/en.json

@@ -51,6 +51,7 @@
   "5rOdPG": "Once you setup your key manager extension and generated a key, you can follow our new users flow to setup your profile and help you find some interesting people on Nostr to follow.",
   "5u6iEc": "Transfer to Pubkey",
   "5ykRmX": "Send zap",
+  "65BmHb": "Failed to proxy image from {host}, click here to load directly",
   "6Yfvvp": "Get an identifier",
   "6ewQqw": "Likes ({n})",
   "6uMqL1": "Unpaid",