import { Component , ElementRef , OnInit , ViewChild } from '@angular/core' ; import { AttachmentEncryptedMessage , AttachmentMessage , Account , Transaction } from '@signumjs/core' ; import { ActivatedRoute , Router , NavigationEnd } from '@angular/router' ; import { MatTableDataSource } from '@angular/material/table' ; import { AccountService } from 'app/setup/account/account.service' ; import { StoreService } from 'app/store/store.service' ; import hashicon from 'hashicon' ; import { uniqBy } from 'lodash' ; import { MediaChange , MediaObserver } from '@angular/flex-layout' ; import { UnsubscribeOnDestroy } from '../../../util/UnsubscribeOnDestroy' ; import { takeUntil } from 'rxjs/operators' ; import { FuseProgressBarService } from '../../../../@fuse/components/progress-bar/progress-bar.service' ; import { TokenData , TokenService } from "../../../shared/services/token.service" ; type TransactionDetailsCellValue = string | AttachmentMessage | AttachmentEncryptedMessage | number ; type TransactionDetailsCellValueMap = [ string , TransactionDetailsCellValue ] ; const ColumnsQuery = { xl : [ 'transaction_id' , 'timestamp' , 'type' , 'amount' , 'account' , 'confirmations' ] , lg : [ 'transaction_id' , 'timestamp' , 'type' , 'amount' , 'account' , 'confirmations' ] , md : [ 'transaction_id' , 'timestamp' , 'type' , 'amount' , 'account' ] , sm : [ 'transaction_id' , 'timestamp' , 'amount' , 'account' ] , xs : [ 'transaction_id' , 'timestamp' , 'amount' ] , } ; @ Component ( { selector : 'app-account-details' , templateUrl : './account-details.component.html' , styleUrls : [ './account-details.component.scss' ] } ) export class AccountDetailsComponent extends UnsubscribeOnDestroy implements OnInit { @ ViewChild ( 'avatar' , { static : false } ) avatar : ElementRef < HTMLCanvasElement > ; detailsData : Map < string , TransactionDetailsCellValue > ; account : Account ; transactions : Transaction [ ] = [ ] ; dataSource : MatTableDataSource < Transaction > ; accountQRCodeURL : Promise < string > ; language : string ; intervalHandle : any ; columns : string [ ] = [ ] ; tokens : TokenData [ ] = [ ] ; isLoadingTokens = true ; constructor ( private route , private router , private accountService , private tokenService , private observableMedia , private storeService , private progressService ) { super ( ) ; router . events . pipe ( takeUntil ( this . unsubscribeAll ) ) . subscribe ( ( val ) => { if ( val instanceof NavigationEnd ) { this . initialize ( ) ; } } ) ; } public getDetailsData ( ) { return Array . from ( this . detailsData . entries ( ) ) ; } ngOnInit ( ) { this . initialize ( ) ; this . intervalHandle = setInterval ( ( ) => { this . updateTransactions ( ) ; this . updateTokens ( ) ; } , 30 * 1000 ) ; } public ngAfterContentInit ( ) { this . observableMedia . asObservable ( ) . pipe ( takeUntil ( this . unsubscribeAll ) ) . subscribe ( ( change ) => { this . columns = ColumnsQuery [ change [ 0 ] . mqAlias ] ; } ) ; } async initialize ( ) { this . account = this . route . snapshot . data . account as Account ; this . transactions = this . route . snapshot . data . transactions as Transaction [ ] ; const blockDetails = Object . keys ( this . account ) . map ( ( key ) : TransactionDetailsCellValueMap => [ key , this . account [ key ] ] ) ; this . detailsData = new Map ( blockDetails ) ; this . dataSource = new MatTableDataSource < Transaction > ( ) ; this . dataSource . data = this . transactions ; this . language = this . storeService . settings . value . language ; setTimeout ( ( ) => { this . updateAvatar ( ) ; } , 100 ) ; this . updateTokens ( ) ; } async updateTransactions ( ) { const accountId = this . account . account ; let transactionList ; if ( this . transactions . length > 0 ) { const timestamp = this . transactions [ 0 ] . timestamp . toString ( 10 ) ; transactionList = await this . accountService . getAccountTransactions ( { accountId , timestamp } ) ; } else { transactionList = await this . accountService . getAccountTransactions ( { accountId } ) ; } const { unconfirmedTransactions } = await this . accountService . getUnconfirmedTransactions ( accountId ) ; this . transactions = uniqBy ( unconfirmedTransactions . concat ( transactionList . transactions ) . concat ( this . transactions ) , 'transaction' ) ; this . dataSource . data = this . transactions ; } private updateAvatar ( ) { if ( this . avatar ) { hashicon ( this . account . account , { size : 100 , createCanvas : ( ) => this . avatar . nativeElement } ) ; } } ngOnDestroy ( ) { clearInterval ( this . intervalHandle ) ; } private async updateTokens ( ) { this . progressService . show ( ) ; this . isLoadingTokens = true ; this . tokens = await this . tokenService . fetchAccountTokens ( this . account ) ; this . isLoadingTokens = false ; this . progressService . hide ( ) ; } }