watch listeners on base provider and subscribe to same event on eth provider

Author: tanguyenvn

packages/no-modal/src/providers/base-provider/baseProvider.ts

@@ -25,16 +25,12 @@ export interface BaseProviderConfig extends BaseConfig {
   keyExportEnabled?: boolean;
 }
 
-export interface CommonProviderEvents extends ProviderEvents {
-  chainChanged: (chainId: string) => void;
-}
-
 export abstract class BaseProvider<C extends BaseProviderConfig, S extends BaseProviderState, P>
   extends BaseController<C, S, BaseProviderEvents<S>>
   implements IBaseProvider<P>
 {
   // should be Assigned in setupProvider
-  public _providerEngineProxy: SafeEventEmitterProvider<CommonProviderEvents> | null = null;
+  public _providerEngineProxy: SafeEventEmitterProvider<ProviderEvents> | null = null;
 
   // set to true when the keyExportEnabled flag is set by code.
   // This is to prevent the flag from being overridden by the dashboard config.
@@ -62,7 +58,7 @@ export abstract class BaseProvider<C extends BaseProviderConfig, S extends BaseP
     return this.config.chains.find((chain) => chain.chainId === this.state.chainId);
   }
 
-  get provider(): SafeEventEmitterProvider<CommonProviderEvents> | null {
+  get provider(): SafeEventEmitterProvider<ProviderEvents> | null {
     return this._providerEngineProxy;
   }
 
@@ -121,23 +117,17 @@ export abstract class BaseProvider<C extends BaseProviderConfig, S extends BaseP
       (this._providerEngineProxy as any).setTarget(provider);
 
       // we want events to propagate from Ethereum provider -> wrapper provider (e.g. CommonJRPC provider) -> SDK -> dapp
-      // override emit method to capture and re-emit events
-      const originalEmit = provider.emit.bind(provider);
-      provider.emit = (...args) => {
-        const result = originalEmit(...args);
-
-        // handle chainChanged event: update chainId state
-        const event = args[0] as string;
-        if (event === EIP1193_EVENTS.CHAIN_CHANGED) {
-          const chainId = args[1] as string;
-          this.update({ chainId } as Partial<S>);
-        }
-
-        // re-emit event
-        // eslint-disable-next-line
-        this.emit(event as keyof BaseProviderEvents<S>, ...(args.slice(1) as any));
-        return result;
-      };
+      // when a listener is added to the wrapper provider, listen to the same event from the Ethereum provider and re-emit it
+      this.once("newListener", (event, _listener) => {
+        provider.on(event as keyof ProviderEvents, (...args) => {
+          // handle chainChanged event: update chainId state
+          if (event === EIP1193_EVENTS.CHAIN_CHANGED) {
+            const chainId = args[0] as string;
+            this.update({ chainId } as Partial<S>);
+          }
+          this.emit(event as keyof BaseProviderEvents<S>, ...(args as never));
+        });
+      });
     } else {
       this._providerEngineProxy = createEventEmitterProxy<SafeEventEmitterProvider>(provider);
     }

packages/no-modal/src/providers/base-provider/interfaces.ts

@@ -2,4 +2,7 @@ import { BaseControllerEvents } from "@toruslabs/base-controllers";
 
 import { ProviderEvents } from "@/core/base";
 
-export type BaseProviderEvents<S> = ProviderEvents & BaseControllerEvents<S>;
+export type BaseProviderEvents<S> = ProviderEvents &
+  BaseControllerEvents<S> & {
+    newListener: (event: string, listener: (...args: unknown[]) => void) => void;
+  };