From dd2471b93b311a1837d139affe72da8ed535417b Mon Sep 17 00:00:00 2001 From: Richard Ramos Date: Tue, 11 Feb 2020 10:09:43 -0400 Subject: [PATCH] feat: update site --- 404.html | 6 +++--- api.html | 14 +++++++------- apollo-client.html | 10 +++++----- assets/js/10.0ba7844a.js | 1 + assets/js/11.e6fa739b.js | 1 + assets/js/13.72c7694a.js | 1 + assets/js/14.afbc70c1.js | 1 + assets/js/16.b64d2715.js | 1 + assets/js/17.6d75f10a.js | 1 + assets/js/18.801d9314.js | 1 + assets/js/19.91da0b43.js | 1 + assets/js/4.59e30da8.js | 1 + assets/js/8.34bb8c58.js | 1 + assets/js/app.eea690de.js | 14 ++++++++++++++ getting-started.html | 26 +++++++++++++++++++------- how-it-works.html | 10 +++++----- index.html | 10 +++++----- integrations-overview.html | 10 +++++----- integrations.html | 10 +++++----- react.html | 12 ++++++------ reactive-graphql.html | 12 ++++++------ redux-observable.html | 12 ++++++------ redux.html | 12 ++++++------ tutorial.html | 10 +++++----- vue.html | 10 +++++----- 25 files changed, 112 insertions(+), 76 deletions(-) create mode 100644 assets/js/10.0ba7844a.js create mode 100644 assets/js/11.e6fa739b.js create mode 100644 assets/js/13.72c7694a.js create mode 100644 assets/js/14.afbc70c1.js create mode 100644 assets/js/16.b64d2715.js create mode 100644 assets/js/17.6d75f10a.js create mode 100644 assets/js/18.801d9314.js create mode 100644 assets/js/19.91da0b43.js create mode 100644 assets/js/4.59e30da8.js create mode 100644 assets/js/8.34bb8c58.js create mode 100644 assets/js/app.eea690de.js diff --git a/404.html b/404.html index fbd9ff9..94ea5c2 100644 --- a/404.html +++ b/404.html @@ -11,11 +11,11 @@ - + -

404

How did we get here?
Take me home.
- +

404

Looks like we've got some broken links.
Take me home.
+ diff --git a/api.html b/api.html index 57e4f68..5602538 100644 --- a/api.html +++ b/api.html @@ -11,7 +11,7 @@ - + @@ -27,19 +27,19 @@ })(document, window, '//fathom.status.im/tracker.js', 'fathom'); fathom('set', 'siteId', 'DNONS'); fathom('trackPageview'); -
SUBSPACE

API

General

new Subspace(web3Provider [, options])

Constructor.

Parameters

  1. web3Provider - Object: a valid web3 provider.
  2. options - Object (optional): Options used to initialize Subspace -
    • dbFilename - String (optional): Name of the database where the information will be stored (default 'subspace.db')
    • callInterval - Number (optional): - Interval of time in milliseconds to poll a contract/address to determine changes in state or balance (default: undefined. Obtains data every block. If using a HttpProvider, the default is: 1000)
    • 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: false)

init()

Initializes Subspace

Returns Promise 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.

contract(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

Returns web3.eth.Contract object enhanced with .track() functions for methods and events.

Contract methods

myContract.events.MyEvent.track([options])

Track a contract event.

Parameters

  1. options - Object (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters +

API

General

new Subspace(web3Provider [, options])

Constructor.

Parameters

  1. web3Provider - Object: a valid web3 provider.
  2. options - Object (optional): Options used to initialize Subspace +
    • dbFilename - String (optional): Name of the database where the information will be stored (default 'subspace.db')
    • callInterval - Number (optional): - Interval of time in milliseconds to poll a contract/address to determine changes in state or balance (default: undefined. Obtains data every block. If using a HttpProvider, the default is: 1000)
    • 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

Returns Promise 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.

contract(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

Returns web3.eth.Contract object enhanced with .track() functions for methods and events.

Contract methods

myContract.events.MyEvent.track([options])

Track a contract event.

Parameters

  1. options - Object (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters
    • filter - 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.

Returns RxJS 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

  1. callOptions - 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).

Returns RxJS 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

  1. address - String: The address to get the balance of.
  2. 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.

Returns RxJS Observable which will stream a string containing the address balance.

Low level API for data tracking

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.

trackEvent(contractObject, eventName [, options])

Track a contract event.

Parameters

  1. contractObject - web3.eth.Contract: An already initialized contract object pointing to an address and containing a valid ABI.
  2. eventName - String: The name of the event to subscribe.
  3. options - Object (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters +
    • 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).

Returns RxJS 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

  1. address - String: The address to get the balance of.
  2. 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.

Returns RxJS Observable which will stream a string containing the address balance.

Blocks, gas price and block time

trackBlock()

Receive the block information for any new block. It's the reactive equivalent to web3.eth.getBlock("latest").

Returns RxJS 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.

Returns RxJS Observable with the latest block number

trackGasPrice()

Returns the current gas price oracle. It's the reactive equivalent to web3.eth.getGasPrice.

Returns RxJS Observable with the average gas price in wei.

trackAverageBlocktime()

Average block time of the last 10 blocks.

Returns RxJS Observable with the moving average block time of the last 10 blocks. The time is returned in milliseconds:

Low level API for data tracking

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.

trackEvent(contractObject, eventName [, options])

Track a contract event.

Parameters

  1. contractObject - web3.eth.Contract: An already initialized contract object pointing to an address and containing a valid ABI.
  2. eventName - String: The name of the event to subscribe.
  3. options - Object (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters
    • filter - 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.

Returns RxJS 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

  1. contractObject - web3.eth.Contract: An already initialized contract object pointing to an address and containing a valid ABI.
  2. functionName - String: Name of the function or variable whose values will be tracked.
  3. functionArgs - Array (optional): Array of arguments that the tracked function receives
  4. callOptions - 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).

Returns RxJS 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

  1. address - String: The address to get the balance of.
  2. 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.

Returns RxJS Observable which will stream a string containing the address balance.

trackLogs(options [, abi])

Tracks incoming logs, filtered by the given options.

Parameters

  1. options - Object (optional): web3 filter options object to limit the number of logs
    • address - 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']].
  2. 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.

Returns RxJS Observable which will stream the logs. If the inputs ABI is included in the call, the logs will be automatically decoded.

←

- + diff --git a/apollo-client.html b/apollo-client.html index 5d8a14d..74805cc 100644 --- a/apollo-client.html +++ b/apollo-client.html @@ -11,7 +11,7 @@ - + @@ -27,11 +27,11 @@ })(document, window, '//fathom.status.im/tracker.js', 'fathom'); fathom('set', 'siteId', 'DNONS'); fathom('trackPageview'); -
SUBSPACE

apollo-client

To use Subspace with apollo-client, a composed ApolloLink must be defined using the apollo-link-rxjs and reactive-graphl npm packages. Notice that the addTypename option of InMemoryCache must be set false.

import { ApolloClient } from "apollo-client";
+

apollo-client

To use Subspace with apollo-client, a composed ApolloLink must be defined using the apollo-link-rxjs and reactive-graphl npm packages. Notice that the addTypename option of InMemoryCache must be set false.

import { ApolloClient } from "apollo-client";
 import { InMemoryCache } from "apollo-cache-inmemory";
 import { ApolloLink } from "apollo-link";
 import { rxjs as rxJsLink } from "apollo-link-rxjs";
@@ -95,6 +95,6 @@ fathom('trackPageview');
       ←
        Tutorial→
- + diff --git a/assets/js/10.0ba7844a.js b/assets/js/10.0ba7844a.js new file mode 100644 index 0000000..8182241 --- /dev/null +++ b/assets/js/10.0ba7844a.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{217:function(t,s,a){"use strict";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"getting-started"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getting-started","aria-hidden":"true"}},[t._v("#")]),t._v(" Getting Started")]),t._v(" "),a("h2",{attrs:{id:"installation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[t._v("#")]),t._v(" Installation")]),t._v(" "),a("p",[a("strong",[t._v("Subspace")]),t._v(" can be used in browser, node and native script environments. To get started install the package "),a("code",[t._v("@embarklabs/subspace")]),t._v(" using "),a("code",[t._v("npm")]),t._v(" or "),a("code",[t._v("yarn")]),t._v(" by executing this command in your project directory:")]),t._v(" "),a("div",{staticClass:"language-bash line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-bash"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# Using npm")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" --save @embarklabs/subspace\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("# Using yarn")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("yarn")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" @embarklabs/subspace \n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br")])]),a("h2",{attrs:{id:"importing-the-library"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#importing-the-library","aria-hidden":"true"}},[t._v("#")]),t._v(" Importing the library")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ESM (might require babel / browserify)")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Subspace "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@embarklabs/subspace'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// CommonJS")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" Subspace "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@embarklabs/subspace'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br")])]),a("h2",{attrs:{id:"connecting-to-a-web3-provider"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#connecting-to-a-web3-provider","aria-hidden":"true"}},[t._v("#")]),t._v(" Connecting to a web3 provider")]),t._v(" "),a("p",[t._v("To interact with the EVM, "),a("strong",[t._v("Subspace")]),t._v(" requires a valid Web3 provider.")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" subspace "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Subspace")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("web3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("currentProvider"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br")])]),a("p",[t._v("In addition to the provider, "),a("code",[t._v("Subspace")]),t._v(" also accepts an "),a("code",[t._v("options")]),t._v(" object with settings that can change its behavior:")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("dbFilename")]),t._v(" - Name of the database where the information will be stored (default "),a("code",[t._v("'subspace.db'")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("callInterval")]),t._v(" - Interval of time in milliseconds to query a contract/address to determine changes in state or balance (default: "),a("code",[t._v("undefined")]),t._v(". Obtains data every block).")]),t._v(" "),a("li",[a("code",[t._v("refreshLastNBlocks")]),t._v(" - 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),")]),t._v(" "),a("li",[a("code",[t._v("disableSubscriptions")]),t._v(" - 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)")])]),t._v(" "),a("h2",{attrs:{id:"enhancing-your-contract-objects"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#enhancing-your-contract-objects","aria-hidden":"true"}},[t._v("#")]),t._v(" Enhancing your contract objects")]),t._v(" "),a("p",[t._v("Subspace provides a method to enhance your web3 Contract objects: "),a("code",[t._v("subspace.contract(instance|{abi,address})")]),t._v(". Calling this method will return a new contract object decorated with a "),a("code",[t._v(".track()")]),t._v(" method for your contract view functions and events.")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" myRxContract "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("contract")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("myContractInstance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br")])]),a("p",[t._v("You can also instantiate a contract directly by passing the contract ABI and its address:")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" myRXContract "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("contract")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("abi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" address"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'0x1234...CDEF'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br")])]),a("h2",{attrs:{id:"reacting-to-data"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#reacting-to-data","aria-hidden":"true"}},[t._v("#")]),t._v(" Reacting to data")]),t._v(" "),a("p",[t._v("Once it's initialized, you can use "),a("strong",[t._v("Subspace")]),t._v("'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.")]),t._v(" "),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("What is an Observable?")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("Observable")]),t._v(" type can be used to model push-based data sources such as DOM events, timer intervals, and sockets. In addition, observables are:")]),t._v(" "),a("ul",[a("li",[t._v("Compositional: Observables can be composed with higher-order combinators.")]),t._v(" "),a("li",[t._v("Lazy: Observables do not start emitting data until an observer has subscribed.")])])]),t._v(" "),a("h4",{attrs:{id:"further-read"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#further-read","aria-hidden":"true"}},[t._v("#")]),t._v(" Further read")]),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://rxjs-dev.firebaseapp.com/guide/observable",target:"_blank",rel:"noopener noreferrer"}},[t._v("RxJS Observables"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"tracking-state"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tracking-state","aria-hidden":"true"}},[t._v("#")]),t._v(" Tracking state")]),t._v(" "),a("p",[t._v("You can track changes to a contract state variable, by specifying the view function and arguments to call and query the contract.")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" stateObservable$ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Contract"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("methods"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("functionName")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("functionArgs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("track")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br")])]),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("Tracking the public variables of a contract")]),t._v(" "),a("p",[t._v("State variables implicity create a "),a("code",[t._v("view")]),t._v(" function when they're defined as "),a("code",[t._v("public")]),t._v(". The "),a("code",[t._v("functionName")]),t._v(" would be the same as the variable name, and "),a("code",[t._v("functionArgs")]),t._v(" will have a value when the type is a "),a("code",[t._v("mapping")]),t._v(" or "),a("code",[t._v("array")]),t._v(" (since these require an index value to query them).")])]),t._v(" "),a("p",[t._v("Example:")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" productTitle$ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" ProductList"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("methods"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("products")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("track")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"title"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nproductTitle$"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("title")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"product title is "')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" title"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Alternative using Subspace low level API")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" producTitle$ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trackProperty")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ProductList"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"products"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" web3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eth"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("defaultAccount"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br")])]),a("p",[t._v("The subscription will be triggered whenever the title changes")]),t._v(" "),a("h2",{attrs:{id:"tracking-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tracking-events","aria-hidden":"true"}},[t._v("#")]),t._v(" Tracking events")]),t._v(" "),a("p",[t._v("You can track events and react to their returned values.")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" eventObservable$ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Contract"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("event"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("eventName")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("track")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br")])]),a("p",[t._v("Example:")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rating$ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Product"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Rating")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("track")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"rating"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("pipe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("x")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("parseInt")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nrating$"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rating")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"rating received: "')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" rating"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Alternative using Subspace low level API")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rating$ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trackEvent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Product"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Rating"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("fromBlock"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br")])]),a("p",[a("strong",[t._v("Event Sourcing")])]),t._v(" "),a("p",[t._v("You can easily do event sourcing with subspace.")]),t._v(" "),a("p",[t._v("For e.g: if you needed to get the average rating of the last 5 events:")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" $average"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" $latest "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@embarklabs/subspace"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rating$ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Product"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Rating")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("track")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"rating"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("pipe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("x")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("parseInt")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nrating$"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("pipe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$latest")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("5")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$average")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("rating")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"average rating of the last 5 events is "')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("+")]),t._v(" rating"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br")])]),a("h2",{attrs:{id:"tracking-balances"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tracking-balances","aria-hidden":"true"}},[t._v("#")]),t._v(" Tracking balances")]),t._v(" "),a("p",[t._v("You can also track changes in both ETH and ERC20 token balances for each mined block or time interval depending on the "),a("code",[t._v("callInterval")]),t._v(" configured.")]),t._v(" "),a("p",[t._v("Tracking ETH balance in an address:")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" address "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0x0001020304050607080900010203040506070809"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nsubspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trackBalance")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("address"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("balance")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"ETH balance is "')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" balance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br")])]),a("p",[t._v("Tracking ETH balance in a Contract:")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("Contract"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trackBalance")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("balance")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"ETH balance is "')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" balance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br")])]),a("p",[t._v("Tracking an ERC20 balance in a Contract:")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" tokenAddress "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"0x744d70fdbe2ba4cf95131626614a1763df805b9e"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// SNT Address")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" myBalanceObservable$ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Contract"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trackBalance")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("tokenAddress"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br")])]),a("div",{staticClass:"warning custom-block"},[a("p",[t._v("Balances are returned as a string containing the value in "),a("em",[t._v("wei")]),t._v(".")])]),t._v(" "),a("h2",{attrs:{id:"getting-block-data-gas-prices-and-block-time"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getting-block-data-gas-prices-and-block-time","aria-hidden":"true"}},[t._v("#")]),t._v(" Getting block data, gas prices and block time")]),t._v(" "),a("p",[t._v("Subspace also provides a way to always receive the latest block object:")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trackBlock")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("block")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"The latest block data: "')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" block"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br")])]),a("p",[t._v("If you don't need all the block information, but just the block number, you can use instead:")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trackBlockNumber")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("blockNumber")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"The latest block number: "')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" blockNumber"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br")])]),a("p",[t._v("You can also access the average block time. This takes in account only the last 10 blocks:")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trackAverageBlocktime")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("blocktimeMS")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"The average block time in milliseconds is: "')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" blocktimeMS"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br")])]),a("p",[t._v("Finally, if you want to obtain the most up to date median gas price:")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trackGasPrice")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("gasPrice")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Gas price in wei"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" gasPrice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br")])]),a("h2",{attrs:{id:"subscriptions"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#subscriptions","aria-hidden":"true"}},[t._v("#")]),t._v(" Subscriptions")]),t._v(" "),a("p",[t._v("Once you have an "),a("code",[t._v("Observable")]),t._v(", 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.")]),t._v(" "),a("p",[t._v("Subscriptions can be disposed by executing the method "),a("code",[t._v("unsubscribe()")]),t._v(" liberating the resource held by it:")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" myBalanceObservable$ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trackBalance")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("address"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" tokenAddress"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" subscription "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" myBalanceObservable$"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"The balance is: "')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" \n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\nsubscription"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("unsubscribe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br")])]),a("h4",{attrs:{id:"further-read-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#further-read-2","aria-hidden":"true"}},[t._v("#")]),t._v(" Further read")]),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://rxjs-dev.firebaseapp.com/guide/subscription",target:"_blank",rel:"noopener noreferrer"}},[t._v("RxJS Subscriptions"),a("OutboundLink")],1)])]),t._v(" "),a("h2",{attrs:{id:"cleanup"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cleanup","aria-hidden":"true"}},[t._v("#")]),t._v(" Cleanup")]),t._v(" "),a("p",[t._v("If "),a("strong",[t._v("Subspace")]),t._v(" is not needed anymore, you need can invoke "),a("code",[t._v("close()")]),t._v(" to dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by "),a("strong",[t._v("Subspace")]),t._v(" during its normal execution, thus avoiding any potential memory leak.")]),t._v(" "),a("div",{staticClass:"language- line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("subspace.close();\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br")])]),a("div",{staticClass:"warning custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("What about subscriptions created with our observables?")]),t._v(" "),a("p",[t._v("Any subscription created via the tracking methods must be unsubscribed manually (in the current version).")])])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/11.e6fa739b.js b/assets/js/11.e6fa739b.js new file mode 100644 index 0000000..b59332b --- /dev/null +++ b/assets/js/11.e6fa739b.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{219:function(t,e,r){"use strict";r.r(e);var o=r(0),s=Object(o.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h1",{attrs:{id:"integrations-with-other-frameworks"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#integrations-with-other-frameworks","aria-hidden":"true"}},[t._v("#")]),t._v(" Integrations with other frameworks")]),t._v(" "),r("p",[r("strong",[t._v("Subspace")]),t._v(" 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 "),r("strong",[t._v("Subspace")]),t._v(" with various frontend frameworks and libraries")])])}),[],!1,null,null,null);e.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/13.72c7694a.js b/assets/js/13.72c7694a.js new file mode 100644 index 0000000..f948260 --- /dev/null +++ b/assets/js/13.72c7694a.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{221:function(t,s,a){"use strict";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"react"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#react","aria-hidden":"true"}},[t._v("#")]),t._v(" React")]),t._v(" "),a("p",[t._v("We provide a higher-order component to connect to enhance presentational components to react to any observable (not limited to those generated by "),a("strong",[t._v("Subspace")]),t._v(").")]),t._v(" "),a("h3",{attrs:{id:"usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#usage","aria-hidden":"true"}},[t._v("#")]),t._v(" Usage")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" observe "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@embarklabs/subspace/react'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" ObserverComponent "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("observe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("WrappedComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br")])]),a("p",[t._v("This enhanced component will subscribe to any observable property it receives when the component is mounted and automatically unsubscribe when the component is unmounted.")]),t._v(" "),a("h3",{attrs:{id:"example"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#example","aria-hidden":"true"}},[t._v("#")]),t._v(" Example")]),t._v(" "),a("div",{staticClass:"tip custom-block"},[a("p",[t._v("This example is available in "),a("a",{attrs:{href:"https://github.com/embark-framework/subspace/tree/master/examples/react-example1",target:"_blank",rel:"noopener noreferrer"}},[t._v("Github"),a("OutboundLink")],1)])]),t._v(" "),a("h4",{attrs:{id:"mycomponentobserver-js"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mycomponentobserver-js","aria-hidden":"true"}},[t._v("#")]),t._v(" MyComponentObserver.js")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" React "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"react"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" ReactDOM "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'react-dom'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("observe"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@embarklabs/subspace/react"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("MyComponent")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("eventData"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Handle initial state when no data is available")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("eventData"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("p"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("No data"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("p"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n \n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("p"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("eventData"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("someReturnedValue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("p"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// MyComponent will now observe any observable prop it receives")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// and update its state whenever the observable emits an event")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("observe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("MyComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br"),a("span",{staticClass:"line-number"},[t._v("11")]),a("br"),a("span",{staticClass:"line-number"},[t._v("12")]),a("br"),a("span",{staticClass:"line-number"},[t._v("13")]),a("br"),a("span",{staticClass:"line-number"},[t._v("14")]),a("br"),a("span",{staticClass:"line-number"},[t._v("15")]),a("br"),a("span",{staticClass:"line-number"},[t._v("16")]),a("br")])]),a("h4",{attrs:{id:"app-js"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#app-js","aria-hidden":"true"}},[t._v("#")]),t._v(" App.js")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" React"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("Component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'react'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" ReactDOM "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'react-dom'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Subspace "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@embarklabs/subspace'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" MyComponentObserver "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./MyComponentObserver'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("App")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Component")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n state "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n myEventObservable$"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("componentDidMount")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MyContractInstance "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// TODO: obtain a web3.eth.contract instance")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" subspace "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Subspace")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wss://localhost:8545"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Use a valid provider (geth, parity, infura...)")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n \n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" myEventObservable$ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trackEvent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("MyContractInstance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"MyEvent"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("filter"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" fromBlock"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setState")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" myEventObservable$ "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("MyComponentObserver eventData"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("myEventObservable$"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" App"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br"),a("span",{staticClass:"line-number"},[t._v("11")]),a("br"),a("span",{staticClass:"line-number"},[t._v("12")]),a("br"),a("span",{staticClass:"line-number"},[t._v("13")]),a("br"),a("span",{staticClass:"line-number"},[t._v("14")]),a("br"),a("span",{staticClass:"line-number"},[t._v("15")]),a("br"),a("span",{staticClass:"line-number"},[t._v("16")]),a("br"),a("span",{staticClass:"line-number"},[t._v("17")]),a("br"),a("span",{staticClass:"line-number"},[t._v("18")]),a("br"),a("span",{staticClass:"line-number"},[t._v("19")]),a("br"),a("span",{staticClass:"line-number"},[t._v("20")]),a("br"),a("span",{staticClass:"line-number"},[t._v("21")]),a("br"),a("span",{staticClass:"line-number"},[t._v("22")]),a("br"),a("span",{staticClass:"line-number"},[t._v("23")]),a("br"),a("span",{staticClass:"line-number"},[t._v("24")]),a("br"),a("span",{staticClass:"line-number"},[t._v("25")]),a("br"),a("span",{staticClass:"line-number"},[t._v("26")]),a("br"),a("span",{staticClass:"line-number"},[t._v("27")]),a("br")])]),a("div",{staticClass:"warning custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("Handling Contract Objects")]),t._v(" "),a("p",[t._v("The variable "),a("code",[t._v("MyContractInstance")]),t._v(" is a "),a("code",[t._v("web3.eth.Contract")]),t._v(" object pointing to a deployed contract address. You can use a DApp framework like "),a("a",{attrs:{href:"https://embark.status.im/docs/contracts_javascript.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Embark"),a("OutboundLink")],1),t._v(" to easily import that contract instance: "),a("code",[t._v("import { MyContract } from './embarkArtifacts/contracts';")]),t._v(", or use web3.js directly (just like in the example "),a("a",{attrs:{href:"https://github.com/embarklabs/subspace/blob/master/examples/react/src/MyContract.js#L36-L42",target:"_blank",rel:"noopener noreferrer"}},[t._v("source code"),a("OutboundLink")],1),t._v(")")])]),t._v(" "),a("h4",{attrs:{id:"index-js"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#index-js","aria-hidden":"true"}},[t._v("#")]),t._v(" index.js")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" React "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'react'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" ReactDOM "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'react-dom'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" App "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./App'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nReactDOM"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("App "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'root'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br")])]),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" observe "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@embarklabs/subspace/react"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("ProductComponent")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" maxRating"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" minRating"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" averageRating "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("ul"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("li"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("b"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("minimum rating"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("b"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("minRating"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("li"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("li"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("b"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("maximum rating"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("b"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("maxRating"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("li"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("li"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("b"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("average rating"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("b"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("averageRating"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("li"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("ul"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" ReactiveProductComponent "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("observe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ProductComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" Product "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("contract")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("abi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" address"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" rating$ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" Product"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("events"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Rating"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("track")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"rating"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("pipe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("x")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("parseInt")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("x"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nReactDOM"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("ReactiveProductComponent\n maxRating"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("rating$"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("pipe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$max")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n minRating"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("rating$"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("pipe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$min")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n averageRating"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("rating$"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("pipe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$average")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getElementById")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello-example'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br"),a("span",{staticClass:"line-number"},[t._v("11")]),a("br"),a("span",{staticClass:"line-number"},[t._v("12")]),a("br"),a("span",{staticClass:"line-number"},[t._v("13")]),a("br"),a("span",{staticClass:"line-number"},[t._v("14")]),a("br"),a("span",{staticClass:"line-number"},[t._v("15")]),a("br"),a("span",{staticClass:"line-number"},[t._v("16")]),a("br"),a("span",{staticClass:"line-number"},[t._v("17")]),a("br"),a("span",{staticClass:"line-number"},[t._v("18")]),a("br"),a("span",{staticClass:"line-number"},[t._v("19")]),a("br"),a("span",{staticClass:"line-number"},[t._v("20")]),a("br"),a("span",{staticClass:"line-number"},[t._v("21")]),a("br"),a("span",{staticClass:"line-number"},[t._v("22")]),a("br"),a("span",{staticClass:"line-number"},[t._v("23")]),a("br")])])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/14.afbc70c1.js b/assets/js/14.afbc70c1.js new file mode 100644 index 0000000..a33b8c9 --- /dev/null +++ b/assets/js/14.afbc70c1.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{222:function(s,t,a){"use strict";a.r(t);var n=a(0),e=Object(n.a)({},(function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[a("h1",{attrs:{id:"reactive-graphql"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#reactive-graphql","aria-hidden":"true"}},[s._v("#")]),s._v(" reactive-graphql")]),s._v(" "),a("p",[s._v("Using "),a("code",[s._v("reactive-graphql")]),s._v(" you can execute GraphQL queries against "),a("strong",[s._v("Subspace")]),s._v(" observables after you create your own type definitions and resolvers.")]),s._v(" "),a("h3",{attrs:{id:"example"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#example","aria-hidden":"true"}},[s._v("#")]),s._v(" Example")]),s._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" Subspace "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("require")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'@embarklabs/subspace'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" MyContract "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("require")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'./MyContract'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" pluck "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("require")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'rxjs/operators'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" makeExecutableSchema "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("require")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"graphql-tools"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" gql "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("require")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"graphql-tag"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" graphql "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("require")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v('"reactive-graphql"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[s._v("run")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("async")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=>")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" subspace "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("new")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[s._v("Subspace")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("web3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),s._v("currentProvider"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// Use a valid provider (geth, parity, infura...)")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("await")]),s._v(" subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" MyContractInstance "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("...")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[s._v("// TODO: obtain a web3.eth.contract instance")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" typeDefs "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token template-string"}},[a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[s._v("`")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("\n type MyEvent {\n someValue: Int\n anotherValue: String\n }\n type Query {\n myEvents: MyEvent!\n }\n ")]),a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[s._v("`")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" resolvers "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n Query"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[s._v("myEvents")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=>")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("return")]),s._v(" subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("trackEvent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("MyContractInstance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'MyEvent'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" filter"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" fromBlock"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(":")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[s._v("1")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" schema "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("makeExecutableSchema")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v(" typeDefs"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" resolvers "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" query "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" gql"),a("span",{pre:!0,attrs:{class:"token template-string"}},[a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[s._v("`")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("\n query {\n myEvents {\n someValue\n anotherValue\n }\n }\n ")]),a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[s._v("`")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[s._v("const")]),s._v(" stream "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("graphql")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("schema"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" query"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("pipe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("pluck")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'data'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(",")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[s._v("'myEvents'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n stream"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("subscribe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[s._v("data")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=>")]),s._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("{")]),s._v("\n console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("log")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),s._v("data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("}")]),s._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[s._v("run")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[s._v(";")]),s._v("\n")])]),s._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[s._v("1")]),a("br"),a("span",{staticClass:"line-number"},[s._v("2")]),a("br"),a("span",{staticClass:"line-number"},[s._v("3")]),a("br"),a("span",{staticClass:"line-number"},[s._v("4")]),a("br"),a("span",{staticClass:"line-number"},[s._v("5")]),a("br"),a("span",{staticClass:"line-number"},[s._v("6")]),a("br"),a("span",{staticClass:"line-number"},[s._v("7")]),a("br"),a("span",{staticClass:"line-number"},[s._v("8")]),a("br"),a("span",{staticClass:"line-number"},[s._v("9")]),a("br"),a("span",{staticClass:"line-number"},[s._v("10")]),a("br"),a("span",{staticClass:"line-number"},[s._v("11")]),a("br"),a("span",{staticClass:"line-number"},[s._v("12")]),a("br"),a("span",{staticClass:"line-number"},[s._v("13")]),a("br"),a("span",{staticClass:"line-number"},[s._v("14")]),a("br"),a("span",{staticClass:"line-number"},[s._v("15")]),a("br"),a("span",{staticClass:"line-number"},[s._v("16")]),a("br"),a("span",{staticClass:"line-number"},[s._v("17")]),a("br"),a("span",{staticClass:"line-number"},[s._v("18")]),a("br"),a("span",{staticClass:"line-number"},[s._v("19")]),a("br"),a("span",{staticClass:"line-number"},[s._v("20")]),a("br"),a("span",{staticClass:"line-number"},[s._v("21")]),a("br"),a("span",{staticClass:"line-number"},[s._v("22")]),a("br"),a("span",{staticClass:"line-number"},[s._v("23")]),a("br"),a("span",{staticClass:"line-number"},[s._v("24")]),a("br"),a("span",{staticClass:"line-number"},[s._v("25")]),a("br"),a("span",{staticClass:"line-number"},[s._v("26")]),a("br"),a("span",{staticClass:"line-number"},[s._v("27")]),a("br"),a("span",{staticClass:"line-number"},[s._v("28")]),a("br"),a("span",{staticClass:"line-number"},[s._v("29")]),a("br"),a("span",{staticClass:"line-number"},[s._v("30")]),a("br"),a("span",{staticClass:"line-number"},[s._v("31")]),a("br"),a("span",{staticClass:"line-number"},[s._v("32")]),a("br"),a("span",{staticClass:"line-number"},[s._v("33")]),a("br"),a("span",{staticClass:"line-number"},[s._v("34")]),a("br"),a("span",{staticClass:"line-number"},[s._v("35")]),a("br"),a("span",{staticClass:"line-number"},[s._v("36")]),a("br"),a("span",{staticClass:"line-number"},[s._v("37")]),a("br"),a("span",{staticClass:"line-number"},[s._v("38")]),a("br"),a("span",{staticClass:"line-number"},[s._v("39")]),a("br"),a("span",{staticClass:"line-number"},[s._v("40")]),a("br"),a("span",{staticClass:"line-number"},[s._v("41")]),a("br"),a("span",{staticClass:"line-number"},[s._v("42")]),a("br"),a("span",{staticClass:"line-number"},[s._v("43")]),a("br"),a("span",{staticClass:"line-number"},[s._v("44")]),a("br"),a("span",{staticClass:"line-number"},[s._v("45")]),a("br"),a("span",{staticClass:"line-number"},[s._v("46")]),a("br"),a("span",{staticClass:"line-number"},[s._v("47")]),a("br"),a("span",{staticClass:"line-number"},[s._v("48")]),a("br"),a("span",{staticClass:"line-number"},[s._v("49")]),a("br"),a("span",{staticClass:"line-number"},[s._v("50")]),a("br")])]),a("div",{staticClass:"tip custom-block"},[a("p",[s._v("This example is available in "),a("a",{attrs:{href:"https://github.com/embarklabs/subspace/tree/master/examples/reactive-graphql",target:"_blank",rel:"noopener noreferrer"}},[s._v("Github"),a("OutboundLink")],1)])])])}),[],!1,null,null,null);t.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/16.b64d2715.js b/assets/js/16.b64d2715.js new file mode 100644 index 0000000..d801cd9 --- /dev/null +++ b/assets/js/16.b64d2715.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{224:function(t,s,a){"use strict";a.r(s);var e=a(0),n=Object(e.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"redux-observable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#redux-observable","aria-hidden":"true"}},[t._v("#")]),t._v(" redux-observable")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://redux-observable.js.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("redux-observables"),a("OutboundLink")],1),t._v(" can be used to manage side effects via "),a("code",[t._v("Epics")]),t._v(" (their core primitive to receive and create stream of actions). "),a("strong",[t._v("Subspace")]),t._v(" can be configured inside these epics.")]),t._v(" "),a("p",[t._v("It's recommended to compose these epics by using "),a("a",{attrs:{href:"https://www.learnrxjs.io/operators/transformation/mergemap.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("mergeMap"),a("OutboundLink")],1),t._v(" or "),a("a",{attrs:{href:"https://www.learnrxjs.io/operators/transformation/switchmap.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("switchMap"),a("OutboundLink")],1),t._v(" operators.")]),t._v(" "),a("p",[t._v("Here's an example on how to use "),a("strong",[t._v("Subspace")]),t._v(" to subscribe to an Event when the action "),a("code",[t._v("SOME_ACTION")]),t._v(" is dispatched, and then it will trigger "),a("code",[t._v("myAction")]),t._v(" when the observable emits a value.")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("myEpic")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("action$")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v("\n action$"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("pipe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("ofType")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"SOME_ACTION"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Execute when the action type is 'INIT'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("switchMap")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("action")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v("\n subspace\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trackEvent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("MyContract"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"MyEventName"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" filter"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" fromBlock"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("pipe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("myAction"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Trigger redux action: MY_ACTION with the eventData")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br"),a("span",{staticClass:"line-number"},[t._v("11")]),a("br"),a("span",{staticClass:"line-number"},[t._v("12")]),a("br"),a("span",{staticClass:"line-number"},[t._v("13")]),a("br"),a("span",{staticClass:"line-number"},[t._v("14")]),a("br"),a("span",{staticClass:"line-number"},[t._v("15")]),a("br")])]),a("div",{staticClass:"tip custom-block"},[a("p",[t._v("An example is available in "),a("a",{attrs:{href:"https://github.com/embarklabs/subspace/tree/master/examples/redux-observable",target:"_blank",rel:"noopener noreferrer"}},[t._v("Github"),a("OutboundLink")],1)])]),t._v(" "),a("h4",{attrs:{id:"further-read"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#further-read","aria-hidden":"true"}},[t._v("#")]),t._v(" Further read")]),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://redux-observable.js.org/docs/basics/Epics.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Epics"),a("OutboundLink")],1)])])])}),[],!1,null,null,null);s.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/17.6d75f10a.js b/assets/js/17.6d75f10a.js new file mode 100644 index 0000000..9020a6a --- /dev/null +++ b/assets/js/17.6d75f10a.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{225:function(t,s,a){"use strict";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"redux"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#redux","aria-hidden":"true"}},[t._v("#")]),t._v(" redux")]),t._v(" "),a("p",[a("strong",[t._v("Subspace")]),t._v(" can be used with "),a("a",{attrs:{href:"https://redux.js.org/",target:"_blank",rel:"noopener noreferrer"}},[t._v("redux"),a("OutboundLink")],1),t._v(". "),a("strong",[t._v("Subspace")]),t._v(" returns "),a("a",{attrs:{href:"https://rxjs-dev.firebaseapp.com/guide/observable",target:"_blank",rel:"noopener noreferrer"}},[a("code",[t._v("Observables")]),a("OutboundLink")],1),t._v(", 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.")]),t._v(" "),a("h3",{attrs:{id:"example"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#example","aria-hidden":"true"}},[t._v("#")]),t._v(" Example")]),t._v(" "),a("p",[t._v("Here's a simple example on how to setup "),a("strong",[t._v("Subspace")]),t._v(" to work with "),a("code",[t._v("redux")]),t._v(":")]),t._v(" "),a("div",{staticClass:"tip custom-block"},[a("p",[t._v("This example is available in "),a("a",{attrs:{href:"https://github.com/embarklabs/subspace/tree/master/examples/redux",target:"_blank",rel:"noopener noreferrer"}},[t._v("Github"),a("OutboundLink")],1)])]),t._v(" "),a("h4",{attrs:{id:"index-js"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#index-js","aria-hidden":"true"}},[t._v("#")]),t._v(" index.js")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" store "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./store'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" web3 "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./web3'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Subspace "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@embarklabs/subspace'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" myAction "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./actions'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("run")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" MyContractInstance "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// TODO: obtain a web3.eth.contract instance")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" subspace "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Subspace")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"ws://localhost:8545"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Use a valid provider (geth, parity, infura...)")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n \n subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trackEvent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("MyContractInstance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"MyEvent"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("filter"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" fromBlock"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscribe")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("eventData")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n store"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("dispatch")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("myAction")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("eventData"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("run")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br"),a("span",{staticClass:"line-number"},[t._v("11")]),a("br"),a("span",{staticClass:"line-number"},[t._v("12")]),a("br"),a("span",{staticClass:"line-number"},[t._v("13")]),a("br"),a("span",{staticClass:"line-number"},[t._v("14")]),a("br"),a("span",{staticClass:"line-number"},[t._v("15")]),a("br"),a("span",{staticClass:"line-number"},[t._v("16")]),a("br"),a("span",{staticClass:"line-number"},[t._v("17")]),a("br"),a("span",{staticClass:"line-number"},[t._v("18")]),a("br")])]),a("div",{staticClass:"warning custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("Handling Contract Objects")]),t._v(" "),a("p",[t._v("The variable "),a("code",[t._v("MyContractInstance")]),t._v(" is a "),a("code",[t._v("web3.eth.Contract")]),t._v(" object pointing to a deployed contract address. You can use a DApp framework like "),a("a",{attrs:{href:"https://embark.status.im/docs/contracts_javascript.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("Embark"),a("OutboundLink")],1),t._v(" to easily import that contract instance: "),a("code",[t._v("import { MyContract } from './embarkArtifacts/contracts';")]),t._v(", or use web3.js directly (just like in the example "),a("a",{attrs:{href:"https://github.com/embarklabs/subspace/blob/master/examples/redux/src/MyContract.js#L36-L42",target:"_blank",rel:"noopener noreferrer"}},[t._v("source code"),a("OutboundLink")],1),t._v(")")])]),t._v(" "),a("h4",{attrs:{id:"store-js"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#store-js","aria-hidden":"true"}},[t._v("#")]),t._v(" store.js")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" createStore "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'redux'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("myReducer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./reducer'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" store "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("createStore")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("myReducer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br")])]),a("h4",{attrs:{id:"reducer-js"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#reducer-js","aria-hidden":"true"}},[t._v("#")]),t._v(" reducer.js")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("MY_ACTION")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./constants"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" initialState "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" \n data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("myReducer")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("state "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" initialState"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" action")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("switch")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("action"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("case")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("MY_ACTION")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" data"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" action"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eventData "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" state"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br"),a("span",{staticClass:"line-number"},[t._v("11")]),a("br"),a("span",{staticClass:"line-number"},[t._v("12")]),a("br"),a("span",{staticClass:"line-number"},[t._v("13")]),a("br"),a("span",{staticClass:"line-number"},[t._v("14")]),a("br")])]),a("h4",{attrs:{id:"constants-js"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#constants-js","aria-hidden":"true"}},[t._v("#")]),t._v(" constants.js")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("MY_ACTION")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MY_ACTION'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br")])]),a("h4",{attrs:{id:"actions-js"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#actions-js","aria-hidden":"true"}},[t._v("#")]),t._v(" actions.js")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("MY_ACTION")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./constants.js'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("myAction")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("eventData")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("type"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("MY_ACTION")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" eventData"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br")])]),a("div",{staticClass:"tip custom-block"},[a("p",{staticClass:"custom-block-title"},[t._v("Using React and Redux")]),t._v(" "),a("p",[t._v("A practical example can also be found in "),a("code",[t._v("examples/react-redux")]),t._v(".")])])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/18.801d9314.js b/assets/js/18.801d9314.js new file mode 100644 index 0000000..2ebaffd --- /dev/null +++ b/assets/js/18.801d9314.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{226:function(e,t,a){"use strict";a.r(t);var r=a(0),s=Object(r.a)({},(function(){var e=this.$createElement,t=this._self._c||e;return t("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[t("h1",{attrs:{id:"creating-a-reactive-dhapp-with-react-and-subspace"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#creating-a-reactive-dhapp-with-react-and-subspace","aria-hidden":"true"}},[this._v("#")]),this._v(" Creating a reactive ÐApp with React and Subspace")]),this._v(" "),t("p",[this._v("See example DApp at "),t("a",{attrs:{href:"https://github.com/embark-framework/subspace/tree/master/examples/react-example1",target:"_blank",rel:"noopener noreferrer"}},[this._v("https://github.com/embark-framework/subspace/tree/master/examples/react-example1"),t("OutboundLink")],1)])])}),[],!1,null,null,null);t.default=s.exports}}]); \ No newline at end of file diff --git a/assets/js/19.91da0b43.js b/assets/js/19.91da0b43.js new file mode 100644 index 0000000..12b2477 --- /dev/null +++ b/assets/js/19.91da0b43.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{227:function(t,s,a){"use strict";a.r(s);var n=a(0),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"vue"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vue","aria-hidden":"true"}},[t._v("#")]),t._v(" Vue")]),t._v(" "),a("p",[t._v("Vue provides the official npm package "),a("code",[t._v("vue-rx")]),t._v(" that provides RxJS integration, which simplifies the use of Subspace with Vue.js")]),t._v(" "),a("h3",{attrs:{id:"example"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#example","aria-hidden":"true"}},[t._v("#")]),t._v(" Example")]),t._v(" "),a("div",{staticClass:"tip custom-block"},[a("p",[t._v("This example is available in "),a("a",{attrs:{href:"https://github.com/embark-framework/subspace/tree/master/examples/vue",target:"_blank",rel:"noopener noreferrer"}},[t._v("Github"),a("OutboundLink")],1)])]),t._v(" "),a("h4",{attrs:{id:"mycomponent-vue"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mycomponent-vue","aria-hidden":"true"}},[t._v("#")]),t._v(" MyComponent.vue")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("template"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("ul v"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"!!eventData$"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("li"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("b"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("someValue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("b"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("eventData$"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("someValue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("li"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("li"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("b"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("anotherValue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("b"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("eventData$"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("anotherValue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("li"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("ul"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("template"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'MyComponent'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n props"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n eventData"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" Object\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("subscriptions")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// provide Rx observables")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n eventData$"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eventData\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br"),a("span",{staticClass:"line-number"},[t._v("11")]),a("br"),a("span",{staticClass:"line-number"},[t._v("12")]),a("br"),a("span",{staticClass:"line-number"},[t._v("13")]),a("br"),a("span",{staticClass:"line-number"},[t._v("14")]),a("br"),a("span",{staticClass:"line-number"},[t._v("15")]),a("br"),a("span",{staticClass:"line-number"},[t._v("16")]),a("br"),a("span",{staticClass:"line-number"},[t._v("17")]),a("br"),a("span",{staticClass:"line-number"},[t._v("18")]),a("br"),a("span",{staticClass:"line-number"},[t._v("19")]),a("br"),a("span",{staticClass:"line-number"},[t._v("20")]),a("br")])]),a("h4",{attrs:{id:"app-vue"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#app-vue","aria-hidden":"true"}},[t._v("#")]),t._v(" App.vue")]),t._v(" "),a("div",{staticClass:"language-js line-numbers-mode"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("template"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("div id"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"app"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("button v"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("on"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("click"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"createTrx"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("Create a Transaction"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("button"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("MyComponent v"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("bind"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v("event"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("data"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"myEventObservable$"')]),t._v(" v"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"!!myEventObservable$"')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("div"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("template"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" MyComponent "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./components/MyComponent.vue'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Subspace "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@embarklabs/subspace"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'app'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n myEventObservable$"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n MyContractInstance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("created")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("async")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("MyContractInstance "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// TODO: obtain a web3.eth.contract instance")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" subspace "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Subspace")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wss://localhost:8545"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Use a valid provider (geth, parity, infura...)")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("await")]),t._v(" subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("myEventObservable$ "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" subspace"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("trackEvent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("MyContractInstance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"MyEvent"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("filter"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" fromBlock"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" \n methods"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("createTrx")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("MyContractInstance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("methods\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("myFunction")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("send")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" web3"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("eth"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("defaultAccount "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n components"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n MyComponent\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])]),t._v(" "),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br"),a("span",{staticClass:"line-number"},[t._v("11")]),a("br"),a("span",{staticClass:"line-number"},[t._v("12")]),a("br"),a("span",{staticClass:"line-number"},[t._v("13")]),a("br"),a("span",{staticClass:"line-number"},[t._v("14")]),a("br"),a("span",{staticClass:"line-number"},[t._v("15")]),a("br"),a("span",{staticClass:"line-number"},[t._v("16")]),a("br"),a("span",{staticClass:"line-number"},[t._v("17")]),a("br"),a("span",{staticClass:"line-number"},[t._v("18")]),a("br"),a("span",{staticClass:"line-number"},[t._v("19")]),a("br"),a("span",{staticClass:"line-number"},[t._v("20")]),a("br"),a("span",{staticClass:"line-number"},[t._v("21")]),a("br"),a("span",{staticClass:"line-number"},[t._v("22")]),a("br"),a("span",{staticClass:"line-number"},[t._v("23")]),a("br"),a("span",{staticClass:"line-number"},[t._v("24")]),a("br"),a("span",{staticClass:"line-number"},[t._v("25")]),a("br"),a("span",{staticClass:"line-number"},[t._v("26")]),a("br"),a("span",{staticClass:"line-number"},[t._v("27")]),a("br"),a("span",{staticClass:"line-number"},[t._v("28")]),a("br"),a("span",{staticClass:"line-number"},[t._v("29")]),a("br"),a("span",{staticClass:"line-number"},[t._v("30")]),a("br"),a("span",{staticClass:"line-number"},[t._v("31")]),a("br"),a("span",{staticClass:"line-number"},[t._v("32")]),a("br"),a("span",{staticClass:"line-number"},[t._v("33")]),a("br"),a("span",{staticClass:"line-number"},[t._v("34")]),a("br"),a("span",{staticClass:"line-number"},[t._v("35")]),a("br"),a("span",{staticClass:"line-number"},[t._v("36")]),a("br"),a("span",{staticClass:"line-number"},[t._v("37")]),a("br"),a("span",{staticClass:"line-number"},[t._v("38")]),a("br"),a("span",{staticClass:"line-number"},[t._v("39")]),a("br")])]),a("h4",{attrs:{id:"further-read"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#further-read","aria-hidden":"true"}},[t._v("#")]),t._v(" Further read")]),t._v(" "),a("ul",[a("li",[a("a",{attrs:{href:"https://www.npmjs.com/package/vue-rx",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-rx"),a("OutboundLink")],1)])])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/4.59e30da8.js b/assets/js/4.59e30da8.js new file mode 100644 index 0000000..c07b9f6 --- /dev/null +++ b/assets/js/4.59e30da8.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{205:function(e,t,a){e.exports=a.p+"assets/img/d1.daa5485a.png"},206:function(e,t,a){e.exports=a.p+"assets/img/d2.de512122.png"},207:function(e,t,a){e.exports=a.p+"assets/img/d3.123a2e18.png"},208:function(e,t,a){e.exports=a.p+"assets/img/d4.81f850ef.png"},218:function(e,t,a){"use strict";a.r(t);var s=a(0),r=Object(s.a)({},(function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[s("h1",{attrs:{id:"how-it-works"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#how-it-works","aria-hidden":"true"}},[e._v("#")]),e._v(" How it works?")]),e._v(" "),s("h3",{attrs:{id:"setup"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setup","aria-hidden":"true"}},[e._v("#")]),e._v(" Setup")]),e._v(" "),s("p",[s("img",{attrs:{src:a(205),alt:"First Usage - Setup"}})]),e._v(" "),s("ol",[s("li",[e._v("A ÐApp requests "),s("code",[e._v("Subspace")]),e._v(" to track an event, property, or balance.")]),e._v(" "),s("li",[s("code",[e._v("Subspace")]),e._v(" creates a observable for that event, and a web3 subscription to retrieve events from the chain")]),e._v(" "),s("li",[e._v("The ÐApp subscribes to the observable to receive events.")])]),e._v(" "),s("h3",{attrs:{id:"receiving-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#receiving-events","aria-hidden":"true"}},[e._v("#")]),e._v(" Receiving events")]),e._v(" "),s("p",[s("img",{attrs:{src:a(206),alt:"First Usage - Receiving events"}}),e._v("\nDepending on the filter parameters used to track the events, once an event is found, it is stored in "),s("code",[e._v("localStorage")]),e._v(" and it is also pushed to the observable which delivers it to the ÐApp subscription.")]),e._v(" "),s("h3",{attrs:{id:"tracking-already-known-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tracking-already-known-events","aria-hidden":"true"}},[e._v("#")]),e._v(" Tracking already known events")]),e._v(" "),s("p",[e._v("After restarting the ÐApp, either by executing it again in case of a console application or refreshing the browser the behavior of "),s("code",[e._v("Subspace")]),e._v(" will change:\n"),s("img",{attrs:{src:a(207),alt:"Second Usage - Setup"}})]),e._v(" "),s("ol",[s("li",[e._v("The Dapp will request "),s("code",[e._v("Subspace")]),e._v(" to track an event it already knows, creating an observable and subscription for that event")]),e._v(" "),s("li",[e._v("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.")])]),e._v(" "),s("p",[s("img",{attrs:{src:a(208),alt:"Second Usage - Receiving events"}}),e._v("\nThe 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")])])}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/8.34bb8c58.js b/assets/js/8.34bb8c58.js new file mode 100644 index 0000000..e8b9d1d --- /dev/null +++ b/assets/js/8.34bb8c58.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{228:function(e,t,a){"use strict";a.r(t);var o=a(0),r=Object(o.a)({},(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[a("h1",{attrs:{id:"api"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#api","aria-hidden":"true"}},[e._v("#")]),e._v(" API")]),e._v(" "),a("h2",{attrs:{id:"general"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#general","aria-hidden":"true"}},[e._v("#")]),e._v(" General")]),e._v(" "),a("h3",{attrs:{id:"new-subspace-web3provider-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-subspace-web3provider-options","aria-hidden":"true"}},[e._v("#")]),e._v(" "),a("code",[e._v("new Subspace(web3Provider [, options])")])]),e._v(" "),a("p",[e._v("Constructor.")]),e._v(" "),a("p",[a("strong",[e._v("Parameters")])]),e._v(" "),a("ol",[a("li",[a("code",[e._v("web3Provider")]),e._v(" - "),a("code",[e._v("Object")]),e._v(": a valid web3 provider.")]),e._v(" "),a("li",[a("code",[e._v("options")]),e._v(" - "),a("code",[e._v("Object")]),e._v(" (optional): Options used to initialize Subspace\n"),a("ul",[a("li",[a("code",[e._v("dbFilename")]),e._v(" - "),a("code",[e._v("String")]),e._v(" (optional): Name of the database where the information will be stored (default "),a("code",[e._v("'subspace.db'")]),e._v(")")]),e._v(" "),a("li",[a("code",[e._v("callInterval")]),e._v(" - "),a("code",[e._v("Number")]),e._v(" (optional): - Interval of time in milliseconds to poll a contract/address to determine changes in state or balance (default: "),a("code",[e._v("undefined")]),e._v(". Obtains data every block. If using a HttpProvider, the default is: "),a("code",[e._v("1000")]),e._v(")")]),e._v(" "),a("li",[a("code",[e._v("refreshLastNBlocks")]),e._v(" - 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),")]),e._v(" "),a("li",[a("code",[e._v("disableSubscriptions")]),e._v(" - 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)")])])])]),e._v(" "),a("h3",{attrs:{id:"init"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#init","aria-hidden":"true"}},[e._v("#")]),e._v(" "),a("code",[e._v("init()")])]),e._v(" "),a("p",[e._v("Initializes "),a("strong",[e._v("Subspace")])]),e._v(" "),a("p",[a("strong",[e._v("Returns")]),e._v(" "),a("code",[e._v("Promise")]),e._v(" that once it's resolved, will mean that "),a("strong",[e._v("Subspace")]),e._v(" is available to use")]),e._v(" "),a("h3",{attrs:{id:"close"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#close","aria-hidden":"true"}},[e._v("#")]),e._v(" "),a("code",[e._v("close()")])]),e._v(" "),a("p",[e._v("Dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by "),a("strong",[e._v("Subspace")]),e._v(" during its normal execution.")]),e._v(" "),a("h3",{attrs:{id:"contract-instance-abi-address"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contract-instance-abi-address","aria-hidden":"true"}},[e._v("#")]),e._v(" "),a("code",[e._v("contract(instance|{abi,address})")])]),e._v(" "),a("p",[e._v("Adds a "),a("code",[e._v("track")]),e._v(" method to the web3 contract objects. You can obtain this functionality by passing a "),a("code",[e._v("web3.eth.Contract")]),e._v(" instance, or the "),a("code",[e._v("abi")]),e._v(" and "),a("code",[e._v("address")]),e._v(" of your contract")]),e._v(" "),a("p",[a("strong",[e._v("Returns")]),e._v(" "),a("code",[e._v("web3.eth.Contract")]),e._v(" object enhanced with "),a("code",[e._v(".track()")]),e._v(" functions for methods and events.")]),e._v(" "),a("h2",{attrs:{id:"contract-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#contract-methods","aria-hidden":"true"}},[e._v("#")]),e._v(" Contract methods")]),e._v(" "),a("h3",{attrs:{id:"mycontract-events-myevent-track-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mycontract-events-myevent-track-options","aria-hidden":"true"}},[e._v("#")]),e._v(" "),a("code",[e._v("myContract.events.MyEvent.track([options])")])]),e._v(" "),a("p",[e._v("Track a contract event.")]),e._v(" "),a("p",[a("strong",[e._v("Parameters")])]),e._v(" "),a("ol",[a("li",[a("code",[e._v("options")]),e._v(" - "),a("code",[e._v("Object")]),e._v(" (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters\n"),a("ul",[a("li",[a("code",[e._v("filter")]),e._v(" - "),a("code",[e._v("Object")]),e._v(" (optional): Lets you filter events by indexed parameters, e.g. "),a("code",[e._v("{filter: {myNumber: [12,13]}}")]),e._v(" means all events where "),a("code",[e._v('"myNumber"')]),e._v(" is "),a("code",[e._v("12")]),e._v(" or "),a("code",[e._v("13")]),e._v(".")]),e._v(" "),a("li",[a("code",[e._v("fromBlock")]),e._v(" - "),a("code",[e._v("Number")]),e._v(" (optional): The block number from which to get events on.")]),e._v(" "),a("li",[a("code",[e._v("toBlock")]),e._v(" - "),a("code",[e._v("Number")]),e._v(" (optional): The block number to get events up to (Defaults to "),a("code",[e._v('"latest"')]),e._v(")")]),e._v(" "),a("li",[a("code",[e._v("topics")]),e._v(" - "),a("code",[e._v("Array")]),e._v(" (optional): This allows you to manually set the topics for the event filter. If given the filter property and event signature, ("),a("code",[e._v("topic[0]")]),e._v(") will not be set automatically.")])])])]),e._v(" "),a("p",[a("strong",[e._v("Returns")]),e._v(" "),a("code",[e._v("RxJS Observable")]),e._v(" which will stream the event "),a("code",[e._v("returnValues")]),e._v(".")]),e._v(" "),a("h3",{attrs:{id:"mycontract-methods-mymethod-param1-track-calloptions"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mycontract-methods-mymethod-param1-track-calloptions","aria-hidden":"true"}},[e._v("#")]),e._v(" "),a("code",[e._v("myContract.methods.myMethod([param1[, ...]]).track([callOptions])")])]),e._v(" "),a("p",[e._v("Track a constant function / contract state variable on each block mined, or depending on the "),a("code",[e._v("callInterval")]),e._v(" option used during "),a("strong",[e._v("Subspace")]),e._v(" initialization.")]),e._v(" "),a("p",[a("strong",[e._v("Parameters")])]),e._v(" "),a("ol",[a("li",[a("code",[e._v("callOptions")]),e._v(" - "),a("code",[e._v("Object")]),e._v(" (optional): The options used for calling.\n"),a("ul",[a("li",[a("code",[e._v("from")]),e._v(" - "),a("code",[e._v("String")]),e._v(" (optional): The address the call “transaction” should be made from.")]),e._v(" "),a("li",[a("code",[e._v("gasPrice")]),e._v(" - "),a("code",[e._v("String")]),e._v(" (optional): The gas price in wei to use for this call “transaction”.")]),e._v(" "),a("li",[a("code",[e._v("gas")]),e._v(" - "),a("code",[e._v("Number")]),e._v(" (optional): The maximum gas provided for this call “transaction” (gas limit).")])])])]),e._v(" "),a("p",[a("strong",[e._v("Returns")]),e._v(" "),a("code",[e._v("RxJS Observable")]),e._v(" which will stream the function / variable values. Data type will depend on the contract function invoked.")]),e._v(" "),a("h3",{attrs:{id:"mycontract-trackbalance-address-tokenaddress"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mycontract-trackbalance-address-tokenaddress","aria-hidden":"true"}},[e._v("#")]),e._v(" "),a("code",[e._v("myContract.trackBalance(address [, tokenAddress])")])]),e._v(" "),a("p",[e._v("Track a contract's balance changes for an address on each block mined, or depending on the "),a("code",[e._v("callInterval")]),e._v(" option used during "),a("strong",[e._v("Subspace")]),e._v(" initialization.")]),e._v(" "),a("p",[a("strong",[e._v("Parameters")])]),e._v(" "),a("ol",[a("li",[a("code",[e._v("address")]),e._v(" - "),a("code",[e._v("String")]),e._v(": The address to get the balance of.")]),e._v(" "),a("li",[a("code",[e._v("tokenAddress")]),e._v(" - "),a("code",[e._v("String")]),e._v(" (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.")])]),e._v(" "),a("p",[a("strong",[e._v("Returns")]),e._v(" "),a("code",[e._v("RxJS Observable")]),e._v(" which will stream a string containing the address balance.")]),e._v(" "),a("h2",{attrs:{id:"blocks-gas-price-and-block-time"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#blocks-gas-price-and-block-time","aria-hidden":"true"}},[e._v("#")]),e._v(" Blocks, gas price and block time")]),e._v(" "),a("h3",{attrs:{id:"trackblock"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#trackblock","aria-hidden":"true"}},[e._v("#")]),e._v(" "),a("code",[e._v("trackBlock()")])]),e._v(" "),a("p",[e._v("Receive the block information for any new block. It's the reactive equivalent to "),a("code",[e._v('web3.eth.getBlock("latest")')]),e._v(".")]),e._v(" "),a("p",[a("strong",[e._v("Returns")]),e._v(" "),a("code",[e._v("RxJS Observable")]),e._v(" which will stream a block object for the latest block received")]),e._v(" "),a("h3",{attrs:{id:"trackblocknumber"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#trackblocknumber","aria-hidden":"true"}},[e._v("#")]),e._v(" "),a("code",[e._v("trackBlockNumber()")])]),e._v(" "),a("p",[e._v("Returns the latest block number. It's the reactive equivalent to "),a("code",[e._v("web3.eth.getBlockNumber")]),e._v(".")]),e._v(" "),a("p",[a("strong",[e._v("Returns")]),e._v(" "),a("code",[e._v("RxJS Observable")]),e._v(" with the latest block number")]),e._v(" "),a("h3",{attrs:{id:"trackgasprice"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#trackgasprice","aria-hidden":"true"}},[e._v("#")]),e._v(" "),a("code",[e._v("trackGasPrice()")])]),e._v(" "),a("p",[e._v("Returns the current gas price oracle. It's the reactive equivalent to "),a("code",[e._v("web3.eth.getGasPrice")]),e._v(".")]),e._v(" "),a("p",[a("strong",[e._v("Returns")]),e._v(" "),a("code",[e._v("RxJS Observable")]),e._v(" with the average gas price in wei.")]),e._v(" "),a("h3",{attrs:{id:"trackaverageblocktime"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#trackaverageblocktime","aria-hidden":"true"}},[e._v("#")]),e._v(" "),a("code",[e._v("trackAverageBlocktime()")])]),e._v(" "),a("p",[e._v("Average block time of the last 10 blocks.")]),e._v(" "),a("p",[a("strong",[e._v("Returns")]),e._v(" "),a("code",[e._v("RxJS Observable")]),e._v(" with the moving average block time of the last 10 blocks. The time is returned in milliseconds:")]),e._v(" "),a("h2",{attrs:{id:"low-level-api-for-data-tracking"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#low-level-api-for-data-tracking","aria-hidden":"true"}},[e._v("#")]),e._v(" Low level API for data tracking")]),e._v(" "),a("p",[e._v("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.")]),e._v(" "),a("h3",{attrs:{id:"trackevent-contractobject-eventname-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#trackevent-contractobject-eventname-options","aria-hidden":"true"}},[e._v("#")]),e._v(" "),a("code",[e._v("trackEvent(contractObject, eventName [, options])")])]),e._v(" "),a("p",[e._v("Track a contract event.")]),e._v(" "),a("p",[a("strong",[e._v("Parameters")])]),e._v(" "),a("ol",[a("li",[a("code",[e._v("contractObject")]),e._v(" - "),a("code",[e._v("web3.eth.Contract")]),e._v(": An already initialized contract object pointing to an address and containing a valid ABI.")]),e._v(" "),a("li",[a("code",[e._v("eventName")]),e._v(" - "),a("code",[e._v("String")]),e._v(": The name of the event to subscribe.")]),e._v(" "),a("li",[a("code",[e._v("options")]),e._v(" - "),a("code",[e._v("Object")]),e._v(" (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters\n"),a("ul",[a("li",[a("code",[e._v("filter")]),e._v(" - "),a("code",[e._v("Object")]),e._v(" (optional): Lets you filter events by indexed parameters, e.g. "),a("code",[e._v("{filter: {myNumber: [12,13]}}")]),e._v(" means all events where "),a("code",[e._v('"myNumber"')]),e._v(" is "),a("code",[e._v("12")]),e._v(" or "),a("code",[e._v("13")]),e._v(".")]),e._v(" "),a("li",[a("code",[e._v("fromBlock")]),e._v(" - "),a("code",[e._v("Number")]),e._v(" (optional): The block number from which to get events on.")]),e._v(" "),a("li",[a("code",[e._v("toBlock")]),e._v(" - "),a("code",[e._v("Number")]),e._v(" (optional): The block number to get events up to (Defaults to "),a("code",[e._v('"latest"')]),e._v(")")]),e._v(" "),a("li",[a("code",[e._v("topics")]),e._v(" - "),a("code",[e._v("Array")]),e._v(" (optional): This allows you to manually set the topics for the event filter. If given the filter property and event signature, ("),a("code",[e._v("topic[0]")]),e._v(") will not be set automatically.")])])])]),e._v(" "),a("p",[a("strong",[e._v("Returns")]),e._v(" "),a("code",[e._v("RxJS Observable")]),e._v(" which will stream the event "),a("code",[e._v("returnValues")]),e._v(".")]),e._v(" "),a("h3",{attrs:{id:"trackproperty-contractobject-functionname-functionargs-calloptions"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#trackproperty-contractobject-functionname-functionargs-calloptions","aria-hidden":"true"}},[e._v("#")]),e._v(" "),a("code",[e._v("trackProperty(contractObject, functionName [, functionArgs] [, callOptions])")])]),e._v(" "),a("p",[e._v("Track a constant function / contract state variable on each block mined, or depending on the "),a("code",[e._v("callInterval")]),e._v(" option used during "),a("strong",[e._v("Subspace")]),e._v(" initialization.")]),e._v(" "),a("p",[a("strong",[e._v("Parameters")])]),e._v(" "),a("ol",[a("li",[a("code",[e._v("contractObject")]),e._v(" - "),a("code",[e._v("web3.eth.Contract")]),e._v(": An already initialized contract object pointing to an address and containing a valid ABI.")]),e._v(" "),a("li",[a("code",[e._v("functionName")]),e._v(" - "),a("code",[e._v("String")]),e._v(": Name of the function or variable whose values will be tracked.")]),e._v(" "),a("li",[a("code",[e._v("functionArgs")]),e._v(" - "),a("code",[e._v("Array")]),e._v(" (optional): Array of arguments that the tracked function receives")]),e._v(" "),a("li",[a("code",[e._v("callOptions")]),e._v(" - "),a("code",[e._v("Object")]),e._v(" (optional): The options used for calling.\n"),a("ul",[a("li",[a("code",[e._v("from")]),e._v(" - "),a("code",[e._v("String")]),e._v(" (optional): The address the call “transaction” should be made from.")]),e._v(" "),a("li",[a("code",[e._v("gasPrice")]),e._v(" - "),a("code",[e._v("String")]),e._v(" (optional): The gas price in wei to use for this call “transaction”.")]),e._v(" "),a("li",[a("code",[e._v("gas")]),e._v(" - "),a("code",[e._v("Number")]),e._v(" (optional): The maximum gas provided for this call “transaction” (gas limit).")])])])]),e._v(" "),a("p",[a("strong",[e._v("Returns")]),e._v(" "),a("code",[e._v("RxJS Observable")]),e._v(" which will stream the function / variable values. Data type will depend on the contract function invoked.")]),e._v(" "),a("h3",{attrs:{id:"trackbalance-address-tokenaddress"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#trackbalance-address-tokenaddress","aria-hidden":"true"}},[e._v("#")]),e._v(" "),a("code",[e._v("trackBalance(address [, tokenAddress])")])]),e._v(" "),a("p",[e._v("Track balance changes for an address on each block mined, or depending on the "),a("code",[e._v("callInterval")]),e._v(" option used during "),a("strong",[e._v("Subspace")]),e._v(" initialization.")]),e._v(" "),a("p",[a("strong",[e._v("Parameters")])]),e._v(" "),a("ol",[a("li",[a("code",[e._v("address")]),e._v(" - "),a("code",[e._v("String")]),e._v(": The address to get the balance of.")]),e._v(" "),a("li",[a("code",[e._v("tokenAddress")]),e._v(" - "),a("code",[e._v("String")]),e._v(" (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.")])]),e._v(" "),a("p",[a("strong",[e._v("Returns")]),e._v(" "),a("code",[e._v("RxJS Observable")]),e._v(" which will stream a string containing the address balance.")]),e._v(" "),a("h3",{attrs:{id:"tracklogs-options-abi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tracklogs-options-abi","aria-hidden":"true"}},[e._v("#")]),e._v(" "),a("code",[e._v("trackLogs(options [, abi])")])]),e._v(" "),a("p",[e._v("Tracks incoming logs, filtered by the given options.")]),e._v(" "),a("p",[a("strong",[e._v("Parameters")])]),e._v(" "),a("ol",[a("li",[a("code",[e._v("options")]),e._v(" - "),a("code",[e._v("Object")]),e._v(" (optional): web3 filter options object to limit the number of logs\n"),a("ul",[a("li",[a("code",[e._v("address")]),e._v(" - "),a("code",[e._v("String|Array")]),e._v(" (optional): An address or a list of addresses to only get logs from particular account(s).")]),e._v(" "),a("li",[a("code",[e._v("fromBlock")]),e._v(" - "),a("code",[e._v("Number")]),e._v(" (optional): The block number from which to get events on.")]),e._v(" "),a("li",[a("code",[e._v("topics")]),e._v(" - "),a("code",[e._v("Array")]),e._v(" (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']].")])])]),e._v(" "),a("li",[a("code",[e._v("abi")]),e._v(" - "),a("code",[e._v("Array")]),e._v(" (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.")])]),e._v(" "),a("p",[a("strong",[e._v("Returns")]),e._v(" "),a("code",[e._v("RxJS Observable")]),e._v(" which will stream the logs. If the inputs ABI is included in the call, the logs will be automatically decoded.")])])}),[],!1,null,null,null);t.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/app.eea690de.js b/assets/js/app.eea690de.js new file mode 100644 index 0000000..d258163 --- /dev/null +++ b/assets/js/app.eea690de.js @@ -0,0 +1,14 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);!function(t){function e(e){for(var r,a,s=e[0],c=e[1],u=e[2],f=0,p=[];f
'};function o(t,e,n){return tn?n:t}function i(t){return 100*(-1+t)}n.configure=function(t){var e,n;for(e in t)void 0!==(n=t[e])&&t.hasOwnProperty(e)&&(r[e]=n);return this},n.status=null,n.set=function(t){var e=n.isStarted();t=o(t,r.minimum,1),n.status=1===t?null:t;var c=n.render(!e),u=c.querySelector(r.barSelector),l=r.speed,f=r.easing;return c.offsetWidth,a((function(e){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),s(u,function(t,e,n){var o;return(o="translate3d"===r.positionUsing?{transform:"translate3d("+i(t)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+i(t)+"%,0)"}:{"margin-left":i(t)+"%"}).transition="all "+e+"ms "+n,o}(t,l,f)),1===t?(s(c,{transition:"none",opacity:1}),c.offsetWidth,setTimeout((function(){s(c,{transition:"all "+l+"ms linear",opacity:0}),setTimeout((function(){n.remove(),e()}),l)}),l)):setTimeout(e,l)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var t=function(){setTimeout((function(){n.status&&(n.trickle(),t())}),r.trickleSpeed)};return r.trickle&&t(),this},n.done=function(t){return t||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(t){var e=n.status;return e?("number"!=typeof t&&(t=(1-e)*o(Math.random()*e,.1,.95)),e=o(e+t,0,.994),n.set(e)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},t=0,e=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===e&&n.start(),t++,e++,r.always((function(){0==--e?(t=0,n.done()):n.set((t-e)/t)})),this):this},n.render=function(t){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var e=document.createElement("div");e.id="nprogress",e.innerHTML=r.template;var o,a=e.querySelector(r.barSelector),c=t?"-100":i(n.status||0),l=document.querySelector(r.parent);return s(a,{transition:"all 0 linear",transform:"translate3d("+c+"%,0,0)"}),r.showSpinner||(o=e.querySelector(r.spinnerSelector))&&p(o),l!=document.body&&u(l,"nprogress-custom-parent"),l.appendChild(e),e},n.remove=function(){l(document.documentElement,"nprogress-busy"),l(document.querySelector(r.parent),"nprogress-custom-parent");var t=document.getElementById("nprogress");t&&p(t)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var t=document.body.style,e="WebkitTransform"in t?"Webkit":"MozTransform"in t?"Moz":"msTransform"in t?"ms":"OTransform"in t?"O":"";return e+"Perspective"in t?"translate3d":e+"Transform"in t?"translate":"margin"};var a=function(){var t=[];function e(){var n=t.shift();n&&n(e)}return function(n){t.push(n),1==t.length&&e()}}(),s=function(){var t=["Webkit","O","Moz","ms"],e={};function n(n){return n=n.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(t,e){return e.toUpperCase()})),e[n]||(e[n]=function(e){var n=document.body.style;if(e in n)return e;for(var r,o=t.length,i=e.charAt(0).toUpperCase()+e.slice(1);o--;)if((r=t[o]+i)in n)return r;return e}(n))}function r(t,e,r){e=n(e),t.style[e]=r}return function(t,e){var n,o,i=arguments;if(2==i.length)for(n in e)void 0!==(o=e[n])&&e.hasOwnProperty(n)&&r(t,n,o);else r(t,i[1],i[2])}}();function c(t,e){return("string"==typeof t?t:f(t)).indexOf(" "+e+" ")>=0}function u(t,e){var n=f(t),r=n+e;c(n,e)||(t.className=r.substring(1))}function l(t,e){var n,r=f(t);c(t,e)&&(n=r.replace(" "+e+" "," "),t.className=n.substring(1,n.length-1))}function f(t){return(" "+(t.className||"")+" ").replace(/\s+/gi," ")}function p(t){t&&t.parentNode&&t.parentNode.removeChild(t)}return n})?r.call(e,n,e,t):r)||(t.exports=o)},function(t,e){var n="Expected a function",r=NaN,o="[object Symbol]",i=/^\s+|\s+$/g,a=/^[-+]0x[0-9a-f]+$/i,s=/^0b[01]+$/i,c=/^0o[0-7]+$/i,u=parseInt,l="object"==typeof global&&global&&global.Object===Object&&global,f="object"==typeof self&&self&&self.Object===Object&&self,p=l||f||Function("return this")(),d=Object.prototype.toString,h=Math.max,v=Math.min,m=function(){return p.Date.now()};function y(t,e,r){var o,i,a,s,c,u,l=0,f=!1,p=!1,d=!0;if("function"!=typeof t)throw new TypeError(n);function y(e){var n=o,r=i;return o=i=void 0,l=e,s=t.apply(r,n)}function _(t){var n=t-u;return void 0===u||n>=e||n<0||p&&t-l>=a}function w(){var t=m();if(_(t))return k(t);c=setTimeout(w,function(t){var n=e-(t-u);return p?v(n,a-(t-l)):n}(t))}function k(t){return c=void 0,d&&o?y(t):(o=i=void 0,s)}function $(){var t=m(),n=_(t);if(o=arguments,i=this,u=t,n){if(void 0===c)return function(t){return l=t,c=setTimeout(w,e),f?y(t):s}(u);if(p)return c=setTimeout(w,e),y(u)}return void 0===c&&(c=setTimeout(w,e)),s}return e=b(e)||0,g(r)&&(f=!!r.leading,a=(p="maxWait"in r)?h(b(r.maxWait)||0,e):a,d="trailing"in r?!!r.trailing:d),$.cancel=function(){void 0!==c&&clearTimeout(c),l=0,o=u=i=c=void 0},$.flush=function(){return void 0===c?s:k(m())},$}function g(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function b(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&d.call(t)==o}(t))return r;if(g(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=g(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(i,"");var n=s.test(t);return n||c.test(t)?u(t.slice(2),n?2:8):a.test(t)?r:+t}t.exports=function(t,e,r){var o=!0,i=!0;if("function"!=typeof t)throw new TypeError(n);return g(r)&&(o="leading"in r?!!r.leading:o,i="trailing"in r?!!r.trailing:i),y(t,e,{leading:o,maxWait:e,trailing:i})}},function(t,e,n){t.exports=n(8)},function(t,e,n){Promise.all([n.e(0),n.e(20)]).then(n.t.bind(null,9,7))},function(t,e,n){},function(t,e,n){"use strict";var r=n(1);n.n(r).a},function(t,e,n){"use strict";n.r(e); +/*! + * Vue.js v2.6.10 + * (c) 2014-2019 Evan You + * Released under the MIT License. + */ +var r=Object.freeze({});function o(t){return null==t}function i(t){return null!=t}function a(t){return!0===t}function s(t){return"string"==typeof t||"number"==typeof t||"symbol"==typeof t||"boolean"==typeof t}function c(t){return null!==t&&"object"==typeof t}var u=Object.prototype.toString;function l(t){return"[object Object]"===u.call(t)}function f(t){return"[object RegExp]"===u.call(t)}function p(t){var e=parseFloat(String(t));return e>=0&&Math.floor(e)===e&&isFinite(t)}function d(t){return i(t)&&"function"==typeof t.then&&"function"==typeof t.catch}function h(t){return null==t?"":Array.isArray(t)||l(t)&&t.toString===u?JSON.stringify(t,null,2):String(t)}function v(t){var e=parseFloat(t);return isNaN(e)?t:e}function m(t,e){for(var n=Object.create(null),r=t.split(","),o=0;o-1)return t.splice(n,1)}}var b=Object.prototype.hasOwnProperty;function _(t,e){return b.call(t,e)}function w(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var k=/-(\w)/g,$=w((function(t){return t.replace(k,(function(t,e){return e?e.toUpperCase():""}))})),x=w((function(t){return t.charAt(0).toUpperCase()+t.slice(1)})),C=/\B([A-Z])/g,A=w((function(t){return t.replace(C,"-$1").toLowerCase()}));var O=Function.prototype.bind?function(t,e){return t.bind(e)}:function(t,e){function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}return n._length=t.length,n};function S(t,e){e=e||0;for(var n=t.length-e,r=new Array(n);n--;)r[n]=t[n+e];return r}function E(t,e){for(var n in e)t[n]=e[n];return t}function j(t){for(var e={},n=0;n0,Z=X&&X.indexOf("edge/")>0,Q=(X&&X.indexOf("android"),X&&/iphone|ipad|ipod|ios/.test(X)||"ios"===G),tt=(X&&/chrome\/\d+/.test(X),X&&/phantomjs/.test(X),X&&X.match(/firefox\/(\d+)/)),et={}.watch,nt=!1;if(W)try{var rt={};Object.defineProperty(rt,"passive",{get:function(){nt=!0}}),window.addEventListener("test-passive",null,rt)}catch(t){}var ot=function(){return void 0===H&&(H=!W&&!K&&"undefined"!=typeof global&&(global.process&&"server"===global.process.env.VUE_ENV)),H},it=W&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function at(t){return"function"==typeof t&&/native code/.test(t.toString())}var st,ct="undefined"!=typeof Symbol&&at(Symbol)&&"undefined"!=typeof Reflect&&at(Reflect.ownKeys);st="undefined"!=typeof Set&&at(Set)?Set:function(){function t(){this.set=Object.create(null)}return t.prototype.has=function(t){return!0===this.set[t]},t.prototype.add=function(t){this.set[t]=!0},t.prototype.clear=function(){this.set=Object.create(null)},t}();var ut=T,lt=0,ft=function(){this.id=lt++,this.subs=[]};ft.prototype.addSub=function(t){this.subs.push(t)},ft.prototype.removeSub=function(t){g(this.subs,t)},ft.prototype.depend=function(){ft.target&&ft.target.addDep(this)},ft.prototype.notify=function(){var t=this.subs.slice();for(var e=0,n=t.length;e-1)if(i&&!_(o,"default"))a=!1;else if(""===a||a===A(t)){var c=Bt(String,o.type);(c<0||s0&&(le((u=t(u,(n||"")+"_"+c))[0])&&le(f)&&(r[l]=gt(f.text+u[0].text),u.shift()),r.push.apply(r,u)):s(u)?le(f)?r[l]=gt(f.text+u):""!==u&&r.push(gt(u)):le(u)&&le(f)?r[l]=gt(f.text+u.text):(a(e._isVList)&&i(u.tag)&&o(u.key)&&i(n)&&(u.key="__vlist"+n+"_"+c+"__"),r.push(u)));return r}(t):void 0}function le(t){return i(t)&&i(t.text)&&!1===t.isComment}function fe(t,e){if(t){for(var n=Object.create(null),r=ct?Reflect.ownKeys(t):Object.keys(t),o=0;o0,a=t?!!t.$stable:!i,s=t&&t.$key;if(t){if(t._normalized)return t._normalized;if(a&&n&&n!==r&&s===n.$key&&!i&&!n.$hasNormal)return n;for(var c in o={},t)t[c]&&"$"!==c[0]&&(o[c]=ve(e,c,t[c]))}else o={};for(var u in e)u in o||(o[u]=me(e,u));return t&&Object.isExtensible(t)&&(t._normalized=o),q(o,"$stable",a),q(o,"$key",s),q(o,"$hasNormal",i),o}function ve(t,e,n){var r=function(){var t=arguments.length?n.apply(null,arguments):n({});return(t=t&&"object"==typeof t&&!Array.isArray(t)?[t]:ue(t))&&(0===t.length||1===t.length&&t[0].isComment)?void 0:t};return n.proxy&&Object.defineProperty(t,e,{get:r,enumerable:!0,configurable:!0}),r}function me(t,e){return function(){return t[e]}}function ye(t,e){var n,r,o,a,s;if(Array.isArray(t)||"string"==typeof t)for(n=new Array(t.length),r=0,o=t.length;rdocument.createEvent("Event").timeStamp&&(ln=function(){return fn.now()})}function pn(){var t,e;for(un=ln(),sn=!0,nn.sort((function(t,e){return t.id-e.id})),cn=0;cncn&&nn[n].id>t.id;)n--;nn.splice(n+1,0,t)}else nn.push(t);an||(an=!0,ee(pn))}}(this)},hn.prototype.run=function(){if(this.active){var t=this.get();if(t!==this.value||c(t)||this.deep){var e=this.value;if(this.value=t,this.user)try{this.cb.call(this.vm,t,e)}catch(t){qt(t,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,t,e)}}},hn.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},hn.prototype.depend=function(){for(var t=this.deps.length;t--;)this.deps[t].depend()},hn.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||g(this.vm._watchers,this);for(var t=this.deps.length;t--;)this.deps[t].removeSub(this);this.active=!1}};var vn={enumerable:!0,configurable:!0,get:T,set:T};function mn(t,e,n){vn.get=function(){return this[e][n]},vn.set=function(t){this[e][n]=t},Object.defineProperty(t,n,vn)}function yn(t){t._watchers=[];var e=t.$options;e.props&&function(t,e){var n=t.$options.propsData||{},r=t._props={},o=t.$options._propKeys=[];t.$parent&&xt(!1);var i=function(i){o.push(i);var a=Nt(i,e,n,t);Ot(r,i,a),i in t||mn(t,"_props",i)};for(var a in e)i(a);xt(!0)}(t,e.props),e.methods&&function(t,e){t.$options.props;for(var n in e)t[n]="function"!=typeof e[n]?T:O(e[n],t)}(t,e.methods),e.data?function(t){var e=t.$options.data;l(e=t._data="function"==typeof e?function(t,e){dt();try{return t.call(e,e)}catch(t){return qt(t,e,"data()"),{}}finally{ht()}}(e,t):e||{})||(e={});var n=Object.keys(e),r=t.$options.props,o=(t.$options.methods,n.length);for(;o--;){var i=n[o];0,r&&_(r,i)||(a=void 0,36!==(a=(i+"").charCodeAt(0))&&95!==a&&mn(t,"_data",i))}var a;At(e,!0)}(t):At(t._data={},!0),e.computed&&function(t,e){var n=t._computedWatchers=Object.create(null),r=ot();for(var o in e){var i=e[o],a="function"==typeof i?i:i.get;0,r||(n[o]=new hn(t,a||T,T,gn)),o in t||bn(t,o,i)}}(t,e.computed),e.watch&&e.watch!==et&&function(t,e){for(var n in e){var r=e[n];if(Array.isArray(r))for(var o=0;o-1:"string"==typeof t?t.split(",").indexOf(e)>-1:!!f(t)&&t.test(e)}function En(t,e){var n=t.cache,r=t.keys,o=t._vnode;for(var i in n){var a=n[i];if(a){var s=On(a.componentOptions);s&&!e(s)&&jn(n,i,r,o)}}}function jn(t,e,n,r){var o=t[e];!o||r&&o.tag===r.tag||o.componentInstance.$destroy(),t[e]=null,g(n,e)}Cn.prototype._init=function(t){var e=this;e._uid=$n++,e._isVue=!0,t&&t._isComponent?function(t,e){var n=t.$options=Object.create(t.constructor.options),r=e._parentVnode;n.parent=e.parent,n._parentVnode=r;var o=r.componentOptions;n.propsData=o.propsData,n._parentListeners=o.listeners,n._renderChildren=o.children,n._componentTag=o.tag,e.render&&(n.render=e.render,n.staticRenderFns=e.staticRenderFns)}(e,t):e.$options=Mt(xn(e.constructor),t||{},e),e._renderProxy=e,e._self=e,function(t){var e=t.$options,n=e.parent;if(n&&!e.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(t)}t.$parent=n,t.$root=n?n.$root:t,t.$children=[],t.$refs={},t._watcher=null,t._inactive=null,t._directInactive=!1,t._isMounted=!1,t._isDestroyed=!1,t._isBeingDestroyed=!1}(e),function(t){t._events=Object.create(null),t._hasHookEvent=!1;var e=t.$options._parentListeners;e&&Je(t,e)}(e),function(t){t._vnode=null,t._staticTrees=null;var e=t.$options,n=t.$vnode=e._parentVnode,o=n&&n.context;t.$slots=pe(e._renderChildren,o),t.$scopedSlots=r,t._c=function(e,n,r,o){return Be(t,e,n,r,o,!1)},t.$createElement=function(e,n,r,o){return Be(t,e,n,r,o,!0)};var i=n&&n.data;Ot(t,"$attrs",i&&i.attrs||r,null,!0),Ot(t,"$listeners",e._parentListeners||r,null,!0)}(e),en(e,"beforeCreate"),function(t){var e=fe(t.$options.inject,t);e&&(xt(!1),Object.keys(e).forEach((function(n){Ot(t,n,e[n])})),xt(!0))}(e),yn(e),function(t){var e=t.$options.provide;e&&(t._provided="function"==typeof e?e.call(t):e)}(e),en(e,"created"),e.$options.el&&e.$mount(e.$options.el)},function(t){var e={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(t.prototype,"$data",e),Object.defineProperty(t.prototype,"$props",n),t.prototype.$set=St,t.prototype.$delete=Et,t.prototype.$watch=function(t,e,n){if(l(e))return kn(this,t,e,n);(n=n||{}).user=!0;var r=new hn(this,t,e,n);if(n.immediate)try{e.call(this,r.value)}catch(t){qt(t,this,'callback for immediate watcher "'+r.expression+'"')}return function(){r.teardown()}}}(Cn),function(t){var e=/^hook:/;t.prototype.$on=function(t,n){var r=this;if(Array.isArray(t))for(var o=0,i=t.length;o1?S(n):n;for(var r=S(arguments,1),o='event handler for "'+t+'"',i=0,a=n.length;iparseInt(this.max)&&jn(a,s[0],s,this._vnode)),e.data.keepAlive=!0}return e||t&&t[0]}}};!function(t){var e={get:function(){return F}};Object.defineProperty(t,"config",e),t.util={warn:ut,extend:E,mergeOptions:Mt,defineReactive:Ot},t.set=St,t.delete=Et,t.nextTick=ee,t.observable=function(t){return At(t),t},t.options=Object.create(null),N.forEach((function(e){t.options[e+"s"]=Object.create(null)})),t.options._base=t,E(t.options.components,Pn),function(t){t.use=function(t){var e=this._installedPlugins||(this._installedPlugins=[]);if(e.indexOf(t)>-1)return this;var n=S(arguments,1);return n.unshift(this),"function"==typeof t.install?t.install.apply(t,n):"function"==typeof t&&t.apply(null,n),e.push(t),this}}(t),function(t){t.mixin=function(t){return this.options=Mt(this.options,t),this}}(t),An(t),function(t){N.forEach((function(e){t[e]=function(t,n){return n?("component"===e&&l(n)&&(n.name=n.name||t,n=this.options._base.extend(n)),"directive"===e&&"function"==typeof n&&(n={bind:n,update:n}),this.options[e+"s"][t]=n,n):this.options[e+"s"][t]}}))}(t)}(Cn),Object.defineProperty(Cn.prototype,"$isServer",{get:ot}),Object.defineProperty(Cn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(Cn,"FunctionalRenderContext",{value:Pe}),Cn.version="2.6.10";var Rn=m("style,class"),Ln=m("input,textarea,option,select,progress"),In=m("contenteditable,draggable,spellcheck"),Mn=m("events,caret,typing,plaintext-only"),Dn=function(t,e){return qn(e)||"false"===e?"false":"contenteditable"===t&&Mn(e)?e:"true"},Nn=m("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible"),Un="http://www.w3.org/1999/xlink",Fn=function(t){return":"===t.charAt(5)&&"xlink"===t.slice(0,5)},Bn=function(t){return Fn(t)?t.slice(6,t.length):""},qn=function(t){return null==t||!1===t};function Vn(t){for(var e=t.data,n=t,r=t;i(r.componentInstance);)(r=r.componentInstance._vnode)&&r.data&&(e=Hn(r.data,e));for(;i(n=n.parent);)n&&n.data&&(e=Hn(e,n.data));return function(t,e){if(i(t)||i(e))return zn(t,Wn(e));return""}(e.staticClass,e.class)}function Hn(t,e){return{staticClass:zn(t.staticClass,e.staticClass),class:i(t.class)?[t.class,e.class]:e.class}}function zn(t,e){return t?e?t+" "+e:t:e||""}function Wn(t){return Array.isArray(t)?function(t){for(var e,n="",r=0,o=t.length;r-1?vr(t,e,n):Nn(e)?qn(n)?t.removeAttribute(e):(n="allowfullscreen"===e&&"EMBED"===t.tagName?"true":e,t.setAttribute(e,n)):In(e)?t.setAttribute(e,Dn(e,n)):Fn(e)?qn(n)?t.removeAttributeNS(Un,Bn(e)):t.setAttributeNS(Un,e,n):vr(t,e,n)}function vr(t,e,n){if(qn(n))t.removeAttribute(e);else{if(J&&!Y&&"TEXTAREA"===t.tagName&&"placeholder"===e&&""!==n&&!t.__ieph){var r=function(e){e.stopImmediatePropagation(),t.removeEventListener("input",r)};t.addEventListener("input",r),t.__ieph=!0}t.setAttribute(e,n)}}var mr={create:dr,update:dr};function yr(t,e){var n=e.elm,r=e.data,a=t.data;if(!(o(r.staticClass)&&o(r.class)&&(o(a)||o(a.staticClass)&&o(a.class)))){var s=Vn(e),c=n._transitionClasses;i(c)&&(s=zn(s,Wn(c))),s!==n._prevClass&&(n.setAttribute("class",s),n._prevClass=s)}}var gr,br={create:yr,update:yr},_r="__r",wr="__c";function kr(t,e,n){var r=gr;return function o(){var i=e.apply(null,arguments);null!==i&&Cr(t,o,n,r)}}var $r=Kt&&!(tt&&Number(tt[1])<=53);function xr(t,e,n,r){if($r){var o=un,i=e;e=i._wrapper=function(t){if(t.target===t.currentTarget||t.timeStamp>=o||t.timeStamp<=0||t.target.ownerDocument!==document)return i.apply(this,arguments)}}gr.addEventListener(t,e,nt?{capture:n,passive:r}:n)}function Cr(t,e,n,r){(r||gr).removeEventListener(t,e._wrapper||e,n)}function Ar(t,e){if(!o(t.data.on)||!o(e.data.on)){var n=e.data.on||{},r=t.data.on||{};gr=e.elm,function(t){if(i(t[_r])){var e=J?"change":"input";t[e]=[].concat(t[_r],t[e]||[]),delete t[_r]}i(t[wr])&&(t.change=[].concat(t[wr],t.change||[]),delete t[wr])}(n),ae(n,r,xr,Cr,kr,e.context),gr=void 0}}var Or,Sr={create:Ar,update:Ar};function Er(t,e){if(!o(t.data.domProps)||!o(e.data.domProps)){var n,r,a=e.elm,s=t.data.domProps||{},c=e.data.domProps||{};for(n in i(c.__ob__)&&(c=e.data.domProps=E({},c)),s)n in c||(a[n]="");for(n in c){if(r=c[n],"textContent"===n||"innerHTML"===n){if(e.children&&(e.children.length=0),r===s[n])continue;1===a.childNodes.length&&a.removeChild(a.childNodes[0])}if("value"===n&&"PROGRESS"!==a.tagName){a._value=r;var u=o(r)?"":String(r);jr(a,u)&&(a.value=u)}else if("innerHTML"===n&&Xn(a.tagName)&&o(a.innerHTML)){(Or=Or||document.createElement("div")).innerHTML=""+r+"";for(var l=Or.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;l.firstChild;)a.appendChild(l.firstChild)}else if(r!==s[n])try{a[n]=r}catch(t){}}}}function jr(t,e){return!t.composing&&("OPTION"===t.tagName||function(t,e){var n=!0;try{n=document.activeElement!==t}catch(t){}return n&&t.value!==e}(t,e)||function(t,e){var n=t.value,r=t._vModifiers;if(i(r)){if(r.number)return v(n)!==v(e);if(r.trim)return n.trim()!==e.trim()}return n!==e}(t,e))}var Tr={create:Er,update:Er},Pr=w((function(t){var e={},n=/:(.+)/;return t.split(/;(?![^(]*\))/g).forEach((function(t){if(t){var r=t.split(n);r.length>1&&(e[r[0].trim()]=r[1].trim())}})),e}));function Rr(t){var e=Lr(t.style);return t.staticStyle?E(t.staticStyle,e):e}function Lr(t){return Array.isArray(t)?j(t):"string"==typeof t?Pr(t):t}var Ir,Mr=/^--/,Dr=/\s*!important$/,Nr=function(t,e,n){if(Mr.test(e))t.style.setProperty(e,n);else if(Dr.test(n))t.style.setProperty(A(e),n.replace(Dr,""),"important");else{var r=Fr(e);if(Array.isArray(n))for(var o=0,i=n.length;o-1?e.split(Vr).forEach((function(e){return t.classList.add(e)})):t.classList.add(e);else{var n=" "+(t.getAttribute("class")||"")+" ";n.indexOf(" "+e+" ")<0&&t.setAttribute("class",(n+e).trim())}}function zr(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(Vr).forEach((function(e){return t.classList.remove(e)})):t.classList.remove(e),t.classList.length||t.removeAttribute("class");else{for(var n=" "+(t.getAttribute("class")||"")+" ",r=" "+e+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?t.setAttribute("class",n):t.removeAttribute("class")}}function Wr(t){if(t){if("object"==typeof t){var e={};return!1!==t.css&&E(e,Kr(t.name||"v")),E(e,t),e}return"string"==typeof t?Kr(t):void 0}}var Kr=w((function(t){return{enterClass:t+"-enter",enterToClass:t+"-enter-to",enterActiveClass:t+"-enter-active",leaveClass:t+"-leave",leaveToClass:t+"-leave-to",leaveActiveClass:t+"-leave-active"}})),Gr=W&&!Y,Xr="transition",Jr="animation",Yr="transition",Zr="transitionend",Qr="animation",to="animationend";Gr&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(Yr="WebkitTransition",Zr="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(Qr="WebkitAnimation",to="webkitAnimationEnd"));var eo=W?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(t){return t()};function no(t){eo((function(){eo(t)}))}function ro(t,e){var n=t._transitionClasses||(t._transitionClasses=[]);n.indexOf(e)<0&&(n.push(e),Hr(t,e))}function oo(t,e){t._transitionClasses&&g(t._transitionClasses,e),zr(t,e)}function io(t,e,n){var r=so(t,e),o=r.type,i=r.timeout,a=r.propCount;if(!o)return n();var s=o===Xr?Zr:to,c=0,u=function(){t.removeEventListener(s,l),n()},l=function(e){e.target===t&&++c>=a&&u()};setTimeout((function(){c0&&(n=Xr,l=a,f=i.length):e===Jr?u>0&&(n=Jr,l=u,f=c.length):f=(n=(l=Math.max(a,u))>0?a>u?Xr:Jr:null)?n===Xr?i.length:c.length:0,{type:n,timeout:l,propCount:f,hasTransform:n===Xr&&ao.test(r[Yr+"Property"])}}function co(t,e){for(;t.length1}function vo(t,e){!0!==e.data.show&&lo(e)}var mo=function(t){var e,n,r={},c=t.modules,u=t.nodeOps;for(e=0;eh?b(t,o(n[y+1])?null:n[y+1].elm,n,d,y,r):d>y&&w(0,e,p,h)}(p,m,y,n,l):i(y)?(i(t.text)&&u.setTextContent(p,""),b(p,null,y,0,y.length-1,n)):i(m)?w(0,m,0,m.length-1):i(t.text)&&u.setTextContent(p,""):t.text!==e.text&&u.setTextContent(p,e.text),i(h)&&i(d=h.hook)&&i(d=d.postpatch)&&d(t,e)}}}function C(t,e,n){if(a(n)&&i(t.parent))t.parent.data.pendingInsert=e;else for(var r=0;r-1,a.selected!==i&&(a.selected=i);else if(L(wo(a),r))return void(t.selectedIndex!==s&&(t.selectedIndex=s));o||(t.selectedIndex=-1)}}function _o(t,e){return e.every((function(e){return!L(e,t)}))}function wo(t){return"_value"in t?t._value:t.value}function ko(t){t.target.composing=!0}function $o(t){t.target.composing&&(t.target.composing=!1,xo(t.target,"input"))}function xo(t,e){var n=document.createEvent("HTMLEvents");n.initEvent(e,!0,!0),t.dispatchEvent(n)}function Co(t){return!t.componentInstance||t.data&&t.data.transition?t:Co(t.componentInstance._vnode)}var Ao={model:yo,show:{bind:function(t,e,n){var r=e.value,o=(n=Co(n)).data&&n.data.transition,i=t.__vOriginalDisplay="none"===t.style.display?"":t.style.display;r&&o?(n.data.show=!0,lo(n,(function(){t.style.display=i}))):t.style.display=r?i:"none"},update:function(t,e,n){var r=e.value;!r!=!e.oldValue&&((n=Co(n)).data&&n.data.transition?(n.data.show=!0,r?lo(n,(function(){t.style.display=t.__vOriginalDisplay})):fo(n,(function(){t.style.display="none"}))):t.style.display=r?t.__vOriginalDisplay:"none")},unbind:function(t,e,n,r,o){o||(t.style.display=t.__vOriginalDisplay)}}},Oo={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function So(t){var e=t&&t.componentOptions;return e&&e.Ctor.options.abstract?So(We(e.children)):t}function Eo(t){var e={},n=t.$options;for(var r in n.propsData)e[r]=t[r];var o=n._parentListeners;for(var i in o)e[$(i)]=o[i];return e}function jo(t,e){if(/\d-keep-alive$/.test(e.tag))return t("keep-alive",{props:e.componentOptions.propsData})}var To=function(t){return t.tag||ze(t)},Po=function(t){return"show"===t.name},Ro={name:"transition",props:Oo,abstract:!0,render:function(t){var e=this,n=this.$slots.default;if(n&&(n=n.filter(To)).length){0;var r=this.mode;0;var o=n[0];if(function(t){for(;t=t.parent;)if(t.data.transition)return!0}(this.$vnode))return o;var i=So(o);if(!i)return o;if(this._leaving)return jo(t,o);var a="__transition-"+this._uid+"-";i.key=null==i.key?i.isComment?a+"comment":a+i.tag:s(i.key)?0===String(i.key).indexOf(a)?i.key:a+i.key:i.key;var c=(i.data||(i.data={})).transition=Eo(this),u=this._vnode,l=So(u);if(i.data.directives&&i.data.directives.some(Po)&&(i.data.show=!0),l&&l.data&&!function(t,e){return e.key===t.key&&e.tag===t.tag}(i,l)&&!ze(l)&&(!l.componentInstance||!l.componentInstance._vnode.isComment)){var f=l.data.transition=E({},c);if("out-in"===r)return this._leaving=!0,se(f,"afterLeave",(function(){e._leaving=!1,e.$forceUpdate()})),jo(t,o);if("in-out"===r){if(ze(i))return u;var p,d=function(){p()};se(c,"afterEnter",d),se(c,"enterCancelled",d),se(f,"delayLeave",(function(t){p=t}))}}return o}}},Lo=E({tag:String,moveClass:String},Oo);function Io(t){t.elm._moveCb&&t.elm._moveCb(),t.elm._enterCb&&t.elm._enterCb()}function Mo(t){t.data.newPos=t.elm.getBoundingClientRect()}function Do(t){var e=t.data.pos,n=t.data.newPos,r=e.left-n.left,o=e.top-n.top;if(r||o){t.data.moved=!0;var i=t.elm.style;i.transform=i.WebkitTransform="translate("+r+"px,"+o+"px)",i.transitionDuration="0s"}}delete Lo.mode;var No={Transition:Ro,TransitionGroup:{props:Lo,beforeMount:function(){var t=this,e=this._update;this._update=function(n,r){var o=Ze(t);t.__patch__(t._vnode,t.kept,!1,!0),t._vnode=t.kept,o(),e.call(t,n,r)}},render:function(t){for(var e=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),r=this.prevChildren=this.children,o=this.$slots.default||[],i=this.children=[],a=Eo(this),s=0;s-1?Yn[t]=e.constructor===window.HTMLUnknownElement||e.constructor===window.HTMLElement:Yn[t]=/HTMLUnknownElement/.test(e.toString())},E(Cn.options.directives,Ao),E(Cn.options.components,No),Cn.prototype.__patch__=W?mo:T,Cn.prototype.$mount=function(t,e){return function(t,e,n){var r;return t.$el=e,t.$options.render||(t.$options.render=yt),en(t,"beforeMount"),r=function(){t._update(t._render(),n)},new hn(t,r,T,{before:function(){t._isMounted&&!t._isDestroyed&&en(t,"beforeUpdate")}},!0),n=!1,null==t.$vnode&&(t._isMounted=!0,en(t,"mounted")),t}(this,t=t&&W?function(t){if("string"==typeof t){var e=document.querySelector(t);return e||document.createElement("div")}return t}(t):void 0,e)},W&&setTimeout((function(){F.devtools&&it&&it.emit("init",Cn)}),0);var Uo=Cn; +/*! + * vue-router v3.1.3 + * (c) 2019 Evan You + * @license MIT + */function Fo(t){return Object.prototype.toString.call(t).indexOf("Error")>-1}function Bo(t,e){return e instanceof t||e&&(e.name===t.name||e._name===t._name)}function qo(t,e){for(var n in e)t[n]=e[n];return t}var Vo={name:"RouterView",functional:!0,props:{name:{type:String,default:"default"}},render:function(t,e){var n=e.props,r=e.children,o=e.parent,i=e.data;i.routerView=!0;for(var a=o.$createElement,s=n.name,c=o.$route,u=o._routerViewCache||(o._routerViewCache={}),l=0,f=!1;o&&o._routerRoot!==o;){var p=o.$vnode&&o.$vnode.data;p&&(p.routerView&&l++,p.keepAlive&&o._inactive&&(f=!0)),o=o.$parent}if(i.routerViewDepth=l,f)return a(u[s],i,r);var d=c.matched[l];if(!d)return u[s]=null,a();var h=u[s]=d.components[s];i.registerRouteInstance=function(t,e){var n=d.instances[s];(e&&n!==t||!e&&n===t)&&(d.instances[s]=e)},(i.hook||(i.hook={})).prepatch=function(t,e){d.instances[s]=e.componentInstance},i.hook.init=function(t){t.data.keepAlive&&t.componentInstance&&t.componentInstance!==d.instances[s]&&(d.instances[s]=t.componentInstance)};var v=i.props=function(t,e){switch(typeof e){case"undefined":return;case"object":return e;case"function":return e(t);case"boolean":return e?t.params:void 0;default:0}}(c,d.props&&d.props[s]);if(v){v=i.props=qo({},v);var m=i.attrs=i.attrs||{};for(var y in v)h.props&&y in h.props||(m[y]=v[y],delete v[y])}return a(h,i,r)}};var Ho=/[!'()*]/g,zo=function(t){return"%"+t.charCodeAt(0).toString(16)},Wo=/%2C/g,Ko=function(t){return encodeURIComponent(t).replace(Ho,zo).replace(Wo,",")},Go=decodeURIComponent;function Xo(t){var e={};return(t=t.trim().replace(/^(\?|#|&)/,""))?(t.split("&").forEach((function(t){var n=t.replace(/\+/g," ").split("="),r=Go(n.shift()),o=n.length>0?Go(n.join("=")):null;void 0===e[r]?e[r]=o:Array.isArray(e[r])?e[r].push(o):e[r]=[e[r],o]})),e):e}function Jo(t){var e=t?Object.keys(t).map((function(e){var n=t[e];if(void 0===n)return"";if(null===n)return Ko(e);if(Array.isArray(n)){var r=[];return n.forEach((function(t){void 0!==t&&(null===t?r.push(Ko(e)):r.push(Ko(e)+"="+Ko(t)))})),r.join("&")}return Ko(e)+"="+Ko(n)})).filter((function(t){return t.length>0})).join("&"):null;return e?"?"+e:""}var Yo=/\/?$/;function Zo(t,e,n,r){var o=r&&r.options.stringifyQuery,i=e.query||{};try{i=Qo(i)}catch(t){}var a={name:e.name||t&&t.name,meta:t&&t.meta||{},path:e.path||"/",hash:e.hash||"",query:i,params:e.params||{},fullPath:ni(e,o),matched:t?ei(t):[]};return n&&(a.redirectedFrom=ni(n,o)),Object.freeze(a)}function Qo(t){if(Array.isArray(t))return t.map(Qo);if(t&&"object"==typeof t){var e={};for(var n in t)e[n]=Qo(t[n]);return e}return t}var ti=Zo(null,{path:"/"});function ei(t){for(var e=[];t;)e.unshift(t),t=t.parent;return e}function ni(t,e){var n=t.path,r=t.query;void 0===r&&(r={});var o=t.hash;return void 0===o&&(o=""),(n||"/")+(e||Jo)(r)+o}function ri(t,e){return e===ti?t===e:!!e&&(t.path&&e.path?t.path.replace(Yo,"")===e.path.replace(Yo,"")&&t.hash===e.hash&&oi(t.query,e.query):!(!t.name||!e.name)&&(t.name===e.name&&t.hash===e.hash&&oi(t.query,e.query)&&oi(t.params,e.params)))}function oi(t,e){if(void 0===t&&(t={}),void 0===e&&(e={}),!t||!e)return t===e;var n=Object.keys(t),r=Object.keys(e);return n.length===r.length&&n.every((function(n){var r=t[n],o=e[n];return"object"==typeof r&&"object"==typeof o?oi(r,o):String(r)===String(o)}))}function ii(t,e,n){var r=t.charAt(0);if("/"===r)return t;if("?"===r||"#"===r)return e+t;var o=e.split("/");n&&o[o.length-1]||o.pop();for(var i=t.replace(/^\//,"").split("/"),a=0;a=0&&(e=t.slice(r),t=t.slice(0,r));var o=t.indexOf("?");return o>=0&&(n=t.slice(o+1),t=t.slice(0,o)),{path:t,query:n,hash:e}}(o.path||""),c=e&&e.path||"/",u=s.path?ii(s.path,c,n||o.append):c,l=function(t,e,n){void 0===e&&(e={});var r,o=n||Xo;try{r=o(t||"")}catch(t){r={}}for(var i in e)r[i]=e[i];return r}(s.query,o.query,r&&r.options.parseQuery),f=o.hash||s.hash;return f&&"#"!==f.charAt(0)&&(f="#"+f),{_normalized:!0,path:u,query:l,hash:f}}var Ai,Oi=[String,Object],Si=[String,Array],Ei=function(){},ji={name:"RouterLink",props:{to:{type:Oi,required:!0},tag:{type:String,default:"a"},exact:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,event:{type:Si,default:"click"}},render:function(t){var e=this,n=this.$router,r=this.$route,o=n.resolve(this.to,r,this.append),i=o.location,a=o.route,s=o.href,c={},u=n.options.linkActiveClass,l=n.options.linkExactActiveClass,f=null==u?"router-link-active":u,p=null==l?"router-link-exact-active":l,d=null==this.activeClass?f:this.activeClass,h=null==this.exactActiveClass?p:this.exactActiveClass,v=a.redirectedFrom?Zo(null,Ci(a.redirectedFrom),null,n):a;c[h]=ri(r,v),c[d]=this.exact?c[h]:function(t,e){return 0===t.path.replace(Yo,"/").indexOf(e.path.replace(Yo,"/"))&&(!e.hash||t.hash===e.hash)&&function(t,e){for(var n in e)if(!(n in t))return!1;return!0}(t.query,e.query)}(r,v);var m=function(t){Ti(t)&&(e.replace?n.replace(i,Ei):n.push(i,Ei))},y={click:Ti};Array.isArray(this.event)?this.event.forEach((function(t){y[t]=m})):y[this.event]=m;var g={class:c},b=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:s,route:a,navigate:m,isActive:c[d],isExactActive:c[h]});if(b){if(1===b.length)return b[0];if(b.length>1||!b.length)return 0===b.length?t():t("span",{},b)}if("a"===this.tag)g.on=y,g.attrs={href:s};else{var _=function t(e){if(e)for(var n,r=0;r-1&&(s.params[p]=n.params[p]);return s.path=xi(l.path,s.params),c(l,s,a)}if(s.path){s.params={};for(var d=0;d=t.length?n():t[o]?e(t[o],(function(){r(o+1)})):r(o+1)};r(0)}function na(t){return function(e,n,r){var o=!1,i=0,a=null;ra(t,(function(t,e,n,s){if("function"==typeof t&&void 0===t.cid){o=!0,i++;var c,u=aa((function(e){var o;((o=e).__esModule||ia&&"Module"===o[Symbol.toStringTag])&&(e=e.default),t.resolved="function"==typeof e?e:Ai.extend(e),n.components[s]=e,--i<=0&&r()})),l=aa((function(t){var e="Failed to resolve async component "+s+": "+t;a||(a=Fo(t)?t:new Error(e),r(a))}));try{c=t(u,l)}catch(t){l(t)}if(c)if("function"==typeof c.then)c.then(u,l);else{var f=c.component;f&&"function"==typeof f.then&&f.then(u,l)}}})),o||r()}}function ra(t,e){return oa(t.map((function(t){return Object.keys(t.components).map((function(n){return e(t.components[n],t.instances[n],t,n)}))})))}function oa(t){return Array.prototype.concat.apply([],t)}var ia="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function aa(t){var e=!1;return function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];if(!e)return e=!0,t.apply(this,n)}}var sa=function(t){function e(e){t.call(this),this.name=this._name="NavigationDuplicated",this.message='Navigating to current location ("'+e.fullPath+'") is not allowed',Object.defineProperty(this,"stack",{value:(new t).stack,writable:!0,configurable:!0})}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e}(Error);sa._name="NavigationDuplicated";var ca=function(t,e){this.router=t,this.base=function(t){if(!t)if(Pi){var e=document.querySelector("base");t=(t=e&&e.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else t="/";"/"!==t.charAt(0)&&(t="/"+t);return t.replace(/\/$/,"")}(e),this.current=ti,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[]};function ua(t,e,n,r){var o=ra(t,(function(t,r,o,i){var a=function(t,e){"function"!=typeof t&&(t=Ai.extend(t));return t.options[e]}(t,e);if(a)return Array.isArray(a)?a.map((function(t){return n(t,r,o,i)})):n(a,r,o,i)}));return oa(r?o.reverse():o)}function la(t,e){if(e)return function(){return t.apply(e,arguments)}}ca.prototype.listen=function(t){this.cb=t},ca.prototype.onReady=function(t,e){this.ready?t():(this.readyCbs.push(t),e&&this.readyErrorCbs.push(e))},ca.prototype.onError=function(t){this.errorCbs.push(t)},ca.prototype.transitionTo=function(t,e,n){var r=this,o=this.router.match(t,this.current);this.confirmTransition(o,(function(){r.updateRoute(o),e&&e(o),r.ensureURL(),r.ready||(r.ready=!0,r.readyCbs.forEach((function(t){t(o)})))}),(function(t){n&&n(t),t&&!r.ready&&(r.ready=!0,r.readyErrorCbs.forEach((function(e){e(t)})))}))},ca.prototype.confirmTransition=function(t,e,n){var r=this,o=this.current,i=function(t){!Bo(sa,t)&&Fo(t)&&(r.errorCbs.length?r.errorCbs.forEach((function(e){e(t)})):console.error(t)),n&&n(t)};if(ri(t,o)&&t.matched.length===o.matched.length)return this.ensureURL(),i(new sa(t));var a=function(t,e){var n,r=Math.max(t.length,e.length);for(n=0;n-1?decodeURI(t.slice(0,r))+t.slice(r):decodeURI(t)}else n>-1&&(t=decodeURI(t.slice(0,n))+t.slice(n));return t}function ma(t){var e=window.location.href,n=e.indexOf("#");return(n>=0?e.slice(0,n):e)+"#"+t}function ya(t){Zi?Qi(ma(t)):window.location.hash=t}function ga(t){Zi?ta(ma(t)):window.location.replace(ma(t))}var ba=function(t){function e(e,n){t.call(this,e,n),this.stack=[],this.index=-1}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.push=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index+1).concat(t),r.index++,e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index).concat(t),e&&e(t)}),n)},e.prototype.go=function(t){var e=this,n=this.index+t;if(!(n<0||n>=this.stack.length)){var r=this.stack[n];this.confirmTransition(r,(function(){e.index=n,e.updateRoute(r)}),(function(t){Bo(sa,t)&&(e.index=n)}))}},e.prototype.getCurrentLocation=function(){var t=this.stack[this.stack.length-1];return t?t.fullPath:"/"},e.prototype.ensureURL=function(){},e}(ca),_a=function(t){void 0===t&&(t={}),this.app=null,this.apps=[],this.options=t,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=Ii(t.routes||[],this);var e=t.mode||"hash";switch(this.fallback="history"===e&&!Zi&&!1!==t.fallback,this.fallback&&(e="hash"),Pi||(e="abstract"),this.mode=e,e){case"history":this.history=new fa(this,t.base);break;case"hash":this.history=new da(this,t.base,this.fallback);break;case"abstract":this.history=new ba(this,t.base);break;default:0}},wa={currentRoute:{configurable:!0}};function ka(t,e){return t.push(e),function(){var n=t.indexOf(e);n>-1&&t.splice(n,1)}}_a.prototype.match=function(t,e,n){return this.matcher.match(t,e,n)},wa.currentRoute.get=function(){return this.history&&this.history.current},_a.prototype.init=function(t){var e=this;if(this.apps.push(t),t.$once("hook:destroyed",(function(){var n=e.apps.indexOf(t);n>-1&&e.apps.splice(n,1),e.app===t&&(e.app=e.apps[0]||null)})),!this.app){this.app=t;var n=this.history;if(n instanceof fa)n.transitionTo(n.getCurrentLocation());else if(n instanceof da){var r=function(){n.setupListeners()};n.transitionTo(n.getCurrentLocation(),r,r)}n.listen((function(t){e.apps.forEach((function(e){e._route=t}))}))}},_a.prototype.beforeEach=function(t){return ka(this.beforeHooks,t)},_a.prototype.beforeResolve=function(t){return ka(this.resolveHooks,t)},_a.prototype.afterEach=function(t){return ka(this.afterHooks,t)},_a.prototype.onReady=function(t,e){this.history.onReady(t,e)},_a.prototype.onError=function(t){this.history.onError(t)},_a.prototype.push=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.push(t,e,n)}));this.history.push(t,e,n)},_a.prototype.replace=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.replace(t,e,n)}));this.history.replace(t,e,n)},_a.prototype.go=function(t){this.history.go(t)},_a.prototype.back=function(){this.go(-1)},_a.prototype.forward=function(){this.go(1)},_a.prototype.getMatchedComponents=function(t){var e=t?t.matched?t:this.resolve(t).route:this.currentRoute;return e?[].concat.apply([],e.matched.map((function(t){return Object.keys(t.components).map((function(e){return t.components[e]}))}))):[]},_a.prototype.resolve=function(t,e,n){var r=Ci(t,e=e||this.history.current,n,this),o=this.match(r,e),i=o.redirectedFrom||o.fullPath;return{location:r,route:o,href:function(t,e,n){var r="hash"===n?"#"+e:e;return t?ai(t+"/"+r):r}(this.history.base,i,this.mode),normalizedTo:r,resolved:o}},_a.prototype.addRoutes=function(t){this.matcher.addRoutes(t),this.history.current!==ti&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(_a.prototype,wa),_a.install=function t(e){if(!t.installed||Ai!==e){t.installed=!0,Ai=e;var n=function(t){return void 0!==t},r=function(t,e){var r=t.$options._parentVnode;n(r)&&n(r=r.data)&&n(r=r.registerRouteInstance)&&r(t,e)};e.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),e.util.defineReactive(this,"_route",this._router.history.current)):this._routerRoot=this.$parent&&this.$parent._routerRoot||this,r(this,this)},destroyed:function(){r(this)}}),Object.defineProperty(e.prototype,"$router",{get:function(){return this._routerRoot._router}}),Object.defineProperty(e.prototype,"$route",{get:function(){return this._routerRoot._route}}),e.component("RouterView",Vo),e.component("RouterLink",ji);var o=e.config.optionMergeStrategies;o.beforeRouteEnter=o.beforeRouteLeave=o.beforeRouteUpdate=o.created}},_a.version="3.1.3",Pi&&window.Vue&&window.Vue.use(_a);var $a=_a;var xa={NotFound:()=>n.e(7).then(n.bind(null,214)),Layout:()=>Promise.all([n.e(0),n.e(2),n.e(3)]).then(n.bind(null,213))},Ca={"v-4e7a1928":()=>n.e(9).then(n.bind(null,216)),"v-de10f370":()=>n.e(10).then(n.bind(null,217)),"v-7e75900c":()=>n.e(4).then(n.bind(null,218)),"v-14936330":()=>n.e(11).then(n.bind(null,219)),"v-063cdeb6":()=>n.e(12).then(n.bind(null,220)),"v-5b958968":()=>n.e(13).then(n.bind(null,221)),"v-fab1ce6c":()=>n.e(14).then(n.bind(null,222)),"v-3be27a33":()=>n.e(15).then(n.bind(null,223)),"v-26fc7c88":()=>n.e(16).then(n.bind(null,224)),"v-f02d0c70":()=>n.e(17).then(n.bind(null,225)),"v-6d7f0ff8":()=>n.e(18).then(n.bind(null,226)),"v-308cdc08":()=>n.e(19).then(n.bind(null,227)),"v-c9c04af0":()=>n.e(8).then(n.bind(null,228))};function Aa(t){const e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}const Oa=/-(\w)/g,Sa=Aa(t=>t.replace(Oa,(t,e)=>e?e.toUpperCase():"")),Ea=/\B([A-Z])/g,ja=Aa(t=>t.replace(Ea,"-$1").toLowerCase()),Ta=Aa(t=>t.charAt(0).toUpperCase()+t.slice(1));function Pa(t,e){if(!e)return;if(t(e))return t(e);return e.includes("-")?t(Ta(Sa(e))):t(Ta(e))||t(ja(e))}const Ra=Object.assign({},xa,Ca),La=t=>Ra[t],Ia=t=>Ca[t],Ma=t=>xa[t],Da=t=>Uo.component(t);function Na(t){return Pa(Ia,t)}function Ua(t){return Pa(Ma,t)}function Fa(t){return Pa(La,t)}function Ba(t){return Pa(Da,t)}function qa(...t){return Promise.all(t.filter(t=>t).map(async t=>{if(!Ba(t)&&Fa(t)){const e=await Fa(t)();Uo.component(t,e.default)}}))}function Va(t,e){"undefined"!=typeof window&&window.__VUEPRESS__&&(window.__VUEPRESS__[t]=e)}var Ha={created(){this.$ssrContext&&(this.$ssrContext.title=this.$title,this.$ssrContext.lang=this.$lang,this.$ssrContext.description=this.$page.description||this.$description)},mounted(){this.currentMetaTags=new Set,this.updateMeta()},methods:{updateMeta(){document.title=this.$title,document.documentElement.lang=this.$lang;const t=this.$page.frontmatter.meta||[],e=t.slice(0);0===t.filter(t=>"description"===t.name).length&&e.push({name:"description",content:this.$description});const n=document.querySelectorAll('meta[name="description"]');n.length&&n.forEach(t=>this.currentMetaTags.add(t)),this.currentMetaTags=new Set(za(e,this.currentMetaTags))}},watch:{$page(){this.updateMeta()}},beforeDestroy(){za(null,this.currentMetaTags)}};function za(t,e){if(e&&[...e].forEach(t=>{document.head.removeChild(t)}),t)return t.map(t=>{const e=document.createElement("meta");return Object.keys(t).forEach(n=>{e.setAttribute(n,t[n])}),document.head.appendChild(e),e})}var Wa=n(3),Ka={mounted(){window.addEventListener("scroll",this.onScroll)},methods:{onScroll:n.n(Wa)()((function(){this.setActiveHash()}),300),setActiveHash(){const t=[].slice.call(document.querySelectorAll(".sidebar-link")),e=[].slice.call(document.querySelectorAll(".header-anchor")).filter(e=>t.some(t=>t.hash===e.hash)),n=Math.max(window.pageYOffset,document.documentElement.scrollTop,document.body.scrollTop),r=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight),o=window.innerHeight+n;for(let t=0;t=i.parentElement.offsetTop+10&&(!a||n{this.$nextTick(()=>{this.$vuepress.$set("disableScrollBehavior",!1)})})}}}},beforeDestroy(){window.removeEventListener("scroll",this.onScroll)}},Ga=n(2),Xa=n.n(Ga),Ja=[Ha,Ka,{mounted(){Xa.a.configure({showSpinner:!1}),this.$router.beforeEach((t,e,n)=>{t.path===e.path||Uo.component(t.name)||Xa.a.start(),n()}),this.$router.afterEach(()=>{Xa.a.done(),this.isSidebarOpen=!1})}}],Ya={methods:{getLayout:function(){if(this.$page.path){var t=this.$page.frontmatter.layout;return t&&(this.$vuepress.getLayoutAsyncComponent(t)||this.$vuepress.getVueComponent(t))?t:"Layout"}return"NotFound"}},computed:{layout:function(){var t=this.getLayout();return Va("layout",t),Uo.component(t)}}},Za=n(0),Qa=Object(Za.a)(Ya,(function(){var t=this.$createElement;return(this._self._c||t)(this.layout,{tag:"component"})}),[],!1,null,null,null).exports;!function(t,e,n){switch(e){case"components":t[e]||(t[e]={}),Object.assign(t[e],n);break;case"mixins":t[e]||(t[e]=[]),t[e].push(...n);break;default:throw new Error("Unknown option name.")}}(Qa,"mixins",Ja);const ts=[{name:"v-4e7a1928",path:"/apollo-client.html",component:Qa,beforeEnter:(t,e,n)=>{qa("Layout","v-4e7a1928").then(n)}},{name:"v-de10f370",path:"/getting-started.html",component:Qa,beforeEnter:(t,e,n)=>{qa("Layout","v-de10f370").then(n)}},{name:"v-7e75900c",path:"/how-it-works.html",component:Qa,beforeEnter:(t,e,n)=>{qa("Layout","v-7e75900c").then(n)}},{name:"v-14936330",path:"/integrations-overview.html",component:Qa,beforeEnter:(t,e,n)=>{qa("Layout","v-14936330").then(n)}},{name:"v-063cdeb6",path:"/integrations.html",component:Qa,beforeEnter:(t,e,n)=>{qa("Layout","v-063cdeb6").then(n)}},{name:"v-5b958968",path:"/react.html",component:Qa,beforeEnter:(t,e,n)=>{qa("Layout","v-5b958968").then(n)}},{name:"v-fab1ce6c",path:"/reactive-graphql.html",component:Qa,beforeEnter:(t,e,n)=>{qa("Layout","v-fab1ce6c").then(n)}},{name:"v-3be27a33",path:"/",component:Qa,beforeEnter:(t,e,n)=>{qa("Layout","v-3be27a33").then(n)}},{path:"/index.html",redirect:"/"},{name:"v-26fc7c88",path:"/redux-observable.html",component:Qa,beforeEnter:(t,e,n)=>{qa("Layout","v-26fc7c88").then(n)}},{name:"v-f02d0c70",path:"/redux.html",component:Qa,beforeEnter:(t,e,n)=>{qa("Layout","v-f02d0c70").then(n)}},{name:"v-6d7f0ff8",path:"/tutorial.html",component:Qa,beforeEnter:(t,e,n)=>{qa("Layout","v-6d7f0ff8").then(n)}},{name:"v-308cdc08",path:"/vue.html",component:Qa,beforeEnter:(t,e,n)=>{qa("Layout","v-308cdc08").then(n)}},{name:"v-c9c04af0",path:"/api.html",component:Qa,beforeEnter:(t,e,n)=>{qa("Layout","v-c9c04af0").then(n)}},{path:"*",component:Qa}],es={title:"SUBSPACE",description:"Reactive ÐApp Development",base:"/",pages:[{title:"apollo-client",frontmatter:{},regularPath:"/apollo-client.html",relativePath:"apollo-client.md",key:"v-4e7a1928",path:"/apollo-client.html",headers:[{level:3,title:"Example",slug:"example"}]},{title:"Getting Started",frontmatter:{},regularPath:"/getting-started.html",relativePath:"getting-started.md",key:"v-de10f370",path:"/getting-started.html",headers:[{level:2,title:"Installation",slug:"installation"},{level:2,title:"Importing the library",slug:"importing-the-library"},{level:2,title:"Connecting to a web3 provider",slug:"connecting-to-a-web3-provider"},{level:2,title:"Enhancing your contract objects",slug:"enhancing-your-contract-objects"},{level:2,title:"Reacting to data",slug:"reacting-to-data"},{level:2,title:"Tracking state",slug:"tracking-state"},{level:2,title:"Tracking events",slug:"tracking-events"},{level:2,title:"Tracking balances",slug:"tracking-balances"},{level:2,title:"Getting block data, gas prices and block time",slug:"getting-block-data-gas-prices-and-block-time"},{level:2,title:"Subscriptions",slug:"subscriptions"},{level:2,title:"Cleanup",slug:"cleanup"}]},{title:"How it works?",frontmatter:{},regularPath:"/how-it-works.html",relativePath:"how-it-works.md",key:"v-7e75900c",path:"/how-it-works.html",headers:[{level:3,title:"Setup",slug:"setup"},{level:3,title:"Receiving events",slug:"receiving-events"},{level:3,title:"Tracking already known events",slug:"tracking-already-known-events"}]},{title:"Integrations with other frameworks",frontmatter:{},regularPath:"/integrations-overview.html",relativePath:"integrations-overview.md",key:"v-14936330",path:"/integrations-overview.html"},{frontmatter:{},regularPath:"/integrations.html",relativePath:"integrations.md",key:"v-063cdeb6",path:"/integrations.html"},{title:"React",frontmatter:{},regularPath:"/react.html",relativePath:"react.md",key:"v-5b958968",path:"/react.html",headers:[{level:3,title:"Usage",slug:"usage"},{level:3,title:"Example",slug:"example"}]},{title:"reactive-graphql",frontmatter:{},regularPath:"/reactive-graphql.html",relativePath:"reactive-graphql.md",key:"v-fab1ce6c",path:"/reactive-graphql.html",headers:[{level:3,title:"Example",slug:"example"}]},{title:"Home",frontmatter:{home:!0,heroImage:"/assets/img/logo.svg",heroText:" ",actionText:"Get Started",actionLink:"/getting-started/",footer:"MIT Licensed | Subspace is part of the Status Network",features:[{title:"Automatic Syncing",details:"Subspace takes care of syncing under the hood, syncing exactly what you need when you need it. It saves the state to a local database ensuring the DApp always syncs from the last known point even after reloading the DApp."},{title:"Reactive",details:"Subspace embraces reactive programming with RxJS. It provides methods to track and subscribe to events, contract state & balances, and react to changes via observables."},{title:"Framework Agnostic",details:"Subspace is framework agnostic and integrates well with your favourite frameworks, from React to Angular. It works in the browser and in nodejs."}]},regularPath:"/",relativePath:"readme.md",key:"v-3be27a33",path:"/"},{title:"redux-observable",frontmatter:{},regularPath:"/redux-observable.html",relativePath:"redux-observable.md",key:"v-26fc7c88",path:"/redux-observable.html"},{title:"redux",frontmatter:{},regularPath:"/redux.html",relativePath:"redux.md",key:"v-f02d0c70",path:"/redux.html",headers:[{level:3,title:"Example",slug:"example"}]},{title:"Creating a reactive ÐApp with React and Subspace",frontmatter:{},regularPath:"/tutorial.html",relativePath:"tutorial.md",key:"v-6d7f0ff8",path:"/tutorial.html"},{title:"Vue",frontmatter:{},regularPath:"/vue.html",relativePath:"vue.md",key:"v-308cdc08",path:"/vue.html",headers:[{level:3,title:"Example",slug:"example"}]},{title:"API",frontmatter:{},regularPath:"/api.html",relativePath:"api.md",key:"v-c9c04af0",path:"/api.html",headers:[{level:2,title:"General",slug:"general"},{level:3,title:"new Subspace(web3Provider [, options])",slug:"new-subspace-web3provider-options"},{level:3,title:"init()",slug:"init"},{level:3,title:"close()",slug:"close"},{level:3,title:"contract(instance|{abi,address})",slug:"contract-instance-abi-address"},{level:2,title:"Contract methods",slug:"contract-methods"},{level:3,title:"myContract.events.MyEvent.track([options])",slug:"mycontract-events-myevent-track-options"},{level:3,title:"myContract.methods.myMethod([param1[, ...]]).track([callOptions])",slug:"mycontract-methods-mymethod-param1-track-calloptions"},{level:3,title:"myContract.trackBalance(address [, tokenAddress])",slug:"mycontract-trackbalance-address-tokenaddress"},{level:2,title:"Blocks, gas price and block time",slug:"blocks-gas-price-and-block-time"},{level:3,title:"trackBlock()",slug:"trackblock"},{level:3,title:"trackBlockNumber()",slug:"trackblocknumber"},{level:3,title:"trackGasPrice()",slug:"trackgasprice"},{level:3,title:"trackAverageBlocktime()",slug:"trackaverageblocktime"},{level:2,title:"Low level API for data tracking",slug:"low-level-api-for-data-tracking"},{level:3,title:"trackEvent(contractObject, eventName [, options])",slug:"trackevent-contractobject-eventname-options"},{level:3,title:"trackProperty(contractObject, functionName [, functionArgs] [, callOptions])",slug:"trackproperty-contractobject-functionname-functionargs-calloptions"},{level:3,title:"trackBalance(address [, tokenAddress])",slug:"trackbalance-address-tokenaddress"},{level:3,title:"trackLogs(options [, abi])",slug:"tracklogs-options-abi"}]}],themeConfig:{logo:"/assets/img/logo-small.png",displayAllHeaders:!0,search:!1,nav:[{text:"Getting Started",link:"/getting-started/"},{text:"Integrations",link:"/integrations-overview"},{text:"API",link:"/api"},{text:"Github",link:"https://github.com/embarklabs/subspace"}],sidebar:["/","/how-it-works","/getting-started",{title:"Integrations",collapsable:!1,children:[["/integrations-overview","Overview"],"/react","/vue",{title:"Redux",collapsable:!1,children:["/redux","/redux-observable"]},"/reactive-graphql","/apollo-client"]},["/tutorial","Tutorial"],"/api"]}};n(5);Uo.component("code1",()=>Promise.all([n.e(0),n.e(5)]).then(n.bind(null,215))),Uo.component("Badge",()=>Promise.all([n.e(0),n.e(6)]).then(n.bind(null,229)));n(6);var ns=[{},({Vue:t})=>{t.mixin({computed:{$dataBlock(){return this.$options.__data__block__}}})},{},{}],rs=[];class os{constructor(){this.store=new Uo({data:{state:{}}})}$get(t){return this.store.state[t]}$set(t,e){Uo.set(this.store.state,t,e)}$emit(...t){this.store.$emit(...t)}$on(...t){this.store.$on(...t)}}class is extends os{}Object.assign(is.prototype,{getPageAsyncComponent:Na,getLayoutAsyncComponent:Ua,getAsyncComponent:Fa,getVueComponent:Ba});var as={install(t){const e=new is;t.$vuepress=e,t.prototype.$vuepress=e}};function ss(t,e){return t.options.routes.filter(t=>t.path.toLowerCase()===e.toLowerCase()).length>0}var cs={props:{pageKey:String,slotKey:{type:String,default:"default"}},render(t){const e=this.pageKey||this.$parent.$page.key;return Va("pageKey",e),Uo.component(e)||Uo.component(e,Na(e)),Uo.component(e)?t(e):t("")}},us={functional:!0,props:{slotKey:String,required:!0},render:(t,{props:e,slots:n})=>t("div",{class:[`content__${e.slotKey}`]},n()[e.slotKey])},ls=(n(7),Object(Za.a)({},(function(t,e){var n=e._c;return n("svg",{staticClass:"icon outbound",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",x:"0px",y:"0px",viewBox:"0 0 100 100",width:"15",height:"15"}},[n("path",{attrs:{fill:"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"}}),e._v(" "),n("polygon",{attrs:{fill:"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"}})])}),[],!0,null,null,null).exports),fs={functional:!0,render(t,{parent:e,children:n}){if(e._isMounted)return n;e.$once("hook:mounted",()=>{e.$forceUpdate()})}};Uo.config.productionTip=!1,Uo.use($a),Uo.use(as),Uo.mixin(function(t,e,n=Uo){!function(t){t.locales&&Object.keys(t.locales).forEach(e=>{t.locales[e].path=e});Object.freeze(t)}(e),n.$vuepress.$set("siteData",e);const r=new(t(n.$vuepress.$get("siteData"))),o=Object.getOwnPropertyDescriptors(Object.getPrototypeOf(r)),i={};return Object.keys(o).reduce((t,e)=>(e.startsWith("$")&&(t[e]=o[e].get),t),i),{computed:i}}(t=>(class{setPage(t){this.__page=t}get $site(){return t}get $themeConfig(){return this.$site.themeConfig}get $frontmatter(){return this.$page.frontmatter}get $localeConfig(){const{locales:t={}}=this.$site;let e,n;for(const r in t)"/"===r?n=t[r]:0===this.$page.path.indexOf(r)&&(e=t[r]);return e||n||{}}get $siteTitle(){return this.$localeConfig.title||this.$site.title||""}get $title(){const t=this.$page,{metaTitle:e}=this.$page.frontmatter;if("string"==typeof e)return e;const n=this.$siteTitle,r=t.frontmatter.home?null:t.frontmatter.title||t.title;return n?r?r+" | "+n:n:r||"VuePress"}get $description(){const t=function(t){if(t){const e=t.filter(t=>"description"===t.name)[0];if(e)return e.content}}(this.$page.frontmatter.meta);return t||(this.$page.frontmatter.description||this.$localeConfig.description||this.$site.description||"")}get $lang(){return this.$page.frontmatter.lang||this.$localeConfig.lang||"en-US"}get $localePath(){return this.$localeConfig.path||"/"}get $themeLocaleConfig(){return(this.$site.themeConfig.locales||{})[this.$localePath]||{}}get $page(){return this.__page?this.__page:function(t,e){for(let n=0;nn||(t.hash?!Uo.$vuepress.$get("disableScrollBehavior")&&{selector:t.hash}:{x:0,y:0})});!function(t){t.beforeEach((e,n,r)=>{if(ss(t,e.path))r();else if(/(\/|\.html)$/.test(e.path))if(/\/$/.test(e.path)){const n=e.path.replace(/\/$/,"")+".html";ss(t,n)?r(n):r()}else r();else{const n=e.path+"/",o=e.path+".html";ss(t,o)?r(o):ss(t,n)?r(n):r()}})}(n);const r={};try{ns.forEach(e=>{"function"==typeof e&&e({Vue:Uo,options:r,router:n,siteData:es,isServer:t})})}catch(t){console.error(t)}return{app:new Uo(Object.assign(r,{router:n,render:t=>t("div",{attrs:{id:"app"}},[t("router-view",{ref:"layout"}),t("div",{class:"global-ui"},rs.map(e=>t(e)))])})),router:n}}(!1);window.__VUEPRESS__={version:"1.1.0",hash:"48e923f"},ds.onReady(()=>{ps.$mount("#app")})}]); \ No newline at end of file diff --git a/getting-started.html b/getting-started.html index 6da301e..833bd69 100644 --- a/getting-started.html +++ b/getting-started.html @@ -11,7 +11,7 @@ - + @@ -27,11 +27,11 @@ })(document, window, '//fathom.status.im/tracker.js', 'fathom'); fathom('set', 'siteId', 'DNONS'); fathom('trackPageview'); -
SUBSPACE

Getting Started

Installation

Subspace 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
+

Getting Started

Installation

Subspace 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
 npm install --save @embarklabs/subspace
 
 # Using yarn
@@ -43,7 +43,7 @@ fathom('trackPageview');
 const Subspace = require('@embarklabs/subspace');
1
2
3
4
5

Connecting to a web3 provider

To interact with the EVM, Subspace requires a valid Web3 provider.

const subspace = new Subspace(web3.currentProvider);
 await subspace.init();
-
1
2

In 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 (default: undefined. Obtains data every block).
  • 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: false)tionality can be forced by passing true to this option. (default: undefined)

Enhancing your contract objects

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);
+
1
2

In 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 (default: undefined. Obtains data every block).
  • 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)

Enhancing your contract objects

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);
1

You can also instantiate a contract directly by passing the contract ABI and its address:

const myRXContract = subspace.contract({abi: ...., address: '0x1234...CDEF'})
1

Reacting to data

Once 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.

What is an Observable?

The Observable type can be used to model push-based data sources such as DOM events, timer intervals, and sockets. In addition, observables are:

  • Compositional: Observables can be composed with higher-order combinators.
  • Lazy: Observables do not start emitting data until an observer has subscribed.

Further read

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 stateObservable$ = Contract.methods.functionName(functionArgs).track();
1

Tracking the public variables of a contract

State variables implicity create a view 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).

Example:

const productTitle$ = ProductList.methods.products(0).track().map("title");
@@ -79,7 +79,19 @@ subspace.tra
1
2
3

Tracking an ERC20 balance in a Contract:

const tokenAddress = "0x744d70fdbe2ba4cf95131626614a1763df805b9e"; // SNT Address
 
 const myBalanceObservable$ = Contract.trackBalance(tokenAddress);
-
1
2
3

Balances are returned as a string containing the value in wei.

Subscriptions

Once 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);
+
1
2
3

Balances are returned as a string containing the value in wei.

Getting block data, gas prices and block time

Subspace also provides a way to always receive the latest block object:

subspace.trackBlock().subscribe(block => {
+  console.log("The latest block data: ", block);
+});
+
1
2
3

If you don't need all the block information, but just the block number, you can use instead:

subspace.trackBlockNumber().subscribe(blockNumber => {
+  console.log("The latest block number: ", blockNumber);
+});
+
1
2
3

You can also access the average block time. This takes in account only the last 10 blocks:

subspace.trackAverageBlocktime().subscribe(blocktimeMS => {
+  console.log("The average block time in milliseconds is: ", blocktimeMS);
+});
+
1
2
3

Finally, if you want to obtain the most up to date median gas price:

subspace.trackGasPrice().subscribe(gasPrice => {
+  console.log("Gas price in wei", gasPrice);
+});
+
1
2
3

Subscriptions

Once 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);
 const subscription = myBalanceObservable$.subscribe(value => { 
   console.log("The balance is: ", value); 
 });
@@ -92,6 +104,6 @@ subscription.How it works? Overview→
- + diff --git a/how-it-works.html b/how-it-works.html index 79d5ec2..3fb258f 100644 --- a/how-it-works.html +++ b/how-it-works.html @@ -11,7 +11,7 @@ - + @@ -27,17 +27,17 @@ })(document, window, '//fathom.status.im/tracker.js', 'fathom'); fathom('set', 'siteId', 'DNONS'); fathom('trackPageview'); -
SUBSPACE

How it works?

Setup

First Usage - Setup

  1. A ÐApp requests Subspace to track an event, property, or balance.
  2. Subspace creates a observable for that event, and a web3 subscription to retrieve events from the chain
  3. The ÐApp subscribes to the observable to receive events.

Receiving events

First Usage - Receiving events +

How it works?

Setup

First Usage - Setup

  1. A ÐApp requests Subspace to track an event, property, or balance.
  2. Subspace creates a observable for that event, and a web3 subscription to retrieve events from the chain
  3. The ÐApp subscribes to the observable to receive events.

Receiving events

First Usage - Receiving events 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.

Tracking already known events

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 Usage - Setup

  1. The Dapp will request Subspace to track an event it already knows, creating an observable and subscription for that event
  2. 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.

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

← Getting Started→

- + diff --git a/index.html b/index.html index e201fdb..ad005a2 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ - + @@ -27,11 +27,11 @@ })(document, window, '//fathom.status.im/tracker.js', 'fathom'); fathom('set', 'siteId', 'DNONS'); fathom('trackPageview'); -
SUBSPACE
hero

+

hero

Reactive ÐApp Development

Get Started

Automatic Syncing

Subspace takes care of syncing under the hood, syncing exactly what you need when you need it. It saves the state to a local database ensuring the DApp always syncs from the last known point even after reloading the DApp.

Reactive

Subspace embraces reactive programming with RxJS. It provides methods to track and subscribe to events, contract state & balances, and react to changes via observables.

Framework Agnostic

Subspace is framework agnostic and integrates well with your favourite frameworks, from React to Angular. It works in the browser and in nodejs.

Event Tracking & Event Sourcing

You can track events and react to their values. With Subspace observables doing event sourcing is easy. @@ -85,6 +85,6 @@ ReactDOM.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
MIT Licensed | Subspace is part of the Status Network
- + diff --git a/integrations-overview.html b/integrations-overview.html index a414efc..3a3654f 100644 --- a/integrations-overview.html +++ b/integrations-overview.html @@ -11,7 +11,7 @@ - + @@ -27,14 +27,14 @@ })(document, window, '//fathom.status.im/tracker.js', 'fathom'); fathom('set', 'siteId', 'DNONS'); fathom('trackPageview'); -
SUBSPACE

Integrations with other frameworks

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

+

Integrations with other frameworks

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

← React→

- + diff --git a/integrations.html b/integrations.html index d4a22e2..bb2dab3 100644 --- a/integrations.html +++ b/integrations.html @@ -11,7 +11,7 @@ - + @@ -27,11 +27,11 @@ })(document, window, '//fathom.status.im/tracker.js', 'fathom'); fathom('set', 'siteId', 'DNONS'); fathom('trackPageview'); -
SUBSPACE
- +
+ diff --git a/react.html b/react.html index 7b1f911..fd7af70 100644 --- a/react.html +++ b/react.html @@ -11,7 +11,7 @@ - + @@ -27,11 +27,11 @@ })(document, window, '//fathom.status.im/tracker.js', 'fathom'); fathom('set', 'siteId', 'DNONS'); fathom('trackPageview'); -
SUBSPACE

React

We provide a higher-order component to connect to enhance presentational components to react to any observable (not limited to those generated by Subspace).

Usage

import { observe } from '@embarklabs/subspace/react';
+

React

We provide a higher-order component to connect to enhance presentational components to react to any observable (not limited to those generated by Subspace).

Usage

import { observe } from '@embarklabs/subspace/react';
 
 const ObserverComponent = observe(WrappedComponent);
1
2
3

This enhanced component will subscribe to any observable property it receives when the component is mounted and automatically unsubscribe when the component is unmounted.

Example

This example is available in Github

MyComponentObserver.js

import React from "react";
@@ -77,7 +77,7 @@ fathom('trackPageview');
 }
 
 export default App;
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Handling Contract Objects

The variable MyContractInstance 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)

index.js

import React from 'react';
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Handling Contract Objects

The variable MyContractInstance 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)

index.js

import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 
@@ -109,6 +109,6 @@ ReactDOM.ren
       ←
        Vue→
- + diff --git a/reactive-graphql.html b/reactive-graphql.html index dc0d76e..d17016f 100644 --- a/reactive-graphql.html +++ b/reactive-graphql.html @@ -11,7 +11,7 @@ - + @@ -27,11 +27,11 @@ })(document, window, '//fathom.status.im/tracker.js', 'fathom'); fathom('set', 'siteId', 'DNONS'); fathom('trackPageview'); -
SUBSPACE

reactive-graphql

Using reactive-graphql you can execute GraphQL queries against Subspace observables after you create your own type definitions and resolvers.

Example

const Subspace = require('@embarklabs/subspace');
+

reactive-graphql

Using reactive-graphql you can execute GraphQL queries against Subspace observables after you create your own type definitions and resolvers.

Example

const Subspace = require('@embarklabs/subspace');
 const MyContract = require('./MyContract');
 const { pluck } = require('rxjs/operators');
 const { makeExecutableSchema } = require("graphql-tools");
@@ -81,10 +81,10 @@ fathom('trackPageview');
 }
 
 run();
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

This example is available in Github

+

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

This example is available in Github

← apollo-client→

- + diff --git a/redux-observable.html b/redux-observable.html index 7edd1cf..a76bbbd 100644 --- a/redux-observable.html +++ b/redux-observable.html @@ -11,7 +11,7 @@ - + @@ -27,11 +27,11 @@ })(document, window, '//fathom.status.im/tracker.js', 'fathom'); fathom('set', 'siteId', 'DNONS'); fathom('trackPageview'); -
SUBSPACE

redux-observable

redux-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.

Here'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.

// ...
+

redux-observable

redux-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.

Here'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.

// ...
 
 const myEpic = action$ =>
   action$.pipe(
@@ -46,10 +46,10 @@ fathom('trackPageview');
   );
 
 // ...
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

An example is available in Github

Further read

+

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

An example is available in Github

Further read

← reactive-graphql→

- + diff --git a/redux.html b/redux.html index 9db74a9..b47e0c4 100644 --- a/redux.html +++ b/redux.html @@ -11,7 +11,7 @@ - + @@ -27,11 +27,11 @@ })(document, window, '//fathom.status.im/tracker.js', 'fathom'); fathom('set', 'siteId', 'DNONS'); fathom('trackPageview'); -
SUBSPACE

redux

Subspace 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.

Example

Here's a simple example on how to setup Subspace to work with redux:

This example is available in Github

index.js

import store from './store';
+

redux

Subspace 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.

Example

Here's a simple example on how to setup Subspace to work with redux:

This example is available in Github

index.js

import store from './store';
 import web3 from './web3';
 import Subspace from '@embarklabs/subspace';
 import { myAction } from './actions';
@@ -49,7 +49,7 @@ fathom('trackPageview');
 }
 
 run();
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Handling Contract Objects

The variable MyContractInstance 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)

store.js

import { createStore } from 'redux';
+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Handling Contract Objects

The variable MyContractInstance 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)

store.js

import { createStore } from 'redux';
 import {myReducer} from './reducer';
 
 export default store = createStore(myReducer);
@@ -75,6 +75,6 @@ fathom('trackPageview');
       ←
        redux-observable→
- + diff --git a/tutorial.html b/tutorial.html index 5f4cb82..d9d59db 100644 --- a/tutorial.html +++ b/tutorial.html @@ -11,7 +11,7 @@ - + @@ -27,14 +27,14 @@ })(document, window, '//fathom.status.im/tracker.js', 'fathom'); fathom('set', 'siteId', 'DNONS'); fathom('trackPageview'); -
SUBSPACE

Creating a reactive ÐApp with React and Subspace

See example DApp at https://github.com/embark-framework/subspace/tree/master/examples/react-example1

+

Creating a reactive ÐApp with React and Subspace

See example DApp at https://github.com/embark-framework/subspace/tree/master/examples/react-example1

← API→

- + diff --git a/vue.html b/vue.html index 6e6ab5e..0c4fa35 100644 --- a/vue.html +++ b/vue.html @@ -11,7 +11,7 @@ - + @@ -27,11 +27,11 @@ })(document, window, '//fathom.status.im/tracker.js', 'fathom'); fathom('set', 'siteId', 'DNONS'); fathom('trackPageview'); -
SUBSPACE

Vue

Vue provides the official npm package vue-rx that provides RxJS integration, which simplifies the use of Subspace with Vue.js

Example

This example is available in Github

MyComponent.vue

<template>
+

Vue

Vue provides the official npm package vue-rx that provides RxJS integration, which simplifies the use of Subspace with Vue.js

Example

This example is available in Github

MyComponent.vue

<template>
   <ul v-if="!!eventData$">
     <li><b>someValue: </b> {{eventData$.someValue}}</li>
     <li><b>anotherValue: </b> {{eventData$.anotherValue}}</li>
@@ -94,6 +94,6 @@ fathom('trackPageview');
       ←
        redux→
- +