<svgxmlns="http://www.w3.org/2000/svg"aria-hidden="true"x="0px"y="0px"viewBox="0 0 100 100"width="15"height="15"class="icon outbound"><pathfill="currentColor"d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygonfill="currentColor"points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><!----></nav><ulclass="sidebar-links"><li><ahref="/"class="sidebar-link">Home</a></li><li><ahref="/how-it-works.html"class="active sidebar-link">How it works?</a><ulclass="sidebar-sub-headers"></ul></li><li><ahref="/getting-started.html"class="sidebar-link">Getting Started</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/getting-started.html#installation"class="sidebar-link">Installation</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#importing-the-library"class="sidebar-link">Importing the library</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#connecting-to-a-web3-provider"class="sidebar-link">Connecting to a web3 provider</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#reacting-to-data"class="sidebar-link">Reacting to data</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#tracking-state"class="sidebar-link">Tracking state</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#tracking-events"class="sidebar-link">Tracking events</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#tracking-balances"class="sidebar-link">Tracking balances</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#subscriptions"class="sidebar-link">Subscriptions</a></li><liclass="sidebar-sub-header"><ahref="/getting-started.html#cleanup"class="sidebar-link">Cleanup</a></li></ul></li><li><sectionclass="sidebar-group depth-0"><pclass="sidebar-heading"><span>Integrations</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/integrations-overview.html"class="sidebar-link">Overview</a></li><li><ahref="/react.html"class="sidebar-link">React</a><ulclass="sidebar-sub-headers"></ul></li><li><ahref="/vue.html"class="sidebar-link">Vue</a><ulclass="sidebar-sub-headers"></ul></li><li><sectionclass="sidebar-group is-sub-group depth-1"><pclass="sidebar-heading"><span>Redux</span><!----></p><ulclass="sidebar-links sidebar-group-items"><li><ahref="/redux.html"class="sidebar-link">redux</a><ulclass="sidebar-sub-headers"></ul></li><li><ahref="/redux-observable.html"class="sidebar-link">redux-observable</a></li></ul></section></li><li><ahref="/reactive-graphql.html"class="sidebar-link">reactive-graphql</a><ulclass="sidebar-sub-headers"></ul></li><li><ahref="/apollo-client.html"class="sidebar-link">apollo-client</a><ulclass="sidebar-sub-headers"></ul></li></ul></section></li><li><ahref="/tutorial.html"class="sidebar-link">Tutorial</a></li><li><ahref="/api.html"class="sidebar-link">API</a><ulclass="sidebar-sub-headers"><liclass="sidebar-sub-header"><ahref="/api.html#general"class="sidebar-link">General</a></li><liclass="sidebar-sub-header"><ahref="/api.html#contract-methods"class="sidebar-link">Contract methods</a></li><liclass="sidebar-sub-header"><ahref="/api.html#low-level-api-for-data-tracking"class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul></aside><mainclass="page"><divclass="theme-default-content content__default"><h1id="how-it-works"><ahref="#how-it-works"aria-hidden="true"class="header-anchor">#</a> How it works?</h1><h3id="setup"><ahref="#setup"aria-hidden="true"class="header-anchor">#</a> Setup</h3><p><imgsrc="/assets/img/d1.daa5485a.png"alt="First Usage - Setup"></p><ol><li>A ÐApp requests <code>Subspace</code> to track an event, property, or balance.</li><li><code>Subspace</code> creates a observable for that event, and a web3 subscription to retrieve events from the chain</li><li>The ÐApp subscribes to the observabl
Depending on the filter parameters used to track the events, once an event is found, it is stored in <code>localStorage</code> and it is also pushed to the observable which delivers it to the ÐApp subscription.</p><h3id="tracking-already-known-events"><ahref="#tracking-already-known-events"aria-hidden="true"class="header-anchor">#</a> Tracking already known events</h3><p>After restarting the ÐApp, either by executing it again in case of a console application or refreshing the browser the behavior of <code>Subspace</code> will change:
<imgsrc="/assets/img/d3.123a2e18.png"alt="Second Usage - Setup"></p><ol><li>The Dapp will request <code>Subspace</code> to track an event it already knows, creating an observable and subscription for that event</li><li>It will retrieve events that were previously stored in localStorage and deliver them to the DApp subscription, avoiding having to query the chain for the old events again.</li></ol><p><imgsrc="/assets/img/d4.81f850ef.png"alt="Second Usage - Receiving events">
The web3 subscription created previously will start from the last known block instead of beginning from scratch. New events will be delivered normally from this step</p></div><footerclass="page-edit"><!----><!----></footer><divclass="page-nav"><pclass="inner"><spanclass="prev">