fix: vault server lock propagation (FuelLabs#1280)

## Context `useUnlock` listens for `lock` and `unlock` events from VaultClient, but the communication with VaultServer was one-way, meaning those events from the Server never reached the client. That means that a lock changes from server-side would never be reflected in our UI. In that scenario the wallet locks but the user wouldn't be redirected to the auth screen, being able to keep interacting with UI elements behind the auth guard, leading to several bugs. ## Solution Fixed by using propagating VaultServer lock change events to VaultClient through existing communication protocol, VaultClient further propagates those events, which are now correctly handled by `useUnlock`, leading to proper behavior (e.g. redirection to the auth screen). ## Evidence ### Before https://github.com/FuelLabs/fuels-wallet/assets/3487334/c85944cc-fe7e-4a62-a670-4414d790dc98 ### After https://github.com/FuelLabs/fuels-wallet/assets/3487334/1de77275-b18d-474f-b3bb-e32153832d2e --------- Co-authored-by: Luiz Estácio | stacio.eth <[email protected]>
truongtamphong4622 · May 28, 2024 · 6e94172 · 6e94172
1 parent 85f062c
commit 6e94172
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 0 deletions.
diff --git a/.changeset/warm-stingrays-dress.md b/.changeset/warm-stingrays-dress.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+vault client not propagating lock unlock events from server
diff --git a/packages/app/src/systems/CRX/background/services/VaultService.ts b/packages/app/src/systems/CRX/background/services/VaultService.ts
@@ -115,6 +115,10 @@ export class VaultService extends VaultServer {
     };
     chrome.runtime.onMessage.addListener(handleRestartEvent);
     this.communicationProtocol.on(MessageTypes.request, handleRequest);
+    // Broadcast the lock event
+    this.on('lock', () => {
+      this.emitLockEvent();
+    });
   }
 
   emitLockEvent() {

diff --git a/packages/app/src/systems/Unlock/machines/unlockMachine.tsx b/packages/app/src/systems/Unlock/machines/unlockMachine.tsx
@@ -64,6 +64,9 @@ export const unlockMachine = createMachine(
           RESET_WALLET: {
             target: 'reseting',
           },
+          CHECK_LOCK: {
+            target: 'checkingLocked',
+          },
         },
       },
       checkingLocked: {

diff --git a/packages/app/src/systems/Vault/services/VaultServer.ts b/packages/app/src/systems/Vault/services/VaultServer.ts
@@ -70,6 +70,16 @@ export class VaultServer extends EventEmitter {
     this.manager = manager;
     this.server = new JSONRPCServer();
     this.setupMethods();
+    this.setupEvents();
+  }
+
+  private setupEvents() {
+    this.manager.on('lock', () => {
+      this.emit('lock');
+    });
+    this.manager.on('unlock', () => {
+      this.emit('unlock');
+    });
   }
 
   setupMethods() {