fix: normalize ReactNative URLS (#190)

Co-authored-by: Alex Donesky <adonesky@gmail.com>

Author: wenfix

packages/connect-multichain/CHANGELOG.md

@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Normalize non-http(s) dapp URLs to valid https URLs on React Native to prevent RPC middleware crashes ([#190](https://github.com/MetaMask/connect-monorepo/pull/190))
 - **BREAKING** `createMultichainClient()` now returns a singleton. Any incoming constructor params on subsequent calls to `createMultichainClient()` will be applied to the existing singleton instance except for the `dapp`, `storage`, and `ui.factory` param options. ([#157](https://github.com/MetaMask/connect-monorepo/pull/157))
 - **BREAKING** `ConnectMultichain.openDeeplinkIfNeeded()` is renamed to `openSimpleDeeplinkIfNeeded()` ([#176](https://github.com/MetaMask/connect-monorepo/pull/176))
 - `ConnectMultichain.connect()` now throws an `'Existing connection is pending. Please check your MetaMask Mobile app to continue.'` error if there is already an pending connection attempt. Previously it would abort that ongoing connection in favor of a new one. ([#157](https://github.com/MetaMask/connect-monorepo/pull/157))

packages/connect-multichain/src/domain/multichain/types.ts

@@ -28,6 +28,8 @@ export type { SessionData } from '@metamask/multichain-api-client';
 export type DappSettings = {
   name: string;
   url?: string;
+  /** The original non-http(s) URL before normalization on React Native platforms */
+  nativeScheme?: string;
 } & ({ iconUrl?: string } | { base64Icon?: string });
 
 export type ConnectionRequest = {

packages/connect-multichain/src/multichain/utils/index.test.ts

@@ -263,6 +263,92 @@ t.describe('Utils', () => {
         );
       },
     );
+
+    t.it(
+      'should normalize non-http URL to https on ReactNative platform',
+      () => {
+        const mockGetPlatformType = t.vi.mocked(getPlatformType);
+        mockGetPlatformType.mockReturnValue(PlatformType.ReactNative);
+        options.dapp.url = 'react-native-playground://';
+        options.dapp.name = 'playground';
+
+        const result = utils.setupDappMetadata(options);
+
+        t.expect(result.dapp.url).toBe(
+          'https://react-native-playground.rn.dapp.local',
+        );
+        t.expect(result.dapp.nativeScheme).toBe('react-native-playground://');
+      },
+    );
+
+    t.it(
+      'should normalize custom scheme URL with path on ReactNative platform',
+      () => {
+        const mockGetPlatformType = t.vi.mocked(getPlatformType);
+        mockGetPlatformType.mockReturnValue(PlatformType.ReactNative);
+        options.dapp.url = 'myapp://path';
+        options.dapp.name = 'myapp';
+
+        const result = utils.setupDappMetadata(options);
+
+        t.expect(result.dapp.url).toBe('https://myapp.rn.dapp.local');
+        t.expect(result.dapp.nativeScheme).toBe('myapp://path');
+      },
+    );
+
+    t.it(
+      'should sanitize scheme with dots and uppercase on ReactNative platform',
+      () => {
+        const mockGetPlatformType = t.vi.mocked(getPlatformType);
+        mockGetPlatformType.mockReturnValue(PlatformType.ReactNative);
+        options.dapp.url = 'My.App://';
+        options.dapp.name = 'myapp';
+
+        const result = utils.setupDappMetadata(options);
+
+        t.expect(result.dapp.url).toBe('https://my-app.rn.dapp.local');
+        t.expect(result.dapp.nativeScheme).toBe('My.App://');
+      },
+    );
+
+    t.it(
+      'should use "unknown" subdomain when scheme sanitizes to empty string on ReactNative platform',
+      () => {
+        const mockGetPlatformType = t.vi.mocked(getPlatformType);
+        mockGetPlatformType.mockReturnValue(PlatformType.ReactNative);
+        options.dapp.url = '://';
+        options.dapp.name = 'test';
+
+        const result = utils.setupDappMetadata(options);
+
+        t.expect(result.dapp.url).toBe('https://unknown.rn.dapp.local');
+        t.expect(result.dapp.nativeScheme).toBe('://');
+      },
+    );
+
+    t.it('should not normalize http(s) URLs on ReactNative platform', () => {
+      const mockGetPlatformType = t.vi.mocked(getPlatformType);
+      mockGetPlatformType.mockReturnValue(PlatformType.ReactNative);
+      options.dapp.url = 'https://example.com';
+      options.dapp.name = 'test';
+
+      const result = utils.setupDappMetadata(options);
+
+      t.expect(result.dapp.url).toBe('https://example.com');
+      t.expect(result.dapp.nativeScheme).toBeUndefined();
+    });
+
+    t.it('should not normalize URLs on non-ReactNative platforms', () => {
+      const mockGetPlatformType = t.vi.mocked(getPlatformType);
+      mockGetPlatformType.mockReturnValue(PlatformType.NonBrowser);
+      options.dapp.url = 'custom-scheme://';
+      options.dapp.name = 'test';
+
+      const result = utils.setupDappMetadata(options);
+
+      t.expect(result.dapp.url).toBe('custom-scheme://');
+      t.expect(result.dapp.nativeScheme).toBeUndefined();
+    });
   });
 
   t.describe('isSameScopesAndAccounts', () => {

packages/connect-multichain/src/multichain/utils/index.ts

@@ -204,6 +204,40 @@ export const extractFavicon = () => {
   return favicon;
 };
 
+/**
+ * Normalizes a non-http(s) URL from a React Native app into a valid https URL.
+ * Extracts the scheme, sanitizes it to a DNS-safe label, and builds a .rn.dapp.local URL.
+ *
+ * @param url - The original URL to normalize
+ * @returns An object with the normalized URL and original scheme, or undefined if no normalization needed
+ */
+function normalizeNativeUrl(
+  url: string,
+): { url: string; nativeScheme: string } | undefined {
+  // Matches "http://" or "https://"
+  const httpPattern = /^https?:\/\//u;
+  if (httpPattern.test(url)) {
+    return undefined;
+  }
+
+  // Captures the scheme before "://" — e.g. "myapp" from "myapp://path"
+  const schemeMatch = url.match(/^([^:]*):\/\//u);
+  const rawScheme = schemeMatch?.[1] ?? url;
+  const sanitized = rawScheme
+    .toLowerCase()
+    // Replace non-DNS chars with hyphens — e.g. "My.App" -> "my-app"
+    .replace(/[^a-z0-9-]/gu, '-')
+    // Strip leading/trailing hyphens — e.g. "-my-app-" -> "my-app"
+    .replace(/^-+|-+$/gu, '');
+
+  const subdomain = (sanitized || 'unknown').slice(0, 63).replace(/-+$/u, '');
+
+  return {
+    url: `https://${subdomain}.rn.dapp.local`,
+    nativeScheme: url,
+  };
+}
+
 /**
  *
  * @param options
@@ -229,6 +263,22 @@ export function setupDappMetadata(
   if (!options.dapp?.url) {
     throw new Error('You must provide dapp url');
   }
+
+  // Normalize non-http(s) URLs on React Native platforms
+  if (platform === PlatformType.ReactNative && options.dapp.url) {
+    const normalized = normalizeNativeUrl(options.dapp.url);
+    if (normalized) {
+      console.info(
+        `Normalizing dapp URL for React Native: "${options.dapp.url}" -> "${normalized.url}"`,
+      );
+      options.dapp = {
+        ...options.dapp,
+        url: normalized.url,
+        nativeScheme: normalized.nativeScheme,
+      };
+    }
+  }
+
   const BASE_64_ICON_MAX_LENGTH = 163400;
   // Check if iconUrl and url are valid
   const urlPattern = /^(http|https):\/\/[^\s]*$/u; // Regular expression for URLs starting with http:// or https://