feat(server): react hooks use ref instead of memo

Add setConfig to server class
LedgerHQ · Aug 2, 2023 · 187adea · 187adea
1 parent c3076e3
commit 187adea
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 18 deletions.
diff --git a/.changeset/wet-bats-thank.md b/.changeset/wet-bats-thank.md
@@ -0,0 +1,7 @@
+---
+"@ledgerhq/wallet-api-server": minor
+---
+
+feat(server): react hooks use ref instead of memo
+
+Add setConfig to server class
diff --git a/packages/server/src/WalletAPIServer.ts b/packages/server/src/WalletAPIServer.ts
@@ -1,16 +1,16 @@
 import {
   Account,
+  AppHandlers,
   Currency,
   Logger,
-  Transport,
-  RpcNode,
-  RpcRequest,
+  Permission,
   RpcError,
   RpcErrorCode,
-  AppHandlers,
-  Permission,
-  createPermissionDenied,
+  RpcNode,
+  RpcRequest,
   ServerError,
+  Transport,
+  createPermissionDenied,
 } from "@ledgerhq/wallet-api-core";
 import { BehaviorSubject, combineLatest } from "rxjs";
 import { filterAccountsForCurrencies, matchCurrencies } from "./helpers";
@@ -62,6 +62,10 @@ export class WalletAPIServer extends RpcNode<
     return this;
   }
 
+  setConfig(config: ServerConfig) {
+    this.walletContext.config = config;
+  }
+
   public setHandler<K extends keyof WalletHandlers>(
     methodName: K,
     method: WalletHandlers[K]

diff --git a/packages/server/src/react.ts b/packages/server/src/react.ts
@@ -5,9 +5,9 @@ import type {
   Permission,
   Transport,
 } from "@ledgerhq/wallet-api-core";
-import { useCallback, useEffect, useMemo } from "react";
-import type { ServerConfig } from "./types";
+import { useCallback, useEffect, useRef } from "react";
 import { WalletAPIServer } from "./WalletAPIServer";
+import type { ServerConfig } from "./types";
 
 export function useWalletAPIServer({
   transport,
@@ -24,22 +24,28 @@ export function useWalletAPIServer({
   currencies: Currency[];
   permission: Permission;
 }) {
-  const server = useMemo(
-    () => new WalletAPIServer(transport, config, logger),
-    [config, logger, transport]
-  );
+  const server = useRef<WalletAPIServer>();
+
+  useEffect(() => {
+    server.current = new WalletAPIServer(transport, config, logger);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    server?.current?.setConfig(config);
+  }, [config]);
 
   useEffect(() => {
-    server.setPermissions(permission);
-  }, [permission, server]);
+    server?.current?.setPermissions(permission);
+  }, [permission]);
 
   useEffect(() => {
-    server.setCurrencies(currencies);
-  }, [currencies, server]);
+    server?.current?.setCurrencies(currencies);
+  }, [currencies]);
 
   useEffect(() => {
-    server.setAccounts(accounts);
-  }, [accounts, server]);
+    server?.current?.setAccounts(accounts);
+  }, [accounts]);
 
   const onMessage = useCallback(
     (event: string) => {