i add the ngrx for crypto market in token info

src/app/campaigns/campaigns.module.ts

@@ -35,6 +35,12 @@ import { DraftPictureComponent } from './components/draft-picture/draft-picture.
 import { CommonModule } from '@angular/common';
 import { SocialsComponent } from './socials/socials.component';
 import { SharedModule } from '@app/shared/shared.module';
+
+import { cryptoReducerList } from '@app/core/store/crypto-prices/reducer/crypto.reducer';
+import { CryptoEffectsList } from '@app/core/store/crypto-prices/effects/crypto.effects';
+
+
+
 @NgModule({
   declarations: [
     CampaignsDashboardComponent,
@@ -69,7 +75,9 @@ import { SharedModule } from '@app/shared/shared.module';
       fromListLinks.linksListFeatureKey,
       fromListLinks.reducer
     ),
-    SharedModule
+    SharedModule,
+    StoreModule.forFeature('cryptoPriceList', cryptoReducerList),
+    EffectsModule.forFeature([CryptoEffectsList]),
   ],
   exports: [CampaignsRoutingModule],
   providers: [ConvertFromWei]

src/app/campaigns/services/format-data.service.ts

@@ -5,28 +5,45 @@ import { CryptofetchServiceService } from '@core/services/wallet/cryptofetch-ser
 import { Big } from 'big.js';
 import { WalletFacadeService } from '@core/facades/wallet-facade.service';
 import { Subject } from 'rxjs';
-import { map, takeUntil } from 'rxjs/operators';
+import { map, take, takeUntil } from 'rxjs/operators';
+import * as CryptoActionsList from '../../core/store/crypto-prices/actions/crypto.actions';
+import { Store } from '@ngrx/store';
+import { selectCryptoPriceList } from '@app/core/store/crypto-prices/selectors/crypto.selectors';
+import { SharedDataService } from '@app/shared/service/SharedDataService';
 
 @Injectable({
   providedIn: 'root'
 })
 export class FormatDataService {
   private coinsPrices: any = [];
   private isDestroyed = new Subject();
+  cryptoPriceList: any[] | null | undefined;
 
   constructor(
     private convertToWeiPipe: ConvertToWeiPipe,
     private fetchCoinsPrices: CryptofetchServiceService,
-    private walletFacade: WalletFacadeService
+    private walletFacade: WalletFacadeService,
+    private store: Store,
+    private sharedDataService: SharedDataService
   ) {
-    this.walletFacade
-      .getCryptoPriceList()
+    this.store.dispatch(CryptoActionsList.fetchCryptoPriceList());
+    this.store
+      .select(selectCryptoPriceList)
       .pipe(
-        map((response: any) => response.data),
-        takeUntil(this.isDestroyed)
+        takeUntil(this.isDestroyed),
+        map((response: any) => {
+          if (response && response.data) {
+            return response.data;
+          } else {
+            return null; 
+          }
+        })
       )
       .subscribe((data: any) => {
-        this.coinsPrices = data;
+        if (data) {
+          this.coinsPrices = data;
+          this.sharedDataService.setCryptoDetails(this.coinsPrices);
+        }
       });
   }
 
@@ -51,14 +68,14 @@ export class FormatDataService {
     if (campaign.hasOwnProperty('targetedCountries')) {
       object.countries = campaign.targetedCountries; //this.countriesCode(campaign.targetedCountries);
     }
-   if (campaign.hasOwnProperty('currency')) {
+    if (campaign.hasOwnProperty('currency')) {
       object.token = {
         name: campaign.currency.name || '',
         type: campaign.currency.type.toUpperCase() || '',
-        addr:  campaign.currency.addr || null
+        addr: campaign.currency.addr || null
       };
     }
-    
+
     if (campaign.hasOwnProperty('tags')) {
       object.tags = campaign.tags?.map((tag: any) => tag.value || tag);
     }
@@ -72,7 +89,7 @@ export class FormatDataService {
       object.startDate = new Date(campaign.startDate).getTime() / 1000;
     }
 
-    campaign.limitParticipation && (object.limit = campaign.limitParticipation)
+    campaign.limitParticipation && (object.limit = campaign.limitParticipation);
 
     if (campaign.hasOwnProperty('remuneration')) {
       // TODO: fix remuneration not sent to backend
@@ -125,7 +142,7 @@ export class FormatDataService {
     }
 
     if (campaign.hasOwnProperty('initialBudgetInUSD')) {
-      object.cost_usd =  campaign.initialBudgetInUSD.toString();
+      object.cost_usd = campaign.initialBudgetInUSD.toString();
     }
 
     if (campaign.hasOwnProperty('cover')) {

src/app/core/services/crypto-info.service.ts

@@ -1,6 +1,9 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import * as http from 'http';
+import { Observable } from 'rxjs';
+import { IResponseWallet } from '../iresponse-wallet';
+import { sattUrl } from '@app/config/atn.config';
 
 @Injectable({
   providedIn: 'root'
@@ -13,9 +16,11 @@ export class CryptoInfoService {
     );
   }
 
-  listIdToken() {
-    return this.http.get('https://api.coingecko.com/api/v3/coins/list');
+  listIdToken(): Observable<any[]> {
+    const url = `  https://api.coingecko.com/api/v3/coins/list`;
+    return this.http.get<any[]>(url);
   }
+
   historiqueToken(
     cryptoId: string,
     currency: string,
@@ -32,13 +37,14 @@ export class CryptoInfoService {
     );
   }
 
-  marketChartToken(
-    cryptoId: string,
-    currency: string,
-    days: string
-  ) {
-
-
+  getCharts(id:any, range:any) {
+    return this.http.post<IResponseWallet>(sattUrl + '/wallet/getCharts', {
+      id: id,
+      range: range
+    });
+  }
+
+  marketChartToken(cryptoId: string, currency: string, days: string) {
     return this.http.get(
       `https://api.coingecko.com/api/v3/coins/${cryptoId}/market_chart?vs_currency=${currency}&days=${days}`
     );

src/app/core/store/crypto-prices/actions/crypto.actions.ts

@@ -0,0 +1,12 @@
+import { createAction, props } from '@ngrx/store';
+
+export const fetchCryptoPriceList = createAction('[Crypto] Fetch Price List');
+export const fetchCryptoPriceListSuccess = createAction(
+  '[Crypto] Fetch Price List Success',
+  props<{ cryptoPriceList: any }>()
+);
+
+export const fetchCryptoPriceListFailure = createAction(
+  '[Crypto] Fetch Price List Failure',
+  props<{ error: any }>()
+);

src/app/core/store/crypto-prices/effects/crypto.effects.ts

@@ -0,0 +1,31 @@
+import { map, catchError, mergeMap, tap } from 'rxjs/operators';
+import * as CryptoActions from '../actions/crypto.actions';
+import { Actions, createEffect, ofType } from '@ngrx/effects';
+import { WalletFacadeService } from '@app/core/facades/wallet-facade.service';
+import { Injectable } from '@angular/core';
+import { of } from 'rxjs';
+
+@Injectable()
+export class CryptoEffectsList {
+  constructor(
+    private actions$: Actions,
+    private walletFacadeService: WalletFacadeService
+  ) {}
+
+  fetchCryptoPriceList$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(CryptoActions.fetchCryptoPriceList),
+      // tap(() => console.log('fetchCryptoPriceList action dispatched')),
+      mergeMap(() =>
+        this.walletFacadeService.getCryptoPriceList().pipe(
+          map((cryptoPriceList) =>
+            CryptoActions.fetchCryptoPriceListSuccess({ cryptoPriceList })
+          ),
+          catchError((error) => {
+            return of(CryptoActions.fetchCryptoPriceListFailure({ error }));
+          })
+        )
+      )
+    )
+  );
+}

src/app/core/store/crypto-prices/reducer/crypto.reducer.ts

@@ -0,0 +1,31 @@
+  import { createReducer, on } from '@ngrx/store';
+  import * as CryptoActions from '../actions/crypto.actions';
+
+  export interface CryptoState {
+    cryptoPriceList: any[] | null;
+    error: any | null;
+  }
+
+  export const initialState: CryptoState = {
+    cryptoPriceList: null,
+    error: null
+  };
+
+  export const cryptoReducerList = createReducer(
+    initialState,
+    on(
+      CryptoActions.fetchCryptoPriceListSuccess,
+      (state, { cryptoPriceList }) => {
+        return {
+          ...state,
+          cryptoPriceList,
+          error: null,
+        };
+      }
+    ),
+    on(CryptoActions.fetchCryptoPriceListFailure, (state, { error }) => ({
+      ...state,
+      cryptoPriceList: null,
+      error
+    }))
+  );

src/app/core/store/crypto-prices/selectors/crypto.selectors.ts

@@ -0,0 +1,9 @@
+import { createSelector, createFeatureSelector } from '@ngrx/store';
+import { CryptoState } from '../reducer/crypto.reducer';
+
+const selectCryptoState = createFeatureSelector<CryptoState>('cryptoPriceList');
+
+export const selectCryptoPriceList = createSelector(
+  selectCryptoState,
+  (state) => state.cryptoPriceList
+);

src/app/shared/service/SharedDataService.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SharedDataService {
+  private cryptoDetails: any = [];
+
+  setCryptoDetails(data: any): void {
+    this.cryptoDetails = data;
+  }
+
+  getCryptoDetails(): any {
+    return this.cryptoDetails;
+  }
+}