feat: add contracts docs
This commit is contained in:
Richard Ramos
parent
2c83ecee50
commit
39f994d092
6
404.html
6
404.html
|
|
@ -11,11 +11,11 @@
|
|||
<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.79de258e.js" as="script"><link rel="preload" href="/assets/js/7.e27f5416.js" as="script"><link rel="prefetch" href="/assets/js/10.89e9df6b.js"><link rel="prefetch" href="/assets/js/11.4115a4ef.js"><link rel="prefetch" href="/assets/js/12.483e20d3.js"><link rel="prefetch" href="/assets/js/13.c8151d83.js"><link rel="prefetch" href="/assets/js/14.562246e0.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.23bd311f.js"><link rel="prefetch" href="/assets/js/17.e68e2fcb.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.02b67b8a.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/7.e27f5416.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.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.79de258e.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>How did we get 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.0eb61ebf.js" defer></script><script src="/assets/js/7.e27f5416.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
6
api.html
6
api.html
|
|
@ -11,7 +11,7 @@
|
|||
<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.79de258e.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/8.02b67b8a.js" as="script"><link rel="prefetch" href="/assets/js/10.89e9df6b.js"><link rel="prefetch" href="/assets/js/11.4115a4ef.js"><link rel="prefetch" href="/assets/js/12.483e20d3.js"><link rel="prefetch" href="/assets/js/13.c8151d83.js"><link rel="prefetch" href="/assets/js/14.562246e0.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.23bd311f.js"><link rel="prefetch" href="/assets/js/17.e68e2fcb.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/8.65c85371.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -31,7 +31,7 @@ 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/status-im/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#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#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#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
|
||||
<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#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#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>disableSubscriptions</code> - <code>Subspace</code> 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 <code>HttpProvider</code>. This functionality can be disabled by passing <code>true</code> to this option. (default: <code>false</code>)</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>"myNumber"</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>"latest"</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="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
|
||||
|
|
@ -40,6 +40,6 @@ fathom('trackPageview');
|
|||
<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.79de258e.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/8.02b67b8a.js" defer></script>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/8.65c85371.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<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.79de258e.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.89e9df6b.js"><link rel="prefetch" href="/assets/js/11.4115a4ef.js"><link rel="prefetch" href="/assets/js/12.483e20d3.js"><link rel="prefetch" href="/assets/js/13.c8151d83.js"><link rel="prefetch" href="/assets/js/14.562246e0.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.23bd311f.js"><link rel="prefetch" href="/assets/js/17.e68e2fcb.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.02b67b8a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.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.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.65c85371.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -31,7 +31,7 @@ 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/status-im/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#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#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#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">"apollo-client"</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#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#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">"apollo-client"</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">"apollo-cache-inmemory"</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">"apollo-link"</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">"apollo-link-rxjs"</span><span class="token punctuation">;</span>
|
||||
|
|
@ -95,6 +95,6 @@ fathom('trackPageview');
|
|||
←
|
||||
<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.79de258e.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.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/9.e55a9a9a.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
(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}}]);
|
||||
|
|
@ -0,0 +1 @@
|
|||
(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}}]);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
(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}}]);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -11,7 +11,7 @@
|
|||
<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.79de258e.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/10.89e9df6b.js" as="script"><link rel="prefetch" href="/assets/js/11.4115a4ef.js"><link rel="prefetch" href="/assets/js/12.483e20d3.js"><link rel="prefetch" href="/assets/js/13.c8151d83.js"><link rel="prefetch" href="/assets/js/14.562246e0.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.23bd311f.js"><link rel="prefetch" href="/assets/js/17.e68e2fcb.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.02b67b8a.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/10.ad0555d0.js" as="script"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -31,7 +31,7 @@ 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/status-im/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="active 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#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#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="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#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="getting-started"><a href="#getting-started" aria-hidden="true" class="header-anchor">#</a> Getting Started</h1> <h2 id="installation"><a href="#installation" aria-hidden="true" class="header-anchor">#</a> Installation</h2> <p><strong>Subspace</strong> can be used in browser, node and native script environments. To get started install the package <code>@embarklabs/subspace</code> using <code>npm</code> or <code>yarn</code> by executing this command in your project directory:</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># Using npm</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="active 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#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="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#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="getting-started"><a href="#getting-started" aria-hidden="true" class="header-anchor">#</a> Getting Started</h1> <h2 id="installation"><a href="#installation" aria-hidden="true" class="header-anchor">#</a> Installation</h2> <p><strong>Subspace</strong> can be used in browser, node and native script environments. To get started install the package <code>@embarklabs/subspace</code> using <code>npm</code> or <code>yarn</code> by executing this command in your project directory:</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># Using npm</span>
|
||||
<span class="token function">npm</span> <span class="token function">install</span> --save @embarklabs/subspace
|
||||
|
||||
<span class="token comment"># Using yarn</span>
|
||||
|
|
@ -43,13 +43,25 @@ fathom('trackPageview');
|
|||
<span class="token keyword">const</span> Subspace <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@embarklabs/subspace'</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></div></div><h2 id="connecting-to-a-web3-provider"><a href="#connecting-to-a-web3-provider" aria-hidden="true" class="header-anchor">#</a> Connecting to a web3 provider</h2> <p>To interact with the EVM, <strong>Subspace</strong> requires a valid Web3 provider.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><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 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>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>In addition to the provider, <code>Subspace</code> also accepts an <code>options</code> object with settings that can change its behavior:</p> <ul><li><code>dbFilename</code> - Name of the database where the information will be stored (default <code>'subspace.db'</code>)</li> <li><code>callInterval</code> - Interval of time in milliseconds to query a contract/address to determine changes in state or balance (default: <code>undefined</code>. Obtains data every block).</li> <li><code>disableSubscriptions</code> - <code>Subspace</code> 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 <code>HttpProvider</code>. This functionality can be disabled by passing <code>true</code> to this option. (default: <code>false</code>)tionality can be forced by passing <code>true</code> to this option. (default: <code>undefined</code>)</li></ul> <h2 id="reacting-to-data"><a href="#reacting-to-data" aria-hidden="true" class="header-anchor">#</a> Reacting to data</h2> <p>Once it's initialized, you can use <strong>Subspace</strong>'s methods to track the contract state, events and balances. These functions return RxJS Observables which you can subscribe to, and obtain and transform the observed data via operators.</p> <div class="tip custom-block"><p class="custom-block-title">What is an Observable?</p> <p>The <code>Observable</code> type can be used to model push-based data sources such as DOM events, timer intervals, and sockets. In addition, observables are:</p> <ul><li>Compositional: Observables can be composed with higher-order combinators.</li> <li>Lazy: Observables do not start emitting data until an observer has subscribed.</li></ul></div> <h4 id="further-read"><a href="#further-read" aria-hidden="true" class="header-anchor">#</a> Further read</h4> <ul><li><a href="https://rxjs-dev.firebaseapp.com/guide/observable" target="_blank" rel="noopener noreferrer">RxJS Observables<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></li></ul> <h2 id="tracking-state"><a href="#tracking-state" aria-hidden="true" class="header-anchor">#</a> Tracking state</h2> <p>You can track changes to a contract state variable, by specifying the view function and arguments to call and query the contract.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> stateObservable$ <span class="token operator">=</span> Contract<span class="token punctuation">.</span>methods<span class="token punctuation">.</span><span class="token function">functionName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">track</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></div></div><div class="tip custom-block"><p class="custom-block-title">Tracking the public variables of a contract</p> <p>State variables implicity create a <code>view</code> function when they're defined as <code>public</code>. The <code>functionName</code> would be the same as the variable name, and <code>functionArgs</code> would have a value when the type is a <code>mapping</code> or <code>array</code> (since these require an index value to query them).</p></div> <p>Example:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> productTitle$ <span class="token operator">=</span> ProductList<span class="token punctuation">.</span>methods<span class="token punctuation">.</span><span class="token function">products</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token string">"title"</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></div></div><p>In addition to the provider, <code>Subspace</code> also accepts an <code>options</code> object with settings that can change its behavior:</p> <ul><li><code>dbFilename</code> - Name of the database where the information will be stored (default <code>'subspace.db'</code>)</li> <li><code>callInterval</code> - Interval of time in milliseconds to query a contract/address to determine changes in state or balance (default: <code>undefined</code>. Obtains data every block).</li> <li><code>disableSubscriptions</code> - <code>Subspace</code> 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 <code>HttpProvider</code>. This functionality can be disabled by passing <code>true</code> to this option. (default: <code>false</code>)tionality can be forced by passing <code>true</code> to this option. (default: <code>undefined</code>)</li></ul> <h2 id="enhancing-your-contract-objects"><a href="#enhancing-your-contract-objects" aria-hidden="true" class="header-anchor">#</a> Enhancing your contract objects</h2> <p>Subspace provides a method to enhance your web3 Contract objects: <code>subspace.contract(instance|{abi,address})</code>. Calling this method will return a new contract object decorated with a <code>.track()</code> method for your contract view functions and events.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> myRxContract <span class="token operator">=</span> subspace<span class="token punctuation">.</span><span class="token function">contract</span><span class="token punctuation">(</span>myContractInstance<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>You can also instantiate a contract directly by passing the contract ABI and its address:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> myRXContract <span class="token operator">=</span> subspace<span class="token punctuation">.</span><span class="token function">contract</span><span class="token punctuation">(</span><span class="token punctuation">{</span>abi<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">.</span><span class="token punctuation">,</span> address<span class="token punctuation">:</span> <span class="token string">'0x1234...CDEF'</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></div></div><h2 id="reacting-to-data"><a href="#reacting-to-data" aria-hidden="true" class="header-anchor">#</a> Reacting to data</h2> <p>Once it's initialized, you can use <strong>Subspace</strong>'s methods to track the contract state, events and balances. These functions return RxJS Observables which you can subscribe to, and obtain and transform the observed data via operators.</p> <div class="tip custom-block"><p class="custom-block-title">What is an Observable?</p> <p>The <code>Observable</code> type can be used to model push-based data sources such as DOM events, timer intervals, and sockets. In addition, observables are:</p> <ul><li>Compositional: Observables can be composed with higher-order combinators.</li> <li>Lazy: Observables do not start emitting data until an observer has subscribed.</li></ul></div> <h4 id="further-read"><a href="#further-read" aria-hidden="true" class="header-anchor">#</a> Further read</h4> <ul><li><a href="https://rxjs-dev.firebaseapp.com/guide/observable" target="_blank" rel="noopener noreferrer">RxJS Observables<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></li></ul> <h2 id="tracking-state"><a href="#tracking-state" aria-hidden="true" class="header-anchor">#</a> Tracking state</h2> <p>You can track changes to a contract state variable, by specifying the view function and arguments to call and query the contract.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> stateObservable$ <span class="token operator">=</span> Contract<span class="token punctuation">.</span>methods<span class="token punctuation">.</span><span class="token function">functionName</span><span class="token punctuation">(</span>functionArgs<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">track</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></div></div><div class="tip custom-block"><p class="custom-block-title">Tracking the public variables of a contract</p> <p>State variables implicity create a <code>view</code> function when they're defined as <code>public</code>. The <code>functionName</code> would be the same as the variable name, and <code>functionArgs</code> will have a value when the type is a <code>mapping</code> or <code>array</code> (since these require an index value to query them).</p></div> <p>Example:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> productTitle$ <span class="token operator">=</span> ProductList<span class="token punctuation">.</span>methods<span class="token punctuation">.</span><span class="token function">products</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token string">"title"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
productTitle$<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">title</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"product title is "</span> <span class="token operator">+</span> title<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></div></div><p>The subscriber will be triggered whenever the title changes</p> <h2 id="tracking-events"><a href="#tracking-events" aria-hidden="true" class="header-anchor">#</a> Tracking events</h2> <p>You can track events and react to their returned values.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> eventObservable$ <span class="token operator">=</span> Contract<span class="token punctuation">.</span>event<span class="token punctuation">.</span><span class="token function">eventName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
|
||||
<span class="token comment">// Alternative using Subspace low level API</span>
|
||||
<span class="token keyword">const</span> producTitle$ <span class="token operator">=</span> subspace<span class="token punctuation">.</span><span class="token function">trackProperty</span><span class="token punctuation">(</span>ProductList<span class="token punctuation">,</span> <span class="token string">"products"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token keyword">from</span><span class="token punctuation">:</span> web3<span class="token punctuation">.</span>eth<span class="token punctuation">.</span>defaultAccount<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token operator">...</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></div></div><p>The subscription will be triggered whenever the title changes</p> <h2 id="tracking-events"><a href="#tracking-events" aria-hidden="true" class="header-anchor">#</a> Tracking events</h2> <p>You can track events and react to their returned values.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> eventObservable$ <span class="token operator">=</span> Contract<span class="token punctuation">.</span>event<span class="token punctuation">.</span><span class="token function">eventName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">track</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></div></div><p>Example:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> rating$ <span class="token operator">=</span> Product<span class="token punctuation">.</span>events<span class="token punctuation">.</span><span class="token function">Rating</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token string">"rating"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=></span> <span class="token function">parseInt</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
rating$<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">rating</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"rating received: "</span> <span class="token operator">+</span> rating<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></div></div><p><strong>Event Sourcing</strong></p> <p>You can easily do event sourcing with subspace.</p> <p>For e.g: if you needed to get the average rating of the last 5 events:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> $average<span class="token punctuation">,</span> $latest <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@embarklabs/subspace"</span><span class="token punctuation">;</span>
|
||||
|
||||
|
||||
<span class="token comment">// Alternative using Subspace low level API</span>
|
||||
<span class="token keyword">const</span> rating$ <span class="token operator">=</span> subspace<span class="token punctuation">.</span><span class="token function">trackEvent</span><span class="token punctuation">(</span>Product<span class="token punctuation">,</span> <span class="token string">"Rating"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>fromBlock<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token operator">...</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></div></div><p><strong>Event Sourcing</strong></p> <p>You can easily do event sourcing with subspace.</p> <p>For e.g: if you needed to get the average rating of the last 5 events:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> $average<span class="token punctuation">,</span> $latest <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@embarklabs/subspace"</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> rating$ <span class="token operator">=</span> Product<span class="token punctuation">.</span>events<span class="token punctuation">.</span><span class="token function">Rating</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token string">"rating"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=></span> <span class="token function">parseInt</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
|
|
@ -80,6 +92,6 @@ subscription<span class="token punctuation">.</span><span class="token function"
|
|||
←
|
||||
<a href="/how-it-works.html" class="prev">How it works?</a></span> <span class="next"><a href="/integrations-overview.html">Overview</a>→
|
||||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.79de258e.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/10.89e9df6b.js" defer></script>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/10.ad0555d0.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<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.79de258e.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/4.08c332fb.js" as="script"><link rel="prefetch" href="/assets/js/10.89e9df6b.js"><link rel="prefetch" href="/assets/js/11.4115a4ef.js"><link rel="prefetch" href="/assets/js/12.483e20d3.js"><link rel="prefetch" href="/assets/js/13.c8151d83.js"><link rel="prefetch" href="/assets/js/14.562246e0.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.23bd311f.js"><link rel="prefetch" href="/assets/js/17.e68e2fcb.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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/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.02b67b8a.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/4.08c332fb.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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/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.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -31,13 +31,13 @@ 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/status-im/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="active 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#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#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="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#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="how-it-works"><a href="#how-it-works" aria-hidden="true" class="header-anchor">#</a> How it works?</h1> <h3 id="setup"><a href="#setup" aria-hidden="true" class="header-anchor">#</a> Setup</h3> <p><img src="/assets/img/d1.daa5485a.png" alt="First Usage - Setup"></p> <ol><li>A ÐApp requests <code>Subspace</code> to track an event, property, or balance.</li> <li><code>Subspace</code> creates a observable for that event, and a web3 subscription to retrieve events from the chain</li> <li>The ÐApp subscribes to the observable to receive events.</li></ol> <h3 id="receiving-events"><a href="#receiving-events" aria-hidden="true" class="header-anchor">#</a> Receiving events</h3> <p><img src="/assets/img/d2.de512122.png" alt="First Usage - Receiving events">
|
||||
<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="active 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#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="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#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="how-it-works"><a href="#how-it-works" aria-hidden="true" class="header-anchor">#</a> How it works?</h1> <h3 id="setup"><a href="#setup" aria-hidden="true" class="header-anchor">#</a> Setup</h3> <p><img src="/assets/img/d1.daa5485a.png" alt="First Usage - Setup"></p> <ol><li>A ÐApp requests <code>Subspace</code> to track an event, property, or balance.</li> <li><code>Subspace</code> creates a observable for that event, and a web3 subscription to retrieve events from the chain</li> <li>The ÐApp subscribes to the observable to receive events.</li></ol> <h3 id="receiving-events"><a href="#receiving-events" aria-hidden="true" class="header-anchor">#</a> Receiving events</h3> <p><img src="/assets/img/d2.de512122.png" alt="First Usage - Receiving events">
|
||||
Depending on the filter parameters used to track the events, once an event is found, it is stored in <code>localStorage</code> and it is also pushed to the observable which delivers it to the ÐApp subscription.</p> <h3 id="tracking-already-known-events"><a href="#tracking-already-known-events" aria-hidden="true" class="header-anchor">#</a> Tracking already known events</h3> <p>After restarting the ÐApp, either by executing it again in case of a console application or refreshing the browser the behavior of <code>Subspace</code> will change:
|
||||
<img src="/assets/img/d3.123a2e18.png" alt="Second Usage - Setup"></p> <ol><li>The Dapp will request <code>Subspace</code> to track an event it already knows, creating an observable and subscription for that event</li> <li>It will retrieve events that were previously stored in localStorage and deliver them to the DApp subscription, avoiding having to query the chain for the old events again.</li></ol> <p><img src="/assets/img/d4.81f850ef.png" alt="Second Usage - Receiving events">
|
||||
The web3 subscription created previously will start from the last known block instead of beginning from scratch. New events will be delivered normally from this step</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/" class="prev router-link-active">Home</a></span> <span class="next"><a href="/getting-started.html">Getting Started</a>→
|
||||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.79de258e.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/4.08c332fb.js" defer></script>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/4.08c332fb.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<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.79de258e.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/15.1e59e25f.js" as="script"><link rel="preload" href="/assets/js/5.73836d55.js" as="script"><link rel="prefetch" href="/assets/js/10.89e9df6b.js"><link rel="prefetch" href="/assets/js/11.4115a4ef.js"><link rel="prefetch" href="/assets/js/12.483e20d3.js"><link rel="prefetch" href="/assets/js/13.c8151d83.js"><link rel="prefetch" href="/assets/js/14.562246e0.js"><link rel="prefetch" href="/assets/js/16.23bd311f.js"><link rel="prefetch" href="/assets/js/17.e68e2fcb.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.02b67b8a.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/15.df26724a.js" as="script"><link rel="preload" href="/assets/js/5.73836d55.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -31,7 +31,7 @@ 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/status-im/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="active 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#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#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="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#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main aria-labelledby="main-title" class="home"><header class="hero"><img src="/assets/img/logo.svg" alt="hero"> <h1 id="main-title"> </h1> <p class="description">
|
||||
<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="active 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#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="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#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main aria-labelledby="main-title" class="home"><header class="hero"><img src="/assets/img/logo.svg" alt="hero"> <h1 id="main-title"> </h1> <p class="description">
|
||||
Reactive ÐApp Development
|
||||
</p> <p class="action"><a href="/getting-started/" class="nav-link action-button">Get Started</a></p></header> <div class="features"><div class="feature"><h2>Automatic Syncing</h2> <p>Subspace takes care of syncing under the hood, syncing exactly what you need when you need it. It saves the state to a local database ensuring the DApp always syncs from the last known point even after reloading the DApp.</p></div><div class="feature"><h2>Reactive</h2> <p>Subspace embraces reactive programming with RxJS. It provides methods to track and subscribe to events, contract state & balances, and react to changes via observables.</p></div><div class="feature"><h2>Framework Agnostic</h2> <p>Subspace is framework agnostic and integrates well with your favourite frameworks, from React to Angular. It works in the browser and in nodejs.</p></div></div> <div class="theme-default-content custom content__default"><hr> <div id="intro" data-v-07c470a6><div class="code-container" data-v-07c470a6><div class="code-text" data-v-07c470a6><h3 data-v-07c470a6>Event Tracking & Event Sourcing</h3>
|
||||
You can track events and react to their values. With Subspace observables doing event sourcing is easy.
|
||||
|
|
@ -85,6 +85,6 @@ ReactDOM<span class="token punctuation" data-v-07c470a6>.</span><span class="tok
|
|||
</code></pre> <div class="line-numbers-wrapper" data-v-07c470a6><span class="line-number" data-v-07c470a6>1</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>2</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>3</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>4</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>5</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>6</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>7</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>8</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>9</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>10</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>11</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>12</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>13</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>14</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>15</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>16</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>17</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>18</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>19</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>20</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>21</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>22</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>23</span><br data-v-07c470a6></div></div></div></div></div></div> <div class="footer">
|
||||
MIT Licensed | Subspace is part of the Status Network
|
||||
</div></main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.79de258e.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/15.1e59e25f.js" defer></script><script src="/assets/js/5.73836d55.js" defer></script>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/15.df26724a.js" defer></script><script src="/assets/js/5.73836d55.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<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.79de258e.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/11.4115a4ef.js" as="script"><link rel="prefetch" href="/assets/js/10.89e9df6b.js"><link rel="prefetch" href="/assets/js/12.483e20d3.js"><link rel="prefetch" href="/assets/js/13.c8151d83.js"><link rel="prefetch" href="/assets/js/14.562246e0.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.23bd311f.js"><link rel="prefetch" href="/assets/js/17.e68e2fcb.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.02b67b8a.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/11.2ab88290.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -31,10 +31,10 @@ 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 router-link-exact-active router-link-active">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/status-im/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#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#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="active 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="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#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="integrations-with-other-frameworks"><a href="#integrations-with-other-frameworks" aria-hidden="true" class="header-anchor">#</a> Integrations with other frameworks</h1> <p><strong>Subspace</strong> 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 <strong>Subspace</strong> with various frontend frameworks and libraries</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
<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#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="active 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="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#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="integrations-with-other-frameworks"><a href="#integrations-with-other-frameworks" aria-hidden="true" class="header-anchor">#</a> Integrations with other frameworks</h1> <p><strong>Subspace</strong> 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 <strong>Subspace</strong> with various frontend frameworks and libraries</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/getting-started.html" class="prev">Getting Started</a></span> <span class="next"><a href="/react.html">React</a>→
|
||||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.79de258e.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/11.4115a4ef.js" defer></script>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/11.2ab88290.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<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.79de258e.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/12.483e20d3.js" as="script"><link rel="prefetch" href="/assets/js/10.89e9df6b.js"><link rel="prefetch" href="/assets/js/11.4115a4ef.js"><link rel="prefetch" href="/assets/js/13.c8151d83.js"><link rel="prefetch" href="/assets/js/14.562246e0.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.23bd311f.js"><link rel="prefetch" href="/assets/js/17.e68e2fcb.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.02b67b8a.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/12.44cb4d70.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -31,7 +31,7 @@ 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/status-im/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#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#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="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#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"></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.79de258e.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/12.483e20d3.js" defer></script>
|
||||
<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#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="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#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"></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/12.44cb4d70.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<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.79de258e.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/13.c8151d83.js" as="script"><link rel="prefetch" href="/assets/js/10.89e9df6b.js"><link rel="prefetch" href="/assets/js/11.4115a4ef.js"><link rel="prefetch" href="/assets/js/12.483e20d3.js"><link rel="prefetch" href="/assets/js/14.562246e0.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.23bd311f.js"><link rel="prefetch" href="/assets/js/17.e68e2fcb.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.02b67b8a.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/13.8d36d8c0.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -31,7 +31,7 @@ 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/status-im/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#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#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="active 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="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#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="react"><a href="#react" aria-hidden="true" class="header-anchor">#</a> React</h1> <p>We provide a higher-order component to connect to enhance presentational components to react to any observable (not limited to those generated by <strong>Subspace</strong>).</p> <h3 id="usage"><a href="#usage" aria-hidden="true" class="header-anchor">#</a> Usage</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> observe <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@embarklabs/subspace/react'</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#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="active 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="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#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="react"><a href="#react" aria-hidden="true" class="header-anchor">#</a> React</h1> <p>We provide a higher-order component to connect to enhance presentational components to react to any observable (not limited to those generated by <strong>Subspace</strong>).</p> <h3 id="usage"><a href="#usage" aria-hidden="true" class="header-anchor">#</a> Usage</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> observe <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@embarklabs/subspace/react'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> ObserverComponent <span class="token operator">=</span> <span class="token function">observe</span><span class="token punctuation">(</span>WrappedComponent<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></div></div><p>This enhanced component will subscribe to any observable property it receives when the component is mounted and automatically unsubscribe when the component is unmounted.</p> <h3 id="example"><a href="#example" aria-hidden="true" class="header-anchor">#</a> Example</h3> <div class="tip custom-block"><p>This example is available in <a href="https://github.com/embark-framework/subspace/tree/master/examples/react-example1" target="_blank" rel="noopener noreferrer">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></p></div> <h4 id="mycomponentobserver-js"><a href="#mycomponentobserver-js" aria-hidden="true" class="header-anchor">#</a> MyComponentObserver.js</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||||
|
|
@ -109,6 +109,6 @@ ReactDOM<span class="token punctuation">.</span><span class="token function">ren
|
|||
←
|
||||
<a href="/integrations-overview.html" class="prev">Overview</a></span> <span class="next"><a href="/vue.html">Vue</a>→
|
||||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.79de258e.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/13.c8151d83.js" defer></script>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/13.8d36d8c0.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<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.79de258e.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/14.562246e0.js" as="script"><link rel="prefetch" href="/assets/js/10.89e9df6b.js"><link rel="prefetch" href="/assets/js/11.4115a4ef.js"><link rel="prefetch" href="/assets/js/12.483e20d3.js"><link rel="prefetch" href="/assets/js/13.c8151d83.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.23bd311f.js"><link rel="prefetch" href="/assets/js/17.e68e2fcb.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.02b67b8a.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/14.16c0ba27.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -31,7 +31,7 @@ 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/status-im/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#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#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="active 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="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#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="reactive-graphql"><a href="#reactive-graphql" aria-hidden="true" class="header-anchor">#</a> reactive-graphql</h1> <p>Using <code>reactive-graphql</code> you can execute GraphQL queries against <strong>Subspace</strong> observables after you create your own type definitions and resolvers.</p> <h3 id="example"><a href="#example" aria-hidden="true" class="header-anchor">#</a> Example</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> Subspace <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@embarklabs/subspace'</span><span class="token punctuation">)</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#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="active 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="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#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="reactive-graphql"><a href="#reactive-graphql" aria-hidden="true" class="header-anchor">#</a> reactive-graphql</h1> <p>Using <code>reactive-graphql</code> you can execute GraphQL queries against <strong>Subspace</strong> observables after you create your own type definitions and resolvers.</p> <h3 id="example"><a href="#example" aria-hidden="true" class="header-anchor">#</a> Example</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> Subspace <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@embarklabs/subspace'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> MyContract <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./MyContract'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span> pluck <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'rxjs/operators'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span> makeExecutableSchema <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"graphql-tools"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
|
@ -85,6 +85,6 @@ fathom('trackPageview');
|
|||
←
|
||||
<a href="/redux-observable.html" class="prev">redux-observable</a></span> <span class="next"><a href="/apollo-client.html">apollo-client</a>→
|
||||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.79de258e.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/14.562246e0.js" defer></script>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/14.16c0ba27.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -11,7 +11,7 @@
|
|||
<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.79de258e.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/18.71f9ba08.js" as="script"><link rel="prefetch" href="/assets/js/10.89e9df6b.js"><link rel="prefetch" href="/assets/js/11.4115a4ef.js"><link rel="prefetch" href="/assets/js/12.483e20d3.js"><link rel="prefetch" href="/assets/js/13.c8151d83.js"><link rel="prefetch" href="/assets/js/14.562246e0.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.23bd311f.js"><link rel="prefetch" href="/assets/js/17.e68e2fcb.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.02b67b8a.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/18.71f9ba08.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/19.8c50e175.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.08c332fb.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.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -31,10 +31,10 @@ 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/status-im/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#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#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="active 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#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="creating-a-reactive-dhapp-with-react-and-subspace"><a href="#creating-a-reactive-dhapp-with-react-and-subspace" aria-hidden="true" class="header-anchor">#</a> Creating a reactive ÐApp with React and Subspace</h1> <p>See example DApp at <a href="https://github.com/embark-framework/subspace/tree/master/examples/react-example1" target="_blank" rel="noopener noreferrer">https://github.com/embark-framework/subspace/tree/master/examples/react-example1<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></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
<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#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="active 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#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="creating-a-reactive-dhapp-with-react-and-subspace"><a href="#creating-a-reactive-dhapp-with-react-and-subspace" aria-hidden="true" class="header-anchor">#</a> Creating a reactive ÐApp with React and Subspace</h1> <p>See example DApp at <a href="https://github.com/embark-framework/subspace/tree/master/examples/react-example1" target="_blank" rel="noopener noreferrer">https://github.com/embark-framework/subspace/tree/master/examples/react-example1<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></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/apollo-client.html" class="prev">apollo-client</a></span> <span class="next"><a href="/api.html">API</a>→
|
||||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.79de258e.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/18.71f9ba08.js" defer></script>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/18.71f9ba08.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
6
vue.html
6
vue.html
|
|
@ -11,7 +11,7 @@
|
|||
<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.79de258e.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/19.8c50e175.js" as="script"><link rel="prefetch" href="/assets/js/10.89e9df6b.js"><link rel="prefetch" href="/assets/js/11.4115a4ef.js"><link rel="prefetch" href="/assets/js/12.483e20d3.js"><link rel="prefetch" href="/assets/js/13.c8151d83.js"><link rel="prefetch" href="/assets/js/14.562246e0.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.23bd311f.js"><link rel="prefetch" href="/assets/js/17.e68e2fcb.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.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.08c332fb.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.02b67b8a.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/19.8c50e175.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.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.08c332fb.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.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -31,7 +31,7 @@ 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/status-im/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#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#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="active 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="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#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="vue"><a href="#vue" aria-hidden="true" class="header-anchor">#</a> Vue</h1> <p>Vue provides the official npm package <code>vue-rx</code> that provides RxJS integration, which simplifies the use of Subspace with Vue.js</p> <h3 id="example"><a href="#example" aria-hidden="true" class="header-anchor">#</a> Example</h3> <div class="tip custom-block"><p>This example is available in <a href="https://github.com/embark-framework/subspace/tree/master/examples/vue" target="_blank" rel="noopener noreferrer">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></p></div> <h4 id="mycomponent-vue"><a href="#mycomponent-vue" aria-hidden="true" class="header-anchor">#</a> MyComponent.vue</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator"><</span>template<span class="token operator">></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#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="active 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="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#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="vue"><a href="#vue" aria-hidden="true" class="header-anchor">#</a> Vue</h1> <p>Vue provides the official npm package <code>vue-rx</code> that provides RxJS integration, which simplifies the use of Subspace with Vue.js</p> <h3 id="example"><a href="#example" aria-hidden="true" class="header-anchor">#</a> Example</h3> <div class="tip custom-block"><p>This example is available in <a href="https://github.com/embark-framework/subspace/tree/master/examples/vue" target="_blank" rel="noopener noreferrer">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></p></div> <h4 id="mycomponent-vue"><a href="#mycomponent-vue" aria-hidden="true" class="header-anchor">#</a> MyComponent.vue</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token operator"><</span>template<span class="token operator">></span>
|
||||
<span class="token operator"><</span>ul v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"!!eventData$"</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>b<span class="token operator">></span>someValue<span class="token punctuation">:</span> <span class="token operator"><</span><span class="token operator">/</span>b<span class="token operator">></span> <span class="token punctuation">{</span><span class="token punctuation">{</span>eventData$<span class="token punctuation">.</span>someValue<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
|
||||
<span class="token operator"><</span>li<span class="token operator">></span><span class="token operator"><</span>b<span class="token operator">></span>anotherValue<span class="token punctuation">:</span> <span class="token operator"><</span><span class="token operator">/</span>b<span class="token operator">></span> <span class="token punctuation">{</span><span class="token punctuation">{</span>eventData$<span class="token punctuation">.</span>anotherValue<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>li<span class="token operator">></span>
|
||||
|
|
@ -94,6 +94,6 @@ fathom('trackPageview');
|
|||
←
|
||||
<a href="/react.html" class="prev">React</a></span> <span class="next"><a href="/redux.html">redux</a>→
|
||||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.79de258e.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/19.8c50e175.js" defer></script>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/19.8c50e175.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue