chore: update ipld explorer components

.gitignore

@@ -24,3 +24,4 @@ yarn-error.log*
 .idea
 .eslintcache
 tsconfig.tsbuildinfo
+.connect-deps*

package.json

@@ -32,7 +32,7 @@
     "brace": "^0.11.1",
     "change-case": "^3.1.0",
     "chart.js": "^2.9.3",
-    "cids": "^1.1.5",
+    "cids": "^1.1.6",
     "countly-sdk-web": "^19.8.0",
     "d3": "^5.16.0",
     "datatransfer-files-promise": "^1.3.1",
@@ -41,20 +41,22 @@
     "file-extension": "^4.0.5",
     "filesize": "^6.1.0",
     "hashlru": "^2.3.0",
-    "i18next": "^19.9.0",
-    "i18next-browser-languagedetector": "^6.0.1",
-    "i18next-chained-backend": "^2.0.1",
-    "i18next-http-backend": "^1.1.1",
-    "i18next-icu": "^2.0.0",
+    "i18next": "^20.1.0",
+    "i18next-browser-languagedetector": "^6.1.0",
+    "i18next-chained-backend": "^2.1.0",
+    "i18next-http-backend": "^1.2.1",
+    "i18next-icu": "^2.0.3",
     "i18next-localstorage-backend": "^3.1.2",
     "internal-nav-helper": "^3.1.0",
-    "intl-messageformat": "^9.5.1",
+    "intl-messageformat": "^9.6.4",
     "ip": "^1.1.5",
-    "ipfs-css": "^1.2.0",
+    "ipfs-css": "^1.3.0",
     "ipfs-geoip": "^7.0.0",
     "ipfs-http-client": "49.0.2",
-    "ipfs-provider": "^1.1.0",
-    "ipld-explorer-components": "^1.6.1",
+    "ipfs-provider": "^2.0.1",
+    "ipld-ethereum": "^5.0.1",
+    "ipld-explorer-components": "^2.0.0",
+    "ipld-git": "^0.6.4",
     "is-binary": "^0.1.0",
     "is-ipfs": "^3.0.0",
     "it-all": "^1.0.5",
@@ -80,7 +82,7 @@
     "react-faux-dom": "^4.5.0",
     "react-helmet": "^5.2.1",
     "react-hook-form": "^6.0.6",
-    "react-i18next": "^11.8.8",
+    "react-i18next": "^11.8.12",
     "react-identicons": "^1.2.4",
     "react-joyride": "^2.3.0",
     "react-loadable": "^5.5.0",

src/bundles/ipfs-provider.js

@@ -7,6 +7,11 @@ import last from 'it-last'
 import * as Enum from './enum'
 import { perform } from './task'
 
+// @ts-ignore
+import ipldGit from 'ipld-git'
+// @ts-ignore
+import ipldEthereum from 'ipld-ethereum'
+
 /**
  * @typedef {import('ipfs').IPFSService} IPFSService
  * @typedef {import('cids')} CID
@@ -202,20 +207,27 @@ const asMultiaddress = (value) => {
 
 /**
  * @typedef {Object} HTTPClientOptions
+ * @property {string} [url]
  * @property {string} [host]
  * @property {string} [port] - (e.g. '443', or '80')
  * @property {string} [protocol] - (e.g 'https', 'http')
  * @property {string} [apiPath] - ('/api/v0' by default)
  * @property {Object<string, string>} [headers]
  */
 
+/**
+ * @typedef {Object} IPFSProviderHttpClientOptions
+ * @property {Object} [ipld]
+ * @property {string|undefined} [url]
+ */
+
 /**
  * Attempts to turn parse given input as an options object for ipfs-http-client.
  * @param {string|object} value
  * @returns {HTTPClientOptions|null}
  */
 const asHttpClientOptions = (value) =>
-  typeof value === 'string' ? parseHTTPClientOptions(value) : readHTTPClinetOptions(value)
+  typeof value === 'string' ? parseHTTPClientOptions(value) : readHTTPClientOptions(value)
 
 /**
  *
@@ -224,19 +236,17 @@ const asHttpClientOptions = (value) =>
 const parseHTTPClientOptions = (input) => {
   // Try parsing and reading as json
   try {
-    return readHTTPClinetOptions(JSON.parse(input))
+    return readHTTPClientOptions(JSON.parse(input))
   } catch (_) {}
 
   // turn URL with inlined basic auth into client options object
   try {
-    const uri = new URL(input)
-    const { username, password } = uri
+    const url = new URL(input)
+    const { username, password } = url
     if (username && password) {
+      url.username = url.password = ''
       return {
-        host: uri.hostname,
-        port: uri.port || (uri.protocol === 'https:' ? '443' : '80'),
-        protocol: uri.protocol.slice(0, -1), // trim out ':' at the end
-        apiPath: (uri.pathname !== '/' ? uri.pathname : 'api/v0'),
+        url: url.toString(),
         headers: {
           authorization: `Basic ${btoa(username + ':' + password)}`
         }
@@ -251,9 +261,9 @@ const parseHTTPClientOptions = (input) => {
  * @param {Object<string, any>} value
  * @returns {HTTPClientOptions|null}
  */
-const readHTTPClinetOptions = (value) => {
+const readHTTPClientOptions = (value) => {
   // https://github.com/ipfs/js-ipfs/tree/master/packages/ipfs-http-client#importing-the-module-and-usage
-  if (value && (value.host || value.apiPath || value.protocol || value.port || value.headers)) {
+  if (value && (!!value.url || value.host || value.apiPath || value.protocol || value.port || value.headers)) {
     return value
   } else {
     return null
@@ -367,12 +377,33 @@ const actions = {
    * @returns {function(Context):Promise<InitResult>}
    */
   doInitIpfs: () => perform('IPFS_INIT',
-  /**
-   * @param {Context} context
-   * @returns {Promise<InitResult>}
-   */
+    /**
+    * @param {Context} context
+    * @returns {Promise<InitResult>}
+    */
     async (context) => {
       const { apiAddress } = context.getState().ipfs
+      /** @type {IPFSProviderHttpClientOptions} */
+      let ipfsOptions = {
+        ipld: {
+          formats: [
+            ...Object.values(ipldEthereum),
+            ipldGit
+          ]
+        }
+      }
+
+      if (typeof apiAddress === 'string') {
+        ipfsOptions = {
+          ...ipfsOptions,
+          url: apiAddress
+        }
+      } else {
+        ipfsOptions = {
+          ...apiAddress,
+          ...ipfsOptions
+        }
+      }
 
       const result = await getIpfs({
         // @ts-ignore - TS can't seem to infer connectionTest option
@@ -391,7 +422,7 @@ const actions = {
         },
         loadHttpClientModule: () => HttpClient,
         providers: [
-          providers.httpClient({ apiAddress })
+          providers.httpClient(ipfsOptions)
         ]
       })
 

test/e2e/explore.test.js

@@ -24,8 +24,8 @@ describe('Explore screen', () => {
     await page.goto(webuiUrl + `#/explore/${cid}`, { waitUntil: 'networkidle0' })
     await page.waitForSelector(`a[href="#/explore/${cid}"]`)
     // expect node type
-    await expect(page).toMatch('DAG Node')
+    await expect(page).toMatch('Raw Block')
     // expect cid details
-    await expect(page).toMatch('base32 - cidv1 - raw - sha2-256-256-46532c71d1b730e168548410ddbb4186a2c3c0659e915b19d47f373ec6c5174a')
+    await expect(page).toMatch('base32 - cidv1 - raw - sha2-256~256~46532C71D1B730E168548410DDBB4186A2C3C0659E915B19D47F373EC6C5174A')
   })
 })

test/e2e/remote-api.test.js

@@ -142,9 +142,7 @@ const basicAuthConnectionConfirmation = async (user, password, proxyPort) => {
   await expectPeerIdOnStatusPage(ipfsd.api)
   // (2) go to Settings and confirm API string includes expected JSON config
   const apiOptions = JSON.stringify({
-    protocol: 'http',
-    host: '127.0.0.1',
-    port: `${proxyPort}`,
+    url: `http://127.0.0.1:${proxyPort}/`,
     headers: {
       authorization: `Basic ${nodeBtoa(user + ':' + password)}`
     }
@@ -230,9 +228,7 @@ describe('API with CORS and Basic Auth', () => {
 
   it('should work when localStorage[ipfsApi] is set to a JSON string with a custom ipfs-http-client config', async () => {
     const apiOptions = JSON.stringify({
-      protocol: 'http',
-      host: '127.0.0.1',
-      port: `${proxyPort}`,
+      url: `http://127.0.0.1:${proxyPort}/`,
       headers: {
         authorization: `Basic ${nodeBtoa(user + ':' + password)}`
       }
@@ -249,9 +245,7 @@ describe('API with CORS and Basic Auth', () => {
 
   it('should work when JSON with ipfs-http-client config is entered at the Settings page', async () => {
     const apiOptions = JSON.stringify({
-      protocol: 'http',
-      host: '127.0.0.1',
-      port: `${proxyPort}`,
+      url: `http://127.0.0.1:${proxyPort}/`,
       headers: {
         authorization: `Basic ${nodeBtoa(user + ':' + password)}`
       }

tsconfig.json

@@ -47,7 +47,7 @@
     ],
     "allowSyntheticDefaultImports": true,
     "isolatedModules": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "baseUrl": ".",
     "module": "esnext"
   },