Adding an Angor tab

src/Blockcore.Explorer/ClientApp/src/app/explorer/angor-project/angor-project.component.html

@@ -0,0 +1,45 @@
+<app-search></app-search>
+
+<div class="box">
+   <h3>Project Details</h3>
+   <app-progress class="centered" *ngIf="loading">Loading project details...</app-progress>
+
+   <div *ngIf="error">
+      <span class="muted">Error: </span> <span class="negative">{{error.message}}</span><br><br>
+      {{error | json}}
+   </div>
+
+   <div *ngIf="!loading && !error && project">
+      <p><strong>Project Identifier:</strong> {{ project.projectIdentifier }}</p>
+      <p><strong>Founder Key:</strong> {{ project.founderKey }}</p>
+      <p><strong>Nostr Pub Key:</strong> {{ project.nostrPubKey }}</p>
+      <p><strong>Created On Block:</strong> {{ project.createdOnBlock }}</p>
+      <p>
+         <strong>Transaction id:</strong>
+         <a [routerLink]="['../../transaction', project.trxId]">{{ project.trxId | slice:0:30 }}</a>
+      </p>
+      <p><strong>Total Investments Count:</strong> {{ project.totalInvestmentsCount }}</p>
+
+      <h4>Investments</h4>
+      <table>
+         <thead>
+            <tr>
+               <!--<th>Investor Public Key</th>-->
+               <th>Transaction id</th>
+               <th>Total Amount</th>
+               <!--<th>Hash Of Secret</th>-->
+               <!--<th>Is Seeder</th>-->
+            </tr>
+         </thead>
+         <tbody>
+            <tr *ngFor="let investment of investments">
+               <!--<td>{{ investment.investorPublicKey }}</td>-->
+               <td><a [routerLink]="['../../transaction', investment.transactionId ]">{{ investment.transactionId  | slice:0:30 }}</a></td>
+               <td>{{ investment.totalAmount | amount }}</td>
+               <!--<td>{{ investment.hashOfSecret }}</td>-->
+               <!--<td>{{ investment.isSeeder }}</td>-->
+            </tr>
+         </tbody>
+      </table>
+   </div>
+</div>

src/Blockcore.Explorer/ClientApp/src/app/explorer/angor-project/angor-project.component.ts

@@ -0,0 +1,180 @@
+import { Component, HostBinding, OnInit, OnDestroy, HostListener } from '@angular/core';
+import { ActivatedRoute, Route, Router } from '@angular/router';
+import { ApiComponent } from 'src/app/api/api.component';
+import { ApiService, HttpError } from 'src/app/services/api.service';
+import { SetupService } from 'src/app/services/setup.service';
+import { ScrollEvent } from 'src/app/shared/scroll.directive';
+
+@Component({
+   selector: 'angor-project-component',
+   templateUrl: './angor-project.component.html'
+})
+export class AngorProject implements OnInit, OnDestroy {
+   @HostBinding('class.content-centered-top') hostClass = true;
+
+   info: any;
+   node: any;
+   blockchain: any;
+   network: any;
+   configuration: any;
+   consensus: any;
+   peers: any;
+   blocks: any;
+   project: any;
+   investments: any
+
+   timerInfo: any;
+   timerBlocks: any;
+   timerTransactions: any;
+   contractType: any;
+   balance: any;
+   detailsVisible = false;
+   lastBlockHeight: number;
+   subscription: any;
+   limit = 10;
+   loading = false;
+   count = 0;
+   total: any;
+   link: string;
+   error: any;
+   errorTransactions: any;
+   navPath: any;
+
+   constructor(
+      private api: ApiService,
+      private router: Router,
+      public setup: SetupService,
+      private activatedRoute: ActivatedRoute) {
+
+      this.activatedRoute.paramMap.subscribe(async params => {
+
+
+         const id: any = params.get('projectid');
+         this.project = null;
+
+         try {
+
+            this.navPath = "../../";
+
+            await this.getProject('/api/query/Angor/projects/' + id);
+
+            await this.getInvestments('/api/query/Angor/projects/' + id + '/investments??offset=&limit=' + this.limit);
+
+         } catch (err) {
+            if (err.message[0] === '{') {
+               this.errorTransactions = JSON.parse(err.message);
+            } else {
+               this.errorTransactions = err;
+            }
+         }
+      });
+   }
+
+      async ngOnInit() {
+
+   }
+
+   toggleDetails() {
+      this.detailsVisible = !this.detailsVisible;
+   }
+
+   ngOnDestroy(): void {
+
+   }
+
+   async getProject(url) {
+      // If no URL, then likely reached the end.
+      if (!url) {
+         return;
+      }
+
+      const baseUrl = this.api.baseUrl.replace('/api', '');
+      // For the block scrolling (using link http header), we must manually set full URL.
+      const response = await this.api.request(baseUrl + url);
+
+      // When the offset is not set (0), we should reverse the order of items.
+      const list = await response.json();
+
+      if (response.status !== 200) {
+         if (list && list.status) {
+            throw new HttpError(list.status, url, JSON.stringify(list));
+         } else {
+            throw new HttpError(response.status, url, response.statusText);
+         }
+      }
+
+      this.project = list;
+   }
+
+   async getInvestments(url) {
+      // If no URL, then likely reached the end.
+      if (!url) {
+         return;
+      }
+
+      const baseUrl = this.api.baseUrl.replace('/api', '');
+      // For the block scrolling (using link http header), we must manually set full URL.
+      const response = await this.api.request(baseUrl + url);
+
+      // When the offset is not set (0), we should reverse the order of items.
+      const list = await response.json();
+
+      if (response.status !== 200) {
+         if (list && list.status) {
+            throw new HttpError(list.status, url, JSON.stringify(list));
+         } else {
+            throw new HttpError(response.status, url, response.statusText);
+         }
+      }
+
+      list.sort((b, a) => {
+         if (a.createdOnBlock === b.createdOnBlock) {
+            return 0;
+         }
+         if (a.createdOnBlock < b.createdOnBlock) {
+            return -1;
+         }
+         if (a.createdOnBlock > b.createdOnBlock) {
+            return 1;
+         }
+      });
+
+
+      this.total = response.headers.get('Pagination-Total');
+      const linkHeader = response.headers.get('Link');
+      const links = this.api.parseLinkHeader(linkHeader);
+
+      // This will be set to undefined/null when no more next links is available.
+      this.link = links['previous'];
+
+      if (!this.investments) {
+         this.investments = [];
+      }
+
+      this.investments = [...this.investments, ...list];
+      this.count++;
+   }
+
+   async onScroll(event: ScrollEvent) {
+      console.log('scroll occurred', event);
+
+      if (event.isReachingBottom) {
+         console.log(`the user is reaching the bottom`);
+
+         this.loading = true;
+
+         setTimeout(async () => {
+            await this.getInvestments(this.link);
+            this.loading = false;
+         });
+
+      }
+      if (event.isReachingTop) {
+         console.log(`the user is reaching the top`);
+      }
+      if (event.isWindowEvent) {
+         console.log(`This event is fired on Window not on an element.`);
+      }
+   }
+}
+

src/Blockcore.Explorer/ClientApp/src/app/explorer/angor-projects/angor-projects.component.html

@@ -0,0 +1,34 @@
+<app-search></app-search>
+
+<div class="box">
+   <h3>Projects</h3>
+   <app-progress class="centered" *ngIf="loading">Loading projects...</app-progress>
+
+   <div *ngIf="error">
+      <span class="muted">Error: </span> <span class="negative">{{error.message}}</span><br><br>
+      {{error | json}}
+   </div>
+
+   <div *ngIf="!loading && !error">
+      <table>
+         <thead>
+         <tr>
+            <!--<th>Founder Key</th>
+            <th>Nostr Pub Key</th>-->
+            <th>Project Identifier</th>
+            <th>Created On Block</th>
+            <th>Transaction ID</th>
+         </tr>
+         </thead>
+         <tbody>
+         <tr *ngFor="let project of projects">
+            <!--<td>{{ project.founderKey }}</td>
+            <td>{{ project.nostrPubKey }}</td>-->
+            <td><a [routerLink]="['../angor-project', project.projectIdentifier]">{{ project.projectIdentifier }}</a></td>
+            <td>{{ project.createdOnBlock }}</td>
+            <td><a [routerLink]="['../transaction', project.trxId]">{{ project.trxId | slice:0:30 }}</a></td>
+         </tr>
+         </tbody>
+      </table>
+   </div>
+</div>