feat!: replace ipfs-http-client with kubo-rpc-client

[SgtPooki]

Is your feature request related to a problem? Please describe.
Since js-kubo-rpc-client is now officially released with all interface tests passing, we should use that instead of ipfs-http-client.

Describe the solution you'd like

1. Remove ipfs-http-client dependency completely from our dependency tree
2. Use kubo-rpc-client instead of ipfs-http-client

Describe alternatives you've considered
Discussed elsewhere, please see ipfs/kubo#9125

Additional context

• feat: update ipfs-http-client #1840
• chore: Dependency updates #1965

---

Pre-reqs

Tasks

Beta Give feedback

1. Migrate to ESM #2090
   +0

[SgtPooki]

I spent Friday (2023-01-13) attempting this, and we will need to upgrade to ESM first. Things need to be more manageable by doing that first.

[tinytb]

• upgrading to ESM should be feasible
• there will be some complexity in the build tools and dependencies that aren't ESM
• will have a better idea of what's involved after spending a few hours on this

[SgtPooki]

Currently blocked by ipfs/js-kubo-rpc-client#143 which has a PR out: ipfs/js-kubo-rpc-client#145

[SgtPooki]

this work is mostly done on the esm/kubo-rpc-client branch but but failing in a single e2e test when using ipld-explorer-components (when doing the steps of the test manually, webui works as expected, but confirmed not working when running via playwright)

[SgtPooki]

the ipld-explorer-components code at https://github.com/ipfs/ipld-explorer-components/blob/23cf07da8a78b1d6d9aaa20a8e5a32ef42936ad8/src/bundles/explore.js#L182-L204 is showing undefined for some formats that are returned, which is causing the TypeError: Cannot read properties of undefined (reading 'codec')

Trying to debug if ipld-explorer-components is missing a peerDependency callout, or if import is failing because of webui esm importing from the CJS ipld-explorer-components.

funny thing is that this is only occurring in playwright tests though, and works perfectly fine with npm run start. will check if it works with serving the build directly (same way playwright runs the test)

[SgtPooki]

confirmed that when running things manually, it's also broken.

# terminal 1
ipfs daemon

# terminal 2
npm run test:build && npx http-server ./build/ -c-1 -a 127.0.0.1 -p 3001

# browser:
http://127.0.0.1:3001/#/explore/bafkreicgkmwhdunxgdqwqveecdo3wqmgulb4azm6sfnrtvd7g47mnrixji

at least my repro steps should be easier now.

[SgtPooki]

fixed locally with a patch,

diff --git a/node_modules/ipld-explorer-components/dist/bundles/explore.js b/node_modules/ipld-explorer-components/dist/bundles/explore.js
index 123bc7f..8cbbfd1 100644
--- a/node_modules/ipld-explorer-components/dist/bundles/explore.js
+++ b/node_modules/ipld-explorer-components/dist/bundles/explore.js
@@ -388,6 +394,8 @@ function getIpld() {

 function _getIpld() {
   _getIpld = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+    var _ipldEthereum$default;
+
     var ipldDeps, _ipldDeps$map, _ipldDeps$map2, ipld, formats, ipldEthereum, ipldJson;

     return regeneratorRuntime.wrap(function _callee3$(_context4) {
@@ -405,26 +413,38 @@ function _getIpld() {
             /* webpackChunkName: "ipld" */
             'ipld-git'), import(
             /* webpackChunkName: "ipld" */
-            'ipld-raw'), import(
-            /* webpackChunkName: "ipld" */
-            'ipld-ethereum')]);
+            'ipld-raw')]);

           case 2:
             ipldDeps = _context4.sent;
             // CommonJs exports object is .default when imported ESM style
             _ipldDeps$map = ipldDeps.map(function (mod) {
-              return mod["default"];
+              var _mod$default;
+
+              var actualModule = (_mod$default = mod["default"]) !== null && _mod$default !== void 0 ? _mod$default : mod;
+
+              if (actualModule.name != null && actualModule.code != null && actualModule.codec == null) {
+                actualModule.codec = actualModule.code;
+              }
+
+              return actualModule;
             }), _ipldDeps$map2 = _toArray(_ipldDeps$map), ipld = _ipldDeps$map2[0], formats = _ipldDeps$map2.slice(1); // ipldEthereum is an Object, each key points to a ipld format impl

-            ipldEthereum = formats.pop();
-            formats.push.apply(formats, _toConsumableArray(Object.values(ipldEthereum))); // ipldJson uses the new format, use the conversion tool
+            _context4.next = 6;
+            return import(
+            /* webpackChunkName: "ipld" */
+            'ipld-ethereum');
+
+          case 6:
+            ipldEthereum = _context4.sent;
+            formats.push.apply(formats, _toConsumableArray(Object.values((_ipldEthereum$default = ipldEthereum["default"]) !== null && _ipldEthereum$default !== void 0 ? _ipldEthereum$default : ipldEthereum))); // ipldJson uses the new format, use the conversion tool

-            _context4.next = 8;
+            _context4.next = 10;
             return import(
             /* webpackChunkName: "ipld" */
             '@ipld/dag-json');

-          case 8:
+          case 10:
             ipldJson = _context4.sent;
             formats.push(convert(ipldJson));
             return _context4.abrupt("return", {
@@ -432,7 +452,7 @@ function _getIpld() {
               formats: formats
             });

-          case 11:
+          case 13:
           case "end":
             return _context4.stop();
         }

but display name is still different from explore.ipld.io:

webui local changes

explore.ipld.io

---

From debugging this is due to codec numbers being used instead of names at https://github.com/ipfs/ipld-explorer-components/blob/23cf07da8a78b1d6d9aaa20a8e5a32ef42936ad8/src/components/object-info/ObjectInfo.js#L18-L29

working on a patch (and then a PR to ipld-explorer-components)

[SgtPooki]

Fixed block naming with

diff --git a/node_modules/ipld-explorer-components/dist/components/object-info/ObjectInfo.js b/node_modules/ipld-explorer-components/dist/components/object-info/ObjectInfo.js
index c4bcf4e..cd8112e 100644
--- a/node_modules/ipld-explorer-components/dist/components/object-info/ObjectInfo.js
+++ b/node_modules/ipld-explorer-components/dist/components/object-info/ObjectInfo.js
@@ -15,6 +15,7 @@ import { withTranslation } from 'react-i18next';
 import { ObjectInspector, chromeLight } from '@tableflip/react-inspector';
 import filesize from 'filesize';
 import LinksTable from './LinksTable';
+import multicodec from 'multicodec';
 var humansize = filesize.partial({
   round: 0
 });
@@ -77,16 +78,30 @@ var nodeStyles = {
     color: '#383838'
   }
 };
+/**
+ * Support getting the style object for a node type using the codec number by redirecting the number to the name
+ */
+
+var nodeStylesProxy = new Proxy(nodeStyles, {
+  get: function get(target, prop) {
+    if (isNaN(prop)) {
+      return target[prop];
+    }
+
+    console.log("getting codec name from code number for ".concat(prop, ": "), multicodec.getNameFromCode(prop));
+    return target[multicodec.getNameFromCode(prop)];
+  }
+});
 export function shortNameForNode(type) {
-  var style = nodeStyles[type];
+  var style = nodeStylesProxy[type];
   return style && style.shortName || 'DAG';
 }
 export function nameForNode(type) {
-  var style = nodeStyles[type];
+  var style = nodeStylesProxy[type];
   return style && style.name || 'DAG Node';
 }
 export function colorForNode(type) {
-  var style = nodeStyles[type];
+  var style = nodeStylesProxy[type];
   return style && style.color || '#ea5037';
 } // '/a/b' => ['$', '$.a', '$.a.b']
 // See: https://github.com/xyc/react-inspector#api

[SgtPooki]

npm run test is succeeding fully again

[SgtPooki]

npm run test-storybook:ci succeeding. rebasing and opening PR