feat(core): redo UI and realtime changes (#124)

* refactor(bulldozer-client): unauthorized Component design updated

* refactor: sidebar and profile page design updated

* fix(bulldozer-client): remove create user when already created

* refactor(bulldozer-client): new settings sidebar added

* refactor(bulldozer-client): 🚧 user profile design changed

* refactor(bulldozer-client): workspace explorer design updated

* refactor(bulldozer-client): user profile design changed

* fix(bulldozer-client): activate option remove from active workspace

* refactor(bulldozer-client): workspace details design updated

* refactor(bulldozer-client): more styles in workspace details and user profile added

* fix(bulldozer-client): missing create app functionality added

* fix(bulldozer-client): workspace first load error fixed

* fix(bulldozer-client): handle active workspace through active route

* refactor(bulldozer-client): broadcaster API port changed

* feat(bulldozer-client): configurable broadcaster config

* chore(core): use the right pk for program

* chore: prod enviroment updated

* chore(bulldozer-client): make devnet the default network

* fix(bulldozer-client): redirects were not working as expected

* chore(core): use environment values properly

* refactor(bulldozer-client): improve workspace explorer

* feat(bulldozer-client): set up add workspace modal

* refactor(bulldozer-client): remove trigger from modal directives

* refactor(bulldozer-client): enhance looks of add workspace modal

* fix(bulldozer-client): use the proper names for the directives

* refactor(bulldozer-client): refactor profile page

* refactor(bulldozer-client): handle profile inner sections as pages

* refactor(bulldozer-client): turn workspace details into pages

* fix(bulldozer-client): open tab only in parent route

* refactor(bulldozer-client): deal with space after removing navbar

* refactor(bulldozer-client): improve budget

* refactor(bulldozer-client): allow creating workspace without one active

* refactor(bulldozer-client): improve collaborators page

* refactor(bulldozer-client): make settings sidebar look like design

* refactor(bulldozer-client): dark theme set up as default

* fix(bulldozer-client): properly close modal

* fix(bulldozer-client): disable close for menu on desktop and add toggle for small devices

* fix(broadcaster): use the right endpoints

* feat(bulldozer-programs): add extra fields to user

* feat(bulldozer-programs): add additional info to user

* feat(bulldozer-client): integrate additional user data

* refactor(bulldozer-client): workspaces cards design improved

* refactor(bulldozer-client): budgets cards design improved

* feat(bulldozer-client): enhance user ix ux

* feat(bulldozer-client): improve workspace ix ux

* refactor(bulldozer-client): clean up

* refactor(bulldozer-client): collection view layout changed

* refactor(bulldozer-client): collection view layout updated

* chore(bulldozer-client): textures background images added

* refactor(bulldozer-client): split view instruction into pages

* refactor(bulldozer-client): attribute cards design improved

* chore(bulldozer-client): texture images added (documents and signers)

* refactor(bulldozer-client): improve signer looks

* refactor(bulldozer-client): improve arguments looks

* fix(bulldozer-client): add trailing comma to arguments

* refactor(bulldozer-client): improve documents ui

* fix(bulldozer-client): make the whole tab clickable

* chore(bulldozer-client): changed red to purple in attirbutes color types

* refactor(bulldozer-client): code viewer page added to collections

* fix(bulldozer-client): explorer links cover the whole item

* chore(bulldozer-client): temporarily hide network selector

* feat(bulldozer-client): add a home page

* fix(bulldozer-client): filter signers in the client

* fix(bulldozer-client): prevent create workspace glitch and add realtime updates

* feat(bulldozer-client): add ctas to view collection

* feat(bulldozer-client): real time updates for view collection

* feat(bulldozer-client): make sidebar ctas sticky

* feat(bulldozer-client): realtime updates for user workspaces

* feat(bulldozer-client): handle user updates

* feat(bulldozer-client): real time updates for collaborators

* feat(bulldozer-client): improve changing ui

* feat: kinda works

* chore: removing logs

* fix: finally it works as expected

* refactor(bulldozer-client): clean up implementation

* Revert "refactor(bulldozer-client): clean up implementation"

This reverts commit a287318.

* fix(bulldozer-client): apparently it works now

* fix(bulldozer-client): wipe state when the ids list is empty

* feat(bulldozer-client): realtime seems to work under pressure now

* fix(bulldozer-client): prevent glitch and subscribe only if connected

* feat(bulldozer-client): deal with duplicate events naively

* chore: remove logs

* feat(broadcaster): broadcast on received

* feat(broadcaster): broadcaster working as expected

* feat(broadcaster): handle errors in a basic manner

* feat(bulldozer-client): reload data on connection glitches

* chore(bulldozer-client): house keeping

* refactor(bulldozer-client): use immutable for data handling

* feat(broadcaster): support topics lists

* feat(bulldozer-client): put back user ixs

* feat(bulldozer-client): house keeping

* feat(bulldozer-client): real time updates to ix explorer

* refactor(broadcaster): use a redux-like approach for state in memory

* feat(bulldozer-client): real time updates for instruction

* feat(bulldozer-client): real time updates for user data

* chore(bulldozer-client): images compressed

* fix(bulldozer-client): removed repeated classess

* chore(bulldozer-client): aside width chaged to match instruction aside

* chore(bulldozer-client): bricks wall texture added to body

* chore(bulldozer-client): aside footer opacity added

* fix(bulldozer-client): transparent background using class

* chore(bulldozer-client): wood texture added

* chore(bulldozer-client): snack notification design changed

* fix(bulldozer-client): unnecessary class removed

* refactor(bulldozer-client): clean up snackbar componennt

* feat(bulldozer-client): real time updates to user in home page

* feat(bulldozer-client): real time updates for workspaces

* feat(bulldozer-client): real time updates for workspaces

* feat(bulldozer-client): real time updates for collaborators

* refactor(broadcaster): handle clients using subscriptions

* refactor(bulldozer-client): use new subscription model

* fix(bulldozer-client): finish up update

* feat(bulldozer-client): real time updates for applications

* feat(bulldozer-client): real time updates for collections

* refactor(bulldozer-client): custom color added tailwind

* refactor(bulldozer-client): user profile design updated

* refactor(bulldozer-client): tabs design updated

* refactor(bulldozer-client): 🚧 aside action footer design updated

* fix(bulldozer-client): added missing attribute on image class

* chore(bulldozer-client): new texture added to sidebar and tabs

* chore(bulldozer-client): using only one texture background in metal cards

* feat(bulldozer-client): real time updates for collection attributes

* feat(bulldozer-client): real time updates for collection code

* feat(bulldozer-client): real time updates for signers

* chore(bulldozer-client): cards textures change, now using only one

* feat(bulldozer-client): real-time updates for documents

* feat(bulldozer-programs): avoid remaining accounts at all costs

* chore(core): bump anchor version

* chore(core): migrato to latest versions

* fix(bulldozer-programs): avoid unnecesary accounts

* fix(bulldozer-programs): add ix for better indexing

* refactor(bulldozer-client): user profile design updated

* chore(bulldozer-client): workspace section new design implemented  (budget, collaborators, insrtructions)

* fix(bulldozer-client): all necessary files to build app exported

* fix(bulldozer-client): all necessary files to build app exported

* fix(bulldozer-client): become collaborator button only shows when needed

* chore(bulldozer-client): profile section new design implemented

* chore(bulldozer-client): new design added

* feat(bulldozer-client): documents seem to be working now

* feat(bulldozer-programs): allow clearing close account

* feat(bulldozer-client): clear close and remove document from accounts options

* fix(bulldozer-client): broken design after merge fixed

* feat(bulldozer-client): relations real time updates

* feat(bulldozer-client): realtime updates for instruction code editor

* chore(bulldozer-client): unauthorized component design improved

* fix(bulldozer-client): unnecessary bold style removed

* feat(bulldozer-programs): handle deposits and withdraws from budget

* fix(bulldozer-client): signers kind error fixed

* feat(bulldozer-client): realtime updates for budget

* chore(bulldozer-client): temporarily hide workspace ixs poage

* chore(bulldozer-client): hide workspace download

* chore(bulldozer-client): changed all modals button to match new design

* chore: added style to unauthorized select wallet button

* chore(bulldozer-client): unauthorized select wallet button text cahnged

* chore(bulldozer-client): new pipe image added, and layout center correctly

* chore(bulldozer-client): background image more opacity

* chore(bulldozer-client): new wood texture

* chore(bulldozer-client): new user info card design implemented

* chore: card component created

* chore(bulldozer-client): new user workspaces info card design implemented

* chore(bulldozer-client): add workspaces modal design updated

* chore(bulldozer-client): modals title font changed

* chore(bulldozer-client): workspace budget info card design updated

* chore: info cards design updated (view user info and user workspaces)

* chore(bulldozer-client): documents and instruction info card design updated

* chore(bulldozer-client): removed old instruction document card info

* chore(bulldozer-client): modal close button design updated

* fix(bulldozer-programs): send lamports back to budget after delete relation

* chore(bulldozer-client): some UI fixes

* fix(bulldozer-client): show workspaces when workspaceId is null

* fix(bulldozer-client): issue with lists coming null when empty

* chore(bulldozer-client): using correct html tags and changed modal cancel button to left side

Co-authored-by: Andres Guerrero <[email protected]>

.vscode/settings.json

@@ -16,5 +16,6 @@
   },
   "[rust]": {
     "editor.defaultFormatter": "rust-lang.rust"
-  }
+  },
+  "cSpell.words": ["sidenav"]
 }

apps/broadcaster/src/app/events/events.gateway.ts

@@ -8,8 +8,12 @@ import {
   WebSocketGateway,
   WebSocketServer,
 } from '@nestjs/websockets';
-import { Connection, TransactionSignature } from '@solana/web3.js';
+import { Connection, Transaction, TransactionSignature } from '@solana/web3.js';
+import { List } from 'immutable';
+import { v4 as uuid } from 'uuid';
 import WebSocket, { Server } from 'ws';
+import { environment } from '../../environments/environment';
+import { EventsService } from './events.service';
 
 @WebSocketGateway({
   cors: {
@@ -20,26 +24,11 @@ export class EventsGateway implements OnGatewayConnection, OnGatewayDisconnect {
   private readonly _logger = new Logger(EventsGateway.name);
   @WebSocketServer()
   private readonly _server: Server;
-  private readonly _topics = new Map<string, Set<WebSocket>>();
-  private readonly _connection = new Connection('http://localhost:8899');
+  private readonly _connection = new Connection(environment.rpcUrl, {
+    confirmTransactionInitialTimeout: 120_000, // timeout for 2 minutes ~blockhash duration
+  });
 
-  private broadcastTransaction(
-    event: string,
-    signature: TransactionSignature,
-    topic: string
-  ) {
-    this._topics.get(topic)?.forEach((client) =>
-      client.send(
-        JSON.stringify({
-          event,
-          data: {
-            signature,
-            topic,
-          },
-        })
-      )
-    );
-  }
+  constructor(private readonly _eventsService: EventsService) {}
 
   handleConnection(
     @ConnectedSocket()
@@ -49,7 +38,10 @@ export class EventsGateway implements OnGatewayConnection, OnGatewayDisconnect {
       `Client connected. [${this._server.clients.size} clients connected]`
     );
 
-    this._topics.set('*', new Set([...(this._topics.get('*') ?? []), client]));
+    this._eventsService.dispatch({
+      type: 'CLIENT_CONNECTED',
+      payload: client,
+    });
   }
 
   handleDisconnect(
@@ -60,89 +52,164 @@ export class EventsGateway implements OnGatewayConnection, OnGatewayDisconnect {
       `Client disconnected. [${this._server.clients.size} clients connected]`
     );
 
-    this._topics.forEach((_, topic) => {
-      const clients = [...(this._topics.get(topic) ?? [])].filter(
-        (ws) => ws !== client
-      );
-
-      if (clients.length === 0) {
-        this._topics.delete(topic);
-      } else {
-        this._topics.set(topic, new Set(clients));
-      }
+    this._eventsService.dispatch({
+      type: 'CLIENT_DISCONNECTED',
+      payload: client,
     });
   }
 
   @SubscribeMessage('subscribe')
   onSubscribe(
     @ConnectedSocket()
     client: WebSocket,
-    @MessageBody() topic: string
+    @MessageBody()
+    {
+      topicName,
+      correlationId,
+    }: {
+      topicName: string;
+      correlationId: string;
+    }
   ) {
-    this._logger.log(`Client subscribed to [${topic}].`);
-
-    this._topics.set(
-      topic,
-      new Set([...(this._topics.get(topic) ?? []), client])
-    );
+    this._logger.log(`Client subscribed to [${topicName}].`);
+
+    this._eventsService.dispatch({
+      type: 'CLIENT_SUBSCRIBED',
+      payload: {
+        client,
+        topicName,
+        subscriptionId: uuid(),
+        correlationId,
+      },
+    });
   }
 
   @SubscribeMessage('unsubscribe')
   onUnsubscribe(
     @ConnectedSocket()
     client: WebSocket,
-    @MessageBody() topic: string
-  ) {
-    this._logger.log(`Client unsubscribed from [${topic}].`);
-
-    const clients = [...(this._topics.get(topic) ?? [])].filter(
-      (ws) => ws !== client
-    );
-
-    if (clients.length === 0) {
-      this._topics.delete(topic);
-    } else {
-      this._topics.set(topic, new Set(clients));
+    @MessageBody()
+    {
+      topicName,
+      subscriptionId,
+    }: {
+      topicName: string;
+      subscriptionId: string;
     }
+  ) {
+    this._logger.log(`Client unsubscribed from [${topicName}].`);
+
+    this._eventsService.dispatch({
+      type: 'CLIENT_UNSUBSCRIBED',
+      payload: {
+        client,
+        topicName,
+        subscriptionId,
+      },
+    });
   }
 
   @SubscribeMessage('transaction')
   async onTransaction(
     @MessageBody()
     {
       transactionSignature,
-      topic,
+      transaction,
+      topicNames,
     }: {
       transactionSignature: TransactionSignature;
-      topic: string;
+      transaction: Transaction;
+      topicNames: List<string>;
     }
   ) {
-    this._logger.log(`Transaction received [${transactionSignature}].`);
-
-    await this._connection.confirmTransaction(
-      transactionSignature,
-      'confirmed'
+    this._logger.log(
+      `Transaction received [${transactionSignature}]. (${topicNames.join(
+        ', '
+      )})`
     );
 
-    this._logger.log(`Transaction confirmed [${transactionSignature}].`);
+    this._eventsService.dispatch({
+      type: 'TRANSACTION_RECEIVED',
+      payload: {
+        topicNames,
+        transactionStatus: {
+          transaction,
+          signature: transactionSignature,
+          timestamp: Date.now(),
+        },
+      },
+    });
 
-    this.broadcastTransaction(
-      'transactionConfirmed',
-      transactionSignature,
-      topic
-    );
+    try {
+      await this._connection.confirmTransaction(
+        transactionSignature,
+        'confirmed'
+      );
 
-    await this._connection.confirmTransaction(
-      transactionSignature,
-      'finalized'
-    );
+      this._logger.log(
+        `Transaction confirmed [${transactionSignature}]. (${topicNames.join(
+          ', '
+        )})`
+      );
+
+      this._eventsService.dispatch({
+        type: 'TRANSACTION_CONFIRMED',
+        payload: {
+          topicNames,
+          transactionStatus: {
+            transaction,
+            signature: transactionSignature,
+            timestamp: Date.now(),
+            status: 'confirmed',
+          },
+        },
+      });
 
-    this._logger.log(`Transaction finalized [${transactionSignature}].`);
+      await this._connection.confirmTransaction(
+        transactionSignature,
+        'finalized'
+      );
 
-    this.broadcastTransaction(
-      'transactionFinalized',
-      transactionSignature,
-      topic
-    );
+      this._logger.log(
+        `Transaction finalized [${transactionSignature}]. (${topicNames.join(
+          ', '
+        )})`
+      );
+
+      this._eventsService.dispatch({
+        type: 'TRANSACTION_FINALIZED',
+        payload: {
+          topicNames,
+          transactionStatus: {
+            transaction,
+            signature: transactionSignature,
+            timestamp: Date.now(),
+            status: 'finalized',
+          },
+        },
+      });
+    } catch (error) {
+      this._logger.log(
+        `Transaction failed [${transactionSignature}]. (${topicNames.join(
+          ', '
+        )})`
+      );
+
+      this._eventsService.dispatch({
+        type: 'TRANSACTION_FAILED',
+        payload: {
+          topicNames,
+          transactionStatus: {
+            transaction,
+            signature: transactionSignature,
+            timestamp: Date.now(),
+            error: {
+              name: 'ConfirmTransactionError',
+              message: error.message,
+            },
+          },
+        },
+      });
+    }
   }
 }

apps/broadcaster/src/app/events/events.module.ts

@@ -1,7 +1,8 @@
 import { Module } from '@nestjs/common';
 import { EventsGateway } from './events.gateway';
+import { EventsService } from './events.service';
 
 @Module({
-  providers: [EventsGateway],
+  providers: [EventsService, EventsGateway],
 })
 export class EventsModule {}