fix: issues with using in ESM webui

src/bundles/explore.js

@@ -137,7 +137,15 @@ function ensureLeadingSlash (str) {
 function makeIpld (IpldResolver, ipldFormats, getIpfs) {
   return new IpldResolver({
     blockService: painfullyCompatibleBlockService(getIpfs()),
-    formats: ipldFormats
+    formats: ipldFormats,
+    async loadFormat (codec) {
+      const format = ipldFormats.find(f => f.codec === codec)
+      if (format == null) {
+        throw new Error('No format found for codec: ' + codec)
+      }
+      return format
+    }
+
   })
 }
 
@@ -168,6 +176,9 @@ function painfullyCompatibleBlockService (ipfs) {
           // recover from new return type in modern JS APIs
           // https://github.com/ipfs/js-ipfs/pull/3990
           if (typeof block.cid === 'undefined') {
+            if (typeof cid === 'string') {
+              return { cid: CID.parse(cid), data: block }
+            }
             return { cid, data: block }
           }
           return block
@@ -185,16 +196,44 @@ async function getIpld () {
     import(/* webpackChunkName: "ipld" */ '@ipld/dag-cbor'),
     import(/* webpackChunkName: "ipld" */ '@ipld/dag-pb'),
     import(/* webpackChunkName: "ipld" */ 'ipld-git'),
-    import(/* webpackChunkName: "ipld" */ 'ipld-raw'),
-    import(/* webpackChunkName: "ipld" */ 'ipld-ethereum')
+    import(/* webpackChunkName: "ipld" */ 'ipld-raw')
   ])
-
   // CommonJs exports object is .default when imported ESM style
-  const [ipld, ...formats] = ipldDeps.map(mod => mod.default)
+  const [ipld, ...formatImports] = ipldDeps.map(mod => mod.default ?? mod)
+  const formats = formatImports.map((actualModule) => {
+    if (actualModule.util == null) {
+      // actualModule has no util. using blockcodec-to-ipld-format
+      const options = {}
+      if (actualModule.code === 112) {
+        /**
+         * based off of
+         * * https://github.com/ipld/js-ipld-dag-cbor/blob/b1112f00b605661f6766cd420f48f730ac77a6e0/src/resolver.js#L15-L38
+         * * https://github.com/ipld/js-blockcodec-to-ipld-format/blob/master/src/index.js#L38-L55
+         */
+        options.resolve = (buf, path = '') => {
+          let value = actualModule.decode(buf)
+          const entries = path.split('/').filter(x => x)
+
+          if (entries.length > 0) {
+            const entry = entries.shift()
+            value = value.Links.find((link) => link.Name === entry)
+            if (typeof value === 'undefined') {
+              throw new Error(`Could not find link with name '${entry}'`)
+            }
+          }
+
+          return { value, remainderPath: entries.join('/') }
+        }
+      }
+
+      return convert(actualModule, options)
+    }
+    return actualModule
+  })
 
   // ipldEthereum is an Object, each key points to a ipld format impl
-  const ipldEthereum = formats.pop()
-  formats.push(...Object.values(ipldEthereum))
+  const ipldEthereum = await import(/* webpackChunkName: "ipld" */ 'ipld-ethereum')
+  formats.push(...Object.values(ipldEthereum.default ?? ipldEthereum))
 
   // ipldJson uses the new format, use the conversion tool
   const ipldJson = await import(/* webpackChunkName: "ipld" */ '@ipld/dag-json')

src/components/object-info/ObjectInfo.js

@@ -3,6 +3,7 @@ import { withTranslation } from 'react-i18next'
 import { ObjectInspector, chromeLight } from '@tableflip/react-inspector'
 import filesize from 'filesize'
 import LinksTable from './LinksTable'
+import { decodeCid } from '../cid-info/decode-cid'
 const humansize = filesize.partial({ round: 0 })
 
 const objectInspectorTheme = {
@@ -63,6 +64,12 @@ const DagNodeIcon = ({ type, ...props }) => (
 )
 
 const ObjectInfo = ({ t, tReady, className, type, cid, localPath, size, data, links, format, onLinkClick, gatewayUrl, publicGatewayUrl, ...props }) => {
+  try {
+    const cidInfo = decodeCid(cid)
+    type = cidInfo.cid.codec
+  } catch {
+    // ignore the error and stick with existing type value.
+  }
   return (
     <section className={`pa4 sans-serif ${className}`} {...props}>
       <h2 className='ma0 lh-title f4 fw4 montserrat pb2' title={type}>

src/lib/resolve-ipld-path.js

@@ -1,3 +1,5 @@
+import { CID } from 'multiformats/cid'
+
 import normaliseDagNode from './normalise-dag-node'
 
 /**
@@ -92,6 +94,13 @@ export async function ipldGetNodeAndRemainder (ipld, sourceCid, path) {
 
   // TODO: handle indexing into dag-pb links without using Links prefix as per go-ipfs dag.get does.
   // Current js-ipld-dag-pb resolver will throw with a path not available error if Links prefix is missing.
+
+  // ensure we're using CID instances
+  const cidInstance = CID.asCID(sourceCid)
+  if (typeof sourceCid === 'string' && cidInstance == null) {
+    sourceCid = CID.parse(sourceCid)
+  }
+
   return {
     value: await ipld.get(sourceCid),
     remainderPath: (await ipld.resolve(sourceCid, path || '/').first()).remainderPath