Standard token (#49)

* change  dao folder

* Add support for standard token

src/Blockcore.Explorer/ClientApp/src/app/app.module.ts

@@ -38,6 +38,7 @@ import { MempoolComponent } from './explorer/mempool/mempool.component';
 import { SearchGlobalComponent } from './search-global/search-global.component';
 import { OrphansComponent } from './explorer/orphans/orphans.component';
 import { ContractDaoComponent } from "./explorer/contract-dao/contract-dao.component";
+import { ContractTokenComponent } from './explorer/contract-token/contract-token.component';
 
 const routes: Routes = [
   {
@@ -135,6 +136,11 @@ const routes: Routes = [
          chain: LoadingResolverService
       }
    },
+   {
+      path: ':chain/explorer/contract-token/:address', component: ContractTokenComponent, resolve: {
+         chain: LoadingResolverService
+      }
+   },
 ];
 
 @NgModule({
@@ -173,7 +179,8 @@ const routes: Routes = [
     ContractAddressComponent,
     ContractCodeComponent,
     OrphansComponent,
-    ContractDaoComponent
+    ContractDaoComponent,
+    ContractTokenComponent
   ],
   imports: [
     BrowserModule,

src/Blockcore.Explorer/ClientApp/src/app/explorer/contract-address/contract-address.component.ts

@@ -120,7 +120,13 @@ export class ContractAddressComponent implements OnInit, OnDestroy {
          this.contractCodeTypeLink = true;
          this.contractCodeTypeLinkPath = "contract-dao";
          this.contractCodeTypeLinkParam = this.transaction.contractAddress;
+      }
+
+      if (this.transaction.contractCodeType == "StandardToken") {
 
+         this.contractCodeTypeLink = true;
+         this.contractCodeTypeLinkPath = "contract-token";
+         this.contractCodeTypeLinkParam = this.transaction.contractAddress;
       }
    }
 

src/Blockcore.Explorer/ClientApp/src/app/explorer/contract-dao/contract-dao.component.html

@@ -57,10 +57,6 @@ <h3><i class="fas fa-receipt"></i>&nbsp;&nbsp;DAO Contract Details</h3>
       </div>
 
    </div>
-
-
-
-
 </div>
 
 <div class="box">

src/Blockcore.Explorer/ClientApp/src/app/explorer/contract-dao/contract-dao.component.ts

@@ -27,7 +27,7 @@ export class ContractDaoComponent implements OnInit,OnDestroy{
          console.log('Smart contract address:', address);
 
          try {
-            this.daoContract = await this.api.getDaoContractTransaction(address);
+            this.daoContract = await this.api.getContractDaoTransaction(address);
 
             this.totalDepositsAmount = this.daoContract.deposits.map((item)=> Number.parseInt(item.amount)).reduce((acc, curr) => acc + curr, 0);
 

src/Blockcore.Explorer/ClientApp/src/app/explorer/contract-token/contract-token.component.html

@@ -0,0 +1,99 @@
+<app-search></app-search>
+
+<div class="box">
+   <div *ngIf="transaction">
+      <div class="grid-hash">
+         <div>
+            <span class="grid-hash-left"><i class="fas fa-hashtag"></i></span>
+            <span class="grid-hash-middle breakable">{{transaction.contractAddress}}</span>
+            <span class="grid-hash-right">
+               <div class="grid-double">
+               </div>
+            </span>
+         </div>
+      </div>
+   </div>
+</div>
+
+<div class="box">
+
+   <h3><i class="fas fa-receipt"></i>&nbsp;&nbsp;Standard Token Details</h3>
+
+   <app-progress class="centered" *ngIf="!transaction"></app-progress>
+   <app-error class="centered" [error]="error"></app-error>
+
+   <div class="grid-label-value" *ngIf="transaction">
+
+
+
+      <div>
+         <span>Token name</span>
+         <span>{{transaction.name }}</span>
+      </div>
+      <div>
+         <span>Token symbol</span>
+         <span>{{transaction.symbol}}</span>
+      </div>
+      <div>
+         <span>Token total supply</span>
+         <span>{{transaction.totalSupply | amount}}</span>
+      </div>
+      <div>
+         <span>Decimals</span>
+         <span>{{transaction.decimals}}</span>
+      </div>
+      <div>
+         <span>Contract Address</span>
+         <span><a [routerLink]="['../../contract-address', transaction.contractAddress]">{{transaction.contractAddress}}</a></span>
+      </div>
+      <div>
+         <span>Created on Transaction</span>
+         <span><a [routerLink]="['../../','contract-transaction', transaction.contractCreateTransactionId]">{{transaction.contractCreateTransactionId | slice:0:20}}</a></span>
+      </div>
+
+      <div *ngIf="transaction.error">
+         <span>Error</span>
+         <span>{{transaction.error}}</span>
+      </div>
+
+   </div>
+</div>
+
+<div class="box">
+
+   <div *ngIf="this.filterAddress">
+      <h4>Filter by address: {{this.filterAddress}}</h4>
+   </div>
+
+   <h3>Token Holders</h3>
+
+   <app-progress class="centered" *ngIf="!transactions">Loading transactions...</app-progress>
+
+   <div *ngIf="errorTransactions">
+      <span class="muted">Error: </span> <span class="negative">{{errorTransactions.title}}</span><br><br>
+      {{errorTransactions.errors | json}}
+   </div>
+
+   <div *ngIf="transactions">
+      <!-- <div class="grid-list-transactions">
+         <span></span>
+         <span>Transaction ID</span>
+         <span>Height</span>
+         <span></span>
+         <span>Amount</span>
+      </div> -->
+
+      <div class="scrollable address-transactions-scrollable" appDetectScroll [bottomOffset]="400" [topOffset]="400">
+         <div class="grid-list-contract-token" *ngFor="let item of transactions">
+
+            <span class="address left">{{item.address}}</span>
+            <span class="number">{{item.amount | amount}} {{transaction.symbol}}</span>
+         </div>
+         <br>
+         <app-progress class="centered" *ngIf="loading">Loading more transactions...</app-progress>
+      </div>
+   </div>
+
+</div>
+
+

src/Blockcore.Explorer/ClientApp/src/app/explorer/contract-token/contract-token.component.ts

@@ -0,0 +1,98 @@
+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: 'app-contract-token-component',
+   templateUrl: './contract-token.component.html'
+})
+export class ContractTokenComponent 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;
+   transactions: any;
+   transaction: any;
+
+   contractCodeTypeLink = false;
+   contractCodeTypeLinkPath: any;
+   contractCodeTypeLinkParam: any;
+
+   timerInfo: any;
+   timerBlocks: any;
+   timerTransactions: any;
+   address: any;
+   filterAddress: 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('address');
+         console.log('Address:', id);
+
+         const idFilter: any = params.get('filterAddress');
+         console.log('filterAddress:', idFilter);
+
+         this.transactions = null;
+         this.address = id;
+         this.filterAddress = idFilter;
+
+         try {
+            this.transaction = await this.api.getContractTokenTransaction(id);
+            this.transactions = this.transaction.tokenHolders;
+
+         } catch (err) {
+            if (err.message[0] === '{') {
+               this.error = JSON.parse(err.message);
+            } else {
+               this.error = err;
+            }
+         }
+      });
+   }
+
+   amount(outputs: any[]) {
+      const filteredOutputs = outputs.filter(o => o.address === this.address);
+      const amount = filteredOutputs.reduce((acc, item) => acc + item.balance, 0);
+
+      return amount;
+   }
+
+      async ngOnInit() {
+
+   }
+
+   toggleDetails() {
+      this.detailsVisible = !this.detailsVisible;
+   }
+
+   ngOnDestroy(): void {
+
+   }
+}
+

src/Blockcore.Explorer/ClientApp/src/app/explorer/contract-transaction/contract-transaction.component.ts

@@ -71,17 +71,20 @@ export class ContractTransactionComponent implements OnInit, OnDestroy {
 
    buildLink() {
 
+      var contractAddress = (this.transaction.newContractAddress) ? this.transaction.newContractAddress : this.transaction.toAddress;
+
       if (this.transaction.contractCodeType == "DAOContract") {
 
          this.contractCodeTypeLink = true;
          this.contractCodeTypeLinkPath = "contract-dao";
+         this.contractCodeTypeLinkParam = contractAddress;
+      }
 
-         if (this.transaction.newContractAddress) {
-            this.contractCodeTypeLinkParam = this.transaction.newContractAddress;
-         }
-         else {
-            this.contractCodeTypeLinkParam = this.transaction.toAddress;
-         }
+      if (this.transaction.contractCodeType == "StandardToken") {
+
+         this.contractCodeTypeLink = true;
+         this.contractCodeTypeLinkPath = "contract-token";
+         this.contractCodeTypeLinkParam = contractAddress;
       }
    }
 }

src/Blockcore.Explorer/ClientApp/src/app/services/api.service.ts

@@ -157,10 +157,15 @@ export class ApiService {
       return this.downloadRelative('/query/cirrus/contract/code/' + address);
    }
 
-   async getDaoContractTransaction(address: string) {
-      return this.downloadRelative('/query/cirrus/contract/Dao/' + address);
+   async getContractDaoTransaction(address: string) {
+      return this.downloadRelative('/query/cirrus/contract/dao/' + address);
    }
 
+   async getContractTokenTransaction(address: string) {
+      return this.downloadRelative('/query/cirrus/contract/standardtoken/' + address);
+   }
+
+
    parseLinkHeader(linkHeader: string) {
       const sections = linkHeader.split(', ');
       //const links: Record<string, string> = { };

src/Blockcore.Explorer/ClientApp/src/styles/blockcore.scss

@@ -861,6 +861,14 @@ footer {
    grid-template-columns: minmax(0, 2fr) 140px auto 140px minmax(0, 3fr) auto;
 }
 
+.grid-list-contract-token {
+   font-size: 0.75em;
+   margin: 1em;
+   display: grid;
+   gap: 0.3em;
+   grid-template-columns: auto auto;
+}
+
 // .grid-list-transactions span {
 //   border: 1px solid red;
 // }