Merge branch 'develop' into 'master'

Develop

See merge request papers/tezblock/tezblock-frontend!378

src/app/app-routing.module.ts

@@ -8,6 +8,7 @@ import { EndorsementDetailComponent } from './pages/endorsement-detail/endorseme
 import { ListComponent } from './pages/list/list.component'
 import { TransactionDetailComponent } from './pages/transaction-detail/transaction-detail.component'
 import { ResourcesWalletsComponent } from './pages/resources-wallets/resources-wallets.component'
+import { ProposalDetailComponent } from './pages/proposal-detail/proposal-detail.component'
 
 const routes: Routes = [
   { path: '', component: DashboardComponent },
@@ -16,7 +17,8 @@ const routes: Routes = [
   { path: 'block/:id', component: BlockDetailComponent },
   { path: 'account/:id', component: AccountDetailComponent },
   { path: 'transaction/:id', component: TransactionDetailComponent },
-  { path: 'endorsement/:id', component: EndorsementDetailComponent }
+  { path: 'endorsement/:id', component: EndorsementDetailComponent },
+  { path: 'proposal/:id', component: ProposalDetailComponent }
 ]
 
 @NgModule({

src/app/app.actions.ts

@@ -0,0 +1,6 @@
+import { createAction, props } from '@ngrx/store'
+import { NavigationEnd } from '@angular/router'
+
+const featureName = 'App'
+
+export const saveLatestRoute = createAction(`[${featureName}] Save Latest Route`, props<{ navigation: NavigationEnd }>())

src/app/app.component.ts

@@ -1,15 +1,22 @@
 import { Component } from '@angular/core'
-import { Router } from '@angular/router'
+import { Router, NavigationEnd } from '@angular/router'
+import { filter } from 'rxjs/operators'
+import { Store } from '@ngrx/store'
+
+import * as actions from './app.actions'
+import * as fromRoot from '@tezblock/reducers'
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  constructor(
-    public readonly router: Router
-  ) {}
+  constructor(public readonly router: Router, private readonly store$: Store<fromRoot.State>) {
+    this.router.events
+      .pipe(filter(e => e instanceof NavigationEnd))
+      .subscribe(e => this.store$.dispatch(actions.saveLatestRoute({ navigation: <NavigationEnd>e })))
+  }
 
   public navigate(entity: string) {
     this.router.navigate([`${entity}/list`])

src/app/app.effects.ts

@@ -1,5 +1,5 @@
-import { Injectable } from '@angular/core';
-import { Actions, createEffect } from '@ngrx/effects';
+import { Injectable } from '@angular/core'
+import { Actions, createEffect } from '@ngrx/effects'
 
 @Injectable()
 export class AppEffects {

src/app/app.module.ts

@@ -16,6 +16,8 @@ import { TabsModule } from 'ngx-bootstrap/tabs'
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead'
 import { MomentModule } from 'ngx-moment'
 import { ToastrModule } from 'ngx-toastr'
+import { StorageModule } from '@ngx-pwa/local-storage'
+
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
 import { AppEffects } from './app.effects'
@@ -28,7 +30,7 @@ import { FooterComponent } from './components/footer/footer.component'
 import { HeaderItemComponent } from './components/header-item/header-item.component'
 import { IdenticonComponent } from './components/identicon/identicon'
 import { LoadingSkeletonComponent } from './components/loading-skeleton/loading-skeleton.component'
-import { AreaChartItemComponent } from './components/area-chart-item/area-chart-item.component'
+import { ChartItemComponent } from './components/chart-item/chart-item.component'
 import { QrItemComponent } from './components/qr-item/qr-item.component'
 import { QrModalComponent } from './components/qr-modal/qr-modal.component'
 import { ResourcesWalletItemComponent } from './components/resources-wallet-item/resources-wallet-item.component'
@@ -43,7 +45,6 @@ import { ModalCellComponent } from './components/tezblock-table/modal-cell/modal
 import { PlainValueCellComponent } from './components/tezblock-table/plain-value-cell/plain-value-cell.component'
 import { SearchItemComponent } from './components/search-item/search-item.component'
 import { SymbolCellComponent } from './components/tezblock-table/symbol-cell/symbol-cell.component'
-import { TezblockTableComponent } from './components/tezblock-table/tezblock-table.component'
 import { TimestampCellComponent } from './components/tezblock-table/timestamp-cell/timestamp-cell.component'
 import { TooltipItemComponent } from './components/tooltip-item/tooltip-item.component'
 import { TransactionDetailWrapperComponent } from './components/transaction-detail-wrapper/transaction-detail-wrapper.component'
@@ -65,12 +66,15 @@ import { ChainNetworkService } from './services/chain-network/chain-network.serv
 import { ChartDataService } from './services/chartdata/chartdata.service'
 import { CryptoPricesService } from './services/crypto-prices/crypto-prices.service'
 import { ListEffects } from './pages/list/effects'
-import { StorageModule } from '@ngx-pwa/local-storage'
 import { AccountDetailEffects } from './pages/account-detail/effects'
 import { BlockDetailEffects } from './pages/block-detail/effects'
 import { TransactionDetailEffects } from './pages/transaction-detail/effects'
 import { BakerTableEffects } from './components/baker-table/effects';
 import { OccurrenceStatisticsComponent } from './components/occurrence-statistics/occurrence-statistics.component'
+import { ProposalDetailComponent } from './pages/proposal-detail/proposal-detail.component'
+import { ProposalDetailEffects } from './pages/proposal-detail/effects'
+import { TezblockTableComponent } from './components/tezblock-table/tezblock-table.component';
+import { ClientSideTableComponent } from './components/client-side-table/client-side-table.component'
 
 @NgModule({
   imports: [
@@ -112,7 +116,8 @@ import { OccurrenceStatisticsComponent } from './components/occurrence-statistic
       AccountDetailEffects,
       BakerTableEffects,
       BlockDetailEffects,
-      TransactionDetailEffects
+      TransactionDetailEffects,
+      ProposalDetailEffects
     ]),
     StorageModule.forRoot({ IDBNoWrap: true })
   ],
@@ -132,15 +137,14 @@ import { OccurrenceStatisticsComponent } from './components/occurrence-statistic
     HeaderItemComponent,
     QrItemComponent,
     QrModalComponent,
-    TezblockTableComponent,
     BlockCellComponent,
     PlainValueCellComponent,
     AmountCellComponent,
     AddressCellComponent,
     TimestampCellComponent,
     HashCellComponent,
     SymbolCellComponent,
-    AreaChartItemComponent,
+    ChartItemComponent,
     TabbedTableComponent,
     BlockDetailWrapperComponent,
     TransactionDetailWrapperComponent,
@@ -152,9 +156,13 @@ import { OccurrenceStatisticsComponent } from './components/occurrence-statistic
     ResourcesWalletItemComponent,
     ModalCellComponent,
     EndorsementDetailComponent,
+    SearchItemComponent,
+    ProposalDetailComponent,
     TooltipItemComponent,
     SearchItemComponent,
-    OccurrenceStatisticsComponent
+    OccurrenceStatisticsComponent,
+    TezblockTableComponent,
+    ClientSideTableComponent
   ],
 
   providers: [BakingService, BlockService, CryptoPricesService, ChartDataService, BsModalService, ChainNetworkService],
@@ -175,7 +183,7 @@ import { OccurrenceStatisticsComponent } from './components/occurrence-statistic
     TimestampCellComponent,
     HashCellComponent,
     SymbolCellComponent,
-    AreaChartItemComponent,
+    ChartItemComponent,
     ExtendTableCellComponent,
     ModalCellComponent
   ],

src/app/app.reducer.ts

@@ -0,0 +1,20 @@
+import { createReducer, on } from '@ngrx/store'
+import { NavigationEnd } from '@angular/router'
+
+import * as actions from './app.actions'
+
+export interface State {
+    navigationHistory: NavigationEnd[]
+}
+
+const initialState: State = {
+    navigationHistory: []
+}
+
+export const reducer = createReducer(
+  initialState,
+  on(actions.saveLatestRoute, (state, { navigation }) => ({
+    ...state,
+    navigationHistory: state.navigationHistory.concat(navigation)
+  }))
+)

src/app/components/address-item/address-item.component.html

@@ -1,12 +1,15 @@
-<div [ngSwitch]="isText" class="media d-flex align-items-center" (click)="inspectDetail()">
+<div [ngSwitch]="isText" class="media d-flex align-items-center">
   <ng-container *ngSwitchCase="true">{{ address }}</ng-container>
   <ng-container *ngSwitchDefault>
     <identicon class="mr-2" [address]="address" *ngIf="!hideIdenticon" [forceIdenticon]="forceIdenticon"></identicon>
 
-    <div class="media-body">
-      <button type="button" class="btn p-0" [ngClass]="clickableButton ? 'btn-link' : ''">
+    <div class="media-body" [ngSwitch]="clickableButton">
+      <a *ngSwitchCase="false" class="btn p-0" role="button">
         {{ showFull ? address : (address | alias) ? (address | alias) : (address | shortenString) }}
-      </button>
+      </a>
+      <a *ngSwitchDefault [routerLink]="['/account', address]" class="btn btn-link p-0" role="button">
+        {{ showFull ? address : (address | alias) ? (address | alias) : (address | shortenString) }}
+      </a>
     </div>
   </ng-container>
 </div>

src/app/components/address-item/address-item.component.ts

@@ -1,5 +1,4 @@
 import { Component, Input } from '@angular/core'
-import { Router } from '@angular/router'
 
 @Component({
   selector: 'address-item',
@@ -8,28 +7,30 @@ import { Router } from '@angular/router'
 })
 export class AddressItemComponent {
   @Input()
-  public address?: string
+  set address(value: string) {
+    if (value !== this._address) {
+      this._address = value
+    }
+  }
+  get address(): string {
+    return this._address || ''
+  }
+  private _address: string
 
   @Input()
-  public clickableButton: boolean = true
+  clickableButton: boolean = true
 
   @Input()
-  public hideIdenticon: boolean = false
+  hideIdenticon: boolean = false
 
   @Input()
-  public forceIdenticon: boolean = false
+  forceIdenticon: boolean = false
 
   @Input()
-  public showFull: boolean = false
+  showFull: boolean = false
 
   @Input()
-  public isText: boolean
+  isText: boolean
 
-  constructor(private readonly router: Router) {}
-
-  public inspectDetail() {
-    if (!this.isText && this.clickableButton) {
-      this.router.navigate([`/account/${this.address}`])
-    }
-  }
+  constructor() {}
 }

src/app/components/baker-table/actions.ts

@@ -3,6 +3,16 @@ import { createAction, props } from '@ngrx/store'
 import { AggregatedEndorsingRights } from '@tezblock/interfaces/EndorsingRights'
 import { AggregatedBakingRights } from '@tezblock/interfaces/BakingRights'
 
+export interface LevelInTime {
+  estimated_time: number
+  level: number
+}
+
+export interface UpcomingRights {
+  baking: LevelInTime
+  endorsing: LevelInTime
+}
+
 const featureName = 'Account Detail - Baker Table'
 
 export const setAccountAddress = createAction(`[${featureName}] Set Account Address`, props<{ accountAddress: string }>())
@@ -41,6 +51,13 @@ export const loadEfficiencyLast10CyclesFailed = createAction(
   props<{ error: any }>()
 )
 
+export const loadUpcomingRights = createAction(`[${featureName}] Load Upcoming Rights`)
+export const loadUpcomingRightsSucceeded = createAction(
+  `[${featureName}] Load Upcoming Rights Succeeded`,
+  props<{ upcomingRights: UpcomingRights }>()
+)
+export const loadUpcomingRightsFailed = createAction(`[${featureName}] Load Upcoming Rights Failed`, props<{ error: any }>())
+
 export const increaseRightsPageSize = createAction(`[${featureName}] Change Rights Page Size`)
 
 export const kindChanged = createAction(`[${featureName}] Kind Changed`, props<{ kind: string }>())