Merge branch 'develop' into 'master'

Develop

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

package.json

@@ -33,24 +33,24 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@angular/animations": "^9.0.4",
-    "@angular/cdk": "^9.1.0",
-    "@angular/common": "^9.0.4",
-    "@angular/compiler": "^9.0.4",
-    "@angular/core": "^9.0.4",
-    "@angular/forms": "^9.0.4",
-    "@angular/platform-browser": "^9.0.4",
-    "@angular/platform-browser-dynamic": "^9.0.4",
-    "@angular/router": "^9.0.4",
-    "@angular/upgrade": "^9.0.4",
+    "@angular/animations": "^9.0.7",
+    "@angular/cdk": "^9.1.3",
+    "@angular/common": "^9.0.7",
+    "@angular/compiler": "^9.0.7",
+    "@angular/core": "^9.0.7",
+    "@angular/forms": "^9.0.7",
+    "@angular/platform-browser": "^9.0.7",
+    "@angular/platform-browser-dynamic": "^9.0.7",
+    "@angular/router": "^9.0.7",
+    "@angular/upgrade": "^9.0.7",
     "@download/blockies": "^1.0.3",
     "@fortawesome/angular-fontawesome": "^0.4.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.19",
     "@fortawesome/free-brands-svg-icons": "^5.9.0",
     "@fortawesome/free-solid-svg-icons": "^5.9.0",
     "@ng-toolkit/universal": "^8.0.3",
-    "@ngrx/effects": "^8.6.0",
-    "@ngrx/store": "^8.6.0",
+    "@ngrx/effects": "^9.0.0",
+    "@ngrx/store": "^9.0.0",
     "@nguniversal/express-engine": "^9.0.1",
     "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
     "@ngx-pwa/local-storage": "^9.0.2",
@@ -70,7 +70,7 @@
     "moment": "^2.24.0",
     "myetherwallet-blockies": "^0.1.1",
     "ng2-charts": "^2.3.0",
-    "ngx-bootstrap": "^5.3.2",
+    "ngx-bootstrap": "^5.6.0",
     "ngx-moment": "^3.5.0",
     "ngx-toastr": "^10.0.4",
     "rxjs": "^6.5.4",
@@ -83,11 +83,11 @@
     "@fortawesome/pro-light-svg-icons": "5.10.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.900.4",
-    "@angular/cli": "^9.0.4",
-    "@angular/compiler-cli": "^9.0.4",
-    "@angular/platform-server": "^9.0.4",
-    "@ngrx/schematics": "^8.6.0",
+    "@angular-devkit/build-angular": "^0.900.7",
+    "@angular/cli": "^9.0.7",
+    "@angular/compiler-cli": "^9.0.7",
+    "@angular/platform-server": "^9.0.7",
+    "@ngrx/schematics": "^9.0.0",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "^2.0.4",
     "@types/lodash": "^4.14.149",
@@ -96,7 +96,7 @@
     "husky": "^2.5.0",
     "jasmine-core": "~3.4.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
+    "karma": "^4.4.1",
     "karma-chrome-launcher": "~2.2.0",
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~2.0.1",

src/app/app.actions.ts

@@ -1,5 +1,7 @@
 import { createAction, props } from '@ngrx/store'
 import { NavigationEnd } from '@angular/router'
+import BigNumber from 'bignumber.js'
+import { MarketDataSample } from 'airgap-coin-lib/dist/wallet/AirGapMarketWallet'
 
 import { Block } from '@tezblock/interfaces/Block'
 
@@ -21,3 +23,24 @@ export const loadPeriodInfosSucceeded = createAction(
   props<{ currentVotingPeriod: number; currentVotingeriodPosition: number, blocksPerVotingPeriod: number }>()
 )
 export const loadPeriodInfosFailed = createAction(`[${featureName}] Load Period Infos Failed`, props<{ error: any }>())
+
+export const loadCryptoPriceFromCache = createAction(`[${featureName}] Load Crypto Price From Cache`)
+export const loadCryptoPriceFromCacheSucceeded = createAction(
+  `[${featureName}] Load Crypto Price From Cache Succeeded`,
+  props<{ fiatPrice: BigNumber, cryptoPrice: BigNumber }>()
+)
+export const loadCryptoPriceFromCacheFailed = createAction(`[${featureName}] Load Crypto Price From Cache Failed`, props<{ error: any }>())
+
+export const loadCryptoPrice = createAction(`[${featureName}] Load Crypto Price`)
+export const loadCryptoPriceSucceeded = createAction(
+  `[${featureName}] Load Crypto Price Succeeded`,
+  props<{ fiatPrice: BigNumber, cryptoPrice: BigNumber }>()
+)
+export const loadCryptoPriceFailed = createAction(`[${featureName}] Load Crypto Price Failed`, props<{ error: any }>())
+
+export const loadCryptoHistoricData = createAction(`[${featureName}] Load Crypto Historic Data`)
+export const loadCryptoHistoricDataSucceeded = createAction(
+  `[${featureName}] Load Crypto Historic Data Succeeded`,
+  props<{ cryptoHistoricData: MarketDataSample[] }>()
+)
+export const loadCryptoHistoricDataFailed = createAction(`[${featureName}] Load Crypto Historic Data Failed`, props<{ error: any }>())

src/app/app.component.ts

@@ -2,25 +2,44 @@ import { Component } from '@angular/core'
 import { Router, NavigationEnd } from '@angular/router'
 import { filter } from 'rxjs/operators'
 import { Store } from '@ngrx/store'
+import { Actions, ofType } from '@ngrx/effects'
 
 import * as actions from './app.actions'
 import * as fromRoot from '@tezblock/reducers'
+import { getRefresh } from '@tezblock/domain/synchronization'
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
-  constructor(public readonly router: Router, private readonly store$: Store<fromRoot.State>) {
+  constructor(private readonly actions$: Actions, 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 })))
-    this.store$.dispatch(actions.loadLatestBlock())
+
+    getRefresh([
+      this.actions$.pipe(ofType(actions.loadLatestBlockSucceeded)),
+      this.actions$.pipe(ofType(actions.loadLatestBlockFailed))
+    ]).subscribe(() => this.store$.dispatch(actions.loadLatestBlock())),
+
+    this.store$.dispatch(actions.loadCryptoPriceFromCache())
+
+    getRefresh([
+      this.actions$.pipe(ofType(actions.loadCryptoPriceSucceeded)),
+      this.actions$.pipe(ofType(actions.loadCryptoPriceFailed))
+    ]).subscribe(() => this.store$.dispatch(actions.loadCryptoPrice())),
+
+    getRefresh([
+      this.actions$.pipe(ofType(actions.loadCryptoHistoricDataSucceeded)),
+      this.actions$.pipe(ofType(actions.loadCryptoHistoricDataFailed))
+    ]).subscribe(() => this.store$.dispatch(actions.loadCryptoHistoricData()))
+
     this.store$.dispatch(actions.loadPeriodInfos())
   }
 
-  public navigate(entity: string) {
+  navigate(entity: string) {
     this.router.navigate([`${entity}/list`])
   }
 }

src/app/app.effects.ts

@@ -3,37 +3,28 @@ import { Actions, createEffect, ofType } from '@ngrx/effects'
 import { of, combineLatest, forkJoin } from 'rxjs'
 import { catchError, map, switchMap, tap, filter, withLatestFrom } from 'rxjs/operators'
 import { Store } from '@ngrx/store'
-import { isNil, negate } from 'lodash'
+import { get, isNil, negate } from 'lodash'
+import BigNumber from 'bignumber.js'
 
 import * as actions from './app.actions'
 import { BaseService, Operation, ENVIRONMENT_URL } from '@tezblock/services/base.service'
 import { Block } from '@tezblock/interfaces/Block'
-import { first, get } from '@tezblock/services/fp'
+import { first } from '@tezblock/services/fp'
 import * as fromRoot from '@tezblock/reducers'
-import { ByCycleState, CacheService, CacheKeys } from '@tezblock/services/cache/cache.service'
+import { ByCycleState, CacheService, CacheKeys, Currency } from '@tezblock/services/cache/cache.service'
+import { BlockService } from '@tezblock/services/blocks/blocks.service'
+import { CryptoPricesService } from '@tezblock/services/crypto-prices/crypto-prices.service'
 
 @Injectable()
 export class AppEffects {
   loadLatestBlock$ = createEffect(() =>
     this.actions$.pipe(
       ofType(actions.loadLatestBlock),
       switchMap(() =>
-        // replacement for: apiService.getLatestBlocks
-        this.baseService
-          .post<Block[]>('blocks', {
-            orderBy: [
-              {
-                field: 'timestamp',
-                direction: 'desc'
-              }
-            ],
-            limit: 1
-          })
-          .pipe(
-            map(first),
-            map(latestBlock => actions.loadLatestBlockSucceeded({ latestBlock })),
-            catchError(error => of(actions.loadLatestBlockFailed({ error })))
-          )
+        this.blockService.getLatest().pipe(
+          map(latestBlock => actions.loadLatestBlockSucceeded({ latestBlock })),
+          catchError(error => of(actions.loadLatestBlockFailed({ error })))
+        )
       )
     )
   )
@@ -50,7 +41,9 @@ export class AppEffects {
       combineLatest(this.store$.select(fromRoot.app.currentCycle), this.cacheService.get<ByCycleState>(CacheKeys.fromCurrentCycle)).pipe(
         filter(([currentCycle, cycleCache]) => currentCycle && (!cycleCache || (cycleCache && cycleCache.cycleNumber !== currentCycle))),
         tap(([currentCycle, cycleCache]) => {
-          this.cacheService.set<ByCycleState>(CacheKeys.fromCurrentCycle, { cycleNumber: currentCycle }).subscribe(() => {})
+          this.cacheService
+            .set<ByCycleState>(CacheKeys.fromCurrentCycle, { cycleNumber: currentCycle })
+            .subscribe(() => {})
         })
       ),
     { dispatch: false }
@@ -122,10 +115,88 @@ export class AppEffects {
     )
   )
 
+  loadCryptoPriceFromCache$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(actions.loadCryptoPriceFromCache),
+      withLatestFrom(
+        this.store$.select(state => state.app.cryptoCurrencyInfo),
+        this.store$.select(state => state.app.fiatCurrencyInfo)
+      ),
+      switchMap(([action, cryptoCurrencyInfo, fiatCurrencyInfo]) =>
+        this.cacheService.get<Currency>(CacheKeys.currency).pipe(
+          map(currency => {
+            const fiatCurrency = get(currency, fiatCurrencyInfo.currency)
+            const cryptoCurrency = get(currency, cryptoCurrencyInfo.currency)
+            const fiatPrice = new BigNumber(fiatCurrency)
+            const cryptoPrice = new BigNumber(cryptoCurrency)
+
+            return actions.loadCryptoPriceFromCacheSucceeded({ fiatPrice, cryptoPrice })
+          }),
+          catchError(error => of(actions.loadCryptoPriceFromCacheFailed({ error })))
+        )
+      )
+    )
+  )
+
+  onLoadedFromCacheSetCryptoPrices$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(actions.loadCryptoPriceFromCacheSucceeded),
+      map(({ fiatPrice, cryptoPrice }) => actions.loadCryptoPriceSucceeded({ fiatPrice, cryptoPrice }))
+    )
+  )
+
+  loadCryptoPrice$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(actions.loadCryptoPrice),
+      withLatestFrom(
+        this.store$.select(state => state.app.cryptoCurrencyInfo),
+        this.store$.select(state => state.app.fiatCurrencyInfo)
+      ),
+      switchMap(([action, cryptoCurrencyInfo, fiatCurrencyInfo]) =>
+        this.cacheService.get<Currency>(CacheKeys.currency).pipe(
+          switchMap(currency =>
+            this.cryptoPricesService.getCryptoPrices('xtz', [fiatCurrencyInfo.currency, cryptoCurrencyInfo.currency]).pipe(
+              map(prices => {
+                const fiatCurrency = get(prices, fiatCurrencyInfo.currency) || get(currency, fiatCurrencyInfo.currency)
+                const cryptoCurrency = get(prices, cryptoCurrencyInfo.currency) || get(currency, cryptoCurrencyInfo.currency)
+                const fiatPrice = new BigNumber(fiatCurrency)
+                const cryptoPrice = new BigNumber(cryptoCurrency)
+
+                return actions.loadCryptoPriceSucceeded({ fiatPrice, cryptoPrice })
+              }),
+              catchError(error => {
+                const fiatCurrency = get(currency, fiatCurrencyInfo.currency)
+                const cryptoCurrency = get(currency, cryptoCurrencyInfo.currency)
+                const fiatPrice = new BigNumber(fiatCurrency)
+                const cryptoPrice = new BigNumber(cryptoCurrency)
+
+                return of(actions.loadCryptoPriceSucceeded({ fiatPrice, cryptoPrice }))
+              })
+            )
+          )
+        )
+      )
+    )
+  )
+
+  loadCryptoHistoricData$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(actions.loadCryptoHistoricData),
+      switchMap(() =>
+        this.cryptoPricesService.getHistoricCryptoPrices(24, new Date(), 'USD', 'XTZ').pipe(
+          map(cryptoHistoricData => actions.loadCryptoHistoricDataSucceeded({ cryptoHistoricData })),
+          catchError(error => of(actions.loadCryptoHistoricDataFailed({ error })))
+        )
+      )
+    )
+  )
+
   constructor(
     private readonly actions$: Actions,
     private readonly baseService: BaseService,
+    private readonly blockService: BlockService,
     private readonly cacheService: CacheService,
+    private readonly cryptoPricesService: CryptoPricesService,
     private readonly store$: Store<fromRoot.State>
   ) {}
 }

src/app/app.module.ts

@@ -9,8 +9,12 @@ import { StoreModule } from '@ngrx/store'
 import { StorageModule } from '@ngx-pwa/local-storage'
 import { QRCodeModule } from 'angularx-qrcode'
 import { ChartsModule } from 'ng2-charts'
-import { AlertModule, BsDropdownModule, BsModalService, CollapseModule, SortableModule, TooltipModule } from 'ngx-bootstrap'
-import { ModalModule } from 'ngx-bootstrap/modal'
+import { AlertModule } from 'ngx-bootstrap/alert'
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
+import { CollapseModule } from 'ngx-bootstrap/collapse'
+import { SortableModule } from 'ngx-bootstrap/sortable'
+import { TooltipModule } from 'ngx-bootstrap/tooltip'
+import { ModalModule, BsModalService } from 'ngx-bootstrap/modal'
 import { PaginationModule } from 'ngx-bootstrap/pagination'
 import { ProgressbarModule } from 'ngx-bootstrap/progressbar'
 import { TabsModule } from 'ngx-bootstrap/tabs'
@@ -60,7 +64,6 @@ import { TransactionDetailComponent } from './pages/transaction-detail/transacti
 import { PipesModule } from './pipes/pipes.module'
 import { metaReducers, ROOT_REDUCERS } from './reducers'
 import { BakingService } from './services/baking/baking.service'
-import { BlockService } from './services/blocks/blocks.service'
 import { ChainNetworkService } from './services/chain-network/chain-network.service'
 import { ChartDataService } from './services/chartdata/chartdata.service'
 import { CryptoPricesService } from './services/crypto-prices/crypto-prices.service'
@@ -86,7 +89,8 @@ import { HealthEffects } from './pages/health/effects'
 import { LatestContractsComponent } from './pages/dashboard/latest-contracts/latest-contracts.component'
 import { DashboarEffects } from './pages/dashboard/effects';
 import { LatestContractsTransactionsComponent } from './pages/dashboard/latest-contracts-transactions/latest-contracts-transactions.component'
-import { DashboardLatestContractsTransactionsEffects } from './pages/dashboard/latest-contracts-transactions/effects'
+import { DashboardLatestContractsTransactionsEffects } from './pages/dashboard/latest-contracts-transactions/effects';
+import { TransactionErrorsComponent } from './components/transaction-errors/transaction-errors.component'
 
 @NgModule({
   imports: [
@@ -118,7 +122,7 @@ import { DashboardLatestContractsTransactionsEffects } from './pages/dashboard/l
       metaReducers,
       runtimeChecks: {
         strictStateImmutability: true,
-        strictActionImmutability: true
+        strictActionImmutability: false // true is default (see comment in baker-table)
       }
     }),
     EffectsModule.forRoot([
@@ -186,10 +190,11 @@ import { DashboardLatestContractsTransactionsEffects } from './pages/dashboard/l
     HealthComponent,
     AccountOverviewComponent,
     LatestContractsComponent,
-    LatestContractsTransactionsComponent
+    LatestContractsTransactionsComponent,
+    TransactionErrorsComponent
   ],
 
-  providers: [BakingService, BlockService, CryptoPricesService, ChartDataService, BsModalService, ChainNetworkService],
+  providers: [BakingService, CryptoPricesService, ChartDataService, BsModalService, ChainNetworkService],
   bootstrap: [AppComponent]
 })
 export class AppModule {