0

No value is passed through the pipe. I subscribed to the from() and a value was produced. But if I use the pipe method on this from(), nothing is emitted. I tried to put a tap() and a switchMap().

I use RXJS 7.5.0 and Angular 14.2.0.

import { Injectable } from '@angular/core';
import { BehaviorSubject, tap, from, switchMap, Observable } from 'rxjs';
import { PreviewModel } from '../models/preview.model';
import { FirebaseService } from './firebase.service';
import Web3 from 'web3';
import detectEthereumProvider from '@metamask/detect-provider';

@Injectable({
  providedIn: 'root'
})
export class CheckoutService {

  private isLoadingSubject = new BehaviorSubject<boolean>(false);

  private bookPreviewSubject = new BehaviorSubject<PreviewModel | null>(null);
  private web3: any;

  constructor(private firebaseService: FirebaseService) {
    this.web3 = (<any>Web3);
  }

  getBookPreviewSubject(): Observable<PreviewModel | null> {
    return this.bookPreviewSubject
  }

  getLoadingSubject(): Observable<boolean> {
    return this.isLoadingSubject
  }

  fetchBookPreview(bookHash: string) {
    this.isLoadingSubject.next(true);
    return this.firebaseService
      .getPreview(bookHash)
      .then(response => this.bookPreviewSubject.next(response))
      .finally(() => this.isLoadingSubject.next(false));
  }

  public createAndSendTX(bookPreview: PreviewModel, priceInEth = 0.001) {

    const providerSource = from(detectEthereumProvider());

    // log : [object Object]
    // providerSource.subscribe(val => console.log("subscribe", val));

    // No log at all
    return providerSource.pipe(
      tap((provider: any) => console.log("tap", provider)),
      switchMap(async (provider) => {
        console.log("switchMap", provider);
        if (!provider) {
          throw new Error('Please install MetaMask');
        }
        return await provider.request({ method: 'eth_requestAccounts' });
      }),
    );
  }
}

I want the value being fired in the pipe() and more precisely in the switchMap().

Ok, it appears than I did not subscribed to the pipe. Here is the solution.

return providerSource.pipe(
      tap((provider: any) => console.log("tap", provider)),
      switchMap(async (provider) => {
        console.log("switchMap", provider);
        if (!provider) {
          throw new Error('Please install MetaMask');
        }
        return await provider.request({ method: 'eth_requestAccounts' });
      }),
    ) .subscribe(val => console.log("createAndSendTX", val));
Asalvatore
  • 1
  • 2
  • 2
    That's not how RxJS works. using `.pipe(...)` will only create a pipeline, nothing will happen if you don't subscribe to it. – Lukas-T Dec 01 '22 at 08:51
  • Thank you @churill , it resolved my issue. I am a bit new on RXJS operators, thanks for your time. – Asalvatore Dec 01 '22 at 09:02
  • add `.subscribe()` method to get the stream from Observable. – Vinay Somawat Dec 01 '22 at 09:03
  • @Asalvatore You'r welcome :) You don't even need to use the value. You can just `.subscribe()`. This will trigger the pipeline and discard any emitted values. – Lukas-T Dec 01 '22 at 09:31

0 Answers0