feat: allow visitors to opt-out of the thumbnailing proxy

src/atoms/input/Checkbox.jsx

@@ -25,6 +25,7 @@ const Checkbox = forwardRef(
       onCheck = () => null,
       onBlur = () => null,
       onWheel = () => null,
+      title = '',
       disabled,
       checked: checkedProp,
       autoFocus = false,
@@ -51,7 +52,10 @@ const Checkbox = forwardRef(
     })
 
     return (
-      <label className={`${classes} ${className ? className : ''}`}>
+      <label
+        title={title}
+        className={`${classes} ${className ? className : ''}`}
+      >
         {label}
         <input
           ref={ref}

src/components/media-types/image/index.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { LazyLoadImage } from 'react-lazy-load-image-component'
 import styles from '@style'
 import { MediaTypeProps } from '@types'
+import { useLocalSettings } from '@context/localSettingsStore'
 
 export const ImageComponent = ({
   artifactUri,
@@ -11,14 +12,15 @@ export const ImageComponent = ({
   nft,
 }: MediaTypeProps) => {
   const [isSmol, setSmol] = useState(false)
+  const imgproxy = useLocalSettings((st) => st.imgproxy)
 
   let src
 
   if (previewUri) {
     src = previewUri
   } else if (displayView) {
     src = artifactUri
-  } else if (import.meta.env.VITE_IMGPROXY && nft?.teia_meta?.preview_uri) {
+  } else if (imgproxy && import.meta.env.VITE_IMGPROXY && nft?.teia_meta?.preview_uri) {
     src = `${import.meta.env.VITE_IMGPROXY}${nft.teia_meta.preview_uri}`
   } else {
     src = displayUri

src/context/localSettingsStore.ts

@@ -43,13 +43,15 @@ interface LocalSettingsState {
   setRpcNode: (rpcNode?: RPC_NODES) => Promise<void>
   setTheme: (theme: Theme, apply?: boolean) => void
   setTilted: (tilted: boolean) => void
+  setImgproxy: (imgproxy: boolean) => void
   setViewMode: (mode: ViewMode) => void
   setHasSeenBanner: (seen: boolean) => void
   setZen: (zen: boolean) => void
   theme: Theme
   themeDark: Theme
   themeLight: Theme
   tilted: boolean
+  imgproxy: boolean
   toggleTheme: () => void
   toggleViewMode: () => void
   toggleZen: () => void
@@ -69,6 +71,7 @@ const defaultValues = {
   rpcNode: rpc_nodes[5],
   customRpcNode: '',
   tilted: false,
+  imgproxy: true,
   has_seen_banner: false,
 }
 // TODO: replace all the "set" methods with one that merges the state with the provided partial object
@@ -79,6 +82,7 @@ export const useLocalSettings = create<LocalSettingsState>()(
         ...defaultValues,
         setHasSeenBanner: (has_seen_banner) => set({ has_seen_banner }),
         setTilted: (tilted) => set({ tilted }),
+        setImgproxy: (imgproxy) => set({ imgproxy }),
         toggleViewMode: () =>
           set((state) => ({
             viewMode: state.viewMode === 'single' ? 'masonry' : 'single',

src/pages/config/Settings.jsx

@@ -40,6 +40,8 @@ export const Settings = () => {
     setCustomRpcNode,
     tilted,
     setTilted,
+    imgproxy,
+    setImgproxy,
     has_seen_banner,
     setHasSeenBanner,
   ] = useLocalSettings((st) => [
@@ -55,6 +57,8 @@ export const Settings = () => {
     st.setCustomRpcNode,
     st.tilted,
     st.setTilted,
+    st.imgproxy,
+    st.setImgproxy,
     st.has_seen_banner,
     st.setHasSeenBanner,
   ])
@@ -129,15 +133,38 @@ export const Settings = () => {
           )}
           <Line />
           <Checkbox
-            alt={`click to enable fool around (a throwback of the 2023 april fool)`}
+            alt={`click to ${
+              tilted ? 'disable' : 'enable'
+            } fool around (a throwback of the 2023 april fool)`}
+            title={`click to ${
+              tilted ? 'disable' : 'enable'
+            } fool around (a throwback of the 2023 april fool)`}
             checked={tilted}
             onCheck={setTilted}
             className="no-fool"
             label={'Fool Around'}
           />
+          <Line />
+          <Checkbox
+            alt={`click to ${
+              imgproxy ? 'disable' : 'enable'
+            } imgproxy thumbnails. Not using imgproxy will load fullsize images from ipfs directly instead (performance penalty)`}
+            title={`click to ${
+              imgproxy ? 'disable' : 'enable'
+            } imgproxy thumbnails. Not using imgproxy will load fullsize images from ipfs directly instead (performance penalty)`}
+            checked={imgproxy}
+            onCheck={setImgproxy}
+            initial={true}
+            label={'Use thumbnails to increase performance'}
+          />
           {bannerEnabled && (
             <Checkbox
-              alt={`click to enable fool around (a throwback of the 2023 april fool)`}
+              alt={`click to ${
+                setHasSeenBanner ? 'disable' : 'enable'
+              } last event banner (this is automatically reset for you on new announcements)`}
+              title={`click to ${
+                setHasSeenBanner ? 'disable' : 'enable'
+              } last event banner (this is automatically reset for you on new announcements)`}
               checked={has_seen_banner}
               onCheck={setHasSeenBanner}
               label={'Hide banner for last announcement'}