---

Event Tracking & Event Sourcing

You can track events and react to their values. With Subspace observables doing event sourcing is easy.

import { $average, $latest } from "@embarklabs/subspace";

const rating$ = Product.events.Rating.track().map("rating"));

rating$.pipe($latest(5), $average()).subscribe((rating) => {
  console.log("average rating of the last 5 events is " + rating)
});
  

Tracking State

You can track changes to a contract state variable, by specifying the view function and arguments to call and query the contract.

const productTitle$ = ProductList.methods.products(0).track().map("title");
productTitle$.subscribe((title) => console.log("product title is " + title));
  

Tracking balances

You can also track changes in both ETH and ERC20 token balances

const address = "0x0001020304050607080900010203040506070809";

subspace.trackBalance(address).subscribe((balance) => {
  console.log("ETH balance is ", balance)
});

subspace.trackBalance(address, "0x744d70fdbe2ba4cf95131626614a1763df805b9e").subscribe((balance) => {
  console.log("SNT balance is ", balance)
});

React Integration

Subspace can make any react component compatible with observables so you easily reactive components

import { observe } from "@embarklabs/subspace/react";

const ProductComponent = ({ maxRating, minRating, averageRating }) => {
  return <ul>
    <li><b>minimum rating: </b> {minRating}</li>
    <li><b>maximum rating: </b> {maxRating}</li>
    <li><b>average rating: </b> {averageRating}</li>
  </ul>;
};

const ReactiveProductComponent = observe(ProductComponent);
const Product = subspace.contract({abi, address});
const rating$ = Product.events.Rating.track().map("rating").pipe(map(x => parseInt(x)));

ReactDOM.render(
  <ReactiveProductComponent
    maxRating={rating$.pipe($max())}
    minRating={rating$.pipe($min())}
    averageRating={rating$.pipe($average())}
  />,
  document.getElementById('hello-example')
);