fix: fix url bug display (#8877)

## **Description**

There is a bug with the RPC url not being displayed correctly when
trying to add a network via a dapp. This raises a security concern
because the user can potentially add a malicious network if a network
RPC URL is not shown.

Furthermore, the height of the network added sheet extends further than
that of prod.

## **Related issues**

Fixes: [#1586 ](MetaMask/mobile-planning#1586)

## **Manual testing steps**

1. Given I am on the browser view
2. And I connect my wallet to chainlist.wtf
3. When I add "Avalanche"
4. Then the add network sheet is displayed
5. But the RPC URL is not displayed correctly

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->
<img width="370" alt="before-bug"
src="https://github.com/MetaMask/metamask-mobile/assets/26223211/32c69155-458e-4d88-bc27-d4a175827b59">


### **After**

<!-- [screenshots/recordings] -->

<img width="382" alt="fix-bug"
src="https://github.com/MetaMask/metamask-mobile/assets/26223211/04b9b02d-d5de-4dad-8bd5-8e937045e74f">


## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained what problem this PR is solving and how it
is solved.
- [x] I've linked related issues
- [x] I've included manual testing steps
- [x] I've included screenshots/recordings if applicable
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [x] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap

@@ -425,7 +425,7 @@ exports[`NetworkDetails renders correctly 1`] = `
                         }
                       }
                     >
-                      https:/
+                      https://localhost:8545
                     </Text>
                     <TouchableOpacity
                       activeOpacity={0.5}

app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap

@@ -384,7 +384,7 @@ exports[`NetworkVerificationInfo renders correctly 1`] = `
               }
             }
           >
-            http:/
+            http://test.com
           </Text>
           <TouchableOpacity
             activeOpacity={0.5}

app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap

@@ -1253,7 +1253,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing
                                                         }
                                                       }
                                                     >
-                                                      https:/
+                                                      https://evm.cronos.org
                                                     </Text>
                                                     <TouchableOpacity
                                                       activeOpacity={0.5}

app/util/hideKeyFromUrl.test.ts

@@ -12,4 +12,16 @@ describe('hideKeyFromUrl', () => {
     const sanitizedUrl = hideKeyFromUrl(urlString);
     expect(sanitizedUrl).toEqual(undefined);
   });
+
+  it('should not hide key from url', () => {
+    const urlString = 'https://www.example.com';
+    const sanitizedUrl = hideKeyFromUrl(urlString);
+    expect(sanitizedUrl).toEqual('https://www.example.com');
+  });
+
+  it('should hide key from url if protocol is not defined', () => {
+    const urlString = 'www.example.com/v1/1234';
+    const sanitizedUrl = hideKeyFromUrl(urlString);
+    expect(sanitizedUrl).toEqual('www.example.com/v1');
+  });
 });

app/util/hideKeyFromUrl.ts

@@ -1,4 +1,19 @@
-const hideKeyFromUrl = (url: string | undefined) =>
-  url?.substring(0, url.lastIndexOf('/'));
+const hideKeyFromUrl = (url: string | undefined) => {
+  if (!url) return url;
+
+  const regex = /^(https?:\/\/)(.*)$/;
+  const match = url.match(regex);
+
+  if (match) {
+    const protocol = match[1];
+    let restOfUrl = match[2];
+
+    // eslint-disable-next-line no-useless-escape
+    restOfUrl = restOfUrl.replace(/\/[^\/]*$/, '');
+    return protocol + restOfUrl;
+  }
+
+  return url?.substring(0, url.lastIndexOf('/'));
+};
 
 export default hideKeyFromUrl;