feat: socketio (#19)

* feat: socketio for rpc

package.json

@@ -23,6 +23,7 @@
     "node-forge": "^1.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "socket.io-client": "^4.7.3",
     "react-qr-code": "^2.0.12"
   },
   "devDependencies": {

src/components/Assets.tsx

@@ -28,7 +28,7 @@ export const Assets: React.FC = () => {
   };
 
   const onRefreshClicked = async () => {
-    setIsRefreshing(true)
+    setIsRefreshing(true);
     try {
       await refreshAccounts();
       await refreshSupportedAssets(0);

src/components/FireblocksNCWInitializer.tsx

@@ -92,7 +92,10 @@ export const FireblocksNCWInitializer: React.FC = () => {
 
   return (
     <>
-      <Card title={`Fireblocks SDK (${ENV_CONFIG.NCW_SDK_ENV}) - Version ${fireblocksNCWSdkVersion}`} actions={sdkActions}>
+      <Card
+        title={`Fireblocks SDK (${ENV_CONFIG.NCW_SDK_ENV}) - Version ${fireblocksNCWSdkVersion}`}
+        actions={sdkActions}
+      >
         <div>{fireblocksNCWStatus === "sdk_initialization_failed" && "Initialization Failed"}</div>
       </Card>
       <AreYouSureDialog

src/services/ApiService.ts

@@ -1,5 +1,6 @@
 import { IBackupInfo, INewTransactionData, IPassphraseInfo } from "../IAppState";
 import { IAuthManager } from "../auth/IAuthManager";
+import { Manager, Socket, io } from "socket.io-client";
 
 export type TTransactionStatus =
   | "PENDING_SIGNATURE"
@@ -166,6 +167,9 @@ export class ApiService {
   private _disposed: boolean = false;
   private _pollingTxsActive: Map<string, boolean> = new Map();
 
+  private manager: Manager;
+  private socket: Socket;
+
   constructor(
     baseUrl: string,
     private readonly authManager: IAuthManager,
@@ -174,6 +178,14 @@ export class ApiService {
     if (this._baseUrl.endsWith("/")) {
       this._baseUrl = this._baseUrl.slice(0, -1);
     }
+
+    this.manager = new Manager(this._baseUrl, { autoConnect: true });
+    this.socket = this.manager.socket("/", {
+      auth: async (cb) => cb({ token: await this.authManager.getAccessToken() }),
+    });
+
+    this.socket.on("connect", () => console.log("websocket connected"));
+    this.socket.on("disconnect", () => console.log("websocket disconnected"));
   }
 
   public async login(): Promise<string> {
@@ -223,8 +235,12 @@ export class ApiService {
     return response.walletId;
   }
 
-  public sendMessage(deviceId: string, message: string): Promise<any> {
-    return this._postCall(`api/devices/${deviceId}/rpc`, { message });
+  public async sendMessage(deviceId: string, message: string): Promise<any> {
+    if (this.socket.connected) {
+      return await this.socket.emitWithAck("rpc", deviceId, message);
+    } else {
+      return this._postCall(`api/devices/${deviceId}/rpc`, { message });
+    }
   }
 
   public async getWeb3Connections(deviceId: string): Promise<IWeb3Session[]> {
@@ -253,7 +269,7 @@ export class ApiService {
   }
 
   public async createTransaction(deviceId: string, dataToSend?: INewTransactionData): Promise<ITransactionData> {
-    const createTxResponse = await this._postCall(`api/devices/${deviceId}/transactions`, dataToSend );
+    const createTxResponse = await this._postCall(`api/devices/${deviceId}/transactions`, dataToSend);
     return createTxResponse;
   }