![\"First](\"./d1.png\")
Subspace to track an event, property, or balance.Subspace creates a observable for that event, and a web3 subscription to retrieve events from the chain![\"First](\"./d2.png\")
Depending on the filter parameters used to track the events, once an event is found, it is stored in localStorage and it is also pushed to the observable which delivers it to the ÐApp subscription.
After restarting the ÐApp, either by executing it again in case of a console application or refreshing the browser the behavior of Subspace will change:![\"Second](\"./d3.png\")
Subspace to track an event it already knows, creating an observable and subscription for that event![\"Second](\"./d4.png\")
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
Subspace to track an event, property, or balance.Subspace creates a observable for that event, and a web3 subscription to retrieve events from the chain
Depending on the filter parameters used to track the events, once an event is found, it is stored in localStorage and it is also pushed to the observable which delivers it to the ÐApp subscription.
After restarting the ÐApp, either by executing it again in case of a console application or refreshing the browser the behavior of Subspace will change:
Subspace to track an event it already knows, creating an observable and subscription for that event
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
examples/react-apollo.\nexamples/react-apollo.\nTo use Subspace with apollo-client, a ReactiveSchemaLink from apollo-link-reactive-schema must be used with a custom schema.
import {InMemoryCache} from "apollo-cache-inmemory";\nimport ApolloClient from "apollo-client";\nimport {ReactiveSchemaLink} from "apollo-link-reactive-schema";\n\nconst schema = makeExecutableSchema({typeDefs, resolvers});\nconst client = new ApolloClient({\n cache: new InMemoryCache(),\n link: new ReactiveSchemaLink({schema)})\n});\nimport { ApolloClient } from "apollo-client";\nimport { InMemoryCache } from "apollo-cache-inmemory";\nimport {ReactiveSchemaLink} from "apollo-link-reactive-schema";\nimport Subspace from "@embarklabs/subspace";\n\n// ...\n\n// Initialize Subspace\nconst subspace = new Subspace(web3);\nawait subspace.init();\n\nconst MyContractInstance = ...; // TODO: obtain a web3.eth.Contract instance\n\nconst typeDefs = `\n type MyEvent {\n someValue: Int\n anotherValue: String\n }\n type Query {\n myEvents: MyEvent!\n }\n`;\n\nconst resolvers = {\n Query: {\n myEvents: () => subspace.trackEvent(MyContractInstance, 'MyEvent', {filter: {}, fromBlock: 1})\n }\n};\n\nconst schema = makeExecutableSchema({ typeDefs, resolvers });\n\nconst client = new ApolloClient({\n cache: new InMemoryCache(),\n link: new ReactiveSchemaLink({schema)})\n});\nexamples/react-apollo.\nTo use Subspace with apollo-client, a ReactiveSchemaLink from apollo-link-reactive-schema must be used with a custom schema.
import {InMemoryCache} from "apollo-cache-inmemory";\nimport ApolloClient from "apollo-client";\nimport {ReactiveSchemaLink} from "apollo-link-reactive-schema";\n\nconst schema = makeExecutableSchema({typeDefs, resolvers});\nconst client = new ApolloClient({\n cache: new InMemoryCache(),\n link: new ReactiveSchemaLink({schema)})\n});\nimport { ApolloClient } from "apollo-client";\nimport { InMemoryCache } from "apollo-cache-inmemory";\nimport {ReactiveSchemaLink} from "apollo-link-reactive-schema";\nimport Subspace from "@embarklabs/subspace";\n\n// ...\n\n// Initialize Subspace\nconst subspace = new Subspace(web3);\nawait subspace.init();\n\nconst MyContractInstance = ...; // TODO: obtain a web3.eth.Contract instance\n\nconst typeDefs = `\n type MyEvent {\n someValue: Int\n anotherValue: String\n }\n type Query {\n myEvents: MyEvent!\n }\n`;\n\nconst resolvers = {\n Query: {\n myEvents: () => subspace.trackEvent(MyContractInstance, 'MyEvent', {filter: {}, fromBlock: 1})\n }\n};\n\nconst schema = makeExecutableSchema({ typeDefs, resolvers });\n\nconst client = new ApolloClient({\n cache: new InMemoryCache(),\n link: new ReactiveSchemaLink({schema)})\n});\nexamples/react-apollo.\nNo data
;\n }\n \n returnValue: {eventData.someReturnValue}
\n};\n\n\nconst MyEnhancedComponent = observe(MyComponent);\n\n\nconst SomeOtherComponent = () => {\n const myObservable$ = MyContractInstance.events.MyEvent.track({fromBlock: 1});\n returnMyContractInstance is a web3.eth.Contract object pointing to a deployed contract address that has been enhanced with subspace.contract(). You can use a DApp framework like Embark to easily import that contract instance: import { MyContract } from './embarkArtifacts/contracts';.\nsubspace-react, there are full working examples available in Github \nNo data
;\n }\n \n returnValue: {eventData.someReturnValue}
\n};\n\n\nconst MyEnhancedComponent = observe(MyComponent);\n\n\nconst SomeOtherComponent = () => {\n const myObservable$ = MyContractInstance.events.MyEvent.track({fromBlock: 1});\n returnMyContractInstance is a web3.eth.Contract object pointing to a deployed contract address that has been enhanced with subspace.contract(). You can use a DApp framework like Embark to easily import that contract instance: import { MyContract } from './embarkArtifacts/contracts';.\nsubspace-react, there are full working examples available in Github \nSubspace also provides a set of components that simplifies its usage within React projects through the @embarklabs/subspace-react package.
You can install it through npm or yarn:
\n\n\nnpm install --save @embarklabs/subspace-react web3 rxjs # RxJS and Web3.js are needed peer-dependencies\nTo use most of the subspace-react components, you need to wrap your app with the <SubspaceProvider web3={web3} /> component. This will make Subspace available to any nested components that accesses it via the useSubspace hook or has been wrapped in the withSubspace higher order component. Any React component might use Subspace so it makes sense to add the provider near the top level of your dApp. The SubspaceProvider requires a web3 object
// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport MyApp from './MyApp'\nimport { SubspaceProvider } from '@embarklabs/subspace-react';\n\nconst web3 = new Web3("ws://localhost:8545");\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(\n <SubspaceProvider web3={web3}>\n <MyApp />\n </SubspaceProvider>,\n rootElement\n);\nRather than relying on global variables or passing Subspace through props, The easiest way to access Subspace features is via the useSubspace hook. Be sure that your entire dApp is wrapped with a <SubspaceProvider /> to have it available througout the component tree.
// index.js\nimport React from 'react'\nimport { useSubspace } from '@embarklabs/subspace-react';\n\nconst MyComponent = () => {\n const subspace = useSubspace();\n\n // do something....\n // subspace.trackBalance(web3.eth.defaultAccount);\n\n return ...;\n}\n\nexport default MyComponent\nThis higher order component is provided as an alternative to the useSubspace hook. This injects the subspace property with an already initialized Subspace instance. Just like with the hook, your entire dApp needs to be wrapped with a <SubspaceProvider />.
// index.js\nimport React from 'react'\nimport { withSubspace } from '@embarklabs/subspace-react';\n\nconst MyComponent = (props) => {\n // do something....\n // props.subspace.trackBalance(web3.eth.defaultAccount);\n\n return ...;\n}\n\nexport default withSubspace(MyComponent);\nUseful to make your component subscribe to any observable props it receives when the component is mounted and automatically unsubscribes when the component is unmounted. It can be used with any kind of observables.
\n\n\nimport { observe } from '@embarklabs/subspace-react';\n\nconst ObserverComponent = observe(WrappedComponent);\nconst MyComponent = ({eventData}) => {\n // Handle initial state when no data is available\n if (!eventData) {\n return <p>No data</p>;\n }\n \n return <p>Value: {eventData.someReturnValue}</p>\n};\n\n\nconst MyEnhancedComponent = observe(MyComponent);\n\n\nconst SomeOtherComponent = () => {\n const myObservable$ = MyContractInstance.events.MyEvent.track({fromBlock: 1});\n return <MyEnhancedComponent myProp={myObservable$} />;\n}\nMyContractInstance is a web3.eth.Contract object pointing to a deployed contract address that has been enhanced with subspace.contract(). You can use a DApp framework like Embark to easily import that contract instance: import { MyContract } from './embarkArtifacts/contracts';.\nsubspace-react, there are full working examples available in Github \nSubspace also provides a set of components that simplifies its usage within React projects through the @embarklabs/subspace-react package.
You can install it through npm or yarn:
\n\n\nnpm install --save @embarklabs/subspace-react web3 rxjs # RxJS and Web3.js are needed peer-dependencies\nTo use most of the subspace-react components, you need to wrap your app with the <SubspaceProvider web3={web3} /> component. This will make Subspace available to any nested components that accesses it via the useSubspace hook or has been wrapped in the withSubspace higher order component. Any React component might use Subspace so it makes sense to add the provider near the top level of your dApp. The SubspaceProvider requires a web3 object
// index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport MyApp from './MyApp'\nimport { SubspaceProvider } from '@embarklabs/subspace-react';\n\nconst web3 = new Web3("ws://localhost:8545");\n\nconst rootElement = document.getElementById('root')\nReactDOM.render(\n <SubspaceProvider web3={web3}>\n <MyApp />\n </SubspaceProvider>,\n rootElement\n);\nRather than relying on global variables or passing Subspace through props, The easiest way to access Subspace features is via the useSubspace hook. Be sure that your entire dApp is wrapped with a <SubspaceProvider /> to have it available througout the component tree.
// index.js\nimport React from 'react'\nimport { useSubspace } from '@embarklabs/subspace-react';\n\nconst MyComponent = () => {\n const subspace = useSubspace();\n\n // do something....\n // subspace.trackBalance(web3.eth.defaultAccount);\n\n return ...;\n}\n\nexport default MyComponent\nThis higher order component is provided as an alternative to the useSubspace hook. This injects the subspace property with an already initialized Subspace instance. Just like with the hook, your entire dApp needs to be wrapped with a <SubspaceProvider />.
// index.js\nimport React from 'react'\nimport { withSubspace } from '@embarklabs/subspace-react';\n\nconst MyComponent = (props) => {\n // do something....\n // props.subspace.trackBalance(web3.eth.defaultAccount);\n\n return ...;\n}\n\nexport default withSubspace(MyComponent);\nUseful to make your component subscribe to any observable props it receives when the component is mounted and automatically unsubscribes when the component is unmounted. It can be used with any kind of observables.
\n\n\nimport { observe } from '@embarklabs/subspace-react';\n\nconst ObserverComponent = observe(WrappedComponent);\nconst MyComponent = ({eventData}) => {\n // Handle initial state when no data is available\n if (!eventData) {\n return <p>No data</p>;\n }\n \n return <p>Value: {eventData.someReturnValue}</p>\n};\n\n\nconst MyEnhancedComponent = observe(MyComponent);\n\n\nconst SomeOtherComponent = () => {\n const myObservable$ = MyContractInstance.events.MyEvent.track({fromBlock: 1});\n return <MyEnhancedComponent myProp={myObservable$} />;\n}\nMyContractInstance is a web3.eth.Contract object pointing to a deployed contract address that has been enhanced with subspace.contract(). You can use a DApp framework like Embark to easily import that contract instance: import { MyContract } from './embarkArtifacts/contracts';.\nsubspace-react, there are full working examples available in Github \nSubspace does not force you to change the architecture of your dApps, making it easy to use on existing projects. In this section you can find some examples and tips on how to integrate Subspace with various frontend frameworks and libraries
\n","site":{"data":{"sidebar":{"docs":[{"title":"How it works","path":"how-it-works.html"},{"title":"Getting Started","path":"getting-started.html","children":[{"title":"Installation","path":"#Installation"},{"title":"Importing the library","path":"#Importing-the-library"},{"title":"Connecting to a web3 provider","path":"#Connecting-to-a-web3-provider"},{"title":"Enhancing your contract objects","path":"#Enhancing-your-contract-objects"},{"title":"Reacting to data","path":"#Reacting-to-data"},{"title":"Tracking state","path":"#Tracking-state"},{"title":"Tracking events","path":"#Tracking-events"},{"title":"Tracking balances","path":"#Tracking-balances"},{"title":"Getting block data, gas prices and block time","path":"#Getting-block-data-gas-prices-and-block-time"},{"title":"Subscriptions","path":"#Subscriptions"},{"title":"Cleanup","path":"#Cleanup"}]},{"title":"Integrations","path":"empty","children":[{"title":"Overview","path":"integrations-overview.html"},{"title":"React","path":"react.html"},{"title":"Vue","path":"vue.html"},{"title":"Redux","path":"empty","children":[{"title":"redux","path":"redux.html"},{"title":"redux-observable","path":"redux-observable.html"}]},{"title":"reactive-graphql","path":"reactive-graphql.html"},{"title":"apollo-client","path":"apollo-client.html"}]},{"title":"Tutorial","path":"tutorial.html"},{"title":"API","path":"api.html","children":[{"title":"General","path":"#general"},{"title":"Contract methods","path":"#Contract-methods"},{"title":"Blocks, gas price and block time","path":"#Blocks-gas-price-and-block-time"},{"title":"Low level API for data tracking","path":"#Low-level-API-for-data-tracking"}]}]}}},"excerpt":"","more":"Subspace does not force you to change the architecture of your dApps, making it easy to use on existing projects. In this section you can find some examples and tips on how to integrate Subspace with various frontend frameworks and libraries
\n"},{"_content":"# reactive-graphql\n\nUsing `reactive-graphql` you can execute GraphQL queries against **Subspace** observables after you create your own type definitions and resolvers.\n\n### Example\n\n\n```js\nconst Subspace = require('@embarklabs/subspace');\nconst MyContract = require('./MyContract');\nconst { pluck } = require('rxjs/operators');\nconst { makeExecutableSchema } = require(\"graphql-tools\");\nconst gql = require(\"graphql-tag\");\nconst { graphql } = require(\"reactive-graphql\");\n\nconst run = async () => {\n const subspace = new Subspace(web3);\n await subspace.init();\n\n const MyContractInstance = ...; // TODO: obtain a web3.eth.contract instance\n\n const typeDefs = `\n type MyEvent {\n someValue: Int\n anotherValue: String\n }\n type Query {\n myEvents: MyEvent!\n }\n `;\n\n const resolvers = {\n Query: {\n myEvents: () => subspace.trackEvent(MyContractInstance, 'MyEvent', { filter: {}, fromBlock: 1 })\n }\n };\n\n const schema = makeExecutableSchema({ typeDefs, resolvers });\n\n const query = gql`\n query {\n myEvents {\n someValue\n anotherValue\n }\n }\n `;\n\n const stream = graphql(schema, query).pipe(pluck('data', 'myEvents'));\n stream.subscribe(data => {\n console.log(data);\n })\n\n}\n\nrun();\n```\n\nUsing reactive-graphql you can execute GraphQL queries against Subspace observables after you create your own type definitions and resolvers.
const Subspace = require('@embarklabs/subspace');\nconst MyContract = require('./MyContract');\nconst { pluck } = require('rxjs/operators');\nconst { makeExecutableSchema } = require("graphql-tools");\nconst gql = require("graphql-tag");\nconst { graphql } = require("reactive-graphql");\n\nconst run = async () => {\n const subspace = new Subspace(web3);\n await subspace.init();\n\n const MyContractInstance = ...; // TODO: obtain a web3.eth.contract instance\n\n const typeDefs = `\n type MyEvent {\n someValue: Int\n anotherValue: String\n }\n type Query {\n myEvents: MyEvent!\n }\n `;\n\n const resolvers = {\n Query: {\n myEvents: () => subspace.trackEvent(MyContractInstance, 'MyEvent', { filter: {}, fromBlock: 1 })\n }\n };\n\n const schema = makeExecutableSchema({ typeDefs, resolvers });\n\n const query = gql`\n query {\n myEvents {\n someValue\n anotherValue\n }\n }\n `;\n\n const stream = graphql(schema, query).pipe(pluck('data', 'myEvents'));\n stream.subscribe(data => {\n console.log(data);\n })\n\n}\n\nrun();\nUsing reactive-graphql you can execute GraphQL queries against Subspace observables after you create your own type definitions and resolvers.
const Subspace = require('@embarklabs/subspace');\nconst MyContract = require('./MyContract');\nconst { pluck } = require('rxjs/operators');\nconst { makeExecutableSchema } = require("graphql-tools");\nconst gql = require("graphql-tag");\nconst { graphql } = require("reactive-graphql");\n\nconst run = async () => {\n const subspace = new Subspace(web3);\n await subspace.init();\n\n const MyContractInstance = ...; // TODO: obtain a web3.eth.contract instance\n\n const typeDefs = `\n type MyEvent {\n someValue: Int\n anotherValue: String\n }\n type Query {\n myEvents: MyEvent!\n }\n `;\n\n const resolvers = {\n Query: {\n myEvents: () => subspace.trackEvent(MyContractInstance, 'MyEvent', { filter: {}, fromBlock: 1 })\n }\n };\n\n const schema = makeExecutableSchema({ typeDefs, resolvers });\n\n const query = gql`\n query {\n myEvents {\n someValue\n anotherValue\n }\n }\n `;\n\n const stream = graphql(schema, query).pipe(pluck('data', 'myEvents'));\n stream.subscribe(data => {\n console.log(data);\n })\n\n}\n\nrun();\nredux-observables can be used to manage side effects via Epics (their core primitive to receive and create stream of actions). Subspace can be configured inside these epics.
It’s recommended to compose these epics by using mergeMap or switchMap operators.
\nHere’s an example on how to use Subspace to subscribe to an Event when the action SOME_ACTION is dispatched, and then it will trigger myAction when the observable emits a value.
// ...\n\nconst myEpic = action$ =>\n action$.pipe(\n ofType("SOME_ACTION"), // Execute when the action type is 'INIT'\n switchMap(action =>\n subspace\n .trackEvent(MyContract, "MyEventName", { filter: {}, fromBlock: 1})\n .pipe(\n map(myAction) // Trigger redux action: MY_ACTION with the eventData\n )\n )\n );\n\n// ...\nredux-observables can be used to manage side effects via Epics (their core primitive to receive and create stream of actions). Subspace can be configured inside these epics.
It’s recommended to compose these epics by using mergeMap or switchMap operators.
\nHere’s an example on how to use Subspace to subscribe to an Event when the action SOME_ACTION is dispatched, and then it will trigger myAction when the observable emits a value.
// ...\n\nconst myEpic = action$ =>\n action$.pipe(\n ofType("SOME_ACTION"), // Execute when the action type is 'INIT'\n switchMap(action =>\n subspace\n .trackEvent(MyContract, "MyEventName", { filter: {}, fromBlock: 1})\n .pipe(\n map(myAction) // Trigger redux action: MY_ACTION with the eventData\n )\n )\n );\n\n// ...\nSee example DApp at https://github.com/embark-framework/subspace/tree/master/examples/react-example1
\n","site":{"data":{"sidebar":{"docs":[{"title":"How it works","path":"how-it-works.html"},{"title":"Getting Started","path":"getting-started.html","children":[{"title":"Installation","path":"#Installation"},{"title":"Importing the library","path":"#Importing-the-library"},{"title":"Connecting to a web3 provider","path":"#Connecting-to-a-web3-provider"},{"title":"Enhancing your contract objects","path":"#Enhancing-your-contract-objects"},{"title":"Reacting to data","path":"#Reacting-to-data"},{"title":"Tracking state","path":"#Tracking-state"},{"title":"Tracking events","path":"#Tracking-events"},{"title":"Tracking balances","path":"#Tracking-balances"},{"title":"Getting block data, gas prices and block time","path":"#Getting-block-data-gas-prices-and-block-time"},{"title":"Subscriptions","path":"#Subscriptions"},{"title":"Cleanup","path":"#Cleanup"}]},{"title":"Integrations","path":"empty","children":[{"title":"Overview","path":"integrations-overview.html"},{"title":"React","path":"react.html"},{"title":"Vue","path":"vue.html"},{"title":"Redux","path":"empty","children":[{"title":"redux","path":"redux.html"},{"title":"redux-observable","path":"redux-observable.html"}]},{"title":"reactive-graphql","path":"reactive-graphql.html"},{"title":"apollo-client","path":"apollo-client.html"}]},{"title":"Tutorial","path":"tutorial.html"},{"title":"API","path":"api.html","children":[{"title":"General","path":"#general"},{"title":"Contract methods","path":"#Contract-methods"},{"title":"Blocks, gas price and block time","path":"#Blocks-gas-price-and-block-time"},{"title":"Low level API for data tracking","path":"#Low-level-API-for-data-tracking"}]}]}}},"excerpt":"","more":"See example DApp at https://github.com/embark-framework/subspace/tree/master/examples/react-example1
\n"},{"_content":"# Vue\nVue provides the official npm package `vue-rx` that provides RxJS integration, which simplifies the use of Subspace with Vue.js\n\n### Example\n\nVue provides the official npm package vue-rx that provides RxJS integration, which simplifies the use of Subspace with Vue.js
<template>\n <ul v-if="!!eventData$">\n <li><b>someValue: </b> {{eventData$.someValue}}</li>\n <li><b>anotherValue: </b> {{eventData$.anotherValue}}</li>\n </ul>\n</template>\n\n<script>\nexport default {\n name: 'MyComponent',\n props: {\n eventData: Object\n },\n subscriptions() { // provide Rx observables\n return {\n eventData$: this.eventData\n }\n }\n}\n</script>\n<template>\n <div id="app">\n <button v-on:click="createTrx">Create a Transaction</button>\n <MyComponent v-bind:event-data="myEventObservable$" v-if="!!myEventObservable$" />\n </div>\n</template>\n\n<script>\nimport MyComponent from './components/MyComponent.vue';\nimport Subspace from "@embarklabs/subspace";\n\nexport default {\n name: 'app',\n data: function(){\n return {\n myEventObservable$: null,\n MyContractInstance: null\n };\n },\n created: async function(){\n this.MyContractInstance = ...; // TODO: obtain a web3.eth.contract instance\n\n const subspace = new Subspace(web3);\n await subspace.init();\n\n this.myEventObservable$ = subspace.trackEvent(this.MyContractInstance, "MyEvent", {filter: {}, fromBlock: 1 });\n }, \n methods: {\n createTrx: function(){\n this.MyContractInstance.methods\n .myFunction()\n .send({ from: web3.eth.defaultAccount });\n }\n },\n components: {\n MyComponent\n }\n}\n</script>\nVue provides the official npm package vue-rx that provides RxJS integration, which simplifies the use of Subspace with Vue.js
<template>\n <ul v-if="!!eventData$">\n <li><b>someValue: </b> {{eventData$.someValue}}</li>\n <li><b>anotherValue: </b> {{eventData$.anotherValue}}</li>\n </ul>\n</template>\n\n<script>\nexport default {\n name: 'MyComponent',\n props: {\n eventData: Object\n },\n subscriptions() { // provide Rx observables\n return {\n eventData$: this.eventData\n }\n }\n}\n</script>\n<template>\n <div id="app">\n <button v-on:click="createTrx">Create a Transaction</button>\n <MyComponent v-bind:event-data="myEventObservable$" v-if="!!myEventObservable$" />\n </div>\n</template>\n\n<script>\nimport MyComponent from './components/MyComponent.vue';\nimport Subspace from "@embarklabs/subspace";\n\nexport default {\n name: 'app',\n data: function(){\n return {\n myEventObservable$: null,\n MyContractInstance: null\n };\n },\n created: async function(){\n this.MyContractInstance = ...; // TODO: obtain a web3.eth.contract instance\n\n const subspace = new Subspace(web3);\n await subspace.init();\n\n this.myEventObservable$ = subspace.trackEvent(this.MyContractInstance, "MyEvent", {filter: {}, fromBlock: 1 });\n }, \n methods: {\n createTrx: function(){\n this.MyContractInstance.methods\n .myFunction()\n .send({ from: web3.eth.defaultAccount });\n }\n },\n components: {\n MyComponent\n }\n}\n</script>\nMyContractInstance is a web3.eth.Contract object pointing to a deployed contract address. You can use a DApp framework like Embark to easily import that contract instance: import { MyContract } from './embarkArtifacts/contracts';, or use web3.js directly (just like in the example source code)\nexamples/react-redux.\nMyContractInstance is a web3.eth.Contract object pointing to a deployed contract address. You can use a DApp framework like Embark to easily import that contract instance: import { MyContract } from './embarkArtifacts/contracts';, or use web3.js directly (just like in the example source code)\nexamples/react-redux.\nSubspace can be used with redux. Subspace returns Observables, which you can subscribe to, and if this subscription has access to the redux store, it will be able to dispatch actions when the observable emits an event.
Here’s a simple example on how to setup Subspace to work with redux:
import store from './store';\nimport web3 from './web3';\nimport Subspace from '@embarklabs/subspace';\nimport { myAction } from './actions';\n\nconst run = async () => {\n const MyContractInstance = ...; // TODO: obtain a web3.eth.contract instance\n\n const subspace = new Subspace(web3);\n await subspace.init();\n \n subspace.trackEvent(MyContractInstance, "MyEvent", {filter: {}, fromBlock: 1 })\n .subscribe(eventData => {\n store.dispatch(myAction(eventData));\n });\n}\n\nrun();\nMyContractInstance is a web3.eth.Contract object pointing to a deployed contract address. You can use a DApp framework like Embark to easily import that contract instance: import { MyContract } from './embarkArtifacts/contracts';, or use web3.js directly (just like in the example source code)\nimport { createStore } from 'redux';\nimport {myReducer} from './reducer';\n\nexport default store = createStore(myReducer);\nimport { MY_ACTION } from "./constants";\n\nconst initialState = { \n data: {}\n};\n\nexport const myReducer = (state = initialState, action) => {\n switch (action.type) {\n case MY_ACTION:\n return { data: action.eventData };\n default:\n return state;\n }\n};\nexport const MY_ACTION = 'MY_ACTION';\nimport {MY_ACTION} from './constants.js';\n\nexport const myAction = eventData => ({type: MY_ACTION, eventData});\nexamples/react-redux.\nSubspace can be used with redux. Subspace returns Observables, which you can subscribe to, and if this subscription has access to the redux store, it will be able to dispatch actions when the observable emits an event.
Here’s a simple example on how to setup Subspace to work with redux:
import store from './store';\nimport web3 from './web3';\nimport Subspace from '@embarklabs/subspace';\nimport { myAction } from './actions';\n\nconst run = async () => {\n const MyContractInstance = ...; // TODO: obtain a web3.eth.contract instance\n\n const subspace = new Subspace(web3);\n await subspace.init();\n \n subspace.trackEvent(MyContractInstance, "MyEvent", {filter: {}, fromBlock: 1 })\n .subscribe(eventData => {\n store.dispatch(myAction(eventData));\n });\n}\n\nrun();\nMyContractInstance is a web3.eth.Contract object pointing to a deployed contract address. You can use a DApp framework like Embark to easily import that contract instance: import { MyContract } from './embarkArtifacts/contracts';, or use web3.js directly (just like in the example source code)\nimport { createStore } from 'redux';\nimport {myReducer} from './reducer';\n\nexport default store = createStore(myReducer);\nimport { MY_ACTION } from "./constants";\n\nconst initialState = { \n data: {}\n};\n\nexport const myReducer = (state = initialState, action) => {\n switch (action.type) {\n case MY_ACTION:\n return { data: action.eventData };\n default:\n return state;\n }\n};\nexport const MY_ACTION = 'MY_ACTION';\nimport {MY_ACTION} from './constants.js';\n\nexport const myAction = eventData => ({type: MY_ACTION, eventData});\nexamples/react-redux.\nnew Subspace(web3 [, options])Constructor.
\nParameters
\nweb3 - Object: a web3.js object.options - Object (optional): Options used to initialize SubspacedbFilename - String (optional): Name of the database where the information will be stored (default 'subspace.db')callInterval - Interval of time in milliseconds to query a contract/address to determine changes in state or balance. It’s only used with HttpProviders (default: undefined. Obtains data every block using the average block time as an interval).refreshLastNBlocks - Ignores last N blocks (from current block), stored in the local db and refresh them via a web3 subscription. Useful for possible reorgs (default: 12),disableSubscriptions - Subspace by default will attempt to use websocket subscriptions if the current provider supports them, otherwise it will use polling because it asumes the provider is an HttpProvider. This functionality can be disabled by passing true to this option. (default: undefined)init()Initializes Subspace
\nReturnsPromise that once it’s resolved, will mean that Subspace is available to use
close()Dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by Subspace during its normal execution.
\ncontract(instance|{abi,address})Adds a track method to the web3 contract objects. You can obtain this functionality by passing a web3.eth.Contract instance, or the abi and address of your contract
Returnsweb3.eth.Contract object enhanced with .track() functions for methods and events.
myContract.events.MyEvent.track([options])Track a contract event.
\nParameters
\noptions - Object (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filtersfilter - Object (optional): Lets you filter events by indexed parameters, e.g. {filter: {myNumber: [12,13]}} means all events where "myNumber" is 12 or 13.fromBlock - Number (optional): The block number from which to get events on.toBlock - Number (optional): The block number to get events up to (Defaults to "latest")topics - Array (optional): This allows you to manually set the topics for the event filter. If given the filter property and event signature, (topic[0]) will not be set automatically.ReturnsRxJS Observable which will stream the event returnValues.
myContract.methods.myMethod([param1[, ...]]).track([callOptions])Track a constant function / contract state variable on each block mined, or depending on the callInterval option used during Subspace initialization.
Parameters
\ncallOptions - Object (optional): The options used for calling.from - String (optional): The address the call “transaction” should be made from.gasPrice - String (optional): The gas price in wei to use for this call “transaction”.gas - Number (optional): The maximum gas provided for this call “transaction” (gas limit).ReturnsRxJS Observable which will stream the function / variable values. Data type will depend on the contract function invoked.
myContract.trackBalance(address [, tokenAddress])Track a contract’s balance changes for an address on each block mined, or depending on the callInterval option used during Subspace initialization.
Parameters
\naddress - String: The address to get the balance of.tokenAddress - String (optional): If you want to track the balance for an ERC20 contract, here you can specify the token address. Otherwise, Only ETH balances will be returned.ReturnsRxJS Observable which will stream a string containing the address balance.
trackBlock()Receive the block information for any new block. It’s the reactive equivalent to web3.eth.getBlock("latest").
ReturnsRxJS Observable which will stream a block object for the latest block received
trackBlockNumber()Returns the latest block number. It’s the reactive equivalent to web3.eth.getBlockNumber.
ReturnsRxJS Observable with the latest block number
trackGasPrice()Returns the current gas price oracle. It’s the reactive equivalent to web3.eth.getGasPrice.
ReturnsRxJS Observable with the average gas price in wei.
trackAverageBlocktime()Average block time of the last 10 blocks.
\nReturnsRxJS Observable with the moving average block time of the last 10 blocks. The time is returned in milliseconds:
These are used in case you don’t want to decorate your web3 contract objects, or if you want to track the balance for an specific address.
\ntrackEvent(contractObject, eventName [, options])Track a contract event.
\nParameters
\ncontractObject - web3.eth.Contract: An already initialized contract object pointing to an address and containing a valid ABI.eventName - String: The name of the event to subscribe.options - Object (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filtersfilter - Object (optional): Lets you filter events by indexed parameters, e.g. {filter: {myNumber: [12,13]}} means all events where "myNumber" is 12 or 13.fromBlock - Number (optional): The block number from which to get events on.toBlock - Number (optional): The block number to get events up to (Defaults to "latest")topics - Array (optional): This allows you to manually set the topics for the event filter. If given the filter property and event signature, (topic[0]) will not be set automatically.ReturnsRxJS Observable which will stream the event returnValues.
trackProperty(contractObject, functionName [, functionArgs] [, callOptions])Track a constant function / contract state variable on each block mined, or depending on the callInterval option used during Subspace initialization.
Parameters
\ncontractObject - web3.eth.Contract: An already initialized contract object pointing to an address and containing a valid ABI.functionName - String: Name of the function or variable whose values will be tracked.functionArgs - Array (optional): Array of arguments that the tracked function receivescallOptions - Object (optional): The options used for calling.from - String (optional): The address the call “transaction” should be made from.gasPrice - String (optional): The gas price in wei to use for this call “transaction”.gas - Number (optional): The maximum gas provided for this call “transaction” (gas limit).ReturnsRxJS Observable which will stream the function / variable values. Data type will depend on the contract function invoked.
trackBalance(address [, tokenAddress])Track balance changes for an address on each block mined, or depending on the callInterval option used during Subspace initialization.
Parameters
\naddress - String: The address to get the balance of.tokenAddress - String (optional): If you want to track the balance for an ERC20 contract, here you can specify the token address. Otherwise, Only ETH balances will be returned.ReturnsRxJS Observable which will stream a string containing the address balance.
trackLogs(options [, abi])Tracks incoming logs, filtered by the given options.
\nParameters
\noptions - Object (optional): web3 filter options object to limit the number of logsaddress - String|Array (optional): An address or a list of addresses to only get logs from particular account(s).fromBlock - Number (optional): The block number from which to get events on.topics - Array (optional): An array of values which must each appear in the log entries. The order is important, if you want to leave topics out use null, e.g. [null, ‘0x00…’]. You can also pass another array for each topic with options for that topic e.g. [null, [‘option1’, ‘option2’]].abi - Array (optional): Array containing the ABI for the inputs of the logs received. It will automatically decode the logs using this ABI instead of returning the hexadecimal data.ReturnsRxJS Observable which will stream the logs. If the inputs ABI is included in the call, the logs will be automatically decoded.
new Subspace(web3 [, options])Constructor.
\nParameters
\nweb3 - Object: a web3.js object.options - Object (optional): Options used to initialize SubspacedbFilename - String (optional): Name of the database where the information will be stored (default 'subspace.db')callInterval - Interval of time in milliseconds to query a contract/address to determine changes in state or balance. It’s only used with HttpProviders (default: undefined. Obtains data every block using the average block time as an interval).refreshLastNBlocks - Ignores last N blocks (from current block), stored in the local db and refresh them via a web3 subscription. Useful for possible reorgs (default: 12),disableSubscriptions - Subspace by default will attempt to use websocket subscriptions if the current provider supports them, otherwise it will use polling because it asumes the provider is an HttpProvider. This functionality can be disabled by passing true to this option. (default: undefined)init()Initializes Subspace
\nReturnsPromise that once it’s resolved, will mean that Subspace is available to use
close()Dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by Subspace during its normal execution.
\ncontract(instance|{abi,address})Adds a track method to the web3 contract objects. You can obtain this functionality by passing a web3.eth.Contract instance, or the abi and address of your contract
Returnsweb3.eth.Contract object enhanced with .track() functions for methods and events.
myContract.events.MyEvent.track([options])Track a contract event.
\nParameters
\noptions - Object (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filtersfilter - Object (optional): Lets you filter events by indexed parameters, e.g. {filter: {myNumber: [12,13]}} means all events where "myNumber" is 12 or 13.fromBlock - Number (optional): The block number from which to get events on.toBlock - Number (optional): The block number to get events up to (Defaults to "latest")topics - Array (optional): This allows you to manually set the topics for the event filter. If given the filter property and event signature, (topic[0]) will not be set automatically.ReturnsRxJS Observable which will stream the event returnValues.
myContract.methods.myMethod([param1[, ...]]).track([callOptions])Track a constant function / contract state variable on each block mined, or depending on the callInterval option used during Subspace initialization.
Parameters
\ncallOptions - Object (optional): The options used for calling.from - String (optional): The address the call “transaction” should be made from.gasPrice - String (optional): The gas price in wei to use for this call “transaction”.gas - Number (optional): The maximum gas provided for this call “transaction” (gas limit).ReturnsRxJS Observable which will stream the function / variable values. Data type will depend on the contract function invoked.
myContract.trackBalance(address [, tokenAddress])Track a contract’s balance changes for an address on each block mined, or depending on the callInterval option used during Subspace initialization.
Parameters
\naddress - String: The address to get the balance of.tokenAddress - String (optional): If you want to track the balance for an ERC20 contract, here you can specify the token address. Otherwise, Only ETH balances will be returned.ReturnsRxJS Observable which will stream a string containing the address balance.
trackBlock()Receive the block information for any new block. It’s the reactive equivalent to web3.eth.getBlock("latest").
ReturnsRxJS Observable which will stream a block object for the latest block received
trackBlockNumber()Returns the latest block number. It’s the reactive equivalent to web3.eth.getBlockNumber.
ReturnsRxJS Observable with the latest block number
trackGasPrice()Returns the current gas price oracle. It’s the reactive equivalent to web3.eth.getGasPrice.
ReturnsRxJS Observable with the average gas price in wei.
trackAverageBlocktime()Average block time of the last 10 blocks.
\nReturnsRxJS Observable with the moving average block time of the last 10 blocks. The time is returned in milliseconds:
These are used in case you don’t want to decorate your web3 contract objects, or if you want to track the balance for an specific address.
\ntrackEvent(contractObject, eventName [, options])Track a contract event.
\nParameters
\ncontractObject - web3.eth.Contract: An already initialized contract object pointing to an address and containing a valid ABI.eventName - String: The name of the event to subscribe.options - Object (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filtersfilter - Object (optional): Lets you filter events by indexed parameters, e.g. {filter: {myNumber: [12,13]}} means all events where "myNumber" is 12 or 13.fromBlock - Number (optional): The block number from which to get events on.toBlock - Number (optional): The block number to get events up to (Defaults to "latest")topics - Array (optional): This allows you to manually set the topics for the event filter. If given the filter property and event signature, (topic[0]) will not be set automatically.ReturnsRxJS Observable which will stream the event returnValues.
trackProperty(contractObject, functionName [, functionArgs] [, callOptions])Track a constant function / contract state variable on each block mined, or depending on the callInterval option used during Subspace initialization.
Parameters
\ncontractObject - web3.eth.Contract: An already initialized contract object pointing to an address and containing a valid ABI.functionName - String: Name of the function or variable whose values will be tracked.functionArgs - Array (optional): Array of arguments that the tracked function receivescallOptions - Object (optional): The options used for calling.from - String (optional): The address the call “transaction” should be made from.gasPrice - String (optional): The gas price in wei to use for this call “transaction”.gas - Number (optional): The maximum gas provided for this call “transaction” (gas limit).ReturnsRxJS Observable which will stream the function / variable values. Data type will depend on the contract function invoked.
trackBalance(address [, tokenAddress])Track balance changes for an address on each block mined, or depending on the callInterval option used during Subspace initialization.
Parameters
\naddress - String: The address to get the balance of.tokenAddress - String (optional): If you want to track the balance for an ERC20 contract, here you can specify the token address. Otherwise, Only ETH balances will be returned.ReturnsRxJS Observable which will stream a string containing the address balance.
trackLogs(options [, abi])Tracks incoming logs, filtered by the given options.
\nParameters
\noptions - Object (optional): web3 filter options object to limit the number of logsaddress - String|Array (optional): An address or a list of addresses to only get logs from particular account(s).fromBlock - Number (optional): The block number from which to get events on.topics - Array (optional): An array of values which must each appear in the log entries. The order is important, if you want to leave topics out use null, e.g. [null, ‘0x00…’]. You can also pass another array for each topic with options for that topic e.g. [null, [‘option1’, ‘option2’]].abi - Array (optional): Array containing the ABI for the inputs of the logs received. It will automatically decode the logs using this ABI instead of returning the hexadecimal data.ReturnsRxJS Observable which will stream the logs. If the inputs ABI is included in the call, the logs will be automatically decoded.
Observable type can be used to model push-based data sources such as DOM events, timer intervals, and sockets. In addition, observables are:\n- Compositional: Observables can be composed with higher-order combinators.\n- Lazy: Observables do not start emitting data until an observer has subscribed.\nview function when they're defined as public. The functionName would be the same as the variable name, and functionArgs will have a value when the type is a mapping or array (since these require an index value to query them).\nclose() will dispose any web3 subscription created when using a Subspace tracking method, however any subscription to an observable must still be unsubscribed manually. The npm package subsink can be used to clear all the observables' subscriptions at once.\nObservable type can be used to model push-based data sources such as DOM events, timer intervals, and sockets. In addition, observables are:\n- Compositional: Observables can be composed with higher-order combinators.\n- Lazy: Observables do not start emitting data until an observer has subscribed.\nview function when they're defined as public. The functionName would be the same as the variable name, and functionArgs will have a value when the type is a mapping or array (since these require an index value to query them).\nclose() will dispose any web3 subscription created when using a Subspace tracking method, however any subscription to an observable must still be unsubscribed manually. The npm package subsink can be used to clear all the observables' subscriptions at once.\nSubspace can be used in browser, node and native script environments. To get started install the package @embarklabs/subspace using npm or yarn by executing this command in your project directory:
# Using npm\nnpm install --save @embarklabs/subspace\n\n# Using yarn\nyarn add @embarklabs/subspace \n// ESM (might require babel / browserify)\nimport Subspace from '@embarklabs/subspace'; \n\n// CommonJS\nconst Subspace = require('@embarklabs/subspace'); \nTo interact with the EVM, Subspace requires a valid Web3 object, connected to a provider
\n\n\nconst subspace = new Subspace(web3);\nawait subspace.init();\nIn addition to the provider, Subspace also accepts an options object with settings that can change its behavior:
dbFilename - Name of the database where the information will be stored (default 'subspace.db')callInterval - Interval of time in milliseconds to query a contract/address to determine changes in state or balance. It’s only used with HttpProviders (default: undefined. Obtains data every block using the average block time as an interval).refreshLastNBlocks - Ignores last N blocks (from current block), stored in the local db and refresh them via a web3 subscription. Useful for possible reorgs (default: 12),disableSubscriptions - Subspace by default will attempt to use websocket subscriptions if the current provider supports them, otherwise it will use polling because it asumes the provider is an HttpProvider. This functionality can be disabled by passing true to this option. (default: undefined)Subspace provides a method to enhance your web3 Contract objects: subspace.contract(instance|{abi,address}). Calling this method will return a new contract object decorated with a .track() method for your contract view functions and events.
const myRxContract = subspace.contract(myContractInstance);\nYou can also instantiate a contract directly by passing the contract ABI and its address:
\n\n\nconst myRXContract = subspace.contract({abi: ...., address: '0x1234...CDEF'})\nOnce it’s initialized, you can use Subspace‘s methods to track the contract state, events and balances. These functions return RxJS Observables which you can subscribe to, and obtain and transform the observed data via operators.
\nObservable type can be used to model push-based data sources such as DOM events, timer intervals, and sockets. In addition, observables are:\n- Compositional: Observables can be composed with higher-order combinators.\n- Lazy: Observables do not start emitting data until an observer has subscribed.\nYou can track changes to a contract state variable, by specifying the view function and arguments to call and query the contract.
\n\n\nconst stateObservable$ = Contract.methods.functionName(functionArgs).track();\nview function when they're defined as public. The functionName would be the same as the variable name, and functionArgs will have a value when the type is a mapping or array (since these require an index value to query them).\nExample:
\n\n\nconst productTitle$ = ProductList.methods.products(0).track().map("title");\nproductTitle$.subscribe((title) => console.log("product title is " + title));\n\n\n// Alternative using Subspace low level API\nconst producTitle$ = subspace.trackProperty(ProductList, "products", [0], {from: web3.eth.defaultAccount});\n...\nThe subscription will be triggered whenever the title changes
\nYou can track events and react to their returned values.
\n\n\nconst eventObservable$ = Contract.event.eventName.track();\nExample:
\n\n\nconst rating$ = Product.events.Rating.track().map("rating")).pipe(map(x => parseInt(x)));\nrating$.subscribe((rating) => console.log("rating received: " + rating));\n\n\n// Alternative using Subspace low level API\nconst rating$ = subspace.trackEvent(Product, "Rating", {fromBlock: 0});\n...\nEvent Sourcing
\nYou can easily do event sourcing with subspace.
\nFor e.g: if you needed to get the average rating of the last 5 events:
\n\n\nimport { $average, $latest } from "@embarklabs/subspace";\n\nconst rating$ = Product.events.Rating.track().map("rating")).pipe(map(x => parseInt(x)));\n\nrating$.pipe($latest(5), $average()).subscribe((rating) => {\n console.log("average rating of the last 5 events is " + rating)\n});\nYou can also track changes in both ETH and ERC20 token balances for each mined block or time interval depending on the callInterval configured.
Tracking ETH balance in an address:
\n\n\nconst address = "0x0001020304050607080900010203040506070809";\n\nsubspace.trackBalance(address).subscribe((balance) => {\n console.log("ETH balance is ", balance)\n});\nTracking ETH balance in a Contract:
\n\n\nContract.trackBalance().subscribe((balance) => {\n console.log("ETH balance is ", balance)\n});\nTracking an ERC20 balance in a Contract:
\n\n\nconst tokenAddress = "0x744d70fdbe2ba4cf95131626614a1763df805b9e"; // SNT Address\n\nconst myBalanceObservable$ = Contract.trackBalance(tokenAddress);\nSubspace also provides a way to always receive the latest block object:
\n\n\nsubspace.trackBlock().subscribe(block => {\n console.log("The latest block data: ", block);\n});\nIf you don’t need all the block information, but just the block number, you can use instead:
\n\n\nsubspace.trackBlockNumber().subscribe(blockNumber => {\n console.log("The latest block number: ", blockNumber);\n});\nYou can also access the average block time. This takes in account only the last 10 blocks:
\n\n\nsubspace.trackAverageBlocktime().subscribe(blocktimeMS => {\n console.log("The average block time in milliseconds is: ", blocktimeMS);\n});\nFinally, if you want to obtain the most up to date median gas price:
\n\n\nsubspace.trackGasPrice().subscribe(gasPrice => {\n console.log("Gas price in wei", gasPrice);\n});\nOnce you have an Observable, you may receive a stream of data by creating a subscription. Subscriptions are triggered each time an observable emits a new value. These subscription receive a callback that must have a parameter which represents the value received from the observable (a contract state variable, an event, or the balance of an address); and they return an object representing the subscription.
Subscriptions can be disposed by executing the method unsubscribe() liberating the resource held by it:
const myBalanceObservable$ = subspace.trackBalance(address, tokenAddress);\nconst subscription = myBalanceObservable$.subscribe(value => { \n console.log("The balance is: ", value); \n});\n\n// ...\n\nsubscription.unsubscribe();\nIf Subspace is not needed anymore, you need can invoke close() to dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by Subspace during its normal execution, thus avoiding any potential memory leak.
subspace.close();\nclose() will dispose any web3 subscription created when using a Subspace tracking method, however any subscription to an observable must still be unsubscribed manually. The npm package subsink can be used to clear all the observables' subscriptions at once.\nSubspace can be used in browser, node and native script environments. To get started install the package @embarklabs/subspace using npm or yarn by executing this command in your project directory:
# Using npm\nnpm install --save @embarklabs/subspace\n\n# Using yarn\nyarn add @embarklabs/subspace \n// ESM (might require babel / browserify)\nimport Subspace from '@embarklabs/subspace'; \n\n// CommonJS\nconst Subspace = require('@embarklabs/subspace'); \nTo interact with the EVM, Subspace requires a valid Web3 object, connected to a provider
\n\n\nconst subspace = new Subspace(web3);\nawait subspace.init();\nIn addition to the provider, Subspace also accepts an options object with settings that can change its behavior:
dbFilename - Name of the database where the information will be stored (default 'subspace.db')callInterval - Interval of time in milliseconds to query a contract/address to determine changes in state or balance. It’s only used with HttpProviders (default: undefined. Obtains data every block using the average block time as an interval).refreshLastNBlocks - Ignores last N blocks (from current block), stored in the local db and refresh them via a web3 subscription. Useful for possible reorgs (default: 12),disableSubscriptions - Subspace by default will attempt to use websocket subscriptions if the current provider supports them, otherwise it will use polling because it asumes the provider is an HttpProvider. This functionality can be disabled by passing true to this option. (default: undefined)Subspace provides a method to enhance your web3 Contract objects: subspace.contract(instance|{abi,address}). Calling this method will return a new contract object decorated with a .track() method for your contract view functions and events.
const myRxContract = subspace.contract(myContractInstance);\nYou can also instantiate a contract directly by passing the contract ABI and its address:
\n\n\nconst myRXContract = subspace.contract({abi: ...., address: '0x1234...CDEF'})\nOnce it’s initialized, you can use Subspace‘s methods to track the contract state, events and balances. These functions return RxJS Observables which you can subscribe to, and obtain and transform the observed data via operators.
\nObservable type can be used to model push-based data sources such as DOM events, timer intervals, and sockets. In addition, observables are:\n- Compositional: Observables can be composed with higher-order combinators.\n- Lazy: Observables do not start emitting data until an observer has subscribed.\nYou can track changes to a contract state variable, by specifying the view function and arguments to call and query the contract.
\n\n\nconst stateObservable$ = Contract.methods.functionName(functionArgs).track();\nview function when they're defined as public. The functionName would be the same as the variable name, and functionArgs will have a value when the type is a mapping or array (since these require an index value to query them).\nExample:
\n\n\nconst productTitle$ = ProductList.methods.products(0).track().map("title");\nproductTitle$.subscribe((title) => console.log("product title is " + title));\n\n\n// Alternative using Subspace low level API\nconst producTitle$ = subspace.trackProperty(ProductList, "products", [0], {from: web3.eth.defaultAccount});\n...\nThe subscription will be triggered whenever the title changes
\nYou can track events and react to their returned values.
\n\n\nconst eventObservable$ = Contract.event.eventName.track();\nExample:
\n\n\nconst rating$ = Product.events.Rating.track().map("rating")).pipe(map(x => parseInt(x)));\nrating$.subscribe((rating) => console.log("rating received: " + rating));\n\n\n// Alternative using Subspace low level API\nconst rating$ = subspace.trackEvent(Product, "Rating", {fromBlock: 0});\n...\nEvent Sourcing
\nYou can easily do event sourcing with subspace.
\nFor e.g: if you needed to get the average rating of the last 5 events:
\n\n\nimport { $average, $latest } from "@embarklabs/subspace";\n\nconst rating$ = Product.events.Rating.track().map("rating")).pipe(map(x => parseInt(x)));\n\nrating$.pipe($latest(5), $average()).subscribe((rating) => {\n console.log("average rating of the last 5 events is " + rating)\n});\nYou can also track changes in both ETH and ERC20 token balances for each mined block or time interval depending on the callInterval configured.
Tracking ETH balance in an address:
\n\n\nconst address = "0x0001020304050607080900010203040506070809";\n\nsubspace.trackBalance(address).subscribe((balance) => {\n console.log("ETH balance is ", balance)\n});\nTracking ETH balance in a Contract:
\n\n\nContract.trackBalance().subscribe((balance) => {\n console.log("ETH balance is ", balance)\n});\nTracking an ERC20 balance in a Contract:
\n\n\nconst tokenAddress = "0x744d70fdbe2ba4cf95131626614a1763df805b9e"; // SNT Address\n\nconst myBalanceObservable$ = Contract.trackBalance(tokenAddress);\nSubspace also provides a way to always receive the latest block object:
\n\n\nsubspace.trackBlock().subscribe(block => {\n console.log("The latest block data: ", block);\n});\nIf you don’t need all the block information, but just the block number, you can use instead:
\n\n\nsubspace.trackBlockNumber().subscribe(blockNumber => {\n console.log("The latest block number: ", blockNumber);\n});\nYou can also access the average block time. This takes in account only the last 10 blocks:
\n\n\nsubspace.trackAverageBlocktime().subscribe(blocktimeMS => {\n console.log("The average block time in milliseconds is: ", blocktimeMS);\n});\nFinally, if you want to obtain the most up to date median gas price:
\n\n\nsubspace.trackGasPrice().subscribe(gasPrice => {\n console.log("Gas price in wei", gasPrice);\n});\nOnce you have an Observable, you may receive a stream of data by creating a subscription. Subscriptions are triggered each time an observable emits a new value. These subscription receive a callback that must have a parameter which represents the value received from the observable (a contract state variable, an event, or the balance of an address); and they return an object representing the subscription.
Subscriptions can be disposed by executing the method unsubscribe() liberating the resource held by it:
const myBalanceObservable$ = subspace.trackBalance(address, tokenAddress);\nconst subscription = myBalanceObservable$.subscribe(value => { \n console.log("The balance is: ", value); \n});\n\n// ...\n\nsubscription.unsubscribe();\nIf Subspace is not needed anymore, you need can invoke close() to dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by Subspace during its normal execution, thus avoiding any potential memory leak.
subspace.close();\nclose() will dispose any web3 subscription created when using a Subspace tracking method, however any subscription to an observable must still be unsubscribed manually. The npm package subsink can be used to clear all the observables' subscriptions at once.\nWelcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
\n$ hexo new "My New Post"\nMore info: Writing
\n$ hexo server\nMore info: Server
\n$ hexo generate\nMore info: Generating
\n$ hexo deploy\nMore info: Deployment
\n","site":{"data":{"sidebar":{"docs":[{"title":"How it works","path":"how-it-works.html"},{"title":"Getting Started","path":"getting-started.html","children":[{"title":"Installation","path":"#Installation"},{"title":"Importing the library","path":"#Importing-the-library"},{"title":"Connecting to a web3 provider","path":"#Connecting-to-a-web3-provider"},{"title":"Enhancing your contract objects","path":"#Enhancing-your-contract-objects"},{"title":"Reacting to data","path":"#Reacting-to-data"},{"title":"Tracking state","path":"#Tracking-state"},{"title":"Tracking events","path":"#Tracking-events"},{"title":"Tracking balances","path":"#Tracking-balances"},{"title":"Getting block data, gas prices and block time","path":"#Getting-block-data-gas-prices-and-block-time"},{"title":"Subscriptions","path":"#Subscriptions"},{"title":"Cleanup","path":"#Cleanup"}]},{"title":"Integrations","path":"empty","children":[{"title":"Overview","path":"integrations-overview.html"},{"title":"React","path":"react.html"},{"title":"Vue","path":"vue.html"},{"title":"Redux","path":"empty","children":[{"title":"redux","path":"redux.html"},{"title":"redux-observable","path":"redux-observable.html"}]},{"title":"reactive-graphql","path":"reactive-graphql.html"},{"title":"apollo-client","path":"apollo-client.html"}]},{"title":"Tutorial","path":"tutorial.html"},{"title":"API","path":"api.html","children":[{"title":"General","path":"#general"},{"title":"Contract methods","path":"#Contract-methods"},{"title":"Blocks, gas price and block time","path":"#Blocks-gas-price-and-block-time"},{"title":"Low level API for data tracking","path":"#Low-level-API-for-data-tracking"}]}]}}},"excerpt":"","more":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.
\n$ hexo new "My New Post"\nMore info: Writing
\n$ hexo server\nMore info: Server
\n$ hexo generate\nMore info: Generating
\n$ hexo deploy\nMore info: Deployment
\n"}],"PostAsset":[],"PostCategory":[],"PostTag":[],"Tag":[]}}