fix: api with basic auth

This fixes basic auth and JSON support, and fixes E2E to work with
updated ipfs-provider and ipld-explorer-components.

.gitignore

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

src/bundles/ipfs-provider.js

@@ -1,13 +1,11 @@
-import multiaddr, { isMultiaddr } from 'multiaddr'
+import multiaddr from 'multiaddr'
 import HttpClient from 'ipfs-http-client'
 // @ts-ignore
 import { getIpfs, providers } from 'ipfs-provider'
 import first from 'it-first'
 import last from 'it-last'
 import * as Enum from './enum'
 import { perform } from './task'
-// @ts-ignore
-import toUri from 'multiaddr-to-uri'
 
 // @ts-ignore
 import ipldGit from 'ipld-git'
@@ -222,7 +220,7 @@ const asMultiaddress = (value) => {
  * @returns {HTTPClientOptions|null}
  */
 const asHttpClientOptions = (value) =>
-  typeof value === 'string' ? parseHTTPClientOptions(value) : readHTTPClinetOptions(value)
+  typeof value === 'string' ? parseHTTPClientOptions(value) : readHTTPClientOptions(value)
 
 /**
  *
@@ -231,19 +229,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)}`
         }
@@ -258,9 +254,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
@@ -386,14 +382,13 @@ const actions = {
             ...Object.values(ipldEthereum),
             ipldGit
           ]
-        },
-        url: null
+        }
       }
 
       if (typeof apiAddress === 'string') {
         ipfsOptions = {
           ...ipfsOptions,
-          url: isMultiaddr(apiAddress) ? toUri(apiAddress) : apiAddress
+          url: apiAddress
         }
       } else {
         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)}`
       }