fix: fork URL and fetch for React Native in web3.js (#26604)

Author: steveluscher

package.json

@@ -23,6 +23,7 @@
     "./lib/index.cjs.js": "./lib/index.browser.cjs.js",
     "./lib/index.esm.js": "./lib/index.browser.esm.js"
   },
+  "react-native": "lib/index.native.js",
   "main": "lib/index.cjs.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -68,6 +69,7 @@
     "jayson": "^3.4.4",
     "js-sha3": "^0.8.0",
     "node-fetch": "2",
+    "react-native-url-polyfill": "^1.3.0",
     "rpc-websockets": "^7.5.0",
     "secp256k1": "^4.0.2",
     "superstruct": "^0.14.2",

rollup.config.js

@@ -12,7 +12,7 @@ const env = process.env.NODE_ENV;
 const extensions = ['.js', '.ts'];
 
 function generateConfig(configType, format) {
-  const browser = configType === 'browser';
+  const browser = configType === 'browser' || configType === 'react-native';
   const bundle = format === 'iife';
 
   const config = {
@@ -91,7 +91,7 @@ function generateConfig(configType, format) {
     },
   };
 
-  if (configType !== 'browser') {
+  if (!browser) {
     // Prevent dependencies from being bundled
     config.external = [
       /@babel\/runtime/,
@@ -114,6 +114,7 @@ function generateConfig(configType, format) {
 
   switch (configType) {
     case 'browser':
+    case 'react-native':
       switch (format) {
         case 'iife': {
           config.external = ['http', 'https', 'node-fetch'];
@@ -139,16 +140,20 @@ function generateConfig(configType, format) {
         default: {
           config.output = [
             {
-              file: 'lib/index.browser.cjs.js',
+              file: `lib/index.${
+                configType === 'react-native' ? 'native' : 'browser.cjs'
+              }.js`,
               format: 'cjs',
               sourcemap: true,
             },
-            {
-              file: 'lib/index.browser.esm.js',
-              format: 'es',
-              sourcemap: true,
-            },
-          ];
+            configType === 'browser'
+              ? {
+                  file: 'lib/index.browser.esm.js',
+                  format: 'es',
+                  sourcemap: true,
+                }
+              : null,
+          ].filter(Boolean);
 
           // Prevent dependencies from being bundled
           config.external = [
@@ -165,6 +170,7 @@ function generateConfig(configType, format) {
             'jayson/lib/client/browser',
             'js-sha3',
             'node-fetch',
+            'react-native-url-polyfill',
             'rpc-websockets',
             'secp256k1',
             'superstruct',
@@ -205,4 +211,5 @@ export default [
   generateConfig('node'),
   generateConfig('browser'),
   generateConfig('browser', 'iife'),
+  generateConfig('react-native'),
 ];

src/__forks__/react-native/fetch-impl.ts

@@ -0,0 +1,4 @@
+export const Headers = globalThis.Headers;
+export const Request = globalThis.Request;
+export const Response = globalThis.Response;
+export default globalThis.fetch;

src/connection.ts

@@ -24,6 +24,7 @@ import type {Struct} from 'superstruct';
 import {Client as RpcWebSocketClient} from 'rpc-websockets';
 import RpcClient from 'jayson/lib/client/browser';
 
+import {URL} from './util/url-impl';
 import {AgentManager} from './agent-manager';
 import {EpochSchedule} from './epoch-schedule';
 import {SendTransactionError, SolanaJSONRPCError} from './errors';
@@ -41,7 +42,7 @@ import {
   TransactionExpiredBlockheightExceededError,
   TransactionExpiredTimeoutError,
 } from './util/tx-expiry-custom-errors';
-import {makeWebsocketUrl} from './util/url';
+import {makeWebsocketUrl} from './util/makeWebsocketUrl';
 import type {Blockhash} from './blockhash';
 import type {FeeCalculator} from './fee-calculator';
 import type {TransactionSignature} from './transaction';

src/util/__forks__/react-native/url-impl.ts

@@ -0,0 +1,2 @@
+export {default} from 'react-native-url-polyfill';
+export * from 'react-native-url-polyfill';

src/util/url.ts renamed to src/util/makeWebsocketUrl.ts

@@ -1,3 +1,5 @@
+import {URL} from './url-impl';
+
 export function makeWebsocketUrl(endpoint: string) {
   let url = new URL(endpoint);
   const useHttps = url.protocol === 'https:';

src/util/url-impl.ts

@@ -0,0 +1,2 @@
+export const URL = globalThis.URL;
+export const URLSearchParams = globalThis.URLSearchParams;

yarn.lock

@@ -2460,6 +2460,14 @@ [email protected]:
     base64-js "^1.3.1"
     ieee754 "^1.2.1"
 
+buffer@^5.4.3:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
+  integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.1.13"
+
 buffer@~6.0.3:
   version "6.0.3"
   resolved "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz"
@@ -4217,7 +4225,7 @@ [email protected], iconv-lite@^0.6.2:
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
-ieee754@^1.2.1:
+ieee754@^1.1.13, ieee754@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz"
 
@@ -6215,7 +6223,7 @@ punycode@^1.3.2:
   version "1.4.1"
   resolved "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz"
 
-punycode@^2.1.0:
+punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
 
@@ -6277,6 +6285,13 @@ rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-native-url-polyfill@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-native-url-polyfill/-/react-native-url-polyfill-1.3.0.tgz#c1763de0f2a8c22cc3e959b654c8790622b6ef6a"
+  integrity sha512-w9JfSkvpqqlix9UjDvJjm1EjSt652zVQ6iwCIj1cVVkwXf4jQhQgTNXY6EVTwuAmUjg6BC6k9RHCBynoLFo3IQ==
+  dependencies:
+    whatwg-url-without-unicode "8.0.0-3"
+
 read-cmd-shim@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-3.0.0.tgz#62b8c638225c61e6cc607f8f4b779f3b8238f155"
@@ -7578,12 +7593,26 @@ webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz"
 
+webidl-conversions@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
+  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
+
 whatwg-encoding@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz"
   dependencies:
     iconv-lite "0.6.3"
 
+[email protected]:
+  version "8.0.0-3"
+  resolved "https://registry.yarnpkg.com/whatwg-url-without-unicode/-/whatwg-url-without-unicode-8.0.0-3.tgz#ab6df4bf6caaa6c85a59f6e82c026151d4bb376b"
+  integrity sha512-HoKuzZrUlgpz35YO27XgD28uh/WJH4B0+3ttFqRo//lmq+9T/mIOJ6kqmINI9HpUpz1imRC/nR/lxKpJiv0uig==
+  dependencies:
+    buffer "^5.4.3"
+    punycode "^2.1.1"
+    webidl-conversions "^5.0.0"
+
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz"