Add support for rpcUrl with basic auth when retrieving chainId on net… (#9815)

ui/app/helpers/utils/util.js

@@ -464,8 +464,22 @@ export function constructTxParams({
  * or throws an error in case of failure.
  */
 export async function jsonRpcRequest(rpcUrl, rpcMethod, rpcParams = []) {
+  let fetchUrl = rpcUrl
+  const headers = {
+    'Content-Type': 'application/json',
+  }
+  // Convert basic auth URL component to Authorization header
+  const { origin, pathname, username, password, search } = new URL(rpcUrl)
+  // URLs containing username and password needs special processing
+  if (username && password) {
+    const encodedAuth = Buffer.from(`${username}:${password}`).toString(
+      'base64',
+    )
+    headers.Authorization = `Basic ${encodedAuth}`
+    fetchUrl = `${origin}${pathname}${search}`
+  }
   const jsonRpcResponse = await window
-    .fetch(rpcUrl, {
+    .fetch(fetchUrl, {
       method: 'POST',
       body: JSON.stringify({
         id: Date.now().toString(),
@@ -473,9 +487,7 @@ export async function jsonRpcRequest(rpcUrl, rpcMethod, rpcParams = []) {
         method: rpcMethod,
         params: rpcParams,
       }),
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers,
       cache: 'default',
     })
     .then((httpResponse) => httpResponse.json())