embarklabs
/
subspace-site
mirror of https://github.com/embarklabs/subspace-site.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update site

This commit is contained in:
Richard Ramos 2020-03-17 14:18:58 -04:00
parent dd2471b93b
commit b6db422cb8
115 changed files with 223 additions and 390 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
404.html
View File

@ -5,17 +5,18 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>SUBSPACE</title>
<meta name="description" content="Reactive ÐApp Development">
<meta name="generator" content="VuePress 1.3.1">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
<link rel="shortcut icon" href="/assets/img/logo-small.png">
<meta name="theme-color" content="#ffffff">
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.eea690de.js" as="script"><link rel="preload" href="/assets/js/7.e27f5416.js" as="script"><link rel="prefetch" href="/assets/js/10.0ba7844a.js"><link rel="prefetch" href="/assets/js/11.e6fa739b.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.72c7694a.js"><link rel="prefetch" href="/assets/js/14.afbc70c1.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.b64d2715.js"><link rel="prefetch" href="/assets/js/17.6d75f10a.js"><link rel="prefetch" href="/assets/js/18.801d9314.js"><link rel="prefetch" href="/assets/js/19.91da0b43.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/3.9498df45.js"><link rel="prefetch" href="/assets/js/4.59e30da8.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/8.34bb8c58.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
<link rel="preload" href="/assets/css/0.styles.b4d346dc.css" as="style"><link rel="preload" href="/assets/js/app.00a46c5f.js" as="script"><link rel="preload" href="/assets/js/7.da8dc444.js" as="script"><link rel="prefetch" href="/assets/js/10.4595e7f8.js"><link rel="prefetch" href="/assets/js/11.638336c9.js"><link rel="prefetch" href="/assets/js/12.792fcfd2.js"><link rel="prefetch" href="/assets/js/13.a67d614a.js"><link rel="prefetch" href="/assets/js/14.b783779c.js"><link rel="prefetch" href="/assets/js/15.1d9ae469.js"><link rel="prefetch" href="/assets/js/16.d0bf4930.js"><link rel="prefetch" href="/assets/js/17.c66feffd.js"><link rel="prefetch" href="/assets/js/18.ec597d92.js"><link rel="prefetch" href="/assets/js/19.a3968107.js"><link rel="prefetch" href="/assets/js/2.af279185.js"><link rel="prefetch" href="/assets/js/3.072ab49d.js"><link rel="prefetch" href="/assets/js/4.336e58fa.js"><link rel="prefetch" href="/assets/js/5.5969a423.js"><link rel="prefetch" href="/assets/js/6.169a8ab4.js"><link rel="prefetch" href="/assets/js/8.7bad8100.js"><link rel="prefetch" href="/assets/js/9.01449017.js">
<link rel="stylesheet" href="/assets/css/0.styles.b4d346dc.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>Looks like we've got some broken links.</blockquote> <a href="/" class="router-link-active">Take me home.</a></div></div><div class="global-ui"></div></div>
<script src="/assets/js/app.eea690de.js" defer></script><script src="/assets/js/7.e27f5416.js" defer></script>
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>There's nothing here.</blockquote> <a href="/" class="router-link-active">Take me home.</a></div></div><div class="global-ui"></div></div>
<script src="/assets/js/app.00a46c5f.js" defer></script><script src="/assets/js/7.da8dc444.js" defer></script>
</body>
</html>

20
api.html
View File

@ -5,14 +5,15 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>API | SUBSPACE</title>
<meta name="description" content="Reactive ÐApp Development">
<meta name="generator" content="VuePress 1.3.1">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
<link rel="shortcut icon" href="/assets/img/logo-small.png">
<meta name="theme-color" content="#ffffff">
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.eea690de.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/8.34bb8c58.js" as="script"><link rel="prefetch" href="/assets/js/10.0ba7844a.js"><link rel="prefetch" href="/assets/js/11.e6fa739b.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.72c7694a.js"><link rel="prefetch" href="/assets/js/14.afbc70c1.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.b64d2715.js"><link rel="prefetch" href="/assets/js/17.6d75f10a.js"><link rel="prefetch" href="/assets/js/18.801d9314.js"><link rel="prefetch" href="/assets/js/19.91da0b43.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.59e30da8.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
<link rel="preload" href="/assets/css/0.styles.b4d346dc.css" as="style"><link rel="preload" href="/assets/js/app.00a46c5f.js" as="script"><link rel="preload" href="/assets/js/3.072ab49d.js" as="script"><link rel="preload" href="/assets/js/8.7bad8100.js" as="script"><link rel="prefetch" href="/assets/js/10.4595e7f8.js"><link rel="prefetch" href="/assets/js/11.638336c9.js"><link rel="prefetch" href="/assets/js/12.792fcfd2.js"><link rel="prefetch" href="/assets/js/13.a67d614a.js"><link rel="prefetch" href="/assets/js/14.b783779c.js"><link rel="prefetch" href="/assets/js/15.1d9ae469.js"><link rel="prefetch" href="/assets/js/16.d0bf4930.js"><link rel="prefetch" href="/assets/js/17.c66feffd.js"><link rel="prefetch" href="/assets/js/18.ec597d92.js"><link rel="prefetch" href="/assets/js/19.a3968107.js"><link rel="prefetch" href="/assets/js/2.af279185.js"><link rel="prefetch" href="/assets/js/4.336e58fa.js"><link rel="prefetch" href="/assets/js/5.5969a423.js"><link rel="prefetch" href="/assets/js/6.169a8ab4.js"><link rel="prefetch" href="/assets/js/7.da8dc444.js"><link rel="prefetch" href="/assets/js/9.01449017.js">
<link rel="stylesheet" href="/assets/css/0.styles.b4d346dc.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><script type="text/javascript">
@ -31,15 +32,16 @@ fathom('trackPageview');
Github
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path 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"></path> <polygon 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"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link router-link-exact-active router-link-active">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path 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"></path> <polygon 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"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#getting-block-data-gas-prices-and-block-time" class="sidebar-link">Getting block data, gas prices and block time</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="active sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#blocks-gas-price-and-block-time" class="sidebar-link">Blocks, gas price and block time</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="api"><a href="#api" aria-hidden="true" class="header-anchor">#</a> API</h1> <h2 id="general"><a href="#general" aria-hidden="true" class="header-anchor">#</a> General</h2> <h3 id="new-subspace-web3provider-options"><a href="#new-subspace-web3provider-options" aria-hidden="true" class="header-anchor">#</a> <code>new Subspace(web3Provider [, options])</code></h3> <p>Constructor.</p> <p><strong>Parameters</strong></p> <ol><li><code>web3Provider</code> - <code>Object</code>: a valid web3 provider.</li> <li><code>options</code> - <code>Object</code> (optional): Options used to initialize Subspace
<ul><li><code>dbFilename</code> - <code>String</code> (optional): Name of the database where the information will be stored (default <code>'subspace.db'</code>)</li> <li><code>callInterval</code> - <code>Number</code> (optional): - Interval of time in milliseconds to poll a contract/address to determine changes in state or balance (default: <code>undefined</code>. Obtains data every block. If using a HttpProvider, the default is: <code>1000</code>)</li> <li><code>refreshLastNBlocks</code> - 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),</li> <li><code>disableSubscriptions</code> - 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)</li></ul></li></ol> <h3 id="init"><a href="#init" aria-hidden="true" class="header-anchor">#</a> <code>init()</code></h3> <p>Initializes <strong>Subspace</strong></p> <p><strong>Returns</strong> <code>Promise</code> that once it's resolved, will mean that <strong>Subspace</strong> is available to use</p> <h3 id="close"><a href="#close" aria-hidden="true" class="header-anchor">#</a> <code>close()</code></h3> <p>Dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by <strong>Subspace</strong> during its normal execution.</p> <h3 id="contract-instance-abi-address"><a href="#contract-instance-abi-address" aria-hidden="true" class="header-anchor">#</a> <code>contract(instance|{abi,address})</code></h3> <p>Adds a <code>track</code> method to the web3 contract objects. You can obtain this functionality by passing a <code>web3.eth.Contract</code> instance, or the <code>abi</code> and <code>address</code> of your contract</p> <p><strong>Returns</strong> <code>web3.eth.Contract</code> object enhanced with <code>.track()</code> functions for methods and events.</p> <h2 id="contract-methods"><a href="#contract-methods" aria-hidden="true" class="header-anchor">#</a> Contract methods</h2> <h3 id="mycontract-events-myevent-track-options"><a href="#mycontract-events-myevent-track-options" aria-hidden="true" class="header-anchor">#</a> <code>myContract.events.MyEvent.track([options])</code></h3> <p>Track a contract event.</p> <p><strong>Parameters</strong></p> <ol><li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters
<ul><li><code>filter</code> - <code>Object</code> (optional): Lets you filter events by indexed parameters, e.g. <code>{filter: {myNumber: [12,13]}}</code> means all events where <code>&quot;myNumber&quot;</code> is <code>12</code> or <code>13</code>.</li> <li><code>fromBlock</code> - <code>Number</code> (optional): The block number from which to get events on.</li> <li><code>toBlock</code> - <code>Number</code> (optional): The block number to get events up to (Defaults to <code>&quot;latest&quot;</code>)</li> <li><code>topics</code> - <code>Array</code> (optional): This allows you to manually set the topics for the event filter. If given the filter property and event signature, (<code>topic[0]</code>) will not be set automatically.</li></ul></li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the event <code>returnValues</code>.</p> <h3 id="mycontract-methods-mymethod-param1-track-calloptions"><a href="#mycontract-methods-mymethod-param1-track-calloptions" aria-hidden="true" class="header-anchor">#</a> <code>myContract.methods.myMethod([param1[, ...]]).track([callOptions])</code></h3> <p>Track a constant function / contract state variable on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>callOptions</code> - <code>Object</code> (optional): The options used for calling.
<ul><li><code>from</code> - <code>String</code> (optional): The address the call “transaction” should be made from.</li> <li><code>gasPrice</code> - <code>String</code> (optional): The gas price in wei to use for this call “transaction”.</li> <li><code>gas</code> - <code>Number</code> (optional): The maximum gas provided for this call “transaction” (gas limit).</li></ul></li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the function / variable values. Data type will depend on the contract function invoked.</p> <h3 id="mycontract-trackbalance-address-tokenaddress"><a href="#mycontract-trackbalance-address-tokenaddress" aria-hidden="true" class="header-anchor">#</a> <code>myContract.trackBalance(address [, tokenAddress])</code></h3> <p>Track a contract's balance changes for an address on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>address</code> - <code>String</code>: The address to get the balance of.</li> <li><code>tokenAddress</code> - <code>String</code> (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.</li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream a string containing the address balance.</p> <h2 id="blocks-gas-price-and-block-time"><a href="#blocks-gas-price-and-block-time" aria-hidden="true" class="header-anchor">#</a> Blocks, gas price and block time</h2> <h3 id="trackblock"><a href="#trackblock" aria-hidden="true" class="header-anchor">#</a> <code>trackBlock()</code></h3> <p>Receive the block information for any new block. It's the reactive equivalent to <code>web3.eth.getBlock(&quot;latest&quot;)</code>.</p> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream a block object for the latest block received</p> <h3 id="trackblocknumber"><a href="#trackblocknumber" aria-hidden="true" class="header-anchor">#</a> <code>trackBlockNumber()</code></h3> <p>Returns the latest block number. It's the reactive equivalent to <code>web3.eth.getBlockNumber</code>.</p> <p><strong>Returns</strong> <code>RxJS Observable</code> with the latest block number</p> <h3 id="trackgasprice"><a href="#trackgasprice" aria-hidden="true" class="header-anchor">#</a> <code>trackGasPrice()</code></h3> <p>Returns the current gas price oracle. It's the reactive equivalent to <code>web3.eth.getGasPrice</code>.</p> <p><strong>Returns</strong> <code>RxJS Observable</code> with the average gas price in wei.</p> <h3 id="trackaverageblocktime"><a href="#trackaverageblocktime" aria-hidden="true" class="header-anchor">#</a> <code>trackAverageBlocktime()</code></h3> <p>Average block time of the last 10 blocks.</p> <p><strong>Returns</strong> <code>RxJS Observable</code> with the moving average block time of the last 10 blocks. The time is returned in milliseconds:</p> <h2 id="low-level-api-for-data-tracking"><a href="#low-level-api-for-data-tracking" aria-hidden="true" class="header-anchor">#</a> Low level API for data tracking</h2> <p>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.</p> <h3 id="trackevent-contractobject-eventname-options"><a href="#trackevent-contractobject-eventname-options" aria-hidden="true" class="header-anchor">#</a> <code>trackEvent(contractObject, eventName [, options])</code></h3> <p>Track a contract event.</p> <p><strong>Parameters</strong></p> <ol><li><code>contractObject</code> - <code>web3.eth.Contract</code>: An already initialized contract object pointing to an address and containing a valid ABI.</li> <li><code>eventName</code> - <code>String</code>: The name of the event to subscribe.</li> <li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters
<ul><li><code>filter</code> - <code>Object</code> (optional): Lets you filter events by indexed parameters, e.g. <code>{filter: {myNumber: [12,13]}}</code> means all events where <code>&quot;myNumber&quot;</code> is <code>12</code> or <code>13</code>.</li> <li><code>fromBlock</code> - <code>Number</code> (optional): The block number from which to get events on.</li> <li><code>toBlock</code> - <code>Number</code> (optional): The block number to get events up to (Defaults to <code>&quot;latest&quot;</code>)</li> <li><code>topics</code> - <code>Array</code> (optional): This allows you to manually set the topics for the event filter. If given the filter property and event signature, (<code>topic[0]</code>) will not be set automatically.</li></ul></li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the event <code>returnValues</code>.</p> <h3 id="trackproperty-contractobject-functionname-functionargs-calloptions"><a href="#trackproperty-contractobject-functionname-functionargs-calloptions" aria-hidden="true" class="header-anchor">#</a> <code>trackProperty(contractObject, functionName [, functionArgs] [, callOptions])</code></h3> <p>Track a constant function / contract state variable on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>contractObject</code> - <code>web3.eth.Contract</code>: An already initialized contract object pointing to an address and containing a valid ABI.</li> <li><code>functionName</code> - <code>String</code>: Name of the function or variable whose values will be tracked.</li> <li><code>functionArgs</code> - <code>Array</code> (optional): Array of arguments that the tracked function receives</li> <li><code>callOptions</code> - <code>Object</code> (optional): The options used for calling.
<ul><li><code>from</code> - <code>String</code> (optional): The address the call “transaction” should be made from.</li> <li><code>gasPrice</code> - <code>String</code> (optional): The gas price in wei to use for this call “transaction”.</li> <li><code>gas</code> - <code>Number</code> (optional): The maximum gas provided for this call “transaction” (gas limit).</li></ul></li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the function / variable values. Data type will depend on the contract function invoked.</p> <h3 id="trackbalance-address-tokenaddress"><a href="#trackbalance-address-tokenaddress" aria-hidden="true" class="header-anchor">#</a> <code>trackBalance(address [, tokenAddress])</code></h3> <p>Track balance changes for an address on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>address</code> - <code>String</code>: The address to get the balance of.</li> <li><code>tokenAddress</code> - <code>String</code> (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.</li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream a string containing the address balance.</p> <h3 id="tracklogs-options-abi"><a href="#tracklogs-options-abi" aria-hidden="true" class="header-anchor">#</a> <code>trackLogs(options [, abi])</code></h3> <p>Tracks incoming logs, filtered by the given options.</p> <p><strong>Parameters</strong></p> <ol><li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of logs
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path 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"></path> <polygon 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"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#getting-block-data-gas-prices-and-block-time" class="sidebar-link">Getting block data, gas prices and block time</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="active sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#blocks-gas-price-and-block-time" class="sidebar-link">Blocks, gas price and block time</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="api"><a href="#api" class="header-anchor">#</a> API</h1> <h2 id="general"><a href="#general" class="header-anchor">#</a> General</h2> <h3 id="new-subspace-web3-options"><a href="#new-subspace-web3-options" class="header-anchor">#</a> <code>new Subspace(web3 [, options])</code></h3> <p>Constructor.</p> <p><strong>Parameters</strong></p> <ol><li><code>web3</code> - <code>Object</code>: a <code>web3.js</code> object.</li> <li><code>options</code> - <code>Object</code> (optional): Options used to initialize Subspace
<ul><li><code>dbFilename</code> - <code>String</code> (optional): Name of the database where the information will be stored (default <code>'subspace.db'</code>)</li></ul></li></ol> <ul><li><code>callInterval</code> - Interval of time in milliseconds to query a contract/address to determine changes in state or balance. It's only used with HttpProviders (default: <code>undefined</code>. Obtains data every block using the average block time as an interval).
<ul><li><code>refreshLastNBlocks</code> - 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),</li> <li><code>disableSubscriptions</code> - 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)</li></ul></li></ul> <h3 id="init"><a href="#init" class="header-anchor">#</a> <code>init()</code></h3> <p>Initializes <strong>Subspace</strong></p> <p><strong>Returns</strong> <code>Promise</code> that once it's resolved, will mean that <strong>Subspace</strong> is available to use</p> <h3 id="close"><a href="#close" class="header-anchor">#</a> <code>close()</code></h3> <p>Dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by <strong>Subspace</strong> during its normal execution.</p> <h3 id="contract-instance-abi-address"><a href="#contract-instance-abi-address" class="header-anchor">#</a> <code>contract(instance|{abi,address})</code></h3> <p>Adds a <code>track</code> method to the web3 contract objects. You can obtain this functionality by passing a <code>web3.eth.Contract</code> instance, or the <code>abi</code> and <code>address</code> of your contract</p> <p><strong>Returns</strong> <code>web3.eth.Contract</code> object enhanced with <code>.track()</code> functions for methods and events.</p> <h2 id="contract-methods"><a href="#contract-methods" class="header-anchor">#</a> Contract methods</h2> <h3 id="mycontract-events-myevent-track-options"><a href="#mycontract-events-myevent-track-options" class="header-anchor">#</a> <code>myContract.events.MyEvent.track([options])</code></h3> <p>Track a contract event.</p> <p><strong>Parameters</strong></p> <ol><li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters
<ul><li><code>filter</code> - <code>Object</code> (optional): Lets you filter events by indexed parameters, e.g. <code>{filter: {myNumber: [12,13]}}</code> means all events where <code>&quot;myNumber&quot;</code> is <code>12</code> or <code>13</code>.</li> <li><code>fromBlock</code> - <code>Number</code> (optional): The block number from which to get events on.</li> <li><code>toBlock</code> - <code>Number</code> (optional): The block number to get events up to (Defaults to <code>&quot;latest&quot;</code>)</li> <li><code>topics</code> - <code>Array</code> (optional): This allows you to manually set the topics for the event filter. If given the filter property and event signature, (<code>topic[0]</code>) will not be set automatically.</li></ul></li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the event <code>returnValues</code>.</p> <h3 id="mycontract-methods-mymethod-param1-track-calloptions"><a href="#mycontract-methods-mymethod-param1-track-calloptions" class="header-anchor">#</a> <code>myContract.methods.myMethod([param1[, ...]]).track([callOptions])</code></h3> <p>Track a constant function / contract state variable on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>callOptions</code> - <code>Object</code> (optional): The options used for calling.
<ul><li><code>from</code> - <code>String</code> (optional): The address the call “transaction” should be made from.</li> <li><code>gasPrice</code> - <code>String</code> (optional): The gas price in wei to use for this call “transaction”.</li> <li><code>gas</code> - <code>Number</code> (optional): The maximum gas provided for this call “transaction” (gas limit).</li></ul></li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the function / variable values. Data type will depend on the contract function invoked.</p> <h3 id="mycontract-trackbalance-address-tokenaddress"><a href="#mycontract-trackbalance-address-tokenaddress" class="header-anchor">#</a> <code>myContract.trackBalance(address [, tokenAddress])</code></h3> <p>Track a contract's balance changes for an address on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>address</code> - <code>String</code>: The address to get the balance of.</li> <li><code>tokenAddress</code> - <code>String</code> (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.</li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream a string containing the address balance.</p> <h2 id="blocks-gas-price-and-block-time"><a href="#blocks-gas-price-and-block-time" class="header-anchor">#</a> Blocks, gas price and block time</h2> <h3 id="trackblock"><a href="#trackblock" class="header-anchor">#</a> <code>trackBlock()</code></h3> <p>Receive the block information for any new block. It's the reactive equivalent to <code>web3.eth.getBlock(&quot;latest&quot;)</code>.</p> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream a block object for the latest block received</p> <h3 id="trackblocknumber"><a href="#trackblocknumber" class="header-anchor">#</a> <code>trackBlockNumber()</code></h3> <p>Returns the latest block number. It's the reactive equivalent to <code>web3.eth.getBlockNumber</code>.</p> <p><strong>Returns</strong> <code>RxJS Observable</code> with the latest block number</p> <h3 id="trackgasprice"><a href="#trackgasprice" class="header-anchor">#</a> <code>trackGasPrice()</code></h3> <p>Returns the current gas price oracle. It's the reactive equivalent to <code>web3.eth.getGasPrice</code>.</p> <p><strong>Returns</strong> <code>RxJS Observable</code> with the average gas price in wei.</p> <h3 id="trackaverageblocktime"><a href="#trackaverageblocktime" class="header-anchor">#</a> <code>trackAverageBlocktime()</code></h3> <p>Average block time of the last 10 blocks.</p> <p><strong>Returns</strong> <code>RxJS Observable</code> with the moving average block time of the last 10 blocks. The time is returned in milliseconds:</p> <h2 id="low-level-api-for-data-tracking"><a href="#low-level-api-for-data-tracking" class="header-anchor">#</a> Low level API for data tracking</h2> <p>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.</p> <h3 id="trackevent-contractobject-eventname-options"><a href="#trackevent-contractobject-eventname-options" class="header-anchor">#</a> <code>trackEvent(contractObject, eventName [, options])</code></h3> <p>Track a contract event.</p> <p><strong>Parameters</strong></p> <ol><li><code>contractObject</code> - <code>web3.eth.Contract</code>: An already initialized contract object pointing to an address and containing a valid ABI.</li> <li><code>eventName</code> - <code>String</code>: The name of the event to subscribe.</li> <li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters
<ul><li><code>filter</code> - <code>Object</code> (optional): Lets you filter events by indexed parameters, e.g. <code>{filter: {myNumber: [12,13]}}</code> means all events where <code>&quot;myNumber&quot;</code> is <code>12</code> or <code>13</code>.</li> <li><code>fromBlock</code> - <code>Number</code> (optional): The block number from which to get events on.</li> <li><code>toBlock</code> - <code>Number</code> (optional): The block number to get events up to (Defaults to <code>&quot;latest&quot;</code>)</li> <li><code>topics</code> - <code>Array</code> (optional): This allows you to manually set the topics for the event filter. If given the filter property and event signature, (<code>topic[0]</code>) will not be set automatically.</li></ul></li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the event <code>returnValues</code>.</p> <h3 id="trackproperty-contractobject-functionname-functionargs-calloptions"><a href="#trackproperty-contractobject-functionname-functionargs-calloptions" class="header-anchor">#</a> <code>trackProperty(contractObject, functionName [, functionArgs] [, callOptions])</code></h3> <p>Track a constant function / contract state variable on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>contractObject</code> - <code>web3.eth.Contract</code>: An already initialized contract object pointing to an address and containing a valid ABI.</li> <li><code>functionName</code> - <code>String</code>: Name of the function or variable whose values will be tracked.</li> <li><code>functionArgs</code> - <code>Array</code> (optional): Array of arguments that the tracked function receives</li> <li><code>callOptions</code> - <code>Object</code> (optional): The options used for calling.
<ul><li><code>from</code> - <code>String</code> (optional): The address the call “transaction” should be made from.</li> <li><code>gasPrice</code> - <code>String</code> (optional): The gas price in wei to use for this call “transaction”.</li> <li><code>gas</code> - <code>Number</code> (optional): The maximum gas provided for this call “transaction” (gas limit).</li></ul></li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the function / variable values. Data type will depend on the contract function invoked.</p> <h3 id="trackbalance-address-tokenaddress"><a href="#trackbalance-address-tokenaddress" class="header-anchor">#</a> <code>trackBalance(address [, tokenAddress])</code></h3> <p>Track balance changes for an address on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>address</code> - <code>String</code>: The address to get the balance of.</li> <li><code>tokenAddress</code> - <code>String</code> (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.</li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream a string containing the address balance.</p> <h3 id="tracklogs-options-abi"><a href="#tracklogs-options-abi" class="header-anchor">#</a> <code>trackLogs(options [, abi])</code></h3> <p>Tracks incoming logs, filtered by the given options.</p> <p><strong>Parameters</strong></p> <ol><li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of logs
<ul><li><code>address</code> - <code>String|Array</code> (optional): An address or a list of addresses to only get logs from particular account(s).</li> <li><code>fromBlock</code> - <code>Number</code> (optional): The block number from which to get events on.</li> <li><code>topics</code> - <code>Array</code> (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']].</li></ul></li> <li><code>abi</code> - <code>Array</code> (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.</li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the logs. If the inputs ABI is included in the call, the logs will be automatically decoded.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/tutorial.html" class="prev">Tutorial</a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.eea690de.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/8.34bb8c58.js" defer></script>
<script src="/assets/js/app.00a46c5f.js" defer></script><script src="/assets/js/3.072ab49d.js" defer></script><script src="/assets/js/8.7bad8100.js" defer></script>
</body>
</html>

56
apollo-client.html
View File

@ -5,14 +5,15 @@
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>apollo-client | SUBSPACE</title>
<meta name="description" content="Reactive ÐApp Development">
<meta name="generator" content="VuePress 1.3.1">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
<link rel="shortcut icon" href="/assets/img/logo-small.png">
<meta name="theme-color" content="#ffffff">
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.eea690de.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/9.e55a9a9a.js" as="script"><link rel="prefetch" href="/assets/js/10.0ba7844a.js"><link rel="prefetch" href="/assets/js/11.e6fa739b.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.72c7694a.js"><link rel="prefetch" href="/assets/js/14.afbc70c1.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.b64d2715.js"><link rel="prefetch" href="/assets/js/17.6d75f10a.js"><link rel="prefetch" href="/assets/js/18.801d9314.js"><link rel="prefetch" href="/assets/js/19.91da0b43.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.59e30da8.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.34bb8c58.js">
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
<link rel="preload" href="/assets/css/0.styles.b4d346dc.css" as="style"><link rel="preload" href="/assets/js/app.00a46c5f.js" as="script"><link rel="preload" href="/assets/js/3.072ab49d.js" as="script"><link rel="preload" href="/assets/js/9.01449017.js" as="script"><link rel="prefetch" href="/assets/js/10.4595e7f8.js"><link rel="prefetch" href="/assets/js/11.638336c9.js"><link rel="prefetch" href="/assets/js/12.792fcfd2.js"><link rel="prefetch" href="/assets/js/13.a67d614a.js"><link rel="prefetch" href="/assets/js/14.b783779c.js"><link rel="prefetch" href="/assets/js/15.1d9ae469.js"><link rel="prefetch" href="/assets/js/16.d0bf4930.js"><link rel="prefetch" href="/assets/js/17.c66feffd.js"><link rel="prefetch" href="/assets/js/18.ec597d92.js"><link rel="prefetch" href="/assets/js/19.a3968107.js"><link rel="prefetch" href="/assets/js/2.af279185.js"><link rel="prefetch" href="/assets/js/4.336e58fa.js"><link rel="prefetch" href="/assets/js/5.5969a423.js"><link rel="prefetch" href="/assets/js/6.169a8ab4.js"><link rel="prefetch" href="/assets/js/7.da8dc444.js"><link rel="prefetch" href="/assets/js/8.7bad8100.js">
<link rel="stylesheet" href="/assets/css/0.styles.b4d346dc.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><script type="text/javascript">
@ -31,35 +32,28 @@ fathom('trackPageview');
Github
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path 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"></path> <polygon 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"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path 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"></path> <polygon 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"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#getting-block-data-gas-prices-and-block-time" class="sidebar-link">Getting block data, gas prices and block time</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="active sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#blocks-gas-price-and-block-time" class="sidebar-link">Blocks, gas price and block time</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="apollo-client"><a href="#apollo-client" aria-hidden="true" class="header-anchor">#</a> apollo-client</h1> <p>To use <strong>Subspace</strong> with <code>apollo-client</code>, a composed <code>ApolloLink</code> must be defined using the <code>apollo-link-rxjs</code> and <code>reactive-graphl</code> npm packages. Notice that the <code>addTypename</code> option of <code>InMemoryCache</code> must be set <code>false</code>.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ApolloClient <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;apollo-client&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> InMemoryCache <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;apollo-cache-inmemory&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> ApolloLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;apollo-link&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> rxjs <span class="token keyword">as</span> rxJsLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;apollo-link-rxjs&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> graphql <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;reactive-graphql&quot;</span><span class="token punctuation">;</span>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path 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"></path> <polygon 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"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#getting-block-data-gas-prices-and-block-time" class="sidebar-link">Getting block data, gas prices and block time</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="active sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#blocks-gas-price-and-block-time" class="sidebar-link">Blocks, gas price and block time</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="apollo-client"><a href="#apollo-client" class="header-anchor">#</a> apollo-client</h1> <p>To use <strong>Subspace</strong> with <code>apollo-client</code>, a <code>ReactiveSchemaLink</code> from <code>apollo-link-reactive-schema</code> must be used with a custom schema.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>InMemoryCache<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;apollo-cache-inmemory&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> ApolloClient <span class="token keyword">from</span> <span class="token string">&quot;apollo-client&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>ReactiveSchemaLink<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;apollo-link-reactive-schema&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> schema <span class="token operator">=</span> <span class="token function">makeExecutableSchema</span><span class="token punctuation">(</span><span class="token punctuation">{</span>typeDefs<span class="token punctuation">,</span> resolvers<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> client <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ApolloClient</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment">// If addTypename:true, the query will fail due to __typename</span>
<span class="token comment">// being added to the schema. reactive-graphql does not</span>
<span class="token comment">// support __typename at this moment.</span>
cache<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">InMemoryCache</span><span class="token punctuation">(</span><span class="token punctuation">{</span> addTypename<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
link<span class="token punctuation">:</span> ApolloLink<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token function">rxJsLink</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token keyword">new</span> <span class="token class-name">ApolloLink</span><span class="token punctuation">(</span><span class="token parameter">operation</span> <span class="token operator">=&gt;</span> <span class="token function">graphql</span><span class="token punctuation">(</span>schema<span class="token punctuation">,</span> operation<span class="token punctuation">.</span>query<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span>
cache<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">InMemoryCache</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
link<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">ReactiveSchemaLink</span><span class="token punctuation">(</span><span class="token punctuation">{</span>schema<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="example"><a href="#example" aria-hidden="true" class="header-anchor">#</a> Example</h3> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div></div><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ApolloClient <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;apollo-client&quot;</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="example"><a href="#example" class="header-anchor">#</a> Example</h3> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div></div><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ApolloClient <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;apollo-client&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> InMemoryCache <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;apollo-cache-inmemory&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> ApolloLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;apollo-link&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> rxjs <span class="token keyword">as</span> rxJsLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;apollo-link-rxjs&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> graphql <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;reactive-graphql&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span>ReactiveSchemaLink<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;apollo-link-reactive-schema&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Subspace <span class="token keyword">from</span> <span class="token string">&quot;@embarklabs/subspace&quot;</span><span class="token punctuation">;</span>
<span class="token comment">// ...</span>
<span class="token comment">// Initialize Subspace</span>
<span class="token keyword">const</span> subspace <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Subspace</span><span class="token punctuation">(</span>web3<span class="token punctuation">.</span>currentProvider<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Use a valid provider (geth, parity, infura...)</span>
<span class="token keyword">const</span> subspace <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Subspace</span><span class="token punctuation">(</span>web3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">await</span> subspace<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> MyContractInstance <span class="token operator">=</span> <span class="token operator">...</span><span class="token punctuation">;</span> <span class="token comment">// TODO: obtain a web3.eth.contract instance</span>
<span class="token keyword">const</span> MyContractInstance <span class="token operator">=</span> <span class="token operator">...</span><span class="token punctuation">;</span> <span class="token comment">// TODO: obtain a web3.eth.Contract instance</span>
<span class="token keyword">const</span> typeDefs <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
type MyEvent {
@ -72,29 +66,21 @@ fathom('trackPageview');
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token keyword">const</span> resolvers <span class="token operator">=</span> <span class="token punctuation">{</span>
Query<span class="token punctuation">:</span> <span class="token punctuation">{</span>
<span class="token function-variable function">myEvents</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> subspace<span class="token punctuation">.</span><span class="token function">trackEvent</span><span class="token punctuation">(</span>MyContractInstance<span class="token punctuation">,</span> <span class="token string">'MyEvent'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>filter<span class="token punctuation">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> fromBlock<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
Query<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function-variable function">myEvents</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> subspace<span class="token punctuation">.</span><span class="token function">trackEvent</span><span class="token punctuation">(</span>MyContractInstance<span class="token punctuation">,</span> <span class="token string">'MyEvent'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>filter<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> fromBlock<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> schema <span class="token operator">=</span> <span class="token function">makeExecutableSchema</span><span class="token punctuation">(</span><span class="token punctuation">{</span> typeDefs<span class="token punctuation">,</span> resolvers <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> client <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ApolloClient</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
<span class="token comment">// If addTypename:true, the query will fail due to __typename</span>
<span class="token comment">// being added to the schema. reactive-graphql does not</span>
<span class="token comment">// support __typename at this moment.</span>
cache<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">InMemoryCache</span><span class="token punctuation">(</span><span class="token punctuation">{</span> addTypename<span class="token punctuation">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
link<span class="token punctuation">:</span> ApolloLink<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
<span class="token function">rxJsLink</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token keyword">new</span> <span class="token class-name">ApolloLink</span><span class="token punctuation">(</span><span class="token parameter">operation</span> <span class="token operator">=&gt;</span> <span class="token function">graphql</span><span class="token punctuation">(</span>schema<span class="token punctuation">,</span> operation<span class="token punctuation">.</span>query<span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span>
cache<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">InMemoryCache</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
link<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">ReactiveSchemaLink</span><span class="token punctuation">(</span><span class="token punctuation">{</span>schema<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br></div></div><div class="tip custom-block"><p class="custom-block-title">Using react-apollo</p> <p>A practical example can also be found in <code>examples/react-apollo</code>.</p></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">Using react-apollo</p> <p>A practical example can also be found in <code>examples/react-apollo</code>.</p></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/reactive-graphql.html" class="prev">reactive-graphql</a></span> <span class="next"><a href="/tutorial.html">Tutorial</a>→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.eea690de.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/9.e55a9a9a.js" defer></script>
<script src="/assets/js/app.00a46c5f.js" defer></script><script src="/assets/js/3.072ab49d.js" defer></script><script src="/assets/js/9.01449017.js" defer></script>
</body>
</html>

1
assets/css/0.styles.9a3d86bc.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/0.styles.514b72f5.css → assets/css/0.styles.b4d346dc.css
View File

File diff suppressed because one or more lines are too long

1
assets/css/0.styles.ff6dfed4.css
View File

File diff suppressed because one or more lines are too long

1
assets/js/10.0ba7844a.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/10.3b1995f4.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{212: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}}]);

1
assets/js/10.4595e7f8.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/js/10.89e9df6b.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/10.ad0555d0.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/10.df07d2be.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{219:function(t,e,o){"use strict";o.r(e);var r=o(0),s=Object(r.a)({},(function(){var t=this,e=t.$createElement,o=t._self._c||e;return o("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[o("h1",{attrs:{id:"integrations-with-other-frameworks"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#integrations-with-other-frameworks"}},[t._v("#")]),t._v(" Integrations with other frameworks")]),t._v(" "),o("p",[o("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 "),o("strong",[t._v("Subspace")]),t._v(" with various frontend frameworks and libraries")])])}),[],!1,null,null,null);e.default=s.exports}}]);

1
assets/js/11.2a9f96fe.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{216:function(t,e,n){"use strict";n.r(e);var s=n(0),l=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);e.default=l.exports}}]);

1
assets/js/11.2ab88290.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{221: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}}]);

1
assets/js/11.4115a4ef.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{220: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}}]);

1
assets/js/11.638336c9.js Normal file
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{214:function(t,e,o){"use strict";o.r(e);var r=o(28),s=Object(r.a)({},(function(){var t=this,e=t.$createElement,o=t._self._c||e;return o("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[o("h1",{attrs:{id:"integrations-with-other-frameworks"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#integrations-with-other-frameworks"}},[t._v("#")]),t._v(" Integrations with other frameworks")]),t._v(" "),o("p",[o("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 "),o("strong",[t._v("Subspace")]),t._v(" with various frontend frameworks and libraries")])])}),[],!1,null,null,null);e.default=s.exports}}]);

1
assets/js/11.b5216252.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{214:function(t,e,n){"use strict";n.r(e);var s=n(0),l=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);e.default=l.exports}}]);

1
assets/js/11.e6fa739b.js
View File

@ -1 +0,0 @@
(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}}]);

1
assets/js/12.44cb4d70.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{220:function(t,e,n){"use strict";n.r(e);var s=n(0),l=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);e.default=l.exports}}]);

1
assets/js/12.483e20d3.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{221:function(t,e,n){"use strict";n.r(e);var s=n(0),l=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);e.default=l.exports}}]);

1
assets/js/12.792fcfd2.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/js/12.85ce989d.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/12.8f2e1280.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/13.72c7694a.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/13.73efb4d7.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/13.8d36d8c0.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/13.a67d614a.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/js/13.c8151d83.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/13.c9d288f4.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/14.16c0ba27.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/14.195a3661.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{211:function(t,e,n){"use strict";n.r(e);var s=n(0),o=Object(s.a)({},(function(){var t=this.$createElement,e=this._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("hr"),this._v(" "),e("code1")],1)}),[],!1,null,null,null);e.default=o.exports}}]);

1
assets/js/14.513e9262.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{212:function(t,e,n){"use strict";n.r(e);var s=n(0),o=Object(s.a)({},(function(){var t=this.$createElement,e=this._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("hr"),this._v(" "),e("code1")],1)}),[],!1,null,null,null);e.default=o.exports}}]);

1
assets/js/14.562246e0.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/14.afbc70c1.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/14.b783779c.js Normal file
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{216:function(t,e,n){"use strict";n.r(e);var s=n(28),o=Object(s.a)({},(function(){var t=this.$createElement,e=this._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("hr"),this._v(" "),e("code1")],1)}),[],!1,null,null,null);e.default=o.exports}}]);

1
assets/js/15.1d9ae469.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/js/15.1e59e25f.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{223:function(t,e,n){"use strict";n.r(e);var s=n(0),o=Object(s.a)({},(function(){var t=this.$createElement,e=this._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("hr"),this._v(" "),e("code1")],1)}),[],!1,null,null,null);e.default=o.exports}}]);

1
assets/js/15.50f3de3e.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/15.d48a7184.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/15.df26724a.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{224:function(t,e,n){"use strict";n.r(e);var s=n(0),o=Object(s.a)({},(function(){var t=this.$createElement,e=this._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("hr"),this._v(" "),e("code1")],1)}),[],!1,null,null,null);e.default=o.exports}}]);

1
assets/js/16.1b9eabd3.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/16.23bd311f.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/16.b2dc4bae.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/16.b64d2715.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/16.c6d7927e.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/16.d0bf4930.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/js/17.6d75f10a.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/17.6e4d419c.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{221: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}}]);

1
assets/js/17.910b0e9e.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{222:function(e,t,a){"use strict";a.r(t);var s=a(0),r=Object(s.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"}},[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/embarklabs/subspace/tree/master/examples/react-example1",target:"_blank",rel:"noopener noreferrer"}},[this._v("https://github.com/embarklabs/subspace/tree/master/examples/react-example1"),t("OutboundLink")],1)])])}),[],!1,null,null,null);t.default=r.exports}}]);

1
assets/js/17.94e619f7.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/17.c66feffd.js Normal file
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{219:function(e,t,a){"use strict";a.r(t);var r=a(28),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"}},[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}}]);

1
assets/js/17.e68e2fcb.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/18.0936c664.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/18.7017f018.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/18.71f9ba08.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{227: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}}]);

1
assets/js/18.801d9314.js
View File

@ -1 +0,0 @@
(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}}]);

1
assets/js/18.ec597d92.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/js/19.1ae67b9a.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{9:function(n,w,o){}}]);

1
assets/js/19.32de2763.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{9:function(n,w,o){}}]);

1
assets/js/19.8c50e175.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/19.91da0b43.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/19.a3968107.js Normal file
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{141:function(n,w,o){}}]);

1
assets/js/2.ae31a69c.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/2.af279185.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/js/2.c401969f.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/2.ced3bc39.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/20.4691289d.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{9:function(n,w,o){}}]);

1
assets/js/3.072ab49d.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/js/3.13986f99.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{202:function(e,t,a){e.exports=a.p+"assets/img/d1.daa5485a.png"},203:function(e,t,a){e.exports=a.p+"assets/img/d2.de512122.png"},204:function(e,t,a){e.exports=a.p+"assets/img/d3.123a2e18.png"},205: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(202),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(203),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(204),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(205),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}}]);

1
assets/js/3.9498df45.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/3.fc5c8748.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{203:function(e,t,s){e.exports=s.p+"assets/img/d1.daa5485a.png"},204:function(e,t,s){e.exports=s.p+"assets/img/d2.de512122.png"},205:function(e,t,s){e.exports=s.p+"assets/img/d3.123a2e18.png"},206:function(e,t,s){e.exports=s.p+"assets/img/d4.81f850ef.png"},213:function(e,t,s){"use strict";s.r(t);var a=s(0),r=Object(a.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:"how-it-works"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-it-works"}},[e._v("#")]),e._v(" How it works?")]),e._v(" "),a("h3",{attrs:{id:"setup"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setup"}},[e._v("#")]),e._v(" Setup")]),e._v(" "),a("p",[a("img",{attrs:{src:s(203),alt:"First Usage - Setup"}})]),e._v(" "),a("ol",[a("li",[e._v("A ÐApp requests "),a("code",[e._v("Subspace")]),e._v(" to track an event, property, or balance.")]),e._v(" "),a("li",[a("code",[e._v("Subspace")]),e._v(" creates a observable for that event, and a web3 subscription to retrieve events from the chain")]),e._v(" "),a("li",[e._v("The ÐApp subscribes to the observable to receive events.")])]),e._v(" "),a("h3",{attrs:{id:"receiving-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#receiving-events"}},[e._v("#")]),e._v(" Receiving events")]),e._v(" "),a("p",[a("img",{attrs:{src:s(204),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 "),a("code",[e._v("localStorage")]),e._v(" and it is also pushed to the observable which delivers it to the ÐApp subscription.")]),e._v(" "),a("h3",{attrs:{id:"tracking-already-known-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tracking-already-known-events"}},[e._v("#")]),e._v(" Tracking already known events")]),e._v(" "),a("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 "),a("code",[e._v("Subspace")]),e._v(" will change:\n"),a("img",{attrs:{src:s(205),alt:"Second Usage - Setup"}})]),e._v(" "),a("ol",[a("li",[e._v("The Dapp will request "),a("code",[e._v("Subspace")]),e._v(" to track an event it already knows, creating an observable and subscription for that event")]),e._v(" "),a("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(" "),a("p",[a("img",{attrs:{src:s(206),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}}]);

1
assets/js/4.08c332fb.js
View File

@ -1 +0,0 @@
(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"},219: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}}]);

1
assets/js/4.336e58fa.js Normal file
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{201:function(e,t,s){e.exports=s.p+"assets/img/d1.daa5485a.png"},202:function(e,t,s){e.exports=s.p+"assets/img/d2.de512122.png"},203:function(e,t,s){e.exports=s.p+"assets/img/d3.123a2e18.png"},204:function(e,t,s){e.exports=s.p+"assets/img/d4.81f850ef.png"},213:function(e,t,s){"use strict";s.r(t);var a=s(28),r=Object(a.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:"how-it-works"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-it-works"}},[e._v("#")]),e._v(" How it works?")]),e._v(" "),a("h3",{attrs:{id:"setup"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setup"}},[e._v("#")]),e._v(" Setup")]),e._v(" "),a("p",[a("img",{attrs:{src:s(201),alt:"First Usage - Setup"}})]),e._v(" "),a("ol",[a("li",[e._v("A ÐApp requests "),a("code",[e._v("Subspace")]),e._v(" to track an event, property, or balance.")]),e._v(" "),a("li",[a("code",[e._v("Subspace")]),e._v(" creates a observable for that event, and a web3 subscription to retrieve events from the chain")]),e._v(" "),a("li",[e._v("The ÐApp subscribes to the observable to receive events.")])]),e._v(" "),a("h3",{attrs:{id:"receiving-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#receiving-events"}},[e._v("#")]),e._v(" Receiving events")]),e._v(" "),a("p",[a("img",{attrs:{src:s(202),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 "),a("code",[e._v("localStorage")]),e._v(" and it is also pushed to the observable which delivers it to the ÐApp subscription.")]),e._v(" "),a("h3",{attrs:{id:"tracking-already-known-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tracking-already-known-events"}},[e._v("#")]),e._v(" Tracking already known events")]),e._v(" "),a("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 "),a("code",[e._v("Subspace")]),e._v(" will change:\n"),a("img",{attrs:{src:s(203),alt:"Second Usage - Setup"}})]),e._v(" "),a("ol",[a("li",[e._v("The Dapp will request "),a("code",[e._v("Subspace")]),e._v(" to track an event it already knows, creating an observable and subscription for that event")]),e._v(" "),a("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(" "),a("p",[a("img",{attrs:{src:s(204),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}}]);

1
assets/js/4.409ebe9b.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/4.59e30da8.js
View File

@ -1 +0,0 @@
(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}}]);

1
assets/js/4.e5468477.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/5.26dd2b41.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{208:function(t,e,n){"use strict";var i=n(73);n.n(i).a},215:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(208),n(0)),a=Object(r.a)(i,void 0,void 0,!1,null,"c13ee5b0",null);e.default=a.exports},73:function(t,e,n){}}]);

1
assets/js/5.3095c620.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{207:function(t,e,n){"use strict";var i=n(73);n.n(i).a},214:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(207),n(0)),a=Object(r.a)(i,void 0,void 0,!1,null,"c13ee5b0",null);e.default=a.exports},73:function(t,e,n){}}]);

1
assets/js/5.5969a423.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/js/5.73836d55.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/6.169a8ab4.js Normal file
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{159:function(t,e,n){},206:function(t,e,n){"use strict";var i=n(159);n.n(i).a},223:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(206),n(28)),a=Object(r.a)(i,void 0,void 0,!1,null,"f531b196",null);e.default=a.exports}}]);

1
assets/js/6.3def5758.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{210:function(t,e,s){"use strict";s.r(e);var o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],n={methods:{getMsg:function(){return o[Math.floor(Math.random()*o.length)]}}},i=s(0),h=Object(i.a)(n,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("router-link",{attrs:{to:"/"}},[this._v("Take me home.")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);

1
assets/js/6.5f41d563.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{210:function(t,e,n){"use strict";var i=n(82);n.n(i).a},229:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(210),n(0)),a=Object(r.a)(i,void 0,void 0,!1,null,"f531b196",null);e.default=a.exports},82:function(t,e,n){}}]);

1
assets/js/6.8a01ae42.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{211:function(t,e,s){"use strict";s.r(e);var o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],n={methods:{getMsg:function(){return o[Math.floor(Math.random()*o.length)]}}},i=s(0),h=Object(i.a)(n,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("router-link",{attrs:{to:"/"}},[this._v("Take me home.")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);

1
assets/js/7.a2409073.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/7.b87cb3e3.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/7.da8dc444.js Normal file
View File

@ -0,0 +1 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{209:function(t,e,s){"use strict";s.r(e);var o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],n={methods:{getMsg:function(){return o[Math.floor(Math.random()*o.length)]}}},i=s(28),h=Object(i.a)(n,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("router-link",{attrs:{to:"/"}},[this._v("Take me home.")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);

1
assets/js/7.e27f5416.js
View File

@ -1 +0,0 @@
(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{214:function(t,e,s){"use strict";s.r(e);var o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],n={methods:{getMsg:function(){return o[Math.floor(Math.random()*o.length)]}}},i=s(0),h=Object(i.a)(n,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("router-link",{attrs:{to:"/"}},[this._v("Take me home.")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);

1
assets/js/8.02b67b8a.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/8.34bb8c58.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/8.37de77ca.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/8.65c85371.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/8.7bad8100.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/js/8.901206cf.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/9.01449017.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/js/9.19ef9a17.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/9.a48ad32f.js
View File

File diff suppressed because one or more lines are too long

1
assets/js/9.e55a9a9a.js
View File

File diff suppressed because one or more lines are too long

13
assets/js/app.00a46c5f.js Normal file
View File

File diff suppressed because one or more lines are too long

14
assets/js/app.0eb61ebf.js
View File

File diff suppressed because one or more lines are too long

Some files were not shown because too many files have changed in this diff Show More