Remove DesmoldSDK service

src/app/app.module.ts

@@ -34,7 +34,6 @@ import { MatRadioModule } from '@angular/material/radio';
 import { TransactionViewerComponent } from './components/transaction-viewer/transaction-viewer.component';
 import { MatStepperModule } from '@angular/material/stepper';
 import { NgxMapboxGLModule } from 'ngx-mapbox-gl';
-import { DesmoldSDKService } from 'src/app/services/desmold-sdk/desmold-sdk.service';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTreeModule } from '@angular/material/tree';
 import { TddListTableComponent } from './components/tdd-list-table/tdd-list-table.component';
@@ -96,7 +95,7 @@ const mapboxToken =
       // geocoderAccessToken: mapboxToken // Optional, specify if different from the map access token, can also be set per mgl-geocoder (accessToken input of mgl-geocoder)
     }),
   ],
-  providers: [DesmoldSDKService],
+  providers: [],
   bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/components/tdd-manager/tdd-manager.component.ts

@@ -1,11 +1,10 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableDataSource } from '@angular/material/table';
-import { ITDD } from '@vaimee/desmold-sdk';
+import { DesmoHub, ITDD } from '@vaimee/desmold-sdk';
 import { Subscription } from 'rxjs';
 import { ConfirmationDialogComponent } from 'src/app/components/confirmation-dialog/confirmation-dialog.component';
-import { DesmoldSDKService } from 'src/app/services/desmold-sdk/desmold-sdk.service';
 
 interface TDD {
   address: string;
@@ -30,7 +29,9 @@ export class TddManagerComponent implements OnInit, OnDestroy {
   loading: boolean = false;
   private subscriptions: Subscription = new Subscription();
 
-  constructor(public dialog: MatDialog, private desmold: DesmoldSDKService) {
+  @Input('desmoHub') desmoHub!: DesmoHub;
+
+  constructor(public dialog: MatDialog) {
     // Check the cache for pre-existing data or initialise with an empty list:
     const tddList: string = localStorage.getItem(this.CACHE_KEY) ?? '[]';
     this.tableData = JSON.parse(tddList) as TDD[];
@@ -43,11 +44,9 @@ export class TddManagerComponent implements OnInit, OnDestroy {
   }
 
   async ngOnInit(): Promise<void> {
-    await this.desmold.connect();
-
     // tddCreated subscription
     this.subscriptions.add(
-      this.desmold.desmoHub.tddCreated$.subscribe((event) => {
+      this.desmoHub.tddCreated$.subscribe((event) => {
         this.tableData[0] = {
           address: event.key,
           url: event.url,
@@ -65,7 +64,7 @@ export class TddManagerComponent implements OnInit, OnDestroy {
 
     // tddDisabled subscription
     this.subscriptions.add(
-      this.desmold.desmoHub.tddDisabled$.subscribe((event) => {
+      this.desmoHub.tddDisabled$.subscribe((event) => {
         this.tableData[0] = {
           address: event.key,
           url: event.url,
@@ -84,7 +83,7 @@ export class TddManagerComponent implements OnInit, OnDestroy {
 
     // tddEnabled subscription
     this.subscriptions.add(
-      this.desmold.desmoHub.tddEnabled$.subscribe((event) => {
+      this.desmoHub.tddEnabled$.subscribe((event) => {
         this.tableData[0] = {
           address: event.key,
           url: event.url,
@@ -113,7 +112,7 @@ export class TddManagerComponent implements OnInit, OnDestroy {
 
     dialogRef.afterClosed().subscribe(async (result) => {
       if (result) {
-        await this.desmold.desmoHub.registerTDD(this.tddUrl);
+        await this.desmoHub.registerTDD(this.tddUrl);
         this.loading = true;
       }
     });
@@ -124,7 +123,7 @@ export class TddManagerComponent implements OnInit, OnDestroy {
 
     dialogRef.afterClosed().subscribe(async (result) => {
       if (result) {
-        await this.desmold.desmoHub.disableTDD();
+        await this.desmoHub.disableTDD();
         this.loading = true;
       }
     });
@@ -135,7 +134,7 @@ export class TddManagerComponent implements OnInit, OnDestroy {
 
     dialogRef.afterClosed().subscribe(async (result) => {
       if (result) {
-        await this.desmold.desmoHub.enableTDD();
+        await this.desmoHub.enableTDD();
         this.loading = true;
       }
     });
@@ -144,7 +143,7 @@ export class TddManagerComponent implements OnInit, OnDestroy {
   async getTDD(): Promise<void> {
     let retrievedTDD: ITDD;
     try {
-      retrievedTDD = await this.desmold.desmoHub.getTDD();
+      retrievedTDD = await this.desmoHub.getTDD();
     } catch (error) {
       this.tddRetrieved = false;
       throw new Error(`Unable to retrieve your TDD. You may need to register one. Error message: ${error}`);

src/app/components/transaction-viewer/transaction-viewer.component.ts

@@ -4,12 +4,12 @@ import {
   OnDestroy,
   ViewChild,
   AfterViewInit,
+  Input,
 } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { Subscription } from 'rxjs';
-import { DesmoldSDKService } from 'src/app/services/desmold-sdk/desmold-sdk.service';
 import { MatPaginator } from '@angular/material/paginator';
-import { ISentTransaction, OperationType } from '@vaimee/desmold-sdk';
+import { DesmoHub,  OperationType } from '@vaimee/desmold-sdk';
 
 interface ITransaction {
   invokedOperation: string;
@@ -32,24 +32,24 @@ export class TransactionViewerComponent
 
   @ViewChild(MatPaginator) paginator!: MatPaginator;
 
+  @Input('desmoHub') desmoHub!: DesmoHub;
+
   ngAfterViewInit() {
     this.dataSource.paginator = this.paginator;
   }
 
   private subscriptions: Subscription = new Subscription();
 
-  constructor(private desmold: DesmoldSDKService) {
+  constructor() {
     // Check the cache for pre-existing data or initialise with an empty list:
     const txList: string = sessionStorage.getItem(this.CACHE_KEY) ?? '[]';
     this.tableData = JSON.parse(txList) as ITransaction[];
     this.dataSource = new MatTableDataSource<ITransaction>(this.tableData);
   }
 
   async ngOnInit(): Promise<void> {
-    await this.desmold.connect();
-
     this.subscriptions.add(
-      this.desmold.desmoHub.transactionSent$.subscribe((tx) => {
+      this.desmoHub.transactionSent$.subscribe((tx) => {
         this.tableData.unshift({
           invokedOperation: this._fromOperationTypeToString(tx.invokedOperation),
           hash: tx.hash,

src/app/pages/query-page/query-page.component.ts

@@ -1,5 +1,4 @@
 import { IGeoAltitudeRange } from './../../interface/IQuery';
-import { DesmoldSDKService } from 'src/app/services/desmold-sdk/desmold-sdk.service';
 import { Component } from '@angular/core';
 import IQuery, {
   defaultIQuery,
@@ -26,6 +25,7 @@ import { firstValueFrom } from 'rxjs';
 import { environment } from 'src/environments/environment';
 import { defaultIResult, defaultIResultTable, IResult, IResultTable, QueryResultTypes } from 'src/app/interface/IResult';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { Desmo, DesmoHub, WalletSignerMetamask } from '@vaimee/desmold-sdk';
 
 let filterMap: MapboxMap;
 const drawPolygon: MapboxDraw = new MapboxDraw({
@@ -77,7 +77,7 @@ export class QueryPageComponent {
   prefixesFormArray: FormArray = this._fb.array([]);
   prefixNames: string[] = [];
 
-  constructor(private _fb: FormBuilder, private desmold: DesmoldSDKService, private snackBar: MatSnackBar) {}
+  constructor(private _fb: FormBuilder, private snackBar: MatSnackBar) {}
 
   onFilterMapLoad(map: MapboxMap): void {
     filterMap = map;
@@ -128,16 +128,16 @@ export class QueryPageComponent {
     this.result.loading = true;
     this.resultTable = defaultIResultTable();
     this.query = defaultIQuery();
-    
+
     // Prefix list
-    
+
     for (let i = 0; i < this.prefixesFormArray.length; ++i) {
       this.query.prefixList?.push({
         abbreviation: this.prefixNames[i],
         completeURI: this.prefixesFormArray.controls[i].value,
       });
     }
-    
+
 
     /*
     If only a single prefix is used, no response is given.
@@ -155,7 +155,7 @@ export class QueryPageComponent {
 
     // Query filters
     this.query.staticFilter = this.filtersFormGroup.value.jsonPathExpression;
-    
+
     // To uncomment when these features will be implemented
     /*
     this.query.dynamicFilter =
@@ -199,18 +199,27 @@ export class QueryPageComponent {
     // TODO: other parts of the query...
     */
     console.log(this.query);
-
-    this.desmold.connect();
-
-    const eventPromise = firstValueFrom(this.desmold.desmoHub.requestID$);
-    await this.desmold.desmoHub.getNewRequestID();
+
+    const walletSigner = new WalletSignerMetamask((window as any).ethereum);
+
+    const desmoHub = new DesmoHub(walletSigner);
+    const desmo = new Desmo(walletSigner);
+
+    if (!desmoHub.isConnected || !desmo.isConnected) {
+      await walletSigner.connect();
+      desmoHub.connect();
+      desmo.connect();
+    }
+
+    const eventPromise = firstValueFrom(desmoHub.requestID$);
+    await desmoHub.getNewRequestID();
     const event = await eventPromise;
     this.notifySentTransaction("new request ID received");
 
     const queryToSend : string = this.queryToSend(this.query);
-    await this.desmold.desmoContract.buyQuery(event.requestID, queryToSend, environment.iExecDAppAddress);
+    await desmo.buyQuery(event.requestID, queryToSend, environment.iExecDAppAddress);
     this.notifySentTransaction("Query successfully sent");
-    const {result, type} = await this.desmold.desmoContract.getQueryResult();
+    const {result, type} = await desmo.getQueryResult();
     this.notifySentTransaction("Query result received");
     const elapsedTime = this.elapsed(start);
     this.queryCompleted(result, type, elapsedTime);

src/app/pages/tdd-manager-page/tdd-manager-page.component.html

@@ -4,10 +4,10 @@ <h3 class="mat-h3">Manage your TDDs</h3>
 
   <mat-grid-list cols="2" rows="2" rowHeight="2:1">
     <mat-grid-tile [colspan]="isSmallScreen ? 2 : 1" [rowspan]="1">
-      <app-tdd-manager></app-tdd-manager>
+      <app-tdd-manager [desmoHub]="desmoHub"></app-tdd-manager>
     </mat-grid-tile>
     <mat-grid-tile [colspan]="isSmallScreen ? 2 : 1" [rowspan]="1">
-      <app-transaction-viewer></app-transaction-viewer>
+      <app-transaction-viewer [desmoHub]="desmoHub"></app-transaction-viewer>
     </mat-grid-tile>
   </mat-grid-list>
 </div>

src/app/pages/tdd-manager-page/tdd-manager-page.component.ts

@@ -1,4 +1,3 @@
-import { DesmoldSDKService } from 'src/app/services/desmold-sdk/desmold-sdk.service';
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { map, Subscription } from 'rxjs';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -7,6 +6,7 @@ import {
   BreakpointObserver,
   BreakpointState,
 } from '@angular/cdk/layout';
+import { DesmoHub, WalletSignerMetamask } from '@vaimee/desmold-sdk';
 
 type EventType = 'CREATE' | 'DISABLE' | 'ENABLE' | 'RETRIEVE';
 const eventMessages: Record<EventType, string> = {
@@ -24,15 +24,23 @@ const eventMessages: Record<EventType, string> = {
 export class TddManagerPageComponent implements OnInit, OnDestroy {
   private subscriptions: Subscription = new Subscription();
   isSmallScreen: boolean = false;
+  private walletSigner: WalletSignerMetamask;
+  desmoHub: DesmoHub;
 
   constructor(
-    private desmold: DesmoldSDKService,
     private snackBar: MatSnackBar,
     private breakpointObserver: BreakpointObserver
-  ) {}
+  ) {
+    this.walletSigner = new WalletSignerMetamask((window as any).ethereum);
+    this.desmoHub = new DesmoHub(this.walletSigner);
+  }
 
   async ngOnInit(): Promise<void> {
-    await this.desmold.connect();
+    if (!this.desmoHub.isConnected) {
+      await this.walletSigner.connect();
+      this.desmoHub.connect();
+    }
+    await this.desmoHub.startListeners();
 
     /** Based on the screen size, switch from standard to one column per row */
     this.subscriptions.add(
@@ -41,16 +49,16 @@ export class TddManagerPageComponent implements OnInit, OnDestroy {
         .subscribe(({ matches }) => (this.isSmallScreen = matches))
     );
     this.subscriptions.add(
-      this.desmold.desmoHub.tddCreated$.subscribe(() => this.notifyTDDEvent('CREATE'))
+      this.desmoHub.tddCreated$.subscribe(() => this.notifyTDDEvent('CREATE'))
     );
     this.subscriptions.add(
-      this.desmold.desmoHub.tddDisabled$.subscribe(() => this.notifyTDDEvent('DISABLE'))
+      this.desmoHub.tddDisabled$.subscribe(() => this.notifyTDDEvent('DISABLE'))
     );
     this.subscriptions.add(
-      this.desmold.desmoHub.tddEnabled$.subscribe(() => this.notifyTDDEvent('ENABLE'))
+      this.desmoHub.tddEnabled$.subscribe(() => this.notifyTDDEvent('ENABLE'))
     );
     this.subscriptions.add(
-      this.desmold.desmoHub.transactionSent$.subscribe(() =>
+      this.desmoHub.transactionSent$.subscribe(() =>
         this.notifySentTransaction()
       )
     );