feat: connectWith method and playground updates (#53)

* connect with

* add connectWith and update legacy playground to support it

* add connectWith and connectAndSign event types

* make params optional in GenericProviderRequest

* fix onConnect event handler params

* sync wagmi connector

* Apply suggestion from @jiexi

* rename to checksummedAccounts in wagmi connector

* Cleanup/fix connectWith and connectAndSign flow/events?

* changelog

* changelog format fix

---------

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

Author: 3 people

integrations/wagmi/metamask-connector.ts

@@ -1,6 +1,7 @@
 import {
   type AddEthereumChainParameter,
   createMetamaskConnectEVM,
+  type EIP1193Provider,
   type MetamaskConnectEVM,
 } from '@metamask/connect-evm';
 
@@ -13,7 +14,7 @@ import {
 import type { OneOf } from '@wagmi/core/internal';
 
 import {
-  type EIP1193Provider,
+  type Address,
   getAddress,
   type ProviderConnectInfo,
   ResourceUnavailableRpcError,
@@ -80,30 +81,74 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
       });
     },
 
-    async connect<withCapabilities extends boolean = false>(parameters?: {
+    async connect<withCapabilities extends boolean = false>(connectParams?: {
       chainId?: number | undefined;
       isReconnecting?: boolean | undefined;
       withCapabilities?: withCapabilities | boolean | undefined;
     }) {
-      const chainId = parameters?.chainId ?? DEFAULT_CHAIN_ID;
-      const withCapabilities = parameters?.withCapabilities;
-
-      // TODO: Add connectAndSign and connectWith support, including events
+      const chainId = connectParams?.chainId ?? DEFAULT_CHAIN_ID;
+      const withCapabilities = connectParams?.withCapabilities;
+
+      let accounts: readonly Address[] = [];
+      if (connectParams?.isReconnecting) {
+        try {
+          accounts = await this.getAccounts()
+        } catch {
+          // noop
+        }
+      }
 
       try {
-        const result = await metamask.connect({
-          chainId,
-          account: undefined,
-        });
+        let signResponse: string | undefined;
+        let connectWithResponse: unknown | undefined;
+
+        if (!accounts?.length) {
+          if (parameters.connectAndSign || parameters.connectWith) {
+            if (parameters.connectAndSign) {
+              signResponse = await (metamask as any).connectAndSign({
+                msg: parameters.connectAndSign,
+              });
+            } else if (parameters.connectWith) {
+              connectWithResponse = await (metamask as any).connectWith({
+                method: parameters.connectWith.method,
+                params: parameters.connectWith.params,
+              });
+            }
+
+            try {
+              accounts = await this.getAccounts()
+            } catch {
+              // noop
+            }
+          } else {
+            const result = await metamask.connect({
+              chainId,
+              account: undefined,
+            });
+            accounts = result.accounts
+          }
+        }
+
+        const checksummedAccounts = accounts.map((account) => getAddress(account));
+
+        // Switch to chain if provided
+        let currentChainId = (await this.getChainId()) as number;
+        if (chainId && currentChainId !== chainId) {
+          const chain = await this.switchChain!({ chainId }).catch((error) => {
+            if (error.code === UserRejectedRequestError.code) throw error;
+            return { id: currentChainId };
+          });
+          currentChainId = chain?.id ?? currentChainId;
+        }
 
         return {
           accounts: (withCapabilities
-            ? result.accounts.map((account) => ({
+            ? checksummedAccounts.map((account) => ({
                 address: account,
                 capabilities: {},
               }))
-            : result.accounts) as never,
-          chainId: result.chainId ?? chainId,
+            : checksummedAccounts) as never,
+          chainId: currentChainId,
         };
       } catch (err) {
         const error = err as RpcError;
@@ -199,15 +244,6 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
     },
 
     async onAccountsChanged(accounts) {
-      // TODO: verify if this is needed or if we can just rely on the
-      // existing disconnect event instead
-      // Disconnect if there are no accounts
-      if (accounts.length === 0) {
-        this.onDisconnect();
-        return;
-      }
-      // Regular change event
-
       config.emitter.emit('change', {
         accounts: accounts.map((account) => getAddress(account)),
       });
@@ -231,7 +267,7 @@ export function metaMask(parameters: MetaMaskParameters = {}) {
       // https://github.com/MetaMask/providers/pull/120
       if (error && (error as unknown as RpcError<1013>).code === 1013) {
         const provider = await this.getProvider();
-        if (provider && (await this.getAccounts()).length > 0) return;
+        if (provider && !!(await this.getAccounts()).length) return;
       }
 
       config.emitter.emit('disconnect');

packages/connect-evm/CHANGELOG.md

@@ -9,9 +9,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added `connectWith()` method which makes a request for the method to be paired together with a connection request ([#53](https://github.com/MetaMask/connect-monorepo/pull/53))
+  - This method expects param options `method`, `params`, `chainId`, and `account`
+  - `params` can be a function or a plain value. When it is a function, it will be called with the selected account as the first param and must return a value that will be used as the actual params for the request.
+- Added `eventHandlers.connectAndSign` handler which is called on successful `connectAndSign` request with an object including the `accounts`, `chainId`, and `signResponse` ([#53](https://github.com/MetaMask/connect-monorepo/pull/53))
+- Added `eventHandlers.connectWith` handler which is called on successful `connectWith` request with an object including the `accounts`, `chainId`, and `connectWithResponse` ([#53](https://github.com/MetaMask/connect-monorepo/pull/53))
 - Added analytics tracking of request handling ([#46](https://github.com/MetaMask/connect-monorepo/pull/46))
 - Initial release ([#21](https://github.com/MetaMask/connect-monorepo/pull/21))
 
+### Changed
+
+- `connect()` now always returns `chainId`, previously it could undefined ([#53](https://github.com/MetaMask/connect-monorepo/pull/53))
+
 ### Fixed
 
 - `ethereum_switchChain` fallback when chain is not configured ([#31](https://github.com/MetaMask/connect-monorepo/pull/31))

packages/connect-evm/src/connect.ts

@@ -80,7 +80,7 @@ export class MetamaskConnectEVM {
   #sessionScopes: SessionData['sessionScopes'] = {};
 
   /** Optional event handlers for the EIP-1193 provider events. */
-  readonly #eventHandlers?: EventHandlers | undefined;
+  readonly #eventHandlers?: Partial<EventHandlers> | undefined;
 
   /** The handler for the wallet_sessionChanged event */
   readonly #sessionChangedHandler: (session?: SessionData) => void;
@@ -273,7 +273,7 @@ export class MetamaskConnectEVM {
       account?: string | undefined;
       forceRequest?: boolean;
     } = { chainId: DEFAULT_CHAIN_ID }, // Default to mainnet if no chain ID is provided
-  ): Promise<{ accounts: Address[]; chainId?: number }> {
+  ): Promise<{ accounts: Address[]; chainId: number }> {
     logger('request: connect', { chainId, account });
     const caipChainId: Scope[] = chainId ? [`eip155:${chainId}`] : [];
 
@@ -333,50 +333,69 @@ export class MetamaskConnectEVM {
    * @throws Error if the selected account is not available after timeout
    */
   async connectAndSign(message: string): Promise<string> {
-    await this.connect();
-
-    // If account is already available, proceed immediately
-    if (this.#provider.selectedAccount) {
-      return (await this.#provider.request({
-        method: 'personal_sign',
-        params: [this.#provider.selectedAccount, message],
-      })) as string;
-    }
+    const { accounts, chainId } = await this.connect();
 
-    // Otherwise, wait for the accountsChanged event to be triggered
-    const timeout = 5000;
-    const accountPromise = new Promise<Address>((resolve, reject) => {
-      // eslint-disable-next-line prefer-const
-      let timeoutId: ReturnType<typeof setTimeout>;
-
-      const handler = (accounts: Address[]): void => {
-        if (accounts.length > 0) {
-          clearTimeout(timeoutId);
-          this.#provider.off('accountsChanged', handler);
-          resolve(accounts[0]);
-        }
-      };
+    const result = (await this.#provider.request({
+      method: 'personal_sign',
+      params: [accounts[0], message],
+    })) as string;
 
-      this.#provider.on('accountsChanged', handler);
+    this.#eventHandlers?.connectAndSign?.({
+      accounts,
+      chainId,
+      signResponse: result,
+    })
 
-      timeoutId = setTimeout(() => {
-        this.#provider.off('accountsChanged', handler);
-        reject(new Error('Selected account not available after timeout'));
-      }, timeout);
+    return result;
+  }
 
-      if (this.#provider.selectedAccount) {
-        clearTimeout(timeoutId);
-        this.#provider.off('accountsChanged', handler);
-        resolve(this.#provider.selectedAccount);
-      }
+
+  /**
+   * Connects to the wallet and invokes a method with specified parameters.
+   *
+   * @param options - The options for connecting and invoking the method
+   * @param options.method - The method name to invoke
+   * @param options.params - The parameters to pass to the method, or a function that receives the account and returns params
+   * @param options.chainId - Optional chain ID to connect to (defaults to mainnet)
+   * @param options.account - Optional specific account to connect to
+   * @param options.forceRequest - Whether to force a request regardless of an existing session
+   * @returns A promise that resolves with the result of the method invocation
+   * @throws Error if the selected account is not available after timeout (for methods that require an account)
+   */
+  async connectWith({
+    method,
+    params,
+    chainId,
+    account,
+    forceRequest,
+  }: {
+    method: string;
+    params: unknown[] | ((account: Address) => unknown[]);
+    chainId?: number;
+    account?: string | undefined;
+    forceRequest?: boolean;
+  }): Promise<unknown> {
+    const { accounts: connectedAccounts, chainId: connectedChainId} = await this.connect({
+      chainId: chainId ?? DEFAULT_CHAIN_ID,
+      account,
+      forceRequest,
     });
 
-    const selectedAccount = await accountPromise;
+    const resolvedParams =
+      typeof params === 'function' ? params(connectedAccounts[0]) : params;
 
-    return (await this.#provider.request({
-      method: 'personal_sign',
-      params: [selectedAccount, message],
-    })) as string;
+    const result = await this.#provider.request({
+      method,
+      params: resolvedParams,
+    });
+
+    this.#eventHandlers?.connectWith?.({
+      accounts: connectedAccounts,
+      chainId: connectedChainId,
+      connectWithResponse: result,
+    })
+
+    return result;
   }
 
   /**
@@ -783,7 +802,7 @@ export class MetamaskConnectEVM {
  */
 export async function createMetamaskConnectEVM(
   options: Pick<MultichainOptions, 'dapp' | 'api'> & {
-    eventHandlers?: EventHandlers;
+    eventHandlers?: Partial<EventHandlers>;
     debug?: boolean;
   },
 ): Promise<MetamaskConnectEVM> {

packages/connect-evm/src/types.ts

@@ -12,18 +12,38 @@ export type EIP1193ProviderEvents = {
   accountsChanged: [Address[]];
   chainChanged: [Hex];
   message: [{ type: string; data: unknown }];
+  connectAndSign: [
+    { accounts: readonly Address[]; chainId: number; signResponse: string },
+  ];
+  connectWith: [
+    {
+      accounts: readonly Address[];
+      chainId: number;
+      connectWithResponse: unknown;
+    },
+  ];
 };
 
 export type EventHandlers = {
-  connect: (result: { chainId?: Hex }) => void;
+  connect: (result: { chainId: string, accounts: Address[] }) => void;
   disconnect: () => void;
   accountsChanged: (accounts: Address[]) => void;
   chainChanged: (chainId: Hex) => void;
+  connectAndSign: (result: {
+    accounts: readonly Address[];
+    chainId: number;
+    signResponse: string;
+  }) => void;
+  connectWith: (result: {
+    accounts: readonly Address[];
+    chainId: number;
+    connectWithResponse: unknown;
+  }) => void;
 };
 
 export type MetamaskConnectEVMOptions = {
   core: MultichainCore;
-  eventHandlers?: EventHandlers;
+  eventHandlers?: Partial<EventHandlers>;
   notificationQueue?: unknown[];
   supportedNetworks?: Record<CaipChainId, string>;
 };
@@ -78,7 +98,7 @@ type GenericProviderRequest = {
     | 'wallet_switchEthereumChain'
     | 'wallet_addEthereumChain'
   >;
-  params: unknown;
+  params?: unknown;
 };
 
 // Discriminated union for provider requests