feat: probe for local gateway and add to config

src/components/local-storage-toggle.tsx

@@ -14,6 +14,8 @@ interface LocalStorageToggleProps {
   className?: string
   onClick?: React.MouseEventHandler<HTMLDivElement>
   resetKey: number
+  disabled?: boolean
+  handleChange?(toggleValue: boolean): void
 }
 
 export const LocalStorageToggle: React.FC<LocalStorageToggleProps> = ({
@@ -22,6 +24,8 @@ export const LocalStorageToggle: React.FC<LocalStorageToggleProps> = ({
   defaultValue,
   resetKey,
   localStorageKey,
+  disabled,
+  handleChange,
   ...props
 }) => {
   const [isChecked, setIsChecked] = useState(() => {
@@ -32,10 +36,11 @@ export const LocalStorageToggle: React.FC<LocalStorageToggleProps> = ({
     setIsChecked(getLocalStorageValue(localStorageKey, defaultValue))
   }, [resetKey])
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+  const handleChangeInner = (event: React.ChangeEvent<HTMLInputElement>): void => {
     const newValue = event.target.checked
     setIsChecked(newValue)
     localStorage.setItem(localStorageKey, String(newValue))
+    handleChange?.(newValue)
   }
 
   return (
@@ -45,9 +50,10 @@ export const LocalStorageToggle: React.FC<LocalStorageToggleProps> = ({
 
       <input
         type="checkbox"
+        disabled={disabled}
         id={localStorageKey}
         checked={isChecked}
-        onChange={handleChange}
+        onChange={handleChangeInner}
         className="dn"
       />
       <label

src/hooks/use-local-gateway.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+import { hasLocalGateway } from '../lib/local-gateway.js'
+import type { ComponentLogger } from '@libp2p/logger'
+
+export interface UseLocalGatewayProps {
+  logger: ComponentLogger
+}
+export interface UseLocalGatewayReturn {
+  available: boolean
+  checked: boolean
+}
+
+export function useLocalGateway ({ logger }: UseLocalGatewayProps): UseLocalGatewayReturn {
+  const log = logger.forComponent('use-local-gateway')
+  const [localGatewayAvailable, setLocalGatewayAvailable] = useState<boolean | null>(null)
+
+  useEffect(() => {
+    void (async () => {
+      try {
+        if (await hasLocalGateway()) {
+          setLocalGatewayAvailable(true)
+        } else {
+          setLocalGatewayAvailable(false)
+        }
+      } catch (e) {
+        log.error('failed to probe for local gateway', e)
+        setLocalGatewayAvailable(false)
+      }
+    })()
+  }, [])
+
+  return {
+    available: localGatewayAvailable === true,
+    checked: localGatewayAvailable !== null
+  }
+}

src/lib/local-gateway.ts

@@ -0,0 +1,27 @@
+import { uiLogger } from './logger.js'
+
+export const localGwUrl = 'http://127.0.0.1:8080'
+// bafkqacdjobthgllto4fa is the inline CID for the string 'ipfs-sw'
+const localGwTestUrl = 'http://127.0.0.1:8080/ipfs/bafkqacdjobthgllto4fa'
+
+const log = uiLogger.forComponent('local-gateway-prober')
+
+export async function hasLocalGateway (): Promise<boolean> {
+  try {
+    log(`probing for local trustless gateway at ${localGwTestUrl}`)
+    const resp = await fetch(localGwTestUrl, {
+      cache: 'no-store',
+      method: 'HEAD'
+    })
+    if (!resp.ok) {
+      return false
+    }
+    log(`found local trustless gateway at ${localGwTestUrl}`)
+    return true
+  } catch (e: unknown) {
+    log.error('failed to probe trustless gateway', e)
+    const currentLocation = location.href.replace(location.pathname, '').replace(location.search, '').replace(location.hash, '').replace(/\/$/, '')
+    log(`You may want to enable CORS if you do have a local gateway running:\nipfs config --json API.HTTPHeaders.Access-Control-Allow-Origin '["${currentLocation}", "http://127.0.0.1:5001", "https://webui.ipfs.io"]'`)
+    return false
+  }
+}

src/lib/local-storage.ts

@@ -11,6 +11,7 @@ export const LOCAL_STORAGE_KEYS = {
     enableWss: getLocalStorageKey('config', 'enableWss'),
     enableWebTransport: getLocalStorageKey('config', 'enableWebTransport'),
     enableRecursiveGateways: getLocalStorageKey('config', 'enableRecursiveGateways'),
+    useLocalGateway: getLocalStorageKey('config', 'useLocalGateway'),
     enableGatewayProviders: getLocalStorageKey('config', 'enableGatewayProviders'),
     dnsJsonResolvers: getLocalStorageKey('config', 'dnsJsonResolvers'),
     debug: getLocalStorageKey('config', 'debug')

src/pages/config.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import Header from '../components/Header.jsx'
 import { Collapsible } from '../components/collapsible.jsx'
 import { InputSection } from '../components/input-section.jsx'
@@ -8,8 +8,10 @@ import { ServiceWorkerReadyButton } from '../components/sw-ready-button.jsx'
 import { ConfigProvider } from '../context/config-context.jsx'
 import { RouteContext } from '../context/router-context.jsx'
 import { ServiceWorkerProvider } from '../context/service-worker-context.jsx'
+import { useLocalGateway } from '../hooks/use-local-gateway.js'
 import { HeliaServiceWorkerCommsChannel } from '../lib/channel.js'
 import { defaultDnsJsonResolvers, defaultEnableGatewayProviders, defaultEnableRecursiveGateways, defaultEnableWebTransport, defaultEnableWss, defaultGateways, defaultRouters, getConfig, localStorageToIdb, resetConfig } from '../lib/config-db.js'
+import { localGwUrl } from '../lib/local-gateway.js'
 import { LOCAL_STORAGE_KEYS, convertDnsResolverInputToObject, convertDnsResolverObjectToInput, convertUrlArrayToInput, convertUrlInputToArray } from '../lib/local-storage.js'
 import { getUiComponentLogger, uiLogger } from '../lib/logger.js'
 import './default-page-styles.css'
@@ -85,6 +87,7 @@ function ConfigPage (): React.JSX.Element | null {
   const { gotoPage } = React.useContext(RouteContext)
   const [error, setError] = useState<Error | null>(null)
   const [resetKey, setResetKey] = useState(0)
+  const { checked: localGatewayChecked, available: localGatewayAvailable } = useLocalGateway({ logger: uiComponentLogger })
 
   const isLoadedInIframe = window.self !== window.top
 
@@ -138,6 +141,30 @@ function ConfigPage (): React.JSX.Element | null {
     setResetKey((prev) => prev + 1)
   }, [])
 
+  const localGatewayDescription = useMemo(() => {
+    if (localGatewayAvailable) {
+      return `A local gateway has been detected at ${localGwUrl}. Enable the local gateway?`
+    }
+    if (!localGatewayAvailable && localGatewayChecked) {
+      return `No local gateway detected at ${localGwUrl}. This toggle has been disabled.`
+    }
+    return 'Checking for local gateway...'
+  }, [localGatewayAvailable, localGatewayChecked])
+
+  const handleLocalGatewayChange = useCallback((toggleValue: boolean) => {
+    // get current value of the gateways list
+    const currentGateways = localStorage.getItem(LOCAL_STORAGE_KEYS.config.gateways)
+    const isAlreadyInList = currentGateways?.includes(localGwUrl) === true
+    // need to add to gateways list if true, and remove it if it's false and it's in the list
+    if (toggleValue && !isAlreadyInList) {
+      // add to the list
+      localStorage.setItem(LOCAL_STORAGE_KEYS.config.gateways, `${localGwUrl}\n${currentGateways}`)
+    } else if (!toggleValue && isAlreadyInList) {
+      // remove from the list
+      localStorage.setItem(LOCAL_STORAGE_KEYS.config.gateways, currentGateways?.replace(`${localGwUrl}\n`, '') ?? '')
+    }
+  }, [])
+
   const newlineToJsonArray = (value: string): string => JSON.stringify(convertUrlInputToArray(value))
   const jsonToNewlineString = (value: string): string => convertUrlArrayToInput(JSON.parse(value))
 
@@ -192,6 +219,16 @@ function ConfigPage (): React.JSX.Element | null {
             localStorageKey={LOCAL_STORAGE_KEYS.config.enableRecursiveGateways}
             resetKey={resetKey}
           />
+          <LocalStorageToggle
+            className="e2e-config-page-input"
+            label="Use local trustless gateway"
+            description={localGatewayDescription}
+            defaultValue={false}
+            disabled={!localGatewayChecked || !localGatewayAvailable}
+            localStorageKey={LOCAL_STORAGE_KEYS.config.useLocalGateway}
+            resetKey={resetKey}
+            handleChange={handleLocalGatewayChange}
+          />
           <LocalStorageInput
             className="e2e-config-page-input e2e-config-page-input-gateways"
             description="A newline delimited list of recursive trustless gateway URLs."

src/sw.ts

@@ -222,6 +222,9 @@ async function requestRouting (event: FetchEvent, url: URL): Promise<boolean> {
   } else if (!isValidRequestForSW(event)) {
     log.trace('not a valid request for helia-sw, ignoring ', event.request.url)
     return false
+  } else if (url.href.includes('127.0.0.1:8080/ipfs/bafkqacdjobthgllto4fa')) {
+    log('Passing through local gateway test url', event.request.url)
+    return false
   } else if (url.href.includes('bafkqaaa.ipfs')) {
     /**
      * `bafkqaaa` is an empty inline CID, so this response *is* valid, and prevents additional network calls.