feat: ipfs-http-client -> kubo-rpc-client

package.json

@@ -58,22 +58,22 @@
     "i18next-browser-languagedetector": "^6.1.3",
     "i18next-chained-backend": "^3.0.2",
     "i18next-http-backend": "^1.3.2",
-    "i18next-icu": "^2.0.3",
+    "i18next-icu": "2.0.3",
     "i18next-localstorage-backend": "^3.1.3",
     "internal-nav-helper": "^3.1.0",
-    "intl-messageformat": "^9.11.3",
+    "intl-messageformat": "9.12.0",
     "ip": "^1.1.5",
     "ipfs-css": "^1.4.0",
     "ipfs-geoip": "9.0.1",
-    "ipfs-http-client": "^49.0.2",
     "ipfs-provider": "^2.1.0",
-    "ipld-explorer-components": "^2.4.1",
+    "ipld-explorer-components": "^3.0.3",
     "is-ipfs": "^3.0.0",
     "istextorbinary": "^6.0.0",
     "it-all": "^1.0.5",
     "it-first": "^1.0.6",
     "it-last": "^1.0.5",
     "it-map": "^1.0.5",
+    "kubo-rpc-client": "^3.0.0",
     "milliseconds": "^1.0.3",
     "money-clip": "^3.0.5",
     "multiaddr": "^8.1.2",
@@ -173,7 +173,7 @@
     "esm": "^3.2.25",
     "fake-indexeddb": "^3.1.8",
     "get-port": "^5.1.1",
-    "go-ipfs": "0.16.0",
+    "go-ipfs": "^0.18.1",
     "http-proxy": "^1.18.1",
     "http-server": "^0.12.3",
     "ipfs": "0.58.3",
@@ -187,6 +187,7 @@
     "os-browserify": "^0.3.0",
     "patch-package": "^6.4.7",
     "path-browserify": "^1.0.1",
+    "peer-id": "^0.16.0",
     "playwright-chromium": "^1.27.1",
     "postcss-flexbugs-fixes": "^5.0.2",
     "run-script-os": "^1.1.6",

patches/ipld-explorer-components+3.0.3.patch

@@ -0,0 +1,107 @@
+diff --git a/node_modules/ipld-explorer-components/dist/bundles/explore.js b/node_modules/ipld-explorer-components/dist/bundles/explore.js
+index 123bc7f..29534b6 100644
+--- a/node_modules/ipld-explorer-components/dist/bundles/explore.js
++++ b/node_modules/ipld-explorer-components/dist/bundles/explore.js
+@@ -388,7 +388,9 @@ function getIpld() {
+
+ function _getIpld() {
+   _getIpld = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+-    var ipldDeps, _ipldDeps$map, _ipldDeps$map2, ipld, formats, ipldEthereum, ipldJson;
++    var _ipldEthereum$default;
++
++    var ipldDeps, _ipldDeps$map, _ipldDeps$map2, ipld, formatImports, formats, ipldEthereum, ipldJson;
+
+     return regeneratorRuntime.wrap(function _callee3$(_context4) {
+       while (1) {
+@@ -405,26 +407,42 @@ 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"];
+-            }), _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
++              var _mod$default;
++
++              // CommonJs exports object is .default when imported ESM style
++              var actualModule = (_mod$default = mod["default"]) !== null && _mod$default !== void 0 ? _mod$default : mod;
++              return actualModule;
++            }), _ipldDeps$map2 = _toArray(_ipldDeps$map), ipld = _ipldDeps$map2[0], formatImports = _ipldDeps$map2.slice(1);
++            formats = formatImports.map(function (actualModule) {
++              if (actualModule.util == null) {
++                // actualModule has no util. using blockcodec-to-ipld-format
++                var convertedModule = convert(actualModule);
++                return convertedModule;
++              }
+
+-            ipldEthereum = formats.pop();
+-            formats.push.apply(formats, _toConsumableArray(Object.values(ipldEthereum))); // ipldJson uses the new format, use the conversion tool
++              return actualModule;
++            }); // ipldEthereum is an Object, each key points to a ipld format impl
+
+-            _context4.next = 8;
++            _context4.next = 7;
++            return import(
++            /* webpackChunkName: "ipld" */
++            'ipld-ethereum');
++
++          case 7:
++            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 = 11;
+             return import(
+             /* webpackChunkName: "ipld" */
+             '@ipld/dag-json');
+
+-          case 8:
++          case 11:
+             ipldJson = _context4.sent;
+             formats.push(convert(ipldJson));
+             return _context4.abrupt("return", {
+@@ -432,7 +450,7 @@ function _getIpld() {
+               formats: formats
+             });
+
+-          case 11:
++          case 14:
+           case "end":
+             return _context4.stop();
+         }
+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..c130703 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 { decodeCid } from '../cid-info/decode-cid';
+ var humansize = filesize.partial({
+   round: 0
+ });
+@@ -122,6 +123,8 @@ var DagNodeIcon = function DagNodeIcon(_ref) {
+ };
+
+ var ObjectInfo = function ObjectInfo(_ref2) {
++  var _cidInfo$cid$codec;
++
+   var t = _ref2.t,
+       tReady = _ref2.tReady,
+       className = _ref2.className,
+@@ -137,6 +140,8 @@ var ObjectInfo = function ObjectInfo(_ref2) {
+       publicGatewayUrl = _ref2.publicGatewayUrl,
+       props = _objectWithoutProperties(_ref2, ["t", "tReady", "className", "type", "cid", "localPath", "size", "data", "links", "format", "onLinkClick", "gatewayUrl", "publicGatewayUrl"]);
+
++  var cidInfo = decodeCid(cid);
++  type = (_cidInfo$cid$codec = cidInfo.cid.codec) !== null && _cidInfo$cid$codec !== void 0 ? _cidInfo$cid$codec : type;
+   return /*#__PURE__*/React.createElement("section", _extends({
+     className: "pa4 sans-serif ".concat(className)
+   }, props), /*#__PURE__*/React.createElement("h2", {

patches/kubo-rpc-client+3.0.0.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/kubo-rpc-client/src/key/gen.js b/node_modules/kubo-rpc-client/src/key/gen.js
+index 18eaf08..1859a95 100644
+--- a/node_modules/kubo-rpc-client/src/key/gen.js
++++ b/node_modules/kubo-rpc-client/src/key/gen.js
+@@ -4,7 +4,7 @@ import { toUrlSearchParams } from '../lib/to-url-search-params.js'
+
+ /** @type {import('ipfs-core-types/src/key').GenOptions} */
+ const defaultOptions = {
+-  type: 'Ed25519'
++  type: 'ed25519'
+ }
+
+ export const createGen = configure(api => {

src/bundles/identity.test.js

@@ -31,7 +31,7 @@ describe.skip('identity.js', function () {
     beforeAll(async () => {
       // const kuboRpcModule = await import('kubo-rpc-client')
       // console.log('kuboRpcModule: ', kuboRpcModule)
-      const ipfsHttpModule = await import('ipfs-http-client')
+      const kuboRpcModule = await import('kubo-rpc-client')
       const { createController } = await import('ipfsd-ctl')
       const ipfsBin = (await import('go-ipfs')).default.path()
       console.log('ipfsBin: ', ipfsBin)
@@ -44,16 +44,13 @@ describe.skip('identity.js', function () {
         ipfsd = await createController({
           type: 'go',
           ipfsBin,
-          ipfsHttpModule: ipfsHttpModule.default,
-          // kuboRpcModule: kuboRpcModule.default,
+          kuboRpcModule,
           test: true,
           disposable: true
         })
         ipfs = ipfsd.api
       } else {
-        console.log('else')
-        // ipfs = kuboRpcModule(`http://localhost:${KUBO_PORT}`)
-        ipfs = ipfsHttpModule(`http://localhost:${KUBO_PORT}`)
+        ipfs = kuboRpcModule(`http://localhost:${KUBO_PORT}`)
       }
     })
 

src/bundles/ipfs-provider.js

@@ -359,7 +359,7 @@ const actions = {
         }
         */
       }
-      const ipfshttpModule = await import('ipfs-http-client')
+      const kuboRpcModule = await import('kubo-rpc-client')
 
       if (typeof apiAddress === 'string') {
         ipfsOptions = {
@@ -390,7 +390,7 @@ const actions = {
 
           return true
         },
-        loadHttpClientModule: () => ipfshttpModule.default,
+        loadHttpClientModule: () => kuboRpcModule,
         providers: [
           providers.httpClient(ipfsOptions)
         ]

src/components/address/Address.js

@@ -4,10 +4,7 @@ import Multiaddr from 'multiaddr'
 const Address = ({ value }) => {
   if (!value) return null
 
-  // future-proofing interop for multiaddr > 8.x
-  value = value.buffer || value
-
-  const ma = Multiaddr(value)
+  const ma = Multiaddr(value.toString())
   const protos = ma.protoNames().concat(['ipfs', 'p2p'])
   const parts = ma.toString().split('/')
 

src/components/cid/Cid.js

@@ -3,7 +3,7 @@ import { Identicon } from '../identicon/Identicon.js'
 import ErrorBoundary from '../error/ErrorBoundary.js'
 
 export function cidStartAndEnd (value) {
-  const chars = value.split('')
+  const chars = value.toString().split('')
   if (chars.length <= 9) return value
   const start = chars.slice(0, 4).join('')
   const end = chars.slice(chars.length - 4).join('')

src/explore/ExploreContainer.js

@@ -9,12 +9,14 @@ const ExploreContainer = ({
   availableGatewayUrl,
   publicGateway
 }) => (
-  <ExplorePage
-    runTour={toursEnabled}
-    joyrideCallback={handleJoyrideCallback}
-    gatewayUrl={availableGatewayUrl}
-    publicGateway={publicGateway}
-  />
+  <div className="e2e-explorePage">
+    <ExplorePage
+      runTour={toursEnabled}
+      joyrideCallback={handleJoyrideCallback}
+      gatewayUrl={availableGatewayUrl}
+      publicGateway={publicGateway}
+    />
+  </div>
 )
 
 export default connect(

src/status/NodeInfo.js

@@ -27,7 +27,7 @@ class NodeInfo extends React.Component {
 
     return (
       <DefinitionList>
-        <Definition term={t('terms.peerId')} desc={this.getField(identity, 'id')} />
+        <Definition term={t('terms.peerId')} desc={this.getField(identity, 'id').toString()} />
         <Definition term={t('terms.agent')} desc={<VersionLink agentVersion={this.getField(identity, 'agentVersion')} />} />
         <Definition term={t('terms.ui')} desc={process.env.REACT_APP_GIT_REV} />
       </DefinitionList>