feat: add custom events (#278)

* feat(server): Add sendMessage method to RPC Node

* chore(changeset): Add changeset

* feat(core): Add type support for events

* chore(core): Adding changeset

* feat(server): Adding support for event handlers

* Update event handler usage

* chore: format files

* Apply suggestions from code review

* chore: changesets

---------

Co-authored-by: Kant <[email protected]>

.changeset/long-onions-drum.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/wallet-api-core": minor
+---
+
+Adding type support for custom events

.changeset/spotty-otters-jump.md

@@ -0,0 +1,6 @@
+---
+"@ledgerhq/wallet-api-client-react": minor
+"@ledgerhq/wallet-api-client": minor
+---
+
+Support custom events in the wallet-api client and client-react

.changeset/warm-mails-refuse.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/wallet-api-server": minor
+---
+
+Adding sendMessage to the server to push messages to live apps with permissions check

packages/client-react/src/components/WalletAPIProvider/index.tsx

@@ -1,5 +1,5 @@
 import { WalletAPIClient } from "@ledgerhq/wallet-api-client";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { WalletAPIProviderContext, initialContextValue } from "./context";
 import type {
   WalletAPIProviderContextState,
@@ -14,25 +14,32 @@ export function WalletAPIProvider({
   transport,
   logger,
   getCustomModule,
+  eventHandlers,
 }: WalletAPIProviderProps) {
-  const [client, setClient] = useState<WalletAPIClient>();
   const [state, setState] = useState<WalletAPIProviderContextState>(
     initialContextValue.state,
   );
 
-  useEffect(() => {
-    const walletApiClient = new WalletAPIClient(
+  const client = useRef<WalletAPIClient>();
+
+  if (client.current === undefined) {
+    client.current = new WalletAPIClient(
       transport,
       logger,
       getCustomModule,
+      eventHandlers,
     );
+  }
 
-    setClient(walletApiClient);
-  }, [getCustomModule, logger, transport]);
+  useEffect(() => {
+    if (eventHandlers) {
+      client.current?.setEventHandlers(eventHandlers);
+    }
+  }, [eventHandlers]);
 
   const value = useMemo<WalletAPIProviderContextValue>(
     () => ({
-      client,
+      client: client.current,
       state,
       setState,
     }),

packages/client-react/src/components/WalletAPIProvider/types.ts

@@ -2,6 +2,7 @@ import type {
   Account,
   AnyCustomGetter,
   Currency,
+  EventHandlers,
   Logger,
   Transport,
   WalletAPIClient,
@@ -20,6 +21,7 @@ export type WalletAPIProviderProps = PropsWithChildren<{
   transport: Transport;
   logger?: Logger;
   getCustomModule?: AnyCustomGetter;
+  eventHandlers?: EventHandlers;
 }>;
 
 export type WalletAPIProviderContextState = {

packages/client/src/WalletAPIClient.ts

@@ -1,5 +1,6 @@
 import {
   Logger,
+  Promisable,
   RpcError,
   RpcErrorCode,
   RpcNode,
@@ -20,7 +21,9 @@ import { WalletModule } from "./modules/Wallet";
 
 export const defaultLogger = new Logger("Wallet-API-Client");
 
-export type RPCHandler<Result> = (request: RpcRequest) => Promise<Result>;
+export type RPCHandler<Result> = (request: RpcRequest) => Promisable<Result>;
+
+export type EventHandlers = Record<`event.${string}`, RPCHandler<unknown>>;
 
 // temporary
 const requestHandlers = {
@@ -101,8 +104,9 @@ export class WalletAPIClient<
     transport: Transport,
     logger = defaultLogger,
     getCustomModule?: CustomGetter,
+    eventHandlers: EventHandlers = {},
   ) {
-    super(transport, requestHandlers);
+    super(transport, { ...requestHandlers, ...eventHandlers });
     this.logger = logger;
     this.account = new AccountModule(this);
     this.bitcoin = new BitcoinModule(this);
@@ -118,6 +122,10 @@ export class WalletAPIClient<
     ) as typeof this.custom;
   }
 
+  public setEventHandlers(eventHandlers: EventHandlers) {
+    this.requestHandlers = { ...requestHandlers, ...eventHandlers };
+  }
+
   protected onRequest(request: RpcRequest) {
     this.logger.log(request.method);
     const handler =

packages/core/src/spec/rpcHandlers/AppHandlers.ts

@@ -1,3 +1,6 @@
-export type AppHandlers = {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type UnknownCustomEvent = Record<`event.${string}`, any>;
+
+export type AppHandlers<GenericCustomEvent = UnknownCustomEvent> = {
   "event.account.updated": undefined;
-};
+} & GenericCustomEvent;

packages/server/src/WalletAPIServer.ts

@@ -27,6 +27,9 @@ export { customWrapper } from "./internalHandlers";
 
 export const defaultLogger = new Logger("Wallet-API-Server");
 
+type MethodParams<T> = T extends (...args: infer P) => unknown ? P[0] : T;
+type MethodParamsIfExists<T, S> = S extends keyof T ? MethodParams<T[S]> : S;
+
 export class WalletAPIServer extends RpcNode<
   typeof internalHandlers,
   AppHandlers
@@ -90,6 +93,19 @@ export class WalletAPIServer extends RpcNode<
     this.requestHandlers = { ...internalHandlers, ...customHandlers };
   }
 
+  public sendMessage(
+    method: keyof AppHandlers,
+    params: MethodParamsIfExists<AppHandlers, keyof AppHandlers>,
+  ) {
+    const allowedMethodIds = new Set(this.permissions.methodIds$.getValue());
+
+    if (!allowedMethodIds.has(method)) {
+      throw new ServerError(createPermissionDenied(method));
+    }
+
+    return this.notify(method, params);
+  }
+
   protected async onRequest(
     request: RpcRequest<string, unknown>,
   ): Promise<unknown> {