feat: make ipfs-check service URL configurable

- add retrieval diagnostic service settings section
- create IpfsCheckForm component for URL configuration
- store ipfs-check URL in local storage with default fallback
- update CheckScreen to use configurable URL from redux store
- add translations for new settings UI

users can now configure a custom ipfs-check instance URL via settings
to use self-hosted or alternative diagnostic services

Closes #2434

Author: lidel

public/locales/en/app.json

@@ -54,6 +54,10 @@
   "publicSubdomainGatewayForm": {
     "placeholder": "Enter a URL (https://dweb.link)"
   },
+  "ipfsCheckForm": {
+    "label": "Retrieval Check Service URL",
+    "placeholder": "Enter a URL (https://check.ipfs.network)"
+  },
   "terms": {
     "address": "Address",
     "addresses": "Addresses",

public/locales/en/settings.json

@@ -25,6 +25,10 @@
   "apiDescription": "<0>If your node is configured with a <1>custom Kubo RPC API address</1>, including a port other than the default 5001, enter it here.</0>",
   "publicSubdomainGatewayDescription": "<0>Select a default <1>Subdomain Gateway</1> for generating shareable links.</0>",
   "publicPathGatewayDescription": "<0>Select a fallback <1>Path Gateway</1> for generating shareable links for CIDs that exceed the 63-character DNS limit.</0>",
+  "retrievalDiagnosticService": {
+    "title": "Retrieval Diagnostic Service",
+    "description": "Configure the URL of the <0>ipfs-check</0> service used for <1>retrieval diagnostics</1>. This service checks if content can be successfully fetched from your node and other nodes hosting a specific CID, helping you troubleshoot sharing issues."
+  },
   "cliDescription": "<0>Enable this option to display a \"view code\" <1></1> icon next to common IPFS commands. Clicking it opens a modal with that command's CLI code, so you can paste it into the IPFS command-line interface in your terminal.</0>",
   "cliModal": {
     "extraNotesJsonConfig": "If you've made changes to the config in this page's code editor that you'd like to save, click the download icon next to the copy button to download it as a JSON file."

src/bundles/gateway.js

@@ -3,6 +3,7 @@ import { readSetting, writeSetting } from './local-storage.js'
 // TODO: switch to dweb.link when https://github.com/ipfs/kubo/issues/7318
 export const DEFAULT_PATH_GATEWAY = 'https://ipfs.io'
 export const DEFAULT_SUBDOMAIN_GATEWAY = 'https://dweb.link'
+export const DEFAULT_IPFS_CHECK_URL = 'https://check.ipfs.network'
 const IMG_HASH_1PX = 'bafkreib6wedzfupqy7qh44sie42ub4mvfwnfukmw6s2564flajwnt4cvc4' // 1x1.png
 const IMG_ARRAY = [
   { id: 'IMG_HASH_1PX', name: '1x1.png', hash: IMG_HASH_1PX },
@@ -20,10 +21,16 @@ const readPublicSubdomainGatewaySetting = () => {
   return setting || DEFAULT_SUBDOMAIN_GATEWAY
 }
 
+const readIpfsCheckUrlSetting = () => {
+  const setting = readSetting('ipfsCheckUrl')
+  return setting || DEFAULT_IPFS_CHECK_URL
+}
+
 const init = () => ({
   availableGateway: null,
   publicGateway: readPublicGatewaySetting(),
-  publicSubdomainGateway: readPublicSubdomainGatewaySetting()
+  publicSubdomainGateway: readPublicSubdomainGatewaySetting(),
+  ipfsCheckUrl: readIpfsCheckUrlSetting()
 })
 
 export const checkValidHttpUrl = (value) => {
@@ -169,6 +176,10 @@ const bundle = {
       return { ...state, publicSubdomainGateway: action.payload }
     }
 
+    if (action.type === 'SET_IPFS_CHECK_URL') {
+      return { ...state, ipfsCheckUrl: action.payload }
+    }
+
     return state
   },
 
@@ -184,11 +195,18 @@ const bundle = {
     dispatch({ type: 'SET_PUBLIC_SUBDOMAIN_GATEWAY', payload: address })
   },
 
+  doUpdateIpfsCheckUrl: (url) => async ({ dispatch }) => {
+    await writeSetting('ipfsCheckUrl', url)
+    dispatch({ type: 'SET_IPFS_CHECK_URL', payload: url })
+  },
+
   selectAvailableGateway: (state) => state?.gateway?.availableGateway,
 
   selectPublicGateway: (state) => state?.gateway?.publicGateway,
 
-  selectPublicSubdomainGateway: (state) => state?.gateway?.publicSubdomainGateway
+  selectPublicSubdomainGateway: (state) => state?.gateway?.publicSubdomainGateway,
+
+  selectIpfsCheckUrl: (state) => state?.gateway?.ipfsCheckUrl
 }
 
 export default bundle

src/components/ipfs-check-form/IpfsCheckForm.js

@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react'
+import { connect } from 'redux-bundler-react'
+import { withTranslation } from 'react-i18next'
+import Button from '../button/button.tsx'
+import { checkValidHttpUrl, DEFAULT_IPFS_CHECK_URL } from '../../bundles/gateway.js'
+
+const IpfsCheckForm = ({ t, doUpdateIpfsCheckUrl, ipfsCheckUrl }) => {
+  const [value, setValue] = useState(ipfsCheckUrl)
+  const initialIsValidUrl = !checkValidHttpUrl(value)
+  const [showFailState, setShowFailState] = useState(initialIsValidUrl)
+  const [isValidUrl, setIsValidUrl] = useState(initialIsValidUrl)
+
+  // Updates the border of the input to indicate validity
+  useEffect(() => {
+    setShowFailState(!isValidUrl)
+  }, [isValidUrl])
+
+  // Updates the border of the input to indicate validity
+  useEffect(() => {
+    const isValid = checkValidHttpUrl(value)
+    setIsValidUrl(isValid)
+    setShowFailState(!isValid)
+  }, [value])
+
+  const onChange = (event) => setValue(event.target.value)
+
+  const onSubmit = async (event) => {
+    event.preventDefault()
+
+    if (!isValidUrl) {
+      setShowFailState(true)
+      return
+    }
+
+    doUpdateIpfsCheckUrl(value)
+  }
+
+  const onDefault = async (event) => {
+    event.preventDefault()
+    setValue(DEFAULT_IPFS_CHECK_URL)
+    doUpdateIpfsCheckUrl(DEFAULT_IPFS_CHECK_URL)
+  }
+
+  const onKeyPress = (event) => {
+    if (event.key === 'Enter') {
+      onSubmit(event)
+    }
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <input
+        id='ipfs-check-url'
+        aria-label={t('ipfsCheckForm.label')}
+        placeholder={t('ipfsCheckForm.placeholder')}
+        type='text'
+        className={`w-100 lh-copy monospace f5 pl1 pv1 mb2 charcoal input-reset ba b--black-20 br1 ${showFailState ? 'focus-outline-red b--red-muted' : 'focus-outline-green b--green-muted'}`}
+        onChange={onChange}
+        onKeyPress={onKeyPress}
+        value={value}
+      />
+      <div className='tr'>
+        <Button
+          id='ipfs-check-default-button'
+          minWidth={100}
+          height={40}
+          bg='bg-charcoal'
+          className='tc'
+          disabled={value === DEFAULT_IPFS_CHECK_URL}
+          onClick={onDefault}>
+          {t('app:actions.reset')}
+        </Button>
+        <Button
+          id='ipfs-check-submit-button'
+          minWidth={100}
+          height={40}
+          className='mt2 mt0-l ml2-l tc'
+          disabled={!isValidUrl || value === ipfsCheckUrl}>
+          {t('actions.submit')}
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+export default connect(
+  'doUpdateIpfsCheckUrl',
+  'selectIpfsCheckUrl',
+  withTranslation('app')(IpfsCheckForm)
+)

src/diagnostics/check-screen/check-screen.tsx

@@ -1,15 +1,17 @@
 import React, { useRef, useEffect, useState } from 'react'
+import { connect } from 'redux-bundler-react'
 import { useDebouncedCallback } from '../../lib/hooks/use-debounced-callback'
+import { DEFAULT_IPFS_CHECK_URL } from '../../bundles/gateway.js'
 
 interface CheckScreenProps {
   cid?: string
+  ipfsCheckUrl?: string
 }
 
-// TODO: make configurable via Settings screen
-const IPFS_CHECK_BASE_URL = 'https://check.ipfs.network/'
-const IPFS_CHECK_ORIGIN = new URL(IPFS_CHECK_BASE_URL).origin
-
-const CheckScreen: React.FC<CheckScreenProps> = ({ cid }) => {
+const CheckScreen: React.FC<CheckScreenProps> = ({ cid, ipfsCheckUrl }) => {
+  const ipfsCheckBaseUrl = ipfsCheckUrl || DEFAULT_IPFS_CHECK_URL
+  const baseUrl = ipfsCheckBaseUrl.endsWith('/') ? ipfsCheckBaseUrl : `${ipfsCheckBaseUrl}/`
+  const ipfsCheckOrigin = new URL(baseUrl).origin
   const ref = useRef<HTMLIFrameElement>(null)
   const [isLoading, setIsLoading] = useState(true)
 
@@ -25,7 +27,7 @@ const CheckScreen: React.FC<CheckScreenProps> = ({ cid }) => {
 
     const onMsg = (e: MessageEvent<any>) => {
       // Validate origin to prevent XSS attacks
-      if (e.origin !== IPFS_CHECK_ORIGIN) return
+      if (e.origin !== ipfsCheckOrigin) return
       if (e.data?.type !== 'iframe-size:report') return
 
       // Hide loading message as soon as we get first message from iframe
@@ -51,10 +53,10 @@ const CheckScreen: React.FC<CheckScreenProps> = ({ cid }) => {
       window.removeEventListener('resize', requestSize)
       iframe.removeEventListener('load', onLoad)
     }
-  }, [requestSize])
+  }, [requestSize, ipfsCheckOrigin])
 
   // Build the iframe URL with optional CID parameter
-  const iframeSrc = cid ? `${IPFS_CHECK_BASE_URL}?cid=${encodeURIComponent(cid)}` : IPFS_CHECK_BASE_URL
+  const iframeSrc = cid ? `${baseUrl}?cid=${encodeURIComponent(cid)}` : baseUrl
 
   return (
     <div className="relative">
@@ -67,7 +69,7 @@ const CheckScreen: React.FC<CheckScreenProps> = ({ cid }) => {
         ref={ref}
         className="db bn w-100 overflow-y-hidden overflow-x-hidden"
         style={{ height: '80vh' }}
-        title={`Retrieval Check @ ${IPFS_CHECK_BASE_URL}`}
+        title={`ipfs-check @ ${baseUrl}`}
         src={iframeSrc}
         aria-busy={isLoading}
         // Sandbox permissions:
@@ -80,4 +82,7 @@ const CheckScreen: React.FC<CheckScreenProps> = ({ cid }) => {
   )
 }
 
-export default CheckScreen
+export default connect(
+  'selectIpfsCheckUrl',
+  CheckScreen
+)

src/settings/SettingsPage.js

@@ -18,6 +18,7 @@ import AnalyticsToggle from '../components/analytics-toggle/AnalyticsToggle.js'
 import ApiAddressForm from '../components/api-address-form/api-address-form'
 import PublicGatewayForm from '../components/public-gateway-form/PublicGatewayForm.js'
 import PublicSubdomainGatewayForm from '../components/public-subdomain-gateway-form/PublicSubdomainGatewayForm.js'
+import IpfsCheckForm from '../components/ipfs-check-form/IpfsCheckForm.js'
 import { JsonEditor } from './editor/JsonEditor.js'
 import Experiments from '../components/experiments/ExperimentsPanel.js'
 import Title from './Title.js'
@@ -99,6 +100,17 @@ export const SettingsPage = ({
       <PinningManager t={t} />
     </Box>
 
+    <Box className='mb3 pa4-l pa2'>
+      <Title>{t('retrievalDiagnosticService.title')}</Title>
+      <p className='ma0 mr2 lh-copy charcoal f6'>
+        <Trans i18nKey='retrievalDiagnosticService.description' t={t}>
+          <a className='link blue' href='https://github.com/ipfs/ipfs-check' target='_blank' rel='noopener noreferrer'>ipfs-check</a>
+          <a className='link blue' href='#/diagnostics/check'>retrieval diagnostics</a>
+        </Trans>
+      </p>
+      <IpfsCheckForm/>
+    </Box>
+
     <Box className='mb3 pa4-l pa2'>
       <div className='joyride-settings-language'>
         <Title>{t('language')}</Title>

tsconfig.json

@@ -69,6 +69,7 @@
     "src/bundles/retry-init.js",
     "src/bundles/local-storage.js",
     "src/bundles/task.js",
+    "src/bundles/gateway.js",
     "src/lib/count-dirs.js",
     "src/lib/sort.js",
     "src/lib/files.js",