diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6f6a806..1883268 100644 --- a/src/app/app.module.ts +++ b/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 {} diff --git a/src/app/components/tdd-manager/tdd-manager.component.ts b/src/app/components/tdd-manager/tdd-manager.component.ts index a8dc417..6056fdd 100644 --- a/src/app/components/tdd-manager/tdd-manager.component.ts +++ b/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 { - 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 { 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}`); diff --git a/src/app/components/transaction-viewer/transaction-viewer.component.ts b/src/app/components/transaction-viewer/transaction-viewer.component.ts index a8e7de3..a101b46 100644 --- a/src/app/components/transaction-viewer/transaction-viewer.component.ts +++ b/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,13 +32,15 @@ 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[]; @@ -46,10 +48,8 @@ export class TransactionViewerComponent } async ngOnInit(): Promise { - 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, diff --git a/src/app/pages/query-page/query-page.component.ts b/src/app/pages/query-page/query-page.component.ts index 79eea4f..6f7ad59 100644 --- a/src/app/pages/query-page/query-page.component.ts +++ b/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); diff --git a/src/app/pages/tdd-manager-page/tdd-manager-page.component.html b/src/app/pages/tdd-manager-page/tdd-manager-page.component.html index bf341ae..ceeccb6 100644 --- a/src/app/pages/tdd-manager-page/tdd-manager-page.component.html +++ b/src/app/pages/tdd-manager-page/tdd-manager-page.component.html @@ -4,10 +4,10 @@

Manage your TDDs

- + - + diff --git a/src/app/pages/tdd-manager-page/tdd-manager-page.component.ts b/src/app/pages/tdd-manager-page/tdd-manager-page.component.ts index 9fc7bdf..15461ac 100644 --- a/src/app/pages/tdd-manager-page/tdd-manager-page.component.ts +++ b/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 = { @@ -24,15 +24,23 @@ const eventMessages: Record = { 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 { - 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() ) ); diff --git a/src/app/services/desmold-sdk/desmold-sdk.service.spec.ts b/src/app/services/desmold-sdk/desmold-sdk.service.spec.ts deleted file mode 100644 index 91a7daf..0000000 --- a/src/app/services/desmold-sdk/desmold-sdk.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { DesmoldSDKService } from './desmold-sdk.service'; - -describe('DesmoldSDKService', () => { - let service: DesmoldSDKService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(DesmoldSDKService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/src/app/services/desmold-sdk/desmold-sdk.service.ts b/src/app/services/desmold-sdk/desmold-sdk.service.ts deleted file mode 100644 index 5c5b748..0000000 --- a/src/app/services/desmold-sdk/desmold-sdk.service.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { Injectable } from '@angular/core'; -import { - Desmo, - DesmoHub, - WalletSignerMetamask, -} from '@vaimee/desmold-sdk'; - -@Injectable({ - providedIn: 'root', -}) -export class DesmoldSDKService { - private _walletSigner: WalletSignerMetamask; - private _desmoHub: DesmoHub; - private _desmoContract: Desmo; - private _isConnected: boolean = false; - - constructor() { - // @ts-ignore - this._walletSigner = new WalletSignerMetamask(window.ethereum); - this._isConnected = this._walletSigner.isConnected; - - this._desmoHub = new DesmoHub(this._walletSigner); - this._desmoContract = new Desmo(this._walletSigner); - - // @ts-ignore - window.ethereum.on('chainChanged', (chainId: number) => window.location.reload()); - // @ts-ignore - window.ethereum.on('accountsChanged', (accounts: Array) => window.location.reload()); - } - - public get desmoHub(): DesmoHub { - return this._desmoHub; - } - - public get desmoContract(): Desmo { - return this._desmoContract; - } - - public get isConnected(): boolean { - return this._isConnected; - } - - public async connect() { - if (this.isConnected) { - if (!this.desmoHub.isListening) { - await this.desmoHub.startListeners(); - } - return; - } - - // This needs to be done immediately, in order to prevent other async functions - // that may have called connect() to execute the subsequent lines of code! - this._isConnected = true; - - await this._walletSigner.connect(); - this.desmoHub.connect(); - this.desmoContract.connect(); - - await this.desmoHub.startListeners(); - } - - ngOnDestroy() { - if (this.desmoHub.isListening) { - this.desmoHub.stopListeners(); - } - } -}