fix: various fixes for ipfs-webui consumption (#458)

* fix: setExplorePath doesnt throw for encoded paths

* fix: kuboGateway defaults are handled gracefully

* chore: move localStorage info log

* fix: do not init helia on mount

* fix: react style prop semicolon warning

* chore: lint fix

Author: SgtPooki

src/components/object-info/links-table.tsx

@@ -46,7 +46,7 @@ interface RowProps {
 
 const Row: React.FC<RowProps> = ({ onLinkClick, startIndex, index, rowHeight, link }) => {
   const key = startIndex + index
-  const backgroundColor = key % 2 === 0 ? '#fff' : 'rgb(251, 251, 251);'
+  const backgroundColor = key % 2 === 0 ? '#fff' : 'rgb(251, 251, 251)'
 
   return (
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions

src/lib/init-helia.ts

@@ -1,29 +1,36 @@
 import { trustlessGateway } from '@helia/block-brokers'
 import { createHeliaHTTP } from '@helia/http'
-import { type Helia } from '@helia/interface'
+import { type Routing, type Helia } from '@helia/interface'
 import { delegatedHTTPRouting, httpGatewayRouting } from '@helia/routers'
 import { addDagNodeToHelia } from '../lib/helpers.js'
 import { getHashersForCodes } from './hash-importer.js'
 import type { KuboGatewayOptions } from '../types.d.js'
 
+const localStorageKey = 'explore.ipld.gatewayEnabled'
+console.info(
+  `🎛️ Customise whether ipld-explorer-components fetches content from gateways by setting an '${localStorageKey}' value to true/false in localStorage. e.g. localStorage.setItem('${localStorageKey}', false) -- NOTE: defaults to true`
+)
+
 /**
  * Whether to enable remote gateways for fetching content. We default to true if the setting is not present.
  */
 function areRemoteGatewaysEnabled (): boolean {
-  const localStorageKey = 'explore.ipld.gatewayEnabled'
-  console.info(
-    `🎛️ Customise whether ipld-explorer-components fetches content from gateways by setting an '${localStorageKey}' value to true/false in localStorage. e.g. localStorage.setItem('explore.ipld.gatewayEnabled', false) -- NOTE: defaults to true`
-  )
   const gatewayEnabledSetting = localStorage.getItem(localStorageKey)
 
   return gatewayEnabledSetting != null ? JSON.parse(gatewayEnabledSetting) : true
 }
 
 export default async function initHelia (kuboGatewayOptions: KuboGatewayOptions): Promise<Helia> {
-  const routers = [
-    // Always add the Kubo gateway
-    httpGatewayRouting({ gateways: [`${kuboGatewayOptions.protocol ?? 'http'}://${kuboGatewayOptions.host}:${kuboGatewayOptions.port}`] })
-  ]
+  const routers: Array<Partial<Routing>> = []
+  const kuboGatewayUrlString = `${kuboGatewayOptions.protocol ?? 'http'}://${kuboGatewayOptions.host}:${kuboGatewayOptions.port}`
+  try {
+    const kuboGatewayUrl = new URL(kuboGatewayUrlString)
+    // Always try to add the Kubo gateway if we have a valid URL
+    routers.push(httpGatewayRouting({ gateways: [kuboGatewayUrl.href] }))
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('Invalid kuboGateway url string: %s', kuboGatewayUrlString, error)
+  }
 
   if (areRemoteGatewaysEnabled()) {
     // eslint-disable-next-line no-console

src/providers/explore.tsx

@@ -153,7 +153,7 @@ export const ExploreProvider = ({ children, state, explorePathPrefix = '#/explor
 
   const setExplorePath = (path: string | null): void => {
     const newPath = processPath(path, explorePathPrefix)
-    if (newPath != null && !window.location.href.includes(newPath)) {
+    if (newPath != null && !window.location.href.includes(encodeURI(newPath))) {
       throw new Error('setExplorePath should only be used to update the state, not the URL. If you are using a routing library that doesn\'t allow you to listen to hashchange events, ensure the URL is updated prior to calling setExplorePath.')
     }
     setExploreState((exploreState) => ({

src/providers/helia.tsx

@@ -1,5 +1,5 @@
 import { type Helia } from '@helia/interface'
-import React, { createContext, useContext, useEffect, useState, useCallback } from 'react'
+import React, { createContext, useContext, useState, useCallback } from 'react'
 import packageJson from '../../package.json'
 import initHelia from '../lib/init-helia.js'
 import type { KuboGatewayOptions } from '../types.js'
@@ -29,7 +29,8 @@ const getDefaultKuboGatewayOptions = (): KuboGatewayOptions => {
   const localStorageKuboGatewayOptions = localStorage.getItem('kuboGateway')
   if (localStorageKuboGatewayOptions != null) {
     try {
-      return JSON.parse(localStorageKuboGatewayOptions) as KuboGatewayOptions
+      const kuboGatewaySettings = JSON.parse(localStorageKuboGatewayOptions) as KuboGatewayOptions
+      return { ...defaultKuboGatewayOptions, ...kuboGatewaySettings }
     } catch (e) {
       console.error('getDefaultKuboGatewayOptions error', e)
     }
@@ -67,11 +68,6 @@ export const HeliaProvider = ({ children }: React.ComponentProps<any>): any => {
     }
   }, [kuboGatewayOptions, setHelia])
 
-  useEffect(() => {
-    void doInitHelia()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
   return (
     <HeliaContext.Provider value={{ helia, error, kuboGatewayOptions, selectHeliaReady, selectHeliaIdentity, doInitHelia, setKuboGatewayOptions: setKuboGatewayOptionsPublic }}>
       {children}