Tokeninfo (#533)

add ngrx and fix the chart and search in token info

src/app/app-routing.module.ts

@@ -6,13 +6,20 @@ import { ServerErrorComponent } from './components/server-error/server-error.com
 import { MaintenanceComponent } from './maintenance/maintenance.component';
 import { PrivacyPolicyComponent } from './privacy-policy/privacy-policy.component';
 import { CguComponent } from './cgu/cgu.component';
+import { CryptoDataGuard } from './core/services/crypto-data.guard';
+import { CryptoMarketCapComponent } from './wallet/components/crypto-market-cap/crypto-market-cap.component';
 
 const routes: Routes = [
   {
     path: 'auth',
     loadChildren: () =>
       import('./auth/authentication.module').then((m) => m.AuthenticationModule)
   },
+  {
+    path: 'crypto-market-cap',
+    component: CryptoMarketCapComponent,
+    canActivate: [CryptoDataGuard], 
+  },
   {
     path: 'cgu',
     component: CguComponent,

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { TransferHttpCacheModule } from '@nguniversal/common';
 import { translateBrowserLoaderFactory } from '@core/loaders/translate-browser.loader';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { HttpInterceptorService } from './http-interceptor.service';
+import { ChartsModule } from 'ng2-charts';
 
 @NgModule({
   declarations: [
@@ -30,6 +31,7 @@ import { HttpInterceptorService } from './http-interceptor.service';
   imports: [
     BrowserModule.withServerTransition({ appId: 'satt-token-atayen' }),
     BrowserAnimationsModule,
+    ChartsModule,
     AppRoutingModule,
     HttpClientModule,
     TransferHttpCacheModule,

src/app/core/services/crypto-data.guard.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@angular/core';
+import {
+  CanActivate,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+  Router
+} from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Observable, of } from 'rxjs';
+import { catchError, switchMap, take, tap } from 'rxjs/operators';
+import * as CryptoActions from '../../wallet/store/actions/crypto.actions';
+import { selectCryptoData } from '@app/wallet/store/selectors/crypto.selectors';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CryptoDataGuard implements CanActivate {
+  constructor(private store: Store, private router: Router) {}
+
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<boolean> {
+    return this.store.select(selectCryptoData).pipe(
+      take(1),
+      switchMap((cryptoData) => {
+        if (cryptoData && cryptoData.length > 0) {
+
+          return of(true);
+        } else {
+
+          this.store.dispatch(CryptoActions.loadCryptoData());
+
+          return of(true).pipe(
+            catchError(() => {
+
+              console.error('Failed to load crypto data.');
+              return of(false); 
+            })
+          );
+        }
+      })
+    );
+  }
+}

src/app/models/crypto-data.model.ts

@@ -0,0 +1,8 @@
+export interface CryptoData {
+    id: string; 
+    name: string; 
+    symbol: string; 
+    price: number; 
+    marketCap: number; 
+  }
+

src/app/wallet/components/buy-token/buy-token.component.ts

@@ -26,6 +26,7 @@ import { Location } from '@angular/common';
 
 import * as _ from 'lodash';
 import { Console } from 'console';
+import { TranslateService } from '@ngx-translate/core';
 
 enum EBlockchainNetwork {
   ERC20 = 'ERC20',
@@ -151,7 +152,8 @@ export class BuyTokenComponent implements OnInit, OnChanges {
     private tokenStorageService: TokenStorageService,
     @Inject(PLATFORM_ID) private platformId: string,
     private _location: Location,
-    private activatedRoute: ActivatedRoute
+    private activatedRoute: ActivatedRoute,
+    private translateService: TranslateService
   ) {
     this.convertform = new UntypedFormGroup({
       Amount: new UntypedFormControl(