rxjs#Observable TypeScript Examples

private getFilteredTokens(form: FormControl): Observable<ITokenDescriptor[]> {

        return combineLatest([
            this.sortedTokens$,
            form.valueChanges.pipe(
                startWith('')
            ),
        ]).pipe(
            map((x) => {
                const [tokens, filterText] = x;
                return filterTokens(tokens, filterText);
            })
        );
    }

// TODO: Make this dynamic with a config store
  fee$: Observable<string> = this.xdrParsed$
    .pipe(filter<Transaction>(data => !!data))
    .pipe(pluck<Transaction, string>('fee'))
    .pipe(map(fee =>
      new BigNumber(fee)
        .dividedBy('10000000')
        .toString()
    ));

public getQuote$(
    fromTokenAddress: string,
    toTokenAddress: string,
    amount: string,
  ): Observable<Quote> {

    let params = new HttpParams();
    params = params.append('fromTokenAddress', fromTokenAddress);
    params = params.append('toTokenAddress', toTokenAddress);
    params = params.append('amount', amount);

    const url = this.url + '/quote';

    return this.http.get<Quote>(url, { params }).pipe(
      delayedRetry(1000)
    );
  }

getAlertsLabelsByCreitTech(): Observable<IAlertsLabel[]> {
    this.alertsLabelsStore.updateUIState({ gettingAlertsLabelsByCreitTech: true });
    return this.http.get<{ items: IAlertsLabel[] }>(`https://raw.githubusercontent.com/Creit-Tech/stellar-assets/main/dist/alert-labels-by-creit-tech.json`)
      .pipe(map(response => {
        const alertsLabels = response.items.map(item => createAlertsLabel(item));
        applyTransaction(() => {
          this.alertsLabelsStore.updateUIState({ gettingAlertsLabelsByCreitTech: false });
          this.alertsLabelsStore.upsertMany(alertsLabels);
        });
        return alertsLabels;
      }));
  }

public isTokenApproved(
    tokenAddress: string,
    walletAddress: string,
    spender: string,
    amount: BigNumber
  ): Observable<boolean> {

    if (ethAddresses.indexOf(tokenAddress) !== -1) {

      return of(true);
    }

    return this.getApprovedAmount(
      tokenAddress,
      walletAddress,
      spender
    ).pipe(
      map((approvedAmount) => approvedAmount.gte(amount)),
      take(1)
    );
  }

sizeOfPortfolioGraphValues$: Observable<Array<{ name?: string; value: number }>> = this.accountBalancesRegularAssets$
    .pipe(map(balances => {
      const totalBalanceOfAssets = balances.reduce((total, current) => {
        return new BigNumber(current.balance).plus(total);
      }, new BigNumber(0));

      return balances.map(b => {
        const balanceLineId = this.walletsAssetsService.formatBalanceLineId(b);
        const asset = this.walletsAssetsService.sdkAssetFromAssetId(balanceLineId);
        return {
          name: asset.code || '',
          value: new BigNumber(b.balance).dividedBy(totalBalanceOfAssets).multipliedBy(100).toNumber(),
        };
      });
    }));

public getBalance(
    walletAddress: string,
    contractAddress = ethAddresses[0],
    blockNumber?: number
  ): Observable<BigNumber> {

    if (ethAddresses.indexOf(contractAddress) === -1) {

      return this.getErc20Balance(
        contractAddress,
        walletAddress,
        blockNumber
      );
    }

    return this.web3Service.web3$.pipe(
      mergeMap((web3) => {

        const call$ = web3.eth.getBalance(
          walletAddress,
          blockNumber || 'latest'
        ).then((bal) => {

          return BigNumber.isBigNumber(bal) ? bal : bigNumberify(bal);
        });

        return fromPromise(call$) as Observable<BigNumber>;
      }),
      catchError(() => {

        return of(zeroValueBN);
      }),
      take(1)
    );
  }

// ----- Graphs
  balanceGraphValues$: Observable<Array<{ name?: string; value: number }>> = this.assetsBalancesWithCounterValues$
    .pipe(withLatestFrom(this.totalBalanceOnCounterAsset$))
    .pipe(map(([values, totalBalanceOnCounterAsset]) => values.map(value => {
      return {
        name: value.asset?.assetCode || '',
        value: new BigNumber(value.counterValue).dividedBy(totalBalanceOnCounterAsset).multipliedBy(100).toNumber()
      };
    })));

public getUsdTokenPrice(
        tokenAddress: string,
        tokenDecimals: number,
        blockNumber?: number | 'latest',
    ): Observable<BigNumber> {

        if (this.usdPriceCache$[tokenAddress]) {
            return this.usdPriceCache$[tokenAddress];
        }

        const tokenPrice$ = this.getTokenPriceBN(
            tokenAddress,
            tokenDecimals,
            blockNumber,
        );

        this.usdPriceCache$[tokenAddress] = new RefreshingReplaySubject<BigNumber>(
            () => tokenPrice$,
            10000
        );

        return this.usdPriceCache$[tokenAddress];
    }

lpAssetsBalances$: Observable<BalanceLineLiquidityPool[]> = this.selectedAccount$
    .pipe(map(selectedAccount => {
      if (!selectedAccount || !selectedAccount.accountRecord) {
        return [];
      }

      return selectedAccount.accountRecord
        .balances
        .filter(b => b.asset_type === 'liquidity_pool_shares') as BalanceLineLiquidityPool[];
    }));

/**
   * Cold observable
   * @param command Message
   */
  public ask(command: roomCommand.SendMessage | roomCommand.SendCustomMessage): Observable<chatEvents.Received> {
    const ref = this.uuidGenerator.next();
    const newCommand = { ...command, ref };

    return merge(
      of(newCommand).pipe(
        tap((cmd: typeof newCommand) => this.send(cmd)),
        ignoreElements(),
      ),
      this.connection$.pipe(
        filter(chatEvents.Received.isReceived),
        filter(rec => rec.ref === ref),
      ),
      this.connection$.pipe(
        filter(errorEvents.Error.isError),
        filter(rec => rec.ref === ref),
        mergeMap(err => throwError(err, undefined)),
      ),
    ).pipe(
      timeout(this.askTimeoutMs),
      take(1),
    );
  }

lockedXLMs$: Observable<string> = this.accountBalancesRegularAssets$
    .pipe(withLatestFrom(this.selectedAccount$))
    .pipe(map(([balances, selectedAccount]) => {
      const nativeValue: BalanceLineNative = balances.find(b => b.asset_type === 'native') as BalanceLineNative;
      if (!selectedAccount.accountRecord) {
        return  '0';
      }

      return new BigNumber(nativeValue.balance)
        .minus(
          this.stellarSdkService.calculateAvailableBalance({
            account: selectedAccount.accountRecord,
            balanceLine: nativeValue
          })
        )
        .toFixed(7);
    }));

public getInstance(abi: any[], address: string): Observable<Contract> {

        return this.web3$.pipe(
            map((web3) => {
                // @ts-ignore
                return (new web3.eth.Contract(
                    abi,
                    address
                )) as Contract;
            }),
        );
    }

assetsBalancesWithCounterValues$: Observable<Array<{
    asset?: IWalletAssetModel;
    counterValue: BigNumber
  }>> = this.accountBalancesRegularAssets$
    .pipe(switchMap(accountBalanceLines => {
      const objectMap = new Map();

      for (const accountBalanceLine of accountBalanceLines) {
        objectMap.set(this.walletsAssetsService.formatBalanceLineId(accountBalanceLine), accountBalanceLine);
      }

      return this.walletsAssetsQuery.selectAll({
        filterBy: entity => !!objectMap.get(entity._id)
      })
        .pipe(debounceTime(100))
        .pipe(map(assets => {
          return assets.map(asset => ({
            asset,
            counterValue: !asset || !asset.counterPrice
              ? new BigNumber(0)
              : new BigNumber(asset.counterPrice)
                .multipliedBy(objectMap.get(asset._id).balance)
          }))
            .filter(data => !!data.asset);
        }));
    }));

intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    const now = Date.now();
    return next
      .handle()
      .pipe(
        tap(() =>
          this.logger.log(
            context.switchToHttp().getRequest().route.path,
            context.getHandler().name,
            Date.now() - now + 'ms',
          ),
        ),
      );
  }

export function GCloudStorageFilesInterceptor(
  fieldName: string,
  localOptions?: MulterOptions,
  gcloudStorageOptions?: Partial<GCloudStoragePerRequestOptions>,
): Type<NestInterceptor> {
  @Injectable()
  class MixinInterceptor implements NestInterceptor {
    public interceptor: NestInterceptor;

    constructor(private readonly gcloudStorage: GCloudStorageService) {
      this.interceptor = new (FilesInterceptor(fieldName, 20, localOptions))();
    }

    async intercept(context: ExecutionContext, next: CallHandler): Promise<Observable<any>> {
      (await this.interceptor.intercept(context, next)) as Observable<any>;

      const request = context.switchToHttp().getRequest();

      const files = request[fieldName];

      if (!files.length) {
        Logger.error(
          'GCloudStorageFilesInterceptor',
          `Can not intercept field "${fieldName}". Did you specify the correct field name in @GCloudStorageFilesInterceptor('${fieldName}')?`,
        );
        return;
      }

      for (const file of files) file.storageUrl = await this.gcloudStorage.upload(file, gcloudStorageOptions);

      return next.handle();
    }
  }

  const Interceptor = mixin(MixinInterceptor);
  return Interceptor as Type<NestInterceptor>;
}

getRecommendedFee(): Observable<string> {
    this.settingsStore.updateUIState({ gettingRecommendedFee: true });

    return this.stellarSdkService.getRecommendedFee()
      .pipe(tap(() => this.settingsStore.updateUIState({ gettingRecommendedFee: false })))
      .pipe(catchError(error => {
        this.settingsStore.updateUIState({ gettingRecommendedFee: false });
        return throwError(error);
      }));
  }

intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error && [401, 403].includes(error.status)) {
          this.router.navigateByUrl(DashboardRouter.redirectToList());
        }
        return throwError(error);
      })
    );
  }

export function spawnProcess(
  command: string,
  args: string[] = [],
  { silent, env = process.env, ...options }: ProcessOptions = {},
): Observable<ProcessOutput> {
  return new Observable<ProcessOutput>((observer) => {
    const child = spawn(command, args, { ...options, env: processEnv(env) });

    if (!silent) {
      console.log(`${command} ${args.join(' ')}`);
    }

    const processExitListener = () => {
      observer.complete();
      child.kill();
    };
    process.on('exit', processExitListener);
    if (!('stdio' in options)) {
      child.stdout.on('data', (data) => {
        observer.next({ type: 'OUT', data });
      });
      child.stderr.on('data', (data) => {
        observer.next({ type: 'ERR', data });
      });
    }
    child.on('close', (code) => {
      if (code === 0) {
        observer.complete();
      } else {
        observer.error();
      }

      process.removeListener('exit', processExitListener);
    });
  });
}

account$: Observable<IWalletsAccount> = combineLatest([
    this.publicKey,
    this.horizonApisQuery.getSelectedHorizonApi$
  ])
    .pipe(switchMap(([publicKey, horizonApi]) => {
      const accountId = this.walletsService.generateWalletAccountId({
        publicKey,
        network: horizonApi.networkPassphrase as Networks,
      });
      return this.walletsAccountsQuery.selectEntity(accountId) as Observable<IWalletsAccount>;
    }));

export function log() {
  return (source: Observable<ProcessOutput>): Observable<ProcessOutput> =>
    source.pipe(
      tap(({ type, data }) => {
        if (type === 'OUT') {
          process.stdout.write(data.toString());
        } else {
          process.stderr.write(data.toString());
        }
      }),
    );
}

listItems$: Observable<IClaimableBalanceLineItem[]> = this.filteredClaimableBalances$
    .pipe(switchMap((filteredClaimableBalances) => {
      return this.walletsAssetsQuery.selectAll({
        filterBy: entity => {
          return !!filteredClaimableBalances
            .find(c => entity._id === this.walletsAssetsService.assetIdFromAssetString(c.asset));
        }
      })
        .pipe(distinctUntilChanged((a, b) => JSON.stringify(a) !== JSON.stringify(b)))
        .pipe(map(assets => {
          const items = [];
          for (const asset of assets) {
            const claimableBalance = filteredClaimableBalances
              .find(c => this.walletsAssetsService.assetIdFromAssetString(c.asset) === asset._id);
            if (!!claimableBalance) {
              items.push({
                _id: claimableBalance.id,
                image: asset.image,
                assetCode: asset.assetCode,
                amount: claimableBalance.amount,
                assetIssuer: asset.assetIssuer,
                domain: asset.domain,
              });
            }
          }
          return items;
        }));
    }));

/**
   * @returns Observable that emits when a new character is added or an existing is removed.
   */
  characterShifted(): Observable<CharacterShift> {
    return this.charAdded$.pipe(
      map((c) => ({
        charId: c,
        action: CharacterShiftAction.ADDED,
      })),
      mergeWith(
        this.charRemoved$.pipe(
          map((c) => ({
            charId: c,
            action: CharacterShiftAction.REMOVED,
          }))
        )
      )
    );
  }

accountOperations$: Observable<IWalletsOperation[]> = this.selectedAccount$
    .pipe(filter(account => !!account))
    .pipe(distinctUntilKeyChanged('_id'))
    .pipe(withLatestFrom(this.settingsQuery.antiSpamPublicKeys$))
    .pipe(switchMap(([account, antiSpamPublicKeys]) => {
      return this.walletsOperationsQuery.selectAll({
        filterBy: entity => entity.ownerAccount === account._id
          && !antiSpamPublicKeys.find(key => entity.operationRecord.source_account === key),
        sortBy: (entityA, entityB) => entityB.createdAt - entityA.createdAt,
      });
    }))
    .pipe(debounceTime(10));

/**
     * Initiates movement toward the specified `targetPos`. The movement will
     * happen along one shortest path. Check out {@link MoveToConfig} for
     * pathfinding configurations.
     *
     * @returns an observable that will fire
     * whenever the moveTo movement is finished or aborted. It will provide a
     * {@link MoveToResult | result code} as well as a description and a character
     * layer.
     */
    moveTo(charId: string, targetPos: Position, config?: MoveToConfig): Observable<{
        charId: string;
    } & Finished>;

accountBalances$: Observable<BalanceLine<'liquidity_pool_shares'>[]> = this.selectedAccount$
    .pipe(filter<any>(Boolean))
    .pipe(map((selectedAccount: IWalletsAccount) => {
      return selectedAccount.accountRecord
        ? selectedAccount.accountRecord.balances
          .filter(b =>
            b.asset_type === 'liquidity_pool_shares'
            && new BigNumber(b.balance).isGreaterThan(0)
          ) as BalanceLine<'liquidity_pool_shares'>[]
        : [];
    }));

/**
   * @returns Observable that, whenever a specified position is entered on optionally provided layers,
   *  will notify with the target characters position change
   */
  steppedOn(
    charIds: string[],
    tiles: Position[],
    layer?: string[]
  ): Observable<
    {
      charId: string;
    } & PositionChange
  > {
    return this.positionChangeFinished().pipe(
      filter(
        (t) =>
          charIds.includes(t.charId) &&
          tiles.some(
            (target) => target.x === t.enterTile.x && target.y === t.enterTile.y
          ) &&
          (layer === undefined || layer.includes(t.enterLayer))
      )
    );
  }

reserves$: Observable<Array<IWalletAsset<any, 'full'>>> = this.lpAsset$
    .pipe(filter<any>(lpAsset => !!lpAsset?.dataLoaded))
    .pipe(switchMap((lpAsset: ILpAssetLoaded) => {
      const [assetACode, assetBCode] = lpAsset.reserves.map(reserve => {
        return reserve.asset.includes(':')
          ? reserve.asset.split(':')[0] + '_' + reserve.asset.split(':')[1]
          : 'native';
      });

      return combineLatest([
        this.walletsAssetsQuery.selectEntity(assetACode),
        this.walletsAssetsQuery.selectEntity(assetBCode),
      ]);
    })) as Observable<Array<IWalletAsset<any, 'full'>>>;

/**
     * @returns Observable that will notify about every change of direction that
     *  is not part of a movement. This is the case if the character tries to walk
     *  towards a blocked tile. The character will turn but not move.
     */
    directionChanged(): Observable<{
        charId: string;
        direction: Direction;
    }>;