@metamask/connect-evm 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -7,6 +7,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.0]
+
+### Added
+
+- Add `display_uri` event support for custom QR code UI implementations ([#130](https://github.com/MetaMask/connect-monorepo/pull/130))
+  - `display_uri` event on `EIP1193Provider` emitted when QR code link is available
+  - `displayUri` callback in `EventHandlers` for event-based subscriptions
+  - Forwarded from `@metamask/connect-multichain` core to EIP-1193 provider layer
+- Add `mobile.preferredOpenLink` option support for React Native deeplink handling in wagmi connector ([#118](https://github.com/MetaMask/connect-monorepo/pull/118))
+  - Allows React Native apps to use `Linking.openURL()` instead of `window.location.href` for opening MetaMask deeplinks
+  - Required for wagmi connector usage in React Native environments
+- Add legacy compatibility methods to `EIP1193Provider` for broader ecosystem compatibility ([#102](https://github.com/MetaMask/connect-monorepo/pull/102))
+  - `chainId` getter (alias for `selectedChainId`)
+  - `sendAsync()` for callback/promise-based JSON-RPC requests
+  - `send()` for callback-based JSON-RPC requests
+
+### Changed
+
+- **BREAKING** Rename `createMetamaskConnectEVM` to `createEVMClient` for a cleaner naming convention ([#114](https://github.com/MetaMask/connect-monorepo/pull/114))
+
+### Removed
+
+- Revert: Fix local state not correctly being reset when establishing a new connection when there is an existing active session ([#119](https://github.com/MetaMask/connect-monorepo/pull/119))
+
+### Fixed
+
+- Fix selected chainId incorrectly reverting to Ethereum Mainnet after page refresh by caching the selected chainId and retrieving it from storage instead of assuming the first permitted chain is selected ([#113](https://github.com/MetaMask/connect-monorepo/pull/113))
+- Update `#attemptSessionRecovery()` to check to state before attempting recovery ([#107](https://github.com/MetaMask/connect-monorepo/pull/107))
+- Bind all public methods in `EIP1193Provider` constructor to ensure stable `this` context when methods are extracted or passed as callbacks ([#102](https://github.com/MetaMask/connect-monorepo/pull/102))
+
 ## [0.1.2]
 
 ### Added
@@ -24,6 +54,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix duplicate `onNotification` listener ([#81](https://github.com/MetaMask/connect-monorepo/pull/81))
 - Fixed `addEthereumChain` not being prompted on mobile native browsers after a switch chain failure ([#79](https://github.com/MetaMask/connect-monorepo/pull/79))
+- Fix local state not correctly being reset when establishing a new connection when there is an existing active session ([#88](https://github.com/MetaMask/connect-monorepo/pull/88))
 
 ## [0.1.1]
 
@@ -39,7 +70,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Initial release ([#58](https://github.com/MetaMask/connect-monorepo/pull/58))
 
-[Unreleased]: https://github.com/MetaMask/connect-monorepo/compare/@metamask/connect-evm@0.1.2...HEAD
+[Unreleased]: https://github.com/MetaMask/connect-monorepo/compare/@metamask/connect-evm@0.2.0...HEAD
+[0.2.0]: https://github.com/MetaMask/connect-monorepo/compare/@metamask/connect-evm@0.1.2...@metamask/connect-evm@0.2.0
 [0.1.2]: https://github.com/MetaMask/connect-monorepo/compare/@metamask/connect-evm@0.1.1...@metamask/connect-evm@0.1.2
 [0.1.1]: https://github.com/MetaMask/connect-monorepo/compare/@metamask/connect-evm@0.1.0...@metamask/connect-evm@0.1.1
 [0.1.0]: https://github.com/MetaMask/connect-monorepo/releases/tag/@metamask/connect-evm@0.1.0

package/README.md

@@ -8,6 +8,7 @@
 
 - **EIP-1193 Provider Interface** - Seamless integration with existing dapp code using the standard Ethereum provider interface
 - **Cross-Platform Support** - Works with browser extensions and mobile applications
+- **React Native Support** - Native mobile deeplink handling via `preferredOpenLink` option
 
 ## Installation
 
@@ -24,10 +25,10 @@ npm install @metamask/connect-evm
 ## Quick Start
 
 ```typescript
-import { createMetamaskConnectEVM } from '@metamask/connect-evm';
+import { createEVMClient } from '@metamask/connect-evm';
 
 // Create an SDK instance
-const sdk = await createMetamaskConnectEVM({
+const sdk = await createEVMClient({
   dapp: {
     name: 'My DApp',
     url: 'https://mydapp.com',
@@ -51,9 +52,9 @@ const accounts = await provider.request({
 ### Basic Connection
 
 ```typescript
-import { createMetamaskConnectEVM } from '@metamask/connect-evm';
+import { createEVMClient } from '@metamask/connect-evm';
 
-const sdk = await createMetamaskConnectEVM({
+const sdk = await createEVMClient({
   dapp: {
     name: 'My DApp',
     url: 'https://mydapp.com',
@@ -70,6 +71,37 @@ await sdk.connect({ chainId: 137 }); // Polygon
 await sdk.connect({ chainId: 1, account: '0x...' });
 ```
 
+### React Native Support
+
+When using `@metamask/connect-evm` in React Native, the standard browser deeplink mechanism (`window.location.href`) doesn't work. Instead, you can provide a custom `preferredOpenLink` function via the `mobile` option to handle deeplinks using React Native's `Linking` API.
+
+```typescript
+import { Linking } from 'react-native';
+import { createEVMClient } from '@metamask/connect-evm';
+
+const sdk = await createEVMClient({
+  dapp: {
+    name: 'My React Native DApp',
+    url: 'https://mydapp.com',
+  },
+  api: {
+    supportedNetworks: {
+      'eip155:1': 'https://mainnet.infura.io/v3/YOUR_KEY',
+    },
+  },
+  // React Native: use Linking.openURL for deeplinks
+  mobile: {
+    preferredOpenLink: (deeplink: string) => {
+      Linking.openURL(deeplink).catch((err) => {
+        console.error('Failed to open deeplink:', err);
+      });
+    },
+  },
+} as any); // Note: mobile option is passed through to connect-multichain
+```
+
+The `mobile.preferredOpenLink` option is checked before falling back to browser-based deeplink methods, making it the recommended approach for React Native applications.
+
 ### Using the Provider Directly
 
 ```typescript
@@ -101,7 +133,7 @@ const result = await provider.request({
 
 ## Examples
 
-Check out the [playground examples](../../playground/legacy-evm-react-vite-playground) for a complete React implementation.
+Check out the [playground examples](../../playground/browser-playground) for a complete React implementation.
 
 ## TypeScript
 

package/dist/browser/es/connect-evm.mjs

@@ -52,7 +52,7 @@ import { getInfuraRpcUrls } from "@metamask/connect-multichain";
 // src/connect.ts
 import { analytics } from "@metamask/analytics";
 import {
-  createMetamaskConnect,
+  createMultichainClient,
   getWalletActionAnalyticsProperties,
   isRejectionError,
   TransportType
@@ -117,6 +117,15 @@ var EIP1193Provider = class extends EventEmitter {
     __privateAdd(this, _selectedChainId);
     __privateSet(this, _core, core);
     __privateSet(this, _requestInterceptor, interceptor);
+    this.request = this.request.bind(this);
+    this.sendAsync = this.sendAsync.bind(this);
+    this.send = this.send.bind(this);
+    this.on = this.on.bind(this);
+    this.off = this.off.bind(this);
+    this.emit = this.emit.bind(this);
+    this.once = this.once.bind(this);
+    this.removeListener = this.removeListener.bind(this);
+    this.listenerCount = this.listenerCount.bind(this);
   }
   /**
    * Performs a EIP-1193 request.
@@ -175,6 +184,74 @@ var EIP1193Provider = class extends EventEmitter {
     }
     __privateSet(this, _selectedChainId, hexChainId);
   }
+  // ==========================================
+  // Legacy compatibility methods
+  // ==========================================
+  /**
+   * Alias for selectedChainId for legacy compatibility.
+   * Many dApps expect a `chainId` property on the provider.
+   */
+  get chainId() {
+    return this.selectedChainId;
+  }
+  /**
+   * Legacy method for sending JSON-RPC requests.
+   * @deprecated Use `request` instead. This method is provided for backwards compatibility.
+   * @param request - The JSON-RPC request object
+   * @param callback - Optional callback function. If provided, the method returns void.
+   * @returns A promise resolving to the JSON-RPC response, or void if a callback is provided.
+   */
+  sendAsync(request, callback) {
+    return __async(this, null, function* () {
+      var _a;
+      const id = (_a = request.id) != null ? _a : 1;
+      const promise = this.request({
+        method: request.method,
+        params: request.params
+      }).then(
+        (result) => ({
+          id,
+          jsonrpc: "2.0",
+          result
+        })
+      ).catch(
+        (error) => {
+          var _a2, _b;
+          return {
+            id,
+            jsonrpc: "2.0",
+            error: {
+              code: (_a2 = error.code) != null ? _a2 : -32603,
+              message: (_b = error.message) != null ? _b : "Internal error",
+              data: error.data
+            }
+          };
+        }
+      );
+      if (callback) {
+        promise.then((response) => {
+          if (response.error) {
+            callback(new Error(response.error.message), response);
+          } else {
+            callback(null, response);
+          }
+        }).catch((error) => {
+          callback(error, null);
+        });
+        return;
+      }
+      return promise;
+    });
+  }
+  /**
+   * Legacy method for sending JSON-RPC requests synchronously (callback-based).
+   * @deprecated Use `request` instead. This method is provided for backwards compatibility.
+   * @param request - The JSON-RPC request object
+   * @param callback - The callback function to receive the response
+   */
+  send(request, callback) {
+    this.sendAsync(request, callback);
+  }
 };
 _core = new WeakMap();
 _requestInterceptor = new WeakMap();
@@ -228,7 +305,8 @@ ${invalidUrls.join("\n")}`
 
 // src/connect.ts
 var DEFAULT_CHAIN_ID = 1;
-var _core2, _provider, _sessionScopes, _eventHandlers, _sessionChangedHandler, _removeNotificationHandler, _MetamaskConnectEVM_instances, getCoreOptions_fn, createInvokeOptions_fn, trackWalletActionRequested_fn, trackWalletActionSucceeded_fn, trackWalletActionFailed_fn, requestInterceptor_fn, clearConnectionState_fn, addEthereumChain_fn, request_fn, onChainChanged_fn, onAccountsChanged_fn, onConnect_fn, onDisconnect_fn, attemptSessionRecovery_fn;
+var CHAIN_STORE_KEY = "cache_eth_chainId";
+var _core2, _provider, _sessionScopes, _eventHandlers, _sessionChangedHandler, _displayUriHandler, _removeNotificationHandler, _MetamaskConnectEVM_instances, getCoreOptions_fn, createInvokeOptions_fn, trackWalletActionRequested_fn, trackWalletActionSucceeded_fn, trackWalletActionFailed_fn, getSelectedChainId_fn, requestInterceptor_fn, clearConnectionState_fn, addEthereumChain_fn, request_fn, cacheChainId_fn, onChainChanged_fn, onAccountsChanged_fn, onConnect_fn, onDisconnect_fn, onDisplayUri_fn, attemptSessionRecovery_fn;
 var MetamaskConnectEVM = class {
   /**
    * Creates a new MetamaskConnectEVM instance.
@@ -249,6 +327,8 @@ var MetamaskConnectEVM = class {
     __privateAdd(this, _eventHandlers);
     /** The handler for the wallet_sessionChanged event */
     __privateAdd(this, _sessionChangedHandler);
+    /** The handler for the display_uri event */
+    __privateAdd(this, _displayUriHandler);
     /** The clean-up function for the notification handler */
     __privateAdd(this, _removeNotificationHandler);
     __privateSet(this, _core2, core);
@@ -266,6 +346,8 @@ var MetamaskConnectEVM = class {
       "wallet_sessionChanged",
       __privateGet(this, _sessionChangedHandler).bind(this)
     );
+    __privateSet(this, _displayUriHandler, __privateMethod(this, _MetamaskConnectEVM_instances, onDisplayUri_fn).bind(this));
+    __privateGet(this, _core2).on("display_uri", __privateGet(this, _displayUriHandler));
     __privateMethod(this, _MetamaskConnectEVM_instances, attemptSessionRecovery_fn).call(this).catch((error) => {
       console.error("Error attempting session recovery", error);
     });
@@ -296,13 +378,14 @@ var MetamaskConnectEVM = class {
       yield __privateGet(this, _core2).connect(
         caipChainIds,
         caipAccountIds,
+        {},
         forceRequest
       );
       const hexPermittedChainIds = getPermittedEthChainIds(__privateGet(this, _sessionScopes));
-      const initialChainId = hexPermittedChainIds[0];
       const initialAccounts = yield __privateGet(this, _core2).transport.sendEip1193Message({ method: "eth_accounts", params: [] });
+      const chainId = yield __privateMethod(this, _MetamaskConnectEVM_instances, getSelectedChainId_fn).call(this, hexPermittedChainIds);
       __privateMethod(this, _MetamaskConnectEVM_instances, onConnect_fn).call(this, {
-        chainId: initialChainId,
+        chainId,
         accounts: initialAccounts.result
       });
       (_b = __privateGet(this, _removeNotificationHandler)) == null ? void 0 : _b.call(this);
@@ -317,6 +400,9 @@ var MetamaskConnectEVM = class {
           if ((notification == null ? void 0 : notification.method) === "metamask_chainChanged") {
             const notificationChainId = Number((_a2 = notification == null ? void 0 : notification.params) == null ? void 0 : _a2.chainId);
             logger("transport-event: chainChanged", notificationChainId);
+            __privateMethod(this, _MetamaskConnectEVM_instances, cacheChainId_fn).call(this, notificationChainId).catch((error) => {
+              logger("Error caching chainId in notification handler", error);
+            });
             __privateMethod(this, _MetamaskConnectEVM_instances, onChainChanged_fn).call(this, notificationChainId);
           }
         }
@@ -327,7 +413,7 @@ var MetamaskConnectEVM = class {
       });
       return {
         accounts: __privateGet(this, _provider).accounts,
-        chainId: hexToNumber2(initialChainId)
+        chainId: hexToNumber2(chainId)
       };
     });
   }
@@ -412,6 +498,7 @@ var MetamaskConnectEVM = class {
       __privateMethod(this, _MetamaskConnectEVM_instances, onDisconnect_fn).call(this);
       __privateMethod(this, _MetamaskConnectEVM_instances, clearConnectionState_fn).call(this);
       __privateGet(this, _core2).off("wallet_sessionChanged", __privateGet(this, _sessionChangedHandler));
+      __privateGet(this, _core2).off("display_uri", __privateGet(this, _displayUriHandler));
       if (__privateGet(this, _removeNotificationHandler)) {
         __privateGet(this, _removeNotificationHandler).call(this);
         __privateSet(this, _removeNotificationHandler, void 0);
@@ -442,6 +529,7 @@ var MetamaskConnectEVM = class {
       }
       const permittedChainIds = getPermittedEthChainIds(__privateGet(this, _sessionScopes));
       if (permittedChainIds.includes(hexChainId) && __privateGet(this, _core2).transportType === TransportType.MWP) {
+        yield __privateMethod(this, _MetamaskConnectEVM_instances, cacheChainId_fn).call(this, hexChainId);
         __privateMethod(this, _MetamaskConnectEVM_instances, onChainChanged_fn).call(this, hexChainId);
         yield __privateMethod(this, _MetamaskConnectEVM_instances, trackWalletActionSucceeded_fn).call(this, method, scope, params);
         return Promise.resolve();
@@ -457,6 +545,7 @@ var MetamaskConnectEVM = class {
         }
         yield __privateMethod(this, _MetamaskConnectEVM_instances, trackWalletActionSucceeded_fn).call(this, method, scope, params);
         if (result.result === null) {
+          yield __privateMethod(this, _MetamaskConnectEVM_instances, cacheChainId_fn).call(this, hexChainId);
           __privateMethod(this, _MetamaskConnectEVM_instances, onChainChanged_fn).call(this, hexChainId);
         }
         return result;
@@ -524,6 +613,7 @@ _provider = new WeakMap();
 _sessionScopes = new WeakMap();
 _eventHandlers = new WeakMap();
 _sessionChangedHandler = new WeakMap();
+_displayUriHandler = new WeakMap();
 _removeNotificationHandler = new WeakMap();
 _MetamaskConnectEVM_instances = new WeakSet();
 /**
@@ -601,6 +691,22 @@ trackWalletActionFailed_fn = function(method, scope, params, error) {
     }
   });
 };
+getSelectedChainId_fn = function(permittedChainIds) {
+  return __async(this, null, function* () {
+    try {
+      const cachedChainId = yield __privateGet(this, _core2).storage.adapter.get(CHAIN_STORE_KEY);
+      if (cachedChainId) {
+        const chainId = JSON.parse(cachedChainId);
+        if (permittedChainIds.includes(chainId)) {
+          return chainId;
+        }
+      }
+    } catch (error) {
+      logger("Error retrieving cached chainId", error);
+    }
+    return permittedChainIds[0];
+  });
+};
 requestInterceptor_fn = function(request) {
   return __async(this, null, function* () {
     logger(`Intercepting request for method: ${request.method}`);
@@ -678,6 +784,7 @@ addEthereumChain_fn = function(chainConfiguration) {
         params
       });
       if (result.result === null) {
+        yield __privateMethod(this, _MetamaskConnectEVM_instances, cacheChainId_fn).call(this, chainId);
         __privateMethod(this, _MetamaskConnectEVM_instances, onChainChanged_fn).call(this, chainId);
       }
       yield __privateMethod(this, _MetamaskConnectEVM_instances, trackWalletActionSucceeded_fn).call(this, method, scope, params);
@@ -697,6 +804,19 @@ request_fn = function(request) {
     return result;
   });
 };
+cacheChainId_fn = function(chainId) {
+  return __async(this, null, function* () {
+    try {
+      const hexChainId = isHex(chainId) ? chainId : numberToHex2(chainId);
+      yield __privateGet(this, _core2).storage.adapter.set(
+        CHAIN_STORE_KEY,
+        JSON.stringify(hexChainId)
+      );
+    } catch (error) {
+      logger("Error caching chainId", error);
+    }
+  });
+};
 /**
  * Handles chain change events and updates the provider's selected chain ID.
  *
@@ -758,8 +878,23 @@ onDisconnect_fn = function() {
   (_b = (_a = __privateGet(this, _eventHandlers)) == null ? void 0 : _a.disconnect) == null ? void 0 : _b.call(_a);
   __privateMethod(this, _MetamaskConnectEVM_instances, onAccountsChanged_fn).call(this, []);
 };
+/**
+ * Handles display_uri events and emits them to the provider.
+ * This allows consumers to display their own custom QR code UI.
+ *
+ * @param uri - The deeplink URI to be displayed as a QR code
+ */
+onDisplayUri_fn = function(uri) {
+  var _a, _b;
+  logger("handler: display_uri", uri);
+  __privateGet(this, _provider).emit("display_uri", uri);
+  (_b = (_a = __privateGet(this, _eventHandlers)) == null ? void 0 : _a.displayUri) == null ? void 0 : _b.call(_a, uri);
+};
 attemptSessionRecovery_fn = function() {
   return __async(this, null, function* () {
+    if (__privateGet(this, _core2).status !== "connected" && __privateGet(this, _core2).status !== "connecting") {
+      return;
+    }
     try {
       const response = yield __privateGet(this, _core2).transport.request({
         method: "wallet_getSession"
@@ -767,13 +902,11 @@ attemptSessionRecovery_fn = function() {
       const { sessionScopes } = response.result;
       __privateSet(this, _sessionScopes, sessionScopes);
       const permittedChainIds = getPermittedEthChainIds(sessionScopes);
-      const permittedAccounts = yield __privateGet(this, _core2).transport.sendEip1193Message({
-        method: "eth_accounts",
-        params: []
-      });
+      const permittedAccounts = yield __privateGet(this, _core2).transport.sendEip1193Message({ method: "eth_accounts", params: [] });
+      const chainId = yield __privateMethod(this, _MetamaskConnectEVM_instances, getSelectedChainId_fn).call(this, permittedChainIds);
       if (permittedChainIds.length && permittedAccounts.result) {
         __privateMethod(this, _MetamaskConnectEVM_instances, onConnect_fn).call(this, {
-          chainId: permittedChainIds[0],
+          chainId,
           accounts: permittedAccounts.result
         });
       }
@@ -782,7 +915,7 @@ attemptSessionRecovery_fn = function() {
     }
   });
 };
-function createMetamaskConnectEVM(options) {
+function createEVMClient(options) {
   return __async(this, null, function* () {
     var _a;
     enableDebug(options.debug);
@@ -794,7 +927,7 @@ function createMetamaskConnectEVM(options) {
     }
     validSupportedChainsUrls(options.api.supportedNetworks, "supportedNetworks");
     try {
-      const core = yield createMetamaskConnect(__spreadProps(__spreadValues({}, options), {
+      const core = yield createMultichainClient(__spreadProps(__spreadValues({}, options), {
         api: {
           supportedNetworks: options.api.supportedNetworks
         }
@@ -811,7 +944,7 @@ function createMetamaskConnectEVM(options) {
   });
 }
 export {
-  createMetamaskConnectEVM,
+  createEVMClient,
   getInfuraRpcUrls
 };
 //# sourceMappingURL=connect-evm.mjs.map