Merge pull request #1739 from Web3Auth/feat/plugin-events

Adds plugin events

demo/react-app/src/services/web3auth.tsx

@@ -7,6 +7,7 @@ import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
 import { createContext, FunctionComponent, ReactNode, useCallback, useContext, useEffect, useState } from "react";
 import { CHAIN_CONFIG, CHAIN_CONFIG_TYPE } from "../config/chainConfig";
 import { getWalletProvider, IWalletProvider } from "./walletProvider";
+import { PLUGIN_EVENTS } from "@web3auth/base-plugin";
 
 export interface IWeb3AuthContext {
   web3Auth: Web3Auth | null;
@@ -107,6 +108,25 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
       });
     };
 
+    const subscribePluginEvents = (plugin: WalletServicesPlugin) => {
+      // Can subscribe to all PLUGIN_EVENTS and LOGIN_MODAL_EVENTS
+      plugin.on(PLUGIN_EVENTS.CONNECTED, (data: unknown) => {
+        console.log("Yeah!, you are successfully logged in to plugin");
+      });
+
+      plugin.on(PLUGIN_EVENTS.CONNECTING, () => {
+        console.log("connecting plugin");
+      });
+
+      plugin.on(PLUGIN_EVENTS.DISCONNECTED, () => {
+        console.log("plugin disconnected");
+      });
+
+      plugin.on(PLUGIN_EVENTS.ERRORED, (error) => {
+        console.error("some error on plugin login", error);
+      });
+    };
+
     async function init() {
       try {
         const currentChainConfig = CHAIN_CONFIG[chain];
@@ -197,6 +217,7 @@ export const Web3AuthProvider: FunctionComponent<IWeb3AuthState> = ({ children,
               whiteLabel: { showWidgetButton: true },
             },
           });
+          subscribePluginEvents(walletServicesPlugin);
           setWalletServicesPlugin(walletServicesPlugin);
           web3AuthInstance.addPlugin(walletServicesPlugin);
         }

packages/plugins/base-plugin/src/IPlugin.ts

@@ -5,8 +5,33 @@ export const PLUGIN_NAMESPACES = {
   MULTICHAIN: "multichain",
 } as const;
 
+export const PLUGIN_STATUS = {
+  READY: "ready",
+  CONNECTING: "connecting",
+  CONNECTED: "connected",
+  DISCONNECTED: "disconnected",
+  ERRORED: "errored",
+} as const;
+
+export const PLUGIN_EVENTS = {
+  ...PLUGIN_STATUS,
+} as const;
+
 export type PluginNamespace = (typeof PLUGIN_NAMESPACES)[keyof typeof PLUGIN_NAMESPACES];
 
+export const EVM_PLUGINS = {
+  WALLET_SERVICES: "wallet-services",
+} as const;
+
+export const SOLANA_PLUGINS = {
+  SOLANA: "solana",
+} as const;
+
+export const WALLET_PLUGINS = {
+  ...EVM_PLUGINS,
+  ...SOLANA_PLUGINS,
+} as const;
+
 export interface IPlugin {
   name: string;
   SUPPORTED_ADAPTERS: WALLET_ADAPTER_TYPE[];

packages/plugins/solana-wallet-connector-plugin/package.json

@@ -35,6 +35,7 @@
     "@metamask/rpc-errors": "^6.1.0"
   },
   "dependencies": {
+    "@toruslabs/openlogin-jrpc": "^7.0.0",
     "@toruslabs/solana-embed": "^2.0.0",
     "@web3auth/base": "^8.0.0",
     "@web3auth/base-plugin": "^8.0.0",

packages/plugins/solana-wallet-connector-plugin/src/plugin.ts

@@ -1,7 +1,8 @@
 import type { JsonRpcError } from "@metamask/rpc-errors";
+import { SafeEventEmitter } from "@toruslabs/openlogin-jrpc";
 import TorusEmbed, { NetworkInterface, PAYMENT_PROVIDER_TYPE, PaymentParams, TorusCtorArgs, TorusParams } from "@toruslabs/solana-embed";
 import { ADAPTER_EVENTS, CustomChainConfig, SafeEventEmitterProvider, UserInfo, WALLET_ADAPTERS } from "@web3auth/base";
-import { IPlugin, PLUGIN_NAMESPACES } from "@web3auth/base-plugin";
+import { IPlugin, PLUGIN_EVENTS, PLUGIN_NAMESPACES } from "@web3auth/base-plugin";
 import type { Web3AuthNoModal } from "@web3auth/no-modal";
 import log from "loglevel";
 
@@ -12,7 +13,7 @@ export type ProviderInfo = {
   userInfo?: Omit<UserInfo, "isNewUser">;
 };
 
-export class SolanaWalletConnectorPlugin implements IPlugin {
+export class SolanaWalletConnectorPlugin extends SafeEventEmitter implements IPlugin {
   name = "SOLANA_WALLET_CONNECTOR_PLUGIN";
 
   readonly SUPPORTED_ADAPTERS = [WALLET_ADAPTERS.OPENLOGIN];
@@ -32,6 +33,7 @@ export class SolanaWalletConnectorPlugin implements IPlugin {
   private walletInitOptions: TorusParams | null = null;
 
   constructor(options: { torusWalletOpts?: TorusCtorArgs; walletInitOptions: Partial<TorusParams> }) {
+    super();
     const { torusWalletOpts = {}, walletInitOptions } = options;
     // const whiteLabel = walletInitOptions?.whiteLabel;
 
@@ -80,6 +82,7 @@ export class SolanaWalletConnectorPlugin implements IPlugin {
       showTorusButton: false,
     });
     this.isInitialized = true;
+    this.emit(PLUGIN_EVENTS.READY);
   }
 
   async initWithProvider(provider: SafeEventEmitterProvider, userInfo: UserInfo): Promise<void> {
@@ -92,12 +95,14 @@ export class SolanaWalletConnectorPlugin implements IPlugin {
     this.userInfo = userInfo;
     await this.torusWalletInstance.init(this.walletInitOptions || {});
     this.isInitialized = true;
+    this.emit(PLUGIN_EVENTS.READY);
   }
 
   async connect(): Promise<void> {
     // if web3auth is being used and connected to unsupported adapter throw error
     if (this.web3auth && this.web3auth.connectedAdapterName !== WALLET_ADAPTERS.OPENLOGIN) throw SolanaWalletPluginError.unsupportedAdapter();
     if (!this.isInitialized) throw SolanaWalletPluginError.notInitialized();
+    this.emit(PLUGIN_EVENTS.CONNECTING);
     // Not connected yet to openlogin
     if (!this.provider) {
       if (this.web3auth?.provider) {
@@ -132,8 +137,10 @@ export class SolanaWalletConnectorPlugin implements IPlugin {
       });
       this.torusWalletInstance.showTorusButton();
       this.subscribeToProviderEvents(this.provider);
-    } catch (error) {
+      this.emit(PLUGIN_EVENTS.CONNECTED);
+    } catch (error: unknown) {
       log.error(error);
+      this.emit(PLUGIN_EVENTS.ERRORED, { error: (error as Error).message || "Something went wrong" });
     }
   }
 
@@ -147,6 +154,7 @@ export class SolanaWalletConnectorPlugin implements IPlugin {
     if (this.web3auth?.connectedAdapterName !== WALLET_ADAPTERS.OPENLOGIN) throw SolanaWalletPluginError.unsupportedAdapter();
     if (this.torusWalletInstance.isLoggedIn) {
       await this.torusWalletInstance.logout();
+      this.emit(PLUGIN_EVENTS.DISCONNECTED);
     } else {
       throw new Error("Torus Wallet plugin is not connected");
     }

packages/plugins/wallet-services-plugin/package.json

@@ -35,6 +35,7 @@
     "@web3auth/openlogin-adapter": "^8.0.0"
   },
   "dependencies": {
+    "@toruslabs/openlogin-jrpc": "^7.0.0",
     "@toruslabs/ethereum-controllers": "^5.5.1",
     "@web3auth/base": "^8.0.0",
     "@web3auth/base-plugin": "^8.0.0",

packages/plugins/wallet-services-plugin/src/plugin.ts

@@ -1,14 +1,15 @@
 import type { EthereumProviderConfig } from "@toruslabs/ethereum-controllers";
+import { SafeEventEmitter } from "@toruslabs/openlogin-jrpc";
 import { ADAPTER_EVENTS, ADAPTER_STATUS, CustomChainConfig, SafeEventEmitterProvider, WALLET_ADAPTERS } from "@web3auth/base";
-import { IPlugin, PLUGIN_NAMESPACES } from "@web3auth/base-plugin";
+import { IPlugin, PLUGIN_EVENTS, PLUGIN_NAMESPACES } from "@web3auth/base-plugin";
 import type { Web3AuthNoModal } from "@web3auth/no-modal";
 import type { OpenloginAdapter } from "@web3auth/openlogin-adapter";
 import WsEmbed, { CtorArgs, WsEmbedParams } from "@web3auth/ws-embed";
 import log from "loglevel";
 
 import { WalletServicesPluginError } from "./errors";
 
-export class WalletServicesPlugin implements IPlugin {
+export class WalletServicesPlugin extends SafeEventEmitter implements IPlugin {
   name = "WALLET_SERVICES_PLUGIN";
 
   readonly SUPPORTED_ADAPTERS = [WALLET_ADAPTERS.OPENLOGIN];
@@ -28,6 +29,7 @@ export class WalletServicesPlugin implements IPlugin {
   constructor(
     options: { wsEmbedOpts?: Partial<CtorArgs>; walletInitOptions?: Omit<WsEmbedParams, "buildEnv" | "enableLogging" | "chainConfig"> } = {}
   ) {
+    super();
     const { wsEmbedOpts, walletInitOptions } = options;
     // we fake these checks here and get them from web3auth instance
     this.wsEmbedInstance = new WsEmbed((wsEmbedOpts || {}) as CtorArgs);
@@ -74,6 +76,7 @@ export class WalletServicesPlugin implements IPlugin {
       },
     });
     this.isInitialized = true;
+    this.emit(PLUGIN_EVENTS.READY);
   }
 
   initWithProvider(): Promise<void> {
@@ -83,8 +86,11 @@ export class WalletServicesPlugin implements IPlugin {
   async connect(): Promise<void> {
     // if web3auth is being used and connected to unsupported adapter throw error
     if (this.web3auth && this.web3auth.connectedAdapterName !== WALLET_ADAPTERS.OPENLOGIN) throw WalletServicesPluginError.unsupportedAdapter();
-    const { connectedAdapterName } = this.web3auth;
     if (!this.isInitialized) throw WalletServicesPluginError.notInitialized();
+    this.emit(PLUGIN_EVENTS.CONNECTING);
+
+    const { connectedAdapterName } = this.web3auth;
+
     // Not connected yet to openlogin
     let sessionId: string | null = null;
     let sessionNamespace: string = "";
@@ -110,8 +116,10 @@ export class WalletServicesPlugin implements IPlugin {
       if (this.walletInitOptions?.whiteLabel?.showWidgetButton) this.wsEmbedInstance.showTorusButton();
       this.subscribeToProviderEvents(this.provider);
       this.subscribeToWalletEvents();
-    } catch (error) {
+      this.emit(PLUGIN_EVENTS.CONNECTED);
+    } catch (error: unknown) {
       log.error(error);
+      this.emit(PLUGIN_EVENTS.ERRORED, { error: (error as Error).message || "Something went wrong" });
     }
   }
 
@@ -135,6 +143,7 @@ export class WalletServicesPlugin implements IPlugin {
     if (this.web3auth?.connectedAdapterName !== WALLET_ADAPTERS.OPENLOGIN) throw WalletServicesPluginError.unsupportedAdapter();
     if (this.wsEmbedInstance.isLoggedIn) {
       await this.wsEmbedInstance.logout();
+      this.emit(PLUGIN_EVENTS.DISCONNECTED);
     } else {
       throw new Error("Wallet Services plugin is not connected");
     }