refactor: update network punycode warning, isValidASCIIURL, and toPunycodeURL logic

ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js

@@ -289,9 +289,10 @@ function getValues(pendingApproval, t, actions, history, data) {
             [t('blockExplorerUrl')]: t('blockExplorerUrlDefinition'),
           },
           warnings: {
-            [t('networkURL')]: isValidASCIIURL(customRpcUrl)
-              ? undefined
-              : t('networkUrlErrorWarning', [toPunycodeURL(customRpcUrl)]),
+            [t('networkURL')]:
+              !customRpcUrl || isValidASCIIURL(customRpcUrl)
+                ? undefined
+                : t('networkUrlErrorWarning', [toPunycodeURL(customRpcUrl)]),
             [t('currencySymbol')]: data.currencySymbolWarning,
           },
           dictionary: {

ui/pages/confirmations/utils/confirm.test.ts

@@ -79,12 +79,34 @@ describe('confirm util', () => {
   });
 
   describe('isValidASCIIURL', () => {
-    it('returns true for URL containing only ASCII characters', () => {
+    it('returns true for URL containing only ASCII characters in its hostname', () => {
       expect(isValidASCIIURL('https://www.google.com')).toEqual(true);
     });
 
-    it('returns false for URL containing special character', () => {
+    it('returns true for URL with both its hostname and path containing ASCII characters', () => {
+      expect(
+        isValidASCIIURL('https://infura.io/gnosis?x=xn--ifura-dig.io'),
+      ).toStrictEqual(true);
+    });
+
+    it('returns true for URL with its hostname containing ASCII characters and its path containing non-ASCII characters', () => {
+      expect(
+        isValidASCIIURL('https://infura.io/gnosis?x=iոfura.io'),
+      ).toStrictEqual(true);
+      expect(
+        isValidASCIIURL('infura.io:7777/gnosis?x=iոfura.io'),
+      ).toStrictEqual(true);
+    });
+
+    it('returns false for URL with its hostname containing non-ASCII characters', () => {
       expect(isValidASCIIURL('https://iոfura.io/gnosis')).toStrictEqual(false);
+      expect(isValidASCIIURL('iոfura.io:7777/gnosis?x=test')).toStrictEqual(
+        false,
+      );
+    });
+
+    it('returns false for empty string', () => {
+      expect(isValidASCIIURL('')).toStrictEqual(false);
     });
   });
 

ui/pages/confirmations/utils/confirm.ts

@@ -69,23 +69,37 @@ export const isPermitSignatureRequest = (request?: Confirmation) => {
   return PRIMARY_TYPES_PERMIT.includes(primaryType);
 };
 
-export const isValidASCIIURL = (urlString?: string) => {
+/**
+ * @param urlString - The URL to check
+ * @returns True if the URL hostname contains only ASCII characters, false otherwise. The URL is still valid if the path contains non-ASCII characters.
+ */
+export const isValidASCIIURL = (urlString?: string): boolean => {
   try {
-    return urlString?.includes(new URL(urlString).host);
+    if (!urlString || urlString.length === 0) {
+      return false;
+    }
+
+    return urlString.includes(new URL(urlString).host);
   } catch (exp: unknown) {
-    console.error(exp);
+    console.error(
+      `Failed to detect if URL hostname contains non-ASCII characters: ${urlString}. Error: ${exp}`,
+    );
     return false;
   }
 };
 
-export const toPunycodeURL = (urlString: string) => {
+/**
+ * Converts the URL to Punycode
+ *
+ * @param urlString - The URL to convert
+ * @returns The Punycode URL
+ */
+export const toPunycodeURL = (urlString: string): string | undefined => {
   try {
     const url = new URL(urlString);
-    const { protocol, hostname, port, search, hash } = url;
-    const pathname =
-      url.pathname === '/' && !urlString.endsWith('/') ? '' : url.pathname;
+    const isWithoutEndSlash = url.pathname === '/' && !urlString.endsWith('/');
 
-    return `${protocol}//${hostname}${port}${pathname}${search}${hash}`;
+    return isWithoutEndSlash ? url.href.slice(0, -1) : url.href;
   } catch (err: unknown) {
     console.error(`Failed to convert URL to Punycode: ${err}`);
     return undefined;