How to use the @polkadot/api.ApiRx function in @polkadot/api

async function main () {
  // Create a new instance of the api
  // Subscribe to chain updates and log the current block number on update.
  const subscription = new ApiRx().isReady
    .pipe(
      switchMap((api) =>
        api.rpc.chain.subscribeNewHeads()
      ))
    .subscribe((header) => {
      console.log(`Chain is at block: #${header.number}`);
    });

  // In this example we're calling the Overvables unsubscribe() //
  // function after 20s.
  setTimeout(() => {
    subscription.unsubscribe();
    console.log('Unsubscribed');
  }, 20000);
}

function main () {
  // Create our API with a default connection to the local node
  new ApiRx().isReady
    .pipe(
      // Here we ake our basic chain state/storage queries
      switchMap((api) => combineLatest(
        of(api),
        api.query.session.validators().pipe(first())
      )),
      switchMap(([api, validators]) => {
        // In the next step, we're checking if the node has active validators.
        // If it does, we're making another call to the api to get the balances for all validators
        const balances = (validators && validators.length > 0)
          ? combineLatest(validators.map(authorityId => api.query.balances.freeBalance(authorityId).pipe(first())))
          : of(null);

        // We're combining the results together with the emitted value 'validators',
        // which we're turning back into an observable using of()
        return combineLatest(

async function main () {
  // Here we don't pass the (optional) provider, connecting directly to the default
  // node/port, i.e. `ws://127.0.0.1:9944`. Await for the isReady promise to ensure
  // the API has connected to the node and completed the initialisation process
  new ApiRx().isReady
    .pipe(
      switchMap((api) =>
        api.rpc.chain.subscribeNewHeads()
      ))
    .subscribe((header) => {
      console.log(`Chain is at block: #${header.number}`);
    });
}

}
  }
};

// Hardcode default to Kusama
const WS_URL = 'wss://kusama-rpc.polkadot.io/'; // FIXME Change to localhost when light client ready

// Most chains (including Kusama) put the ss58 prefix in the chain properties.
// Just in case, we default to 42
const SS58_PREFIX = 42;

let keyringInitialized = false;

const l = logger('ui-common');

const api = new ApiRx({ provider: new WsProvider(WS_URL) });

export function ContextGate (props: { children: React.ReactNode }): React.ReactElement {
  const { children } = props;
  const [state, setState] = useState(DISCONNECTED_STATE_PROPERTIES);
  const { isReady, system } = state;

  useEffect(() => {
    // Block the UI when disconnected
    api.isConnected.pipe(
      filter(isConnected => !isConnected)
    ).subscribe(() => {
      setState(DISCONNECTED_STATE_PROPERTIES);
    });

    // We want to fetch all the information again each time we reconnect. We
    // might be connecting to a different node, or the node might have changed