first commit
This commit is contained in:
Iuri Matias
commit
b22f9eb3cd
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>SUBSPACE</title>
|
||||
<meta name="description" content="Reactive ÐApp Development">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
|
||||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.ff6dfed4.css" as="style"><link rel="preload" href="/assets/js/app.dee337e1.js" as="script"><link rel="preload" href="/assets/js/6.8a01ae42.js" as="script"><link rel="prefetch" href="/assets/js/10.df07d2be.js"><link rel="prefetch" href="/assets/js/11.b5216252.js"><link rel="prefetch" href="/assets/js/12.85ce989d.js"><link rel="prefetch" href="/assets/js/13.73efb4d7.js"><link rel="prefetch" href="/assets/js/14.513e9262.js"><link rel="prefetch" href="/assets/js/15.d48a7184.js"><link rel="prefetch" href="/assets/js/16.1b9eabd3.js"><link rel="prefetch" href="/assets/js/17.910b0e9e.js"><link rel="prefetch" href="/assets/js/18.0936c664.js"><link rel="prefetch" href="/assets/js/19.1ae67b9a.js"><link rel="prefetch" href="/assets/js/2.c401969f.js"><link rel="prefetch" href="/assets/js/3.fc5c8748.js"><link rel="prefetch" href="/assets/js/4.e5468477.js"><link rel="prefetch" href="/assets/js/5.26dd2b41.js"><link rel="prefetch" href="/assets/js/7.a2409073.js"><link rel="prefetch" href="/assets/js/8.901206cf.js"><link rel="prefetch" href="/assets/js/9.19ef9a17.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.ff6dfed4.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.dee337e1.js" defer></script><script src="/assets/js/6.8a01ae42.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>API | SUBSPACE</title>
|
||||
<meta name="description" content="Reactive ÐApp Development">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
|
||||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.ff6dfed4.css" as="style"><link rel="preload" href="/assets/js/app.dee337e1.js" as="script"><link rel="preload" href="/assets/js/2.c401969f.js" as="script"><link rel="preload" href="/assets/js/7.a2409073.js" as="script"><link rel="prefetch" href="/assets/js/10.df07d2be.js"><link rel="prefetch" href="/assets/js/11.b5216252.js"><link rel="prefetch" href="/assets/js/12.85ce989d.js"><link rel="prefetch" href="/assets/js/13.73efb4d7.js"><link rel="prefetch" href="/assets/js/14.513e9262.js"><link rel="prefetch" href="/assets/js/15.d48a7184.js"><link rel="prefetch" href="/assets/js/16.1b9eabd3.js"><link rel="prefetch" href="/assets/js/17.910b0e9e.js"><link rel="prefetch" href="/assets/js/18.0936c664.js"><link rel="prefetch" href="/assets/js/19.1ae67b9a.js"><link rel="prefetch" href="/assets/js/3.fc5c8748.js"><link rel="prefetch" href="/assets/js/4.e5468477.js"><link rel="prefetch" href="/assets/js/5.26dd2b41.js"><link rel="prefetch" href="/assets/js/6.8a01ae42.js"><link rel="prefetch" href="/assets/js/8.901206cf.js"><link rel="prefetch" href="/assets/js/9.19ef9a17.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.ff6dfed4.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/img/logo-small.png" alt="SUBSPACE" class="logo"> <span class="site-name can-hide">SUBSPACE</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link router-link-exact-active router-link-active">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link router-link-exact-active router-link-active">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#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" class="header-anchor">#</a> API</h1> <h2 id="general"><a href="#general" class="header-anchor">#</a> General</h2> <h3 id="new-subspace-web3provider-options"><a href="#new-subspace-web3provider-options" 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 websockets 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 query a contract/address to determine changes in state or balance (default: <code>undefined</code>. Obtains data every block).</li></ul></li></ol> <h3 id="init"><a href="#init" class="header-anchor">#</a> <code>init()</code></h3> <p>Initializes <strong>Subspace</strong></p> <p><strong>Returns</strong> <code>Promise</code> that once it's resolved, will mean that <strong>Subspace</strong> is available to use</p> <h3 id="close"><a href="#close" class="header-anchor">#</a> <code>close()</code></h3> <p>Dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by <strong>Subspace</strong> during its normal execution.</p> <h3 id="contract-instance-abi-address"><a href="#contract-instance-abi-address" class="header-anchor">#</a> <code>contract(instance|{abi,address})</code></h3> <p>Adds a <code>track</code> method to the web3 contract objects. You can obtain this functionality by passing a <code>web3.eth.Contract</code> instance, or the <code>abi</code> and <code>address</code> of your contract</p> <p><strong>Returns</strong> <code>web3.eth.Contract</code> object enhanced with <code>.track()</code> functions for methods and events.</p> <h2 id="contract-methods"><a href="#contract-methods" class="header-anchor">#</a> Contract methods</h2> <h3 id="mycontract-events-myevent-track-options"><a href="#mycontract-events-myevent-track-options" class="header-anchor">#</a> <code>myContract.events.MyEvent.track([options])</code></h3> <p>Track a contract event.</p> <p><strong>Parameters</strong></p> <ol><li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters
|
||||
<ul><li><code>filter</code> - <code>Object</code> (optional): Lets you filter events by indexed parameters, e.g. <code>{filter: {myNumber: [12,13]}}</code> means all events where <code>"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" class="header-anchor">#</a> <code>myContract.methods.myMethod([param1[, ...]]).track([callOptions])</code></h3> <p>Track a constant function / contract state variable on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>callOptions</code> - <code>Object</code> (optional): The options used for calling.
|
||||
<ul><li><code>from</code> - <code>String</code> (optional): The address the call “transaction” should be made from.</li> <li><code>gasPrice</code> - <code>String</code> (optional): The gas price in wei to use for this call “transaction”.</li> <li><code>gas</code> - <code>Number</code> (optional): The maximum gas provided for this call “transaction” (gas limit).</li></ul></li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the function / variable values. Data type will depend on the contract function invoked.</p> <h3 id="mycontract-trackbalance-address-tokenaddress"><a href="#mycontract-trackbalance-address-tokenaddress" class="header-anchor">#</a> <code>myContract.trackBalance(address [, tokenAddress])</code></h3> <p>Track a contract's balance changes for an address on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>address</code> - <code>String</code>: The address to get the balance of.</li> <li><code>tokenAddress</code> - <code>String</code> (optional): If you want to track the balance for an ERC20 contract, here you can specify the token address. Otherwise, Only ETH balances will be returned.</li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream a string containing the address balance.</p> <h2 id="low-level-api-for-data-tracking"><a href="#low-level-api-for-data-tracking" class="header-anchor">#</a> Low level API for data tracking</h2> <p>These are used in case you don't want to decorate your web3 contract objects, or if you want to track the balance for an specific address.</p> <h3 id="trackevent-contractobject-eventname-options"><a href="#trackevent-contractobject-eventname-options" class="header-anchor">#</a> <code>trackEvent(contractObject, eventName [, options])</code></h3> <p>Track a contract event.</p> <p><strong>Parameters</strong></p> <ol><li><code>contractObject</code> - <code>web3.eth.Contract</code>: An already initialized contract object pointing to an address and containing a valid ABI.</li> <li><code>eventName</code> - <code>String</code>: The name of the event to subscribe.</li> <li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters
|
||||
<ul><li><code>filter</code> - <code>Object</code> (optional): Lets you filter events by indexed parameters, e.g. <code>{filter: {myNumber: [12,13]}}</code> means all events where <code>"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="trackproperty-contractobject-functionname-functionargs-calloptions"><a href="#trackproperty-contractobject-functionname-functionargs-calloptions" class="header-anchor">#</a> <code>trackProperty(contractObject, functionName [, functionArgs] [, callOptions])</code></h3> <p>Track a constant function / contract state variable on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>contractObject</code> - <code>web3.eth.Contract</code>: An already initialized contract object pointing to an address and containing a valid ABI.</li> <li><code>functionName</code> - <code>String</code>: Name of the function or variable whose values will be tracked.</li> <li><code>functionArgs</code> - <code>Array</code> (optional): Array of arguments that the tracked function receives</li> <li><code>callOptions</code> - <code>Object</code> (optional): The options used for calling.
|
||||
<ul><li><code>from</code> - <code>String</code> (optional): The address the call “transaction” should be made from.</li> <li><code>gasPrice</code> - <code>String</code> (optional): The gas price in wei to use for this call “transaction”.</li> <li><code>gas</code> - <code>Number</code> (optional): The maximum gas provided for this call “transaction” (gas limit).</li></ul></li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the function / variable values. Data type will depend on the contract function invoked.</p> <h3 id="trackbalance-address-tokenaddress"><a href="#trackbalance-address-tokenaddress" class="header-anchor">#</a> <code>trackBalance(address [, tokenAddress])</code></h3> <p>Track balance changes for an address on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>address</code> - <code>String</code>: The address to get the balance of.</li> <li><code>tokenAddress</code> - <code>String</code> (optional): If you want to track the balance for an ERC20 contract, here you can specify the token address. Otherwise, Only ETH balances will be returned.</li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream a string containing the address balance.</p> <h3 id="tracklogs-options-abi"><a href="#tracklogs-options-abi" class="header-anchor">#</a> <code>trackLogs(options [, abi])</code></h3> <p>Tracks incoming logs, filtered by the given options.</p> <p><strong>Parameters</strong></p> <ol><li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of logs
|
||||
<ul><li><code>address</code> - <code>String|Array</code> (optional): An address or a list of addresses to only get logs from particular account(s).</li> <li><code>fromBlock</code> - <code>Number</code> (optional): The block number from which to get events on.</li> <li><code>topics</code> - <code>Array</code> (optional): An array of values which must each appear in the log entries. The order is important, if you want to leave topics out use null, e.g. [null, '0x00...']. You can also pass another array for each topic with options for that topic e.g. [null, ['option1', 'option2']].</li></ul></li> <li><code>abi</code> - <code>Array</code> (optional): Array containing the ABI for the inputs of the logs received. It will automatically decode the logs using this ABI instead of returning the hexadecimal data.</li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the logs. If the inputs ABI is included in the call, the logs will be automatically decoded.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/tutorial.html" class="prev">Tutorial</a></span> <!----></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.dee337e1.js" defer></script><script src="/assets/js/2.c401969f.js" defer></script><script src="/assets/js/7.a2409073.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>apollo-client | SUBSPACE</title>
|
||||
<meta name="description" content="Reactive ÐApp Development">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
|
||||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.ff6dfed4.css" as="style"><link rel="preload" href="/assets/js/app.dee337e1.js" as="script"><link rel="preload" href="/assets/js/2.c401969f.js" as="script"><link rel="preload" href="/assets/js/8.901206cf.js" as="script"><link rel="prefetch" href="/assets/js/10.df07d2be.js"><link rel="prefetch" href="/assets/js/11.b5216252.js"><link rel="prefetch" href="/assets/js/12.85ce989d.js"><link rel="prefetch" href="/assets/js/13.73efb4d7.js"><link rel="prefetch" href="/assets/js/14.513e9262.js"><link rel="prefetch" href="/assets/js/15.d48a7184.js"><link rel="prefetch" href="/assets/js/16.1b9eabd3.js"><link rel="prefetch" href="/assets/js/17.910b0e9e.js"><link rel="prefetch" href="/assets/js/18.0936c664.js"><link rel="prefetch" href="/assets/js/19.1ae67b9a.js"><link rel="prefetch" href="/assets/js/3.fc5c8748.js"><link rel="prefetch" href="/assets/js/4.e5468477.js"><link rel="prefetch" href="/assets/js/5.26dd2b41.js"><link rel="prefetch" href="/assets/js/6.8a01ae42.js"><link rel="prefetch" href="/assets/js/7.a2409073.js"><link rel="prefetch" href="/assets/js/9.19ef9a17.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.ff6dfed4.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/img/logo-small.png" alt="SUBSPACE" class="logo"> <span class="site-name can-hide">SUBSPACE</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#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" 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>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> graphql <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"reactive-graphql"</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> client <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ApolloClient</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// If addTypename:true, the query will fail due to __typename</span>
|
||||
<span class="token comment">// being added to the schema. reactive-graphql does not</span>
|
||||
<span class="token comment">// support __typename at this moment.</span>
|
||||
cache<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">InMemoryCache</span><span class="token punctuation">(</span><span class="token punctuation">{</span> addTypename<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
link<span class="token operator">:</span> ApolloLink<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||||
<span class="token function">rxJsLink</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">ApolloLink</span><span class="token punctuation">(</span><span class="token parameter">operation</span> <span class="token operator">=></span> <span class="token function">graphql</span><span class="token punctuation">(</span>schema<span class="token punctuation">,</span> operation<span class="token punctuation">.</span>query<span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h3 id="example"><a href="#example" class="header-anchor">#</a> Example</h3> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div><div class="highlighted"> </div></div><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ApolloClient <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"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>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> graphql <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"reactive-graphql"</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// ...</span>
|
||||
|
||||
<span class="token comment">// Initialize Subspace</span>
|
||||
<span class="token keyword">const</span> subspace <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Subspace</span><span class="token punctuation">(</span>web3<span class="token punctuation">.</span>currentProvider<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Use a valid websocket provider (geth, parity, infura...)</span>
|
||||
<span class="token keyword">await</span> subspace<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> MyContractInstance <span class="token operator">=</span> <span class="token operator">...</span><span class="token punctuation">;</span> <span class="token comment">// TODO: obtain a web3.eth.contract instance</span>
|
||||
|
||||
<span class="token keyword">const</span> typeDefs <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
type MyEvent {
|
||||
someValue: Int
|
||||
anotherValue: String
|
||||
}
|
||||
type Query {
|
||||
myEvents: MyEvent!
|
||||
}
|
||||
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> resolvers <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
Query<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">myEvents</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> subspace<span class="token punctuation">.</span><span class="token function">trackEvent</span><span class="token punctuation">(</span>MyContractInstance<span class="token punctuation">,</span> <span class="token string">'MyEvent'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>filter<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> fromBlock<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> schema <span class="token operator">=</span> <span class="token function">makeExecutableSchema</span><span class="token punctuation">(</span><span class="token punctuation">{</span> typeDefs<span class="token punctuation">,</span> resolvers <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> client <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ApolloClient</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
<span class="token comment">// If addTypename:true, the query will fail due to __typename</span>
|
||||
<span class="token comment">// being added to the schema. reactive-graphql does not</span>
|
||||
<span class="token comment">// support __typename at this moment.</span>
|
||||
cache<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">InMemoryCache</span><span class="token punctuation">(</span><span class="token punctuation">{</span> addTypename<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
link<span class="token operator">:</span> ApolloLink<span class="token punctuation">.</span><span class="token function">from</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
||||
<span class="token function">rxJsLink</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||||
<span class="token keyword">new</span> <span class="token class-name">ApolloLink</span><span class="token punctuation">(</span><span class="token parameter">operation</span> <span class="token operator">=></span> <span class="token function">graphql</span><span class="token punctuation">(</span>schema<span class="token punctuation">,</span> operation<span class="token punctuation">.</span>query<span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">]</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">Using react-apollo</p> <p>A practical example can also be found in <code>examples/react-apollo</code>.</p></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/reactive-graphql.html" class="prev">reactive-graphql</a></span> <span class="next"><a href="/tutorial.html">Tutorial</a>
|
||||
→
|
||||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.dee337e1.js" defer></script><script src="/assets/js/2.c401969f.js" defer></script><script src="/assets/js/8.901206cf.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 216 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,14 @@
|
|||
<svg width="345" height="80" viewBox="0 0 345 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M65.4204 39.604C68.3179 50.3081 65.5648 62.2226 57.161 70.6264C48.7573 79.0301 36.8427 81.7832 26.1387 78.8857C35.655 77.3626 44.7965 72.9332 52.1322 65.5975C59.4678 58.2618 63.8973 49.1204 65.4204 39.604Z" fill="#78BE97"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M55.7624 24.5544C59.0576 36.7277 55.9266 50.2776 46.3695 59.8348C36.8123 69.392 23.2624 72.523 11.0891 69.2278C21.9116 67.4956 32.3078 62.4582 40.6503 54.1157C48.9929 45.7731 54.0302 35.377 55.7624 24.5544Z" fill="#FAB266"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.2375 55.4456C20.9423 43.2723 24.0733 29.7224 33.6305 20.1653C43.1876 10.6081 56.7375 7.47708 68.9108 10.7723C58.0883 12.5045 47.6922 17.5418 39.3496 25.8844C31.007 34.2269 25.9697 44.6231 24.2375 55.4456Z" fill="#F1645D"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.839 9.37367C31.2427 0.969937 43.1573 -1.78317 53.8614 1.11433C44.345 2.63746 35.2036 7.06687 27.8679 14.4026C20.5322 21.7383 16.1028 30.8797 14.5797 40.396C11.6822 29.692 14.4353 17.7774 22.839 9.37367Z" fill="#398689"/>
|
||||
<path d="M108.349 32.1427C108.152 32.4577 107.942 32.694 107.719 32.8515C107.509 33.009 107.233 33.0877 106.892 33.0877C106.59 33.0877 106.262 32.9959 105.908 32.8121C105.566 32.6152 105.173 32.3987 104.726 32.1624C104.293 31.9262 103.794 31.7162 103.23 31.5324C102.666 31.3356 102.023 31.2371 101.301 31.2371C100.054 31.2371 99.1219 31.5062 98.505 32.0443C97.9013 32.5693 97.5994 33.2846 97.5994 34.1902C97.5994 34.7677 97.7831 35.2468 98.1506 35.6274C98.5181 36.0081 98.9972 36.3362 99.5878 36.6118C100.192 36.8874 100.874 37.1434 101.635 37.3796C102.41 37.6027 103.197 37.8587 103.998 38.1474C104.798 38.4231 105.579 38.7512 106.341 39.1318C107.115 39.5124 107.798 39.9981 108.388 40.5887C108.992 41.1793 109.478 41.9012 109.845 42.7543C110.213 43.5943 110.396 44.6115 110.396 45.8059C110.396 47.1315 110.167 48.3718 109.707 49.5268C109.248 50.6818 108.578 51.6924 107.699 52.5587C106.833 53.4118 105.757 54.0877 104.47 54.5865C103.197 55.0721 101.747 55.3149 100.119 55.3149C99.2269 55.3149 98.3147 55.2231 97.3828 55.0393C96.4641 54.8556 95.5716 54.5996 94.7053 54.2715C93.8391 53.9302 93.0253 53.5299 92.2641 53.0706C91.5028 52.6112 90.84 52.0993 90.2756 51.5349L92.2444 48.4243C92.3888 48.1881 92.5922 47.9977 92.8547 47.8534C93.1172 47.709 93.3994 47.6368 93.7013 47.6368C94.095 47.6368 94.4888 47.7615 94.8825 48.0109C95.2894 48.2602 95.7422 48.5359 96.2409 48.8377C96.7528 49.1396 97.3369 49.4152 97.9931 49.6646C98.6494 49.914 99.4238 50.0387 100.316 50.0387C101.524 50.0387 102.462 49.7762 103.132 49.2512C103.801 48.7131 104.136 47.8665 104.136 46.7115C104.136 46.0421 103.952 45.4974 103.584 45.0774C103.217 44.6574 102.731 44.3096 102.128 44.034C101.537 43.7584 100.861 43.5156 100.1 43.3056C99.3384 43.0956 98.5575 42.8659 97.7569 42.6165C96.9563 42.354 96.1753 42.039 95.4141 41.6715C94.6528 41.2909 93.9703 40.7987 93.3666 40.1949C92.7759 39.5781 92.2969 38.8168 91.9294 37.9112C91.5619 36.9924 91.3781 35.8637 91.3781 34.5249C91.3781 33.4487 91.5947 32.3987 92.0278 31.3749C92.4609 30.3512 93.0975 29.439 93.9375 28.6384C94.7775 27.8377 95.8078 27.2012 97.0284 26.7287C98.2491 26.2431 99.6469 26.0002 101.222 26.0002C102.101 26.0002 102.954 26.0724 103.781 26.2168C104.621 26.3481 105.415 26.5515 106.163 26.8271C106.912 27.0896 107.607 27.4112 108.25 27.7918C108.907 28.1593 109.491 28.5793 110.003 29.0518L108.349 32.1427Z" fill="black"/>
|
||||
<path d="M133.857 49.7434C134.75 49.7434 135.544 49.599 136.239 49.3102C136.948 49.0084 137.545 48.5818 138.031 48.0306C138.517 47.4793 138.884 46.8099 139.133 46.0224C139.396 45.2218 139.527 44.3162 139.527 43.3056V26.3152H146.182V43.3056C146.182 45.0643 145.893 46.6787 145.315 48.1487C144.751 49.6187 143.937 50.8852 142.874 51.9484C141.811 53.0115 140.518 53.8384 138.996 54.429C137.473 55.0196 135.76 55.3149 133.857 55.3149C131.941 55.3149 130.222 55.0196 128.699 54.429C127.177 53.8384 125.884 53.0115 124.821 51.9484C123.757 50.8852 122.944 49.6187 122.379 48.1487C121.815 46.6787 121.533 45.0643 121.533 43.3056V26.3152H128.187V43.2859C128.187 44.2965 128.312 45.2021 128.561 46.0027C128.824 46.7902 129.198 47.4662 129.683 48.0306C130.169 48.5818 130.76 49.0084 131.455 49.3102C132.164 49.599 132.965 49.7434 133.857 49.7434Z" fill="black"/>
|
||||
<path d="M158.72 54.9999V26.3152H169.272C171.254 26.3152 172.94 26.499 174.332 26.8665C175.723 27.234 176.858 27.7524 177.738 28.4218C178.617 29.0912 179.254 29.9049 179.647 30.8631C180.054 31.8212 180.258 32.8909 180.258 34.0721C180.258 34.7152 180.166 35.3387 179.982 35.9424C179.798 36.5331 179.51 37.0909 179.116 37.6159C178.722 38.1409 178.217 38.6199 177.6 39.0531C176.983 39.4731 176.241 39.8406 175.375 40.1556C177.265 40.6149 178.663 41.3631 179.569 42.3999C180.474 43.4237 180.927 44.7427 180.927 46.3571C180.927 47.5777 180.691 48.7131 180.218 49.7631C179.746 50.8131 179.05 51.7318 178.131 52.5193C177.226 53.2937 176.104 53.904 174.765 54.3502C173.426 54.7834 171.897 54.9999 170.178 54.9999H158.72ZM165.374 42.8331V49.9796H170.06C170.939 49.9796 171.654 49.8681 172.205 49.6449C172.77 49.4218 173.21 49.1331 173.525 48.7787C173.84 48.4243 174.056 48.024 174.174 47.5777C174.292 47.1315 174.351 46.6787 174.351 46.2193C174.351 45.6943 174.279 45.2218 174.135 44.8018C174.004 44.3818 173.767 44.0274 173.426 43.7387C173.098 43.4499 172.658 43.2268 172.107 43.0693C171.556 42.9118 170.86 42.8331 170.02 42.8331H165.374ZM165.374 38.3837H168.839C169.574 38.3837 170.237 38.3312 170.827 38.2262C171.418 38.1212 171.917 37.9374 172.324 37.6749C172.744 37.4124 173.059 37.0515 173.269 36.5921C173.492 36.1327 173.603 35.5552 173.603 34.8596C173.603 34.1771 173.518 33.6127 173.347 33.1665C173.177 32.7071 172.914 32.3396 172.56 32.064C172.205 31.7884 171.753 31.5915 171.201 31.4734C170.663 31.3552 170.02 31.2962 169.272 31.2962H165.374V38.3837Z" fill="black"/>
|
||||
<path d="M208.769 32.1427C208.572 32.4577 208.362 32.694 208.139 32.8515C207.929 33.009 207.653 33.0877 207.312 33.0877C207.01 33.0877 206.682 32.9959 206.327 32.8121C205.986 32.6152 205.592 32.3987 205.146 32.1624C204.713 31.9262 204.214 31.7162 203.65 31.5324C203.086 31.3356 202.442 31.2371 201.721 31.2371C200.474 31.2371 199.542 31.5062 198.925 32.0443C198.321 32.5693 198.019 33.2846 198.019 34.1902C198.019 34.7677 198.203 35.2468 198.571 35.6274C198.938 36.0081 199.417 36.3362 200.008 36.6118C200.611 36.8874 201.294 37.1434 202.055 37.3796C202.83 37.6027 203.617 37.8587 204.418 38.1474C205.218 38.4231 205.999 38.7512 206.761 39.1318C207.535 39.5124 208.217 39.9981 208.808 40.5887C209.412 41.1793 209.897 41.9012 210.265 42.7543C210.632 43.5943 210.816 44.6115 210.816 45.8059C210.816 47.1315 210.586 48.3718 210.127 49.5268C209.668 50.6818 208.998 51.6924 208.119 52.5587C207.253 53.4118 206.176 54.0877 204.89 54.5865C203.617 55.0721 202.167 55.3149 200.539 55.3149C199.647 55.3149 198.735 55.2231 197.803 55.0393C196.884 54.8556 195.991 54.5996 195.125 54.2715C194.259 53.9302 193.445 53.5299 192.684 53.0706C191.923 52.6112 191.26 52.0993 190.696 51.5349L192.664 48.4243C192.809 48.1881 193.012 47.9977 193.275 47.8534C193.537 47.709 193.819 47.6368 194.121 47.6368C194.515 47.6368 194.909 47.7615 195.302 48.0109C195.709 48.2602 196.162 48.5359 196.661 48.8377C197.173 49.1396 197.757 49.4152 198.413 49.6646C199.069 49.914 199.844 50.0387 200.736 50.0387C201.944 50.0387 202.882 49.7762 203.551 49.2512C204.221 48.7131 204.556 47.8665 204.556 46.7115C204.556 46.0421 204.372 45.4974 204.004 45.0774C203.637 44.6574 203.151 44.3096 202.547 44.034C201.957 43.7584 201.281 43.5156 200.52 43.3056C199.758 43.0956 198.977 42.8659 198.177 42.6165C197.376 42.354 196.595 42.039 195.834 41.6715C195.073 41.2909 194.39 40.7987 193.786 40.1949C193.196 39.5781 192.717 38.8168 192.349 37.9112C191.982 36.9924 191.798 35.8637 191.798 34.5249C191.798 33.4487 192.015 32.3987 192.448 31.3749C192.881 30.3512 193.517 29.439 194.357 28.6384C195.197 27.8377 196.228 27.2012 197.448 26.7287C198.669 26.2431 200.067 26.0002 201.642 26.0002C202.521 26.0002 203.374 26.0724 204.201 26.2168C205.041 26.3481 205.835 26.5515 206.583 26.8271C207.331 27.0896 208.027 27.4112 208.67 27.7918C209.326 28.1593 209.911 28.5793 210.422 29.0518L208.769 32.1427Z" fill="black"/>
|
||||
<path d="M229.001 45.4121V54.9999H222.346V26.3152H232.466C234.487 26.3152 236.22 26.5581 237.663 27.0437C239.12 27.5162 240.315 28.1724 241.246 29.0124C242.191 29.8524 242.887 30.8434 243.333 31.9852C243.78 33.1271 244.003 34.3609 244.003 35.6865C244.003 37.1171 243.773 38.4296 243.314 39.624C242.854 40.8184 242.152 41.8421 241.207 42.6952C240.262 43.5484 239.061 44.2177 237.604 44.7034C236.16 45.1759 234.448 45.4121 232.466 45.4121H229.001ZM229.001 40.3918H232.466C234.198 40.3918 235.445 39.9784 236.206 39.1515C236.968 38.3246 237.348 37.1696 237.348 35.6865C237.348 35.0302 237.25 34.4331 237.053 33.8949C236.856 33.3568 236.554 32.8974 236.147 32.5168C235.754 32.1231 235.248 31.8212 234.631 31.6112C234.028 31.4012 233.306 31.2962 232.466 31.2962H229.001V40.3918Z" fill="black"/>
|
||||
<path d="M279.03 54.9999H273.872C273.294 54.9999 272.815 54.8687 272.434 54.6062C272.067 54.3306 271.811 53.9827 271.667 53.5627L269.973 48.5621H259.067L257.373 53.5627C257.242 53.9302 256.986 54.2649 256.606 54.5668C256.225 54.8556 255.759 54.9999 255.208 54.9999H250.01L261.114 26.3152H267.926L279.03 54.9999ZM260.602 44.034H268.438L265.8 36.1787C265.629 35.6799 265.426 35.0959 265.189 34.4265C264.966 33.744 264.743 33.009 264.52 32.2215C264.31 33.0221 264.093 33.7637 263.87 34.4462C263.647 35.1287 263.437 35.7193 263.24 36.2181L260.602 44.034Z" fill="black"/>
|
||||
<path d="M307.67 47.5777C307.827 47.5777 307.985 47.6106 308.142 47.6762C308.3 47.7287 308.451 47.8271 308.595 47.9715L311.233 50.7474C310.078 52.2568 308.628 53.3987 306.882 54.1731C305.15 54.9343 303.096 55.3149 300.72 55.3149C298.541 55.3149 296.586 54.9474 294.853 54.2124C293.134 53.4643 291.67 52.4406 290.463 51.1412C289.269 49.8287 288.35 48.2799 287.707 46.4949C287.064 44.6968 286.742 42.7477 286.742 40.6477C286.742 38.5084 287.11 36.5462 287.845 34.7612C288.58 32.9631 289.603 31.4143 290.916 30.1149C292.241 28.8156 293.823 27.8049 295.66 27.0831C297.498 26.3612 299.526 26.0002 301.744 26.0002C302.82 26.0002 303.831 26.0987 304.776 26.2956C305.734 26.4793 306.626 26.7418 307.453 27.0831C308.28 27.4112 309.041 27.8115 309.737 28.284C310.433 28.7434 311.05 29.2552 311.588 29.8196L309.343 32.8318C309.199 33.0156 309.028 33.1862 308.831 33.3437C308.635 33.4881 308.359 33.5602 308.005 33.5602C307.768 33.5602 307.545 33.5077 307.335 33.4027C307.125 33.2977 306.902 33.1731 306.666 33.0287C306.43 32.8712 306.167 32.7071 305.878 32.5365C305.603 32.3527 305.268 32.1887 304.874 32.0443C304.494 31.8868 304.041 31.7556 303.516 31.6506C303.004 31.5456 302.4 31.4931 301.705 31.4931C300.497 31.4931 299.395 31.7096 298.397 32.1427C297.4 32.5627 296.54 33.1731 295.818 33.9737C295.109 34.7612 294.551 35.7193 294.145 36.8481C293.751 37.9768 293.554 39.2434 293.554 40.6477C293.554 42.1177 293.751 43.4237 294.145 44.5656C294.551 45.7074 295.096 46.6721 295.779 47.4596C296.474 48.234 297.281 48.8246 298.2 49.2315C299.119 49.6384 300.103 49.8418 301.153 49.8418C301.757 49.8418 302.308 49.8156 302.807 49.7631C303.306 49.6974 303.765 49.5924 304.185 49.4481C304.618 49.3037 305.025 49.1199 305.406 48.8968C305.8 48.6606 306.193 48.3718 306.587 48.0306C306.745 47.8993 306.915 47.7943 307.099 47.7156C307.283 47.6237 307.473 47.5777 307.67 47.5777Z" fill="black"/>
|
||||
<path d="M340.964 26.3152V31.434H329.191V38.1277H338.208V43.0496H329.191V49.8812H340.964V54.9999H322.497V26.3152H340.964Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="12" height="13"><g stroke-width="2" stroke="#aaa" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
|
||||
|
After Width: | Height: | Size: 216 B |
|
|
@ -0,0 +1 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{219:function(t,e,o){"use strict";o.r(e);var r=o(0),s=Object(r.a)({},(function(){var t=this,e=t.$createElement,o=t._self._c||e;return o("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[o("h1",{attrs:{id:"integrations-with-other-frameworks"}},[o("a",{staticClass:"header-anchor",attrs:{href:"#integrations-with-other-frameworks"}},[t._v("#")]),t._v(" Integrations with other frameworks")]),t._v(" "),o("p",[o("strong",[t._v("Subspace")]),t._v(" does not force you to change the architecture of your dApps, making it easy to use on existing projects. In this section you can find some examples and tips on how to integrate "),o("strong",[t._v("Subspace")]),t._v(" with various frontend frameworks and libraries")])])}),[],!1,null,null,null);e.default=s.exports}}]);
|
||||
|
|
@ -0,0 +1 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{214:function(t,e,n){"use strict";n.r(e);var s=n(0),l=Object(s.a)({},(function(){var t=this.$createElement;return(this._self._c||t)("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}})}),[],!1,null,null,null);e.default=l.exports}}]);
|
||||
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([[14],{212:function(t,e,n){"use strict";n.r(e);var s=n(0),o=Object(s.a)({},(function(){var t=this.$createElement,e=this._self._c||t;return e("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[e("hr"),this._v(" "),e("code1")],1)}),[],!1,null,null,null);e.default=o.exports}}]);
|
||||
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([[17],{222:function(e,t,a){"use strict";a.r(t);var s=a(0),r=Object(s.a)({},(function(){var e=this.$createElement,t=this._self._c||e;return t("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[t("h1",{attrs:{id:"creating-a-reactive-dhapp-with-react-and-subspace"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#creating-a-reactive-dhapp-with-react-and-subspace"}},[this._v("#")]),this._v(" Creating a reactive ÐApp with React and Subspace")]),this._v(" "),t("p",[this._v("See example DApp at "),t("a",{attrs:{href:"https://github.com/embarklabs/subspace/tree/master/examples/react-example1",target:"_blank",rel:"noopener noreferrer"}},[this._v("https://github.com/embarklabs/subspace/tree/master/examples/react-example1"),t("OutboundLink")],1)])])}),[],!1,null,null,null);t.default=r.exports}}]);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{9:function(n,w,o){}}]);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{203:function(e,t,s){e.exports=s.p+"assets/img/d1.daa5485a.png"},204:function(e,t,s){e.exports=s.p+"assets/img/d2.de512122.png"},205:function(e,t,s){e.exports=s.p+"assets/img/d3.123a2e18.png"},206:function(e,t,s){e.exports=s.p+"assets/img/d4.81f850ef.png"},213:function(e,t,s){"use strict";s.r(t);var a=s(0),r=Object(a.a)({},(function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[a("h1",{attrs:{id:"how-it-works"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-it-works"}},[e._v("#")]),e._v(" How it works?")]),e._v(" "),a("h3",{attrs:{id:"setup"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setup"}},[e._v("#")]),e._v(" Setup")]),e._v(" "),a("p",[a("img",{attrs:{src:s(203),alt:"First Usage - Setup"}})]),e._v(" "),a("ol",[a("li",[e._v("A ÐApp requests "),a("code",[e._v("Subspace")]),e._v(" to track an event, property, or balance.")]),e._v(" "),a("li",[a("code",[e._v("Subspace")]),e._v(" creates a observable for that event, and a web3 subscription to retrieve events from the chain")]),e._v(" "),a("li",[e._v("The ÐApp subscribes to the observable to receive events.")])]),e._v(" "),a("h3",{attrs:{id:"receiving-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#receiving-events"}},[e._v("#")]),e._v(" Receiving events")]),e._v(" "),a("p",[a("img",{attrs:{src:s(204),alt:"First Usage - Receiving events"}}),e._v("\nDepending on the filter parameters used to track the events, once an event is found, it is stored in "),a("code",[e._v("localStorage")]),e._v(" and it is also pushed to the observable which delivers it to the ÐApp subscription.")]),e._v(" "),a("h3",{attrs:{id:"tracking-already-known-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tracking-already-known-events"}},[e._v("#")]),e._v(" Tracking already known events")]),e._v(" "),a("p",[e._v("After restarting the ÐApp, either by executing it again in case of a console application or refreshing the browser the behavior of "),a("code",[e._v("Subspace")]),e._v(" will change:\n"),a("img",{attrs:{src:s(205),alt:"Second Usage - Setup"}})]),e._v(" "),a("ol",[a("li",[e._v("The Dapp will request "),a("code",[e._v("Subspace")]),e._v(" to track an event it already knows, creating an observable and subscription for that event")]),e._v(" "),a("li",[e._v("It will retrieve events that were previously stored in localStorage and deliver them to the DApp subscription, avoiding having to query the chain for the old events again.")])]),e._v(" "),a("p",[a("img",{attrs:{src:s(206),alt:"Second Usage - Receiving events"}}),e._v("\nThe web3 subscription created previously will start from the last known block instead of beginning from scratch. New events will be delivered normally from this step")])])}),[],!1,null,null,null);t.default=r.exports}}]);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{208:function(t,e,n){"use strict";var i=n(73);n.n(i).a},215:function(t,e,n){"use strict";n.r(e);var i={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,i=e.slots;return t("span",{class:["badge",n.type],style:{verticalAlign:n.vertical}},n.text||i().default)}},r=(n(208),n(0)),a=Object(r.a)(i,void 0,void 0,!1,null,"c13ee5b0",null);e.default=a.exports},73:function(t,e,n){}}]);
|
||||
|
|
@ -0,0 +1 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{211:function(t,e,s){"use strict";s.r(e);var o=["There's nothing here.","How did we get here?","That's a Four-Oh-Four.","Looks like we've got some broken links."],n={methods:{getMsg:function(){return o[Math.floor(Math.random()*o.length)]}}},i=s(0),h=Object(i.a)(n,(function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"theme-container"},[e("div",{staticClass:"theme-default-content"},[e("h1",[this._v("404")]),this._v(" "),e("blockquote",[this._v(this._s(this.getMsg()))]),this._v(" "),e("router-link",{attrs:{to:"/"}},[this._v("Take me home.")])],1)])}),[],!1,null,null,null);e.default=h.exports}}]);
|
||||
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
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Getting Started | SUBSPACE</title>
|
||||
<meta name="description" content="Reactive ÐApp Development">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
|
||||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.ff6dfed4.css" as="style"><link rel="preload" href="/assets/js/app.dee337e1.js" as="script"><link rel="preload" href="/assets/js/2.c401969f.js" as="script"><link rel="preload" href="/assets/js/9.19ef9a17.js" as="script"><link rel="prefetch" href="/assets/js/10.df07d2be.js"><link rel="prefetch" href="/assets/js/11.b5216252.js"><link rel="prefetch" href="/assets/js/12.85ce989d.js"><link rel="prefetch" href="/assets/js/13.73efb4d7.js"><link rel="prefetch" href="/assets/js/14.513e9262.js"><link rel="prefetch" href="/assets/js/15.d48a7184.js"><link rel="prefetch" href="/assets/js/16.1b9eabd3.js"><link rel="prefetch" href="/assets/js/17.910b0e9e.js"><link rel="prefetch" href="/assets/js/18.0936c664.js"><link rel="prefetch" href="/assets/js/19.1ae67b9a.js"><link rel="prefetch" href="/assets/js/3.fc5c8748.js"><link rel="prefetch" href="/assets/js/4.e5468477.js"><link rel="prefetch" href="/assets/js/5.26dd2b41.js"><link rel="prefetch" href="/assets/js/6.8a01ae42.js"><link rel="prefetch" href="/assets/js/7.a2409073.js"><link rel="prefetch" href="/assets/js/8.901206cf.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.ff6dfed4.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/img/logo-small.png" alt="SUBSPACE" class="logo"> <span class="site-name can-hide">SUBSPACE</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="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" class="header-anchor">#</a> Getting Started</h1> <h2 id="installation"><a href="#installation" 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>@status-im/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 @status-im/subspace
|
||||
|
||||
<span class="token comment"># Using yarn</span>
|
||||
<span class="token function">yarn</span> <span class="token function">add</span> @status-im/subspace
|
||||
</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="importing-the-library"><a href="#importing-the-library" class="header-anchor">#</a> Importing the library</h2> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// ESM (might require babel / browserify)</span>
|
||||
<span class="token keyword">import</span> Subspace <span class="token keyword">from</span> <span class="token string">'@status-im/subspace'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// CommonJS</span>
|
||||
<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">'@status-im/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" class="header-anchor">#</a> Connecting to a web3 provider</h2> <p>To interact with the EVM, <strong>Subspace</strong> requires a valid websockets 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></ul> <h2 id="reacting-to-data"><a href="#reacting-to-data" 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="custom-block tip"><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" 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" 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="custom-block tip"><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>
|
||||
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" 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">"@status-im/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>
|
||||
|
||||
rating$<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">$latest</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">$average</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><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> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"average rating of the last 5 events is "</span> <span class="token operator">+</span> rating<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><h2 id="tracking-balances"><a href="#tracking-balances" class="header-anchor">#</a> Tracking balances</h2> <p>You can also track changes in both ETH and ERC20 token balances for each mined block or time interval depending on the <code>callInterval</code> configured.</p> <p>Tracking ETH balance in an address:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> address <span class="token operator">=</span> <span class="token string">"0x0001020304050607080900010203040506070809"</span><span class="token punctuation">;</span>
|
||||
|
||||
subspace<span class="token punctuation">.</span><span class="token function">trackBalance</span><span class="token punctuation">(</span>address<span class="token punctuation">)</span><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">balance</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"ETH balance is "</span><span class="token punctuation">,</span> balance<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>Tracking ETH balance in a Contract:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Contract<span class="token punctuation">.</span><span class="token function">trackBalance</span><span class="token punctuation">(</span><span class="token punctuation">)</span><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">balance</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"ETH balance is "</span><span class="token punctuation">,</span> balance<span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>Tracking an ERC20 balance in a Contract:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> tokenAddress <span class="token operator">=</span> <span class="token string">"0x744d70fdbe2ba4cf95131626614a1763df805b9e"</span><span class="token punctuation">;</span> <span class="token comment">// SNT Address</span>
|
||||
|
||||
<span class="token keyword">const</span> myBalanceObservable$ <span class="token operator">=</span> Contract<span class="token punctuation">.</span><span class="token function">trackBalance</span><span class="token punctuation">(</span>tokenAddress<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><div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>Balances are returned as a string containing the value in <em>wei</em>.</p></div> <h2 id="subscriptions"><a href="#subscriptions" class="header-anchor">#</a> Subscriptions</h2> <p>Once you have an <code>Observable</code>, you may receive a stream of data by creating a subscription. Subscriptions are triggered each time an observable emits a new value. These subscription receive a callback that must have a parameter which represents the value received from the observable (a contract state variable, an event, or the balance of an address); and they return an object representing the subscription.</p> <p>Subscriptions can be disposed by executing the method <code>unsubscribe()</code> liberating the resource held by it:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> myBalanceObservable$ <span class="token operator">=</span> subspace<span class="token punctuation">.</span><span class="token function">trackBalance</span><span class="token punctuation">(</span>address<span class="token punctuation">,</span> tokenAddress<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> subscription <span class="token operator">=</span> myBalanceObservable$<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token parameter">value</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"The balance is: "</span><span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// ...</span>
|
||||
|
||||
subscription<span class="token punctuation">.</span><span class="token function">unsubscribe</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h4 id="further-read-2"><a href="#further-read-2" class="header-anchor">#</a> Further read</h4> <ul><li><a href="https://rxjs-dev.firebaseapp.com/guide/subscription" target="_blank" rel="noopener noreferrer">RxJS Subscriptions<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="cleanup"><a href="#cleanup" class="header-anchor">#</a> Cleanup</h2> <p>If <strong>Subspace</strong> is not needed anymore, you need can invoke <code>close()</code> to dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by <strong>Subspace</strong> during its normal execution, thus avoiding any potential memory leak.</p> <div class="language- line-numbers-mode"><pre class="language-text"><code>subspace.close();
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="custom-block warning"><p class="custom-block-title">What about subscriptions created with our observables?</p> <p>Any subscription created via the tracking methods must be unsubscribed manually (in the current version).</p></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<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.dee337e1.js" defer></script><script src="/assets/js/2.c401969f.js" defer></script><script src="/assets/js/9.19ef9a17.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>How it works? | SUBSPACE</title>
|
||||
<meta name="description" content="Reactive ÐApp Development">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
|
||||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.ff6dfed4.css" as="style"><link rel="preload" href="/assets/js/app.dee337e1.js" as="script"><link rel="preload" href="/assets/js/2.c401969f.js" as="script"><link rel="preload" href="/assets/js/3.fc5c8748.js" as="script"><link rel="prefetch" href="/assets/js/10.df07d2be.js"><link rel="prefetch" href="/assets/js/11.b5216252.js"><link rel="prefetch" href="/assets/js/12.85ce989d.js"><link rel="prefetch" href="/assets/js/13.73efb4d7.js"><link rel="prefetch" href="/assets/js/14.513e9262.js"><link rel="prefetch" href="/assets/js/15.d48a7184.js"><link rel="prefetch" href="/assets/js/16.1b9eabd3.js"><link rel="prefetch" href="/assets/js/17.910b0e9e.js"><link rel="prefetch" href="/assets/js/18.0936c664.js"><link rel="prefetch" href="/assets/js/19.1ae67b9a.js"><link rel="prefetch" href="/assets/js/4.e5468477.js"><link rel="prefetch" href="/assets/js/5.26dd2b41.js"><link rel="prefetch" href="/assets/js/6.8a01ae42.js"><link rel="prefetch" href="/assets/js/7.a2409073.js"><link rel="prefetch" href="/assets/js/8.901206cf.js"><link rel="prefetch" href="/assets/js/9.19ef9a17.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.ff6dfed4.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/img/logo-small.png" alt="SUBSPACE" class="logo"> <span class="site-name can-hide">SUBSPACE</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="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" class="header-anchor">#</a> How it works?</h1> <h3 id="setup"><a href="#setup" 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" 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" 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.dee337e1.js" defer></script><script src="/assets/js/2.c401969f.js" defer></script><script src="/assets/js/3.fc5c8748.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>SUBSPACE</title>
|
||||
<meta name="description" content="Reactive ÐApp Development">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
|
||||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.ff6dfed4.css" as="style"><link rel="preload" href="/assets/js/app.dee337e1.js" as="script"><link rel="preload" href="/assets/js/2.c401969f.js" as="script"><link rel="preload" href="/assets/js/14.513e9262.js" as="script"><link rel="preload" href="/assets/js/4.e5468477.js" as="script"><link rel="prefetch" href="/assets/js/10.df07d2be.js"><link rel="prefetch" href="/assets/js/11.b5216252.js"><link rel="prefetch" href="/assets/js/12.85ce989d.js"><link rel="prefetch" href="/assets/js/13.73efb4d7.js"><link rel="prefetch" href="/assets/js/15.d48a7184.js"><link rel="prefetch" href="/assets/js/16.1b9eabd3.js"><link rel="prefetch" href="/assets/js/17.910b0e9e.js"><link rel="prefetch" href="/assets/js/18.0936c664.js"><link rel="prefetch" href="/assets/js/19.1ae67b9a.js"><link rel="prefetch" href="/assets/js/3.fc5c8748.js"><link rel="prefetch" href="/assets/js/5.26dd2b41.js"><link rel="prefetch" href="/assets/js/6.8a01ae42.js"><link rel="prefetch" href="/assets/js/7.a2409073.js"><link rel="prefetch" href="/assets/js/8.901206cf.js"><link rel="prefetch" href="/assets/js/9.19ef9a17.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.ff6dfed4.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-exact-active router-link-active"><img src="/assets/img/logo-small.png" alt="SUBSPACE" class="logo"> <span class="site-name can-hide">SUBSPACE</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="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">
|
||||
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-bae0c64a><div class="code-container" data-v-bae0c64a><div class="code-text" data-v-bae0c64a><h3 data-v-bae0c64a>Event Tracking & Event Sourcing</h3>
|
||||
You can track events and react to their values. With Subspace observables doing event sourcing is easy.
|
||||
</div> <div class="code-content" data-v-bae0c64a><div class="language-js line-numbers-mode" data-v-bae0c64a><pre class="language-js" data-v-bae0c64a><code data-v-bae0c64a><span class="token keyword" data-v-bae0c64a>import</span> <span class="token punctuation" data-v-bae0c64a>{</span> $average<span class="token punctuation" data-v-bae0c64a>,</span> $latest <span class="token punctuation" data-v-bae0c64a>}</span> <span class="token keyword" data-v-bae0c64a>from</span> <span class="token string" data-v-bae0c64a>"@status-im/subspace"</span><span class="token punctuation" data-v-bae0c64a>;</span>
|
||||
|
||||
<span class="token keyword" data-v-bae0c64a>const</span> rating$ <span class="token operator" data-v-bae0c64a>=</span> Product<span class="token punctuation" data-v-bae0c64a>.</span>events<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>Rating</span><span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>track</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>map</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token string" data-v-bae0c64a>"rating"</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>;</span>
|
||||
|
||||
rating$<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>pipe</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token function" data-v-bae0c64a>$latest</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token number" data-v-bae0c64a>5</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>,</span> <span class="token function" data-v-bae0c64a>$average</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>subscribe</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token parameter" data-v-bae0c64a>rating</span><span class="token punctuation" data-v-bae0c64a>)</span> <span class="token operator" data-v-bae0c64a>=></span> <span class="token punctuation" data-v-bae0c64a>{</span>
|
||||
console<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>log</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token string" data-v-bae0c64a>"average rating of the last 5 events is "</span> <span class="token operator" data-v-bae0c64a>+</span> rating<span class="token punctuation" data-v-bae0c64a>)</span>
|
||||
<span class="token punctuation" data-v-bae0c64a>}</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper" data-v-bae0c64a><span class="line-number" data-v-bae0c64a>1</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>2</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>3</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>4</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>5</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>6</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>7</span><br data-v-bae0c64a></div></div></div></div> <div class="code-container" data-v-bae0c64a><div class="code-text" data-v-bae0c64a><h3 data-v-bae0c64a>Tracking State</h3>
|
||||
You can track changes to a contract state variable, by specifying the view function and arguments to call and query the contract.
|
||||
</div> <div class="code-content" data-v-bae0c64a><div class="language-js line-numbers-mode" data-v-bae0c64a><pre class="language-js" data-v-bae0c64a><code data-v-bae0c64a><span class="token keyword" data-v-bae0c64a>const</span> productTitle$ <span class="token operator" data-v-bae0c64a>=</span> ProductList<span class="token punctuation" data-v-bae0c64a>.</span>methods<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>products</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token number" data-v-bae0c64a>0</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>track</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>map</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token string" data-v-bae0c64a>"title"</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>;</span>
|
||||
productTitle$<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>subscribe</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token parameter" data-v-bae0c64a>title</span><span class="token punctuation" data-v-bae0c64a>)</span> <span class="token operator" data-v-bae0c64a>=></span> console<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>log</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token string" data-v-bae0c64a>"product title is "</span> <span class="token operator" data-v-bae0c64a>+</span> title<span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper" data-v-bae0c64a><span class="line-number" data-v-bae0c64a>1</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>2</span><br data-v-bae0c64a></div></div></div></div> <div class="code-container" data-v-bae0c64a><div class="code-text" data-v-bae0c64a><h3 data-v-bae0c64a>Tracking balances</h3>
|
||||
You can also track changes in both ETH and ERC20 token balances
|
||||
</div> <div class="code-content" data-v-bae0c64a><div class="language-js line-numbers-mode" data-v-bae0c64a><pre class="language-js" data-v-bae0c64a><code data-v-bae0c64a><span class="token keyword" data-v-bae0c64a>const</span> address <span class="token operator" data-v-bae0c64a>=</span> <span class="token string" data-v-bae0c64a>"0x0001020304050607080900010203040506070809"</span><span class="token punctuation" data-v-bae0c64a>;</span>
|
||||
|
||||
subspace<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>trackBalance</span><span class="token punctuation" data-v-bae0c64a>(</span>address<span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>subscribe</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token parameter" data-v-bae0c64a>balance</span><span class="token punctuation" data-v-bae0c64a>)</span> <span class="token operator" data-v-bae0c64a>=></span> <span class="token punctuation" data-v-bae0c64a>{</span>
|
||||
console<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>log</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token string" data-v-bae0c64a>"ETH balance is "</span><span class="token punctuation" data-v-bae0c64a>,</span> balance<span class="token punctuation" data-v-bae0c64a>)</span>
|
||||
<span class="token punctuation" data-v-bae0c64a>}</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>;</span>
|
||||
|
||||
subspace<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>trackBalance</span><span class="token punctuation" data-v-bae0c64a>(</span>address, <span class="token string" data-v-bae0c64a>"0x744d70fdbe2ba4cf95131626614a1763df805b9e"</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>subscribe</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token parameter" data-v-bae0c64a>balance</span><span class="token punctuation" data-v-bae0c64a>)</span> <span class="token operator" data-v-bae0c64a>=></span> <span class="token punctuation" data-v-bae0c64a>{</span>
|
||||
console<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>log</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token string" data-v-bae0c64a>"SNT balance is "</span><span class="token punctuation" data-v-bae0c64a>,</span> balance<span class="token punctuation" data-v-bae0c64a>)</span>
|
||||
<span class="token punctuation" data-v-bae0c64a>}</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>;</span>
|
||||
|
||||
</code></pre> <div class="line-numbers-wrapper" data-v-bae0c64a><span class="line-number" data-v-bae0c64a>1</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>2</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>3</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>4</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>5</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>6</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>7</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>8</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>9</span><br data-v-bae0c64a></div></div></div></div> <div class="code-container" data-v-bae0c64a><div class="code-text" data-v-bae0c64a><h3 data-v-bae0c64a>React Integration</h3>
|
||||
Subspace can make any react component compatible with observables so you easily reactive components
|
||||
</div> <div class="code-content" data-v-bae0c64a><div class="language-js line-numbers-mode" data-v-bae0c64a><pre class="language-js" data-v-bae0c64a><code data-v-bae0c64a><span class="token keyword" data-v-bae0c64a>import</span> <span class="token punctuation" data-v-bae0c64a>{</span> observe <span class="token punctuation" data-v-bae0c64a>}</span> <span class="token keyword" data-v-bae0c64a>from</span> <span class="token string" data-v-bae0c64a>"@status-im/subspace/react"</span><span class="token punctuation" data-v-bae0c64a>;</span>
|
||||
|
||||
<span class="token keyword" data-v-bae0c64a>const</span> <span class="token function-variable function" data-v-bae0c64a>ProductComponent</span> <span class="token operator" data-v-bae0c64a>=</span> <span class="token punctuation" data-v-bae0c64a>(</span><span class="token parameter" data-v-bae0c64a><span class="token punctuation" data-v-bae0c64a>{</span> maxRating<span class="token punctuation" data-v-bae0c64a>,</span> minRating<span class="token punctuation" data-v-bae0c64a>,</span> averageRating <span class="token punctuation" data-v-bae0c64a>}</span></span><span class="token punctuation" data-v-bae0c64a>)</span> <span class="token operator" data-v-bae0c64a>=></span> <span class="token punctuation" data-v-bae0c64a>{</span>
|
||||
<span class="token keyword" data-v-bae0c64a>return</span> <span class="token operator" data-v-bae0c64a><</span>ul<span class="token operator" data-v-bae0c64a>></span>
|
||||
<span class="token operator" data-v-bae0c64a><</span>li<span class="token operator" data-v-bae0c64a>></span><span class="token operator" data-v-bae0c64a><</span>b<span class="token operator" data-v-bae0c64a>></span>minimum rating<span class="token punctuation" data-v-bae0c64a>:</span> <span class="token operator" data-v-bae0c64a><</span><span class="token operator" data-v-bae0c64a>/</span>b<span class="token operator" data-v-bae0c64a>></span> <span class="token punctuation" data-v-bae0c64a>{</span>minRating<span class="token punctuation" data-v-bae0c64a>}</span><span class="token operator" data-v-bae0c64a><</span><span class="token operator" data-v-bae0c64a>/</span>li<span class="token operator" data-v-bae0c64a>></span>
|
||||
<span class="token operator" data-v-bae0c64a><</span>li<span class="token operator" data-v-bae0c64a>></span><span class="token operator" data-v-bae0c64a><</span>b<span class="token operator" data-v-bae0c64a>></span>maximum rating<span class="token punctuation" data-v-bae0c64a>:</span> <span class="token operator" data-v-bae0c64a><</span><span class="token operator" data-v-bae0c64a>/</span>b<span class="token operator" data-v-bae0c64a>></span> <span class="token punctuation" data-v-bae0c64a>{</span>maxRating<span class="token punctuation" data-v-bae0c64a>}</span><span class="token operator" data-v-bae0c64a><</span><span class="token operator" data-v-bae0c64a>/</span>li<span class="token operator" data-v-bae0c64a>></span>
|
||||
<span class="token operator" data-v-bae0c64a><</span>li<span class="token operator" data-v-bae0c64a>></span><span class="token operator" data-v-bae0c64a><</span>b<span class="token operator" data-v-bae0c64a>></span>average rating<span class="token punctuation" data-v-bae0c64a>:</span> <span class="token operator" data-v-bae0c64a><</span><span class="token operator" data-v-bae0c64a>/</span>b<span class="token operator" data-v-bae0c64a>></span> <span class="token punctuation" data-v-bae0c64a>{</span>averageRating<span class="token punctuation" data-v-bae0c64a>}</span><span class="token operator" data-v-bae0c64a><</span><span class="token operator" data-v-bae0c64a>/</span>li<span class="token operator" data-v-bae0c64a>></span>
|
||||
<span class="token operator" data-v-bae0c64a><</span><span class="token operator" data-v-bae0c64a>/</span>ul<span class="token operator" data-v-bae0c64a>></span><span class="token punctuation" data-v-bae0c64a>;</span>
|
||||
<span class="token punctuation" data-v-bae0c64a>}</span><span class="token punctuation" data-v-bae0c64a>;</span>
|
||||
|
||||
<span class="token keyword" data-v-bae0c64a>const</span> ReactiveProductComponent <span class="token operator" data-v-bae0c64a>=</span> <span class="token function" data-v-bae0c64a>observe</span><span class="token punctuation" data-v-bae0c64a>(</span>ProductComponent<span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>;</span>
|
||||
<span class="token keyword" data-v-bae0c64a>const</span> Product <span class="token operator" data-v-bae0c64a>=</span> subspace<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>contract</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token punctuation" data-v-bae0c64a>{</span>abi<span class="token punctuation" data-v-bae0c64a>,</span> address<span class="token punctuation" data-v-bae0c64a>}</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>;</span>
|
||||
<span class="token keyword" data-v-bae0c64a>const</span> rating$ <span class="token operator" data-v-bae0c64a>=</span> Product<span class="token punctuation" data-v-bae0c64a>.</span>events<span class="token punctuation" data-v-bae0c64a>.</span>Rating<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>track</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>map</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token string" data-v-bae0c64a>"rating"</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>pipe</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token function" data-v-bae0c64a>map</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token parameter" data-v-bae0c64a>x</span> <span class="token operator" data-v-bae0c64a>=></span> <span class="token function" data-v-bae0c64a>parseInt</span><span class="token punctuation" data-v-bae0c64a>(</span>x<span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>;</span>
|
||||
|
||||
ReactDOM<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>render</span><span class="token punctuation" data-v-bae0c64a>(</span>
|
||||
<span class="token operator" data-v-bae0c64a><</span>ReactiveProductComponent
|
||||
maxRating<span class="token operator" data-v-bae0c64a>=</span><span class="token punctuation" data-v-bae0c64a>{</span>rating$<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>pipe</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token function" data-v-bae0c64a>$max</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>}</span>
|
||||
minRating<span class="token operator" data-v-bae0c64a>=</span><span class="token punctuation" data-v-bae0c64a>{</span>rating$<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>pipe</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token function" data-v-bae0c64a>$min</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>}</span>
|
||||
averageRating<span class="token operator" data-v-bae0c64a>=</span><span class="token punctuation" data-v-bae0c64a>{</span>rating$<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>pipe</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token function" data-v-bae0c64a>$average</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>}</span>
|
||||
<span class="token operator" data-v-bae0c64a>/</span><span class="token operator" data-v-bae0c64a>></span><span class="token punctuation" data-v-bae0c64a>,</span>
|
||||
document<span class="token punctuation" data-v-bae0c64a>.</span><span class="token function" data-v-bae0c64a>getElementById</span><span class="token punctuation" data-v-bae0c64a>(</span><span class="token string" data-v-bae0c64a>'hello-example'</span><span class="token punctuation" data-v-bae0c64a>)</span>
|
||||
<span class="token punctuation" data-v-bae0c64a>)</span><span class="token punctuation" data-v-bae0c64a>;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper" data-v-bae0c64a><span class="line-number" data-v-bae0c64a>1</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>2</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>3</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>4</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>5</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>6</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>7</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>8</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>9</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>10</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>11</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>12</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>13</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>14</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>15</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>16</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>17</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>18</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>19</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>20</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>21</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>22</span><br data-v-bae0c64a><span class="line-number" data-v-bae0c64a>23</span><br data-v-bae0c64a></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.dee337e1.js" defer></script><script src="/assets/js/2.c401969f.js" defer></script><script src="/assets/js/14.513e9262.js" defer></script><script src="/assets/js/4.e5468477.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Integrations with other frameworks | SUBSPACE</title>
|
||||
<meta name="description" content="Reactive ÐApp Development">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
|
||||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.ff6dfed4.css" as="style"><link rel="preload" href="/assets/js/app.dee337e1.js" as="script"><link rel="preload" href="/assets/js/2.c401969f.js" as="script"><link rel="preload" href="/assets/js/10.df07d2be.js" as="script"><link rel="prefetch" href="/assets/js/11.b5216252.js"><link rel="prefetch" href="/assets/js/12.85ce989d.js"><link rel="prefetch" href="/assets/js/13.73efb4d7.js"><link rel="prefetch" href="/assets/js/14.513e9262.js"><link rel="prefetch" href="/assets/js/15.d48a7184.js"><link rel="prefetch" href="/assets/js/16.1b9eabd3.js"><link rel="prefetch" href="/assets/js/17.910b0e9e.js"><link rel="prefetch" href="/assets/js/18.0936c664.js"><link rel="prefetch" href="/assets/js/19.1ae67b9a.js"><link rel="prefetch" href="/assets/js/3.fc5c8748.js"><link rel="prefetch" href="/assets/js/4.e5468477.js"><link rel="prefetch" href="/assets/js/5.26dd2b41.js"><link rel="prefetch" href="/assets/js/6.8a01ae42.js"><link rel="prefetch" href="/assets/js/7.a2409073.js"><link rel="prefetch" href="/assets/js/8.901206cf.js"><link rel="prefetch" href="/assets/js/9.19ef9a17.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.ff6dfed4.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/img/logo-small.png" alt="SUBSPACE" class="logo"> <span class="site-name can-hide">SUBSPACE</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><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/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></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/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#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" 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.dee337e1.js" defer></script><script src="/assets/js/2.c401969f.js" defer></script><script src="/assets/js/10.df07d2be.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>SUBSPACE</title>
|
||||
<meta name="description" content="Reactive ÐApp Development">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
|
||||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.ff6dfed4.css" as="style"><link rel="preload" href="/assets/js/app.dee337e1.js" as="script"><link rel="preload" href="/assets/js/2.c401969f.js" as="script"><link rel="preload" href="/assets/js/11.b5216252.js" as="script"><link rel="prefetch" href="/assets/js/10.df07d2be.js"><link rel="prefetch" href="/assets/js/12.85ce989d.js"><link rel="prefetch" href="/assets/js/13.73efb4d7.js"><link rel="prefetch" href="/assets/js/14.513e9262.js"><link rel="prefetch" href="/assets/js/15.d48a7184.js"><link rel="prefetch" href="/assets/js/16.1b9eabd3.js"><link rel="prefetch" href="/assets/js/17.910b0e9e.js"><link rel="prefetch" href="/assets/js/18.0936c664.js"><link rel="prefetch" href="/assets/js/19.1ae67b9a.js"><link rel="prefetch" href="/assets/js/3.fc5c8748.js"><link rel="prefetch" href="/assets/js/4.e5468477.js"><link rel="prefetch" href="/assets/js/5.26dd2b41.js"><link rel="prefetch" href="/assets/js/6.8a01ae42.js"><link rel="prefetch" href="/assets/js/7.a2409073.js"><link rel="prefetch" href="/assets/js/8.901206cf.js"><link rel="prefetch" href="/assets/js/9.19ef9a17.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.ff6dfed4.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/img/logo-small.png" alt="SUBSPACE" class="logo"> <span class="site-name can-hide">SUBSPACE</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#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.dee337e1.js" defer></script><script src="/assets/js/2.c401969f.js" defer></script><script src="/assets/js/11.b5216252.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,184 @@
|
|||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
src: url("Inter-Thin.woff2") format("woff2"),
|
||||
url("Inter-Thin.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 100;
|
||||
src: url("Inter-ThinItalic.woff2") format("woff2"),
|
||||
url("Inter-ThinItalic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 200;
|
||||
src: url("Inter-ExtraLight.woff2") format("woff2"),
|
||||
url("Inter-ExtraLight.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 200;
|
||||
src: url("Inter-ExtraLightItalic.woff2") format("woff2"),
|
||||
url("Inter-ExtraLightItalic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: url("Inter-Light.woff2") format("woff2"),
|
||||
url("Inter-Light.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
src: url("Inter-LightItalic.woff2") format("woff2"),
|
||||
url("Inter-LightItalic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("Inter-Regular.woff2") format("woff2"),
|
||||
url("Inter-Regular.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: url("Inter-Italic.woff2") format("woff2"),
|
||||
url("Inter-Italic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: url("Inter-Medium.woff2") format("woff2"),
|
||||
url("Inter-Medium.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 500;
|
||||
src: url("Inter-MediumItalic.woff2") format("woff2"),
|
||||
url("Inter-MediumItalic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
src: url("Inter-SemiBold.woff2") format("woff2"),
|
||||
url("Inter-SemiBold.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 600;
|
||||
src: url("Inter-SemiBoldItalic.woff2") format("woff2"),
|
||||
url("Inter-SemiBoldItalic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url("Inter-Bold.woff2") format("woff2"),
|
||||
url("Inter-Bold.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
src: url("Inter-BoldItalic.woff2") format("woff2"),
|
||||
url("Inter-BoldItalic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
src: url("Inter-ExtraBold.woff2") format("woff2"),
|
||||
url("Inter-ExtraBold.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 800;
|
||||
src: url("Inter-ExtraBoldItalic.woff2") format("woff2"),
|
||||
url("Inter-ExtraBoldItalic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: url("Inter-Black.woff2") format("woff2"),
|
||||
url("Inter-Black.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
font-style: italic;
|
||||
font-weight: 900;
|
||||
src: url("Inter-BlackItalic.woff2") format("woff2"),
|
||||
url("Inter-BlackItalic.woff") format("woff");
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------
|
||||
Variable font.
|
||||
Usage:
|
||||
|
||||
html { font-family: 'Inter', sans-serif; }
|
||||
@supports (font-variation-settings: normal) {
|
||||
html { font-family: 'Inter var', sans-serif; }
|
||||
}
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-named-instance: 'Regular';
|
||||
src: url("Inter-upright.var.woff2") format("woff2 supports variations(gvar)"),
|
||||
url("Inter-upright.var.woff2") format("woff2-variations"),
|
||||
url("Inter-upright.var.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter var';
|
||||
font-weight: 100 900;
|
||||
font-style: italic;
|
||||
font-named-instance: 'Italic';
|
||||
src: url("Inter-italic.var.woff2") format("woff2 supports variations(gvar)"),
|
||||
url("Inter-italic.var.woff2") format("woff2-variations"),
|
||||
url("Inter-italic.var.woff2") format("woff2");
|
||||
}
|
||||
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
[EXPERIMENTAL] Multi-axis, single variable font.
|
||||
|
||||
Slant axis is not yet widely supported (as of February 2019) and thus this
|
||||
multi-axis single variable font is opt-in rather than the default.
|
||||
|
||||
When using this, you will probably need to set font-variation-settings
|
||||
explicitly, e.g.
|
||||
|
||||
* { font-variation-settings: "slnt" 0deg }
|
||||
.italic { font-variation-settings: "slnt" 10deg }
|
||||
|
||||
*/
|
||||
@font-face {
|
||||
font-family: 'Inter var experimental';
|
||||
font-weight: 100 900;
|
||||
font-style: oblique 0deg 10deg;
|
||||
src: url("Inter.var.woff2") format("woff2-variations"),
|
||||
url("Inter.var.woff2") format("woff2");
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>React | SUBSPACE</title>
|
||||
<meta name="description" content="Reactive ÐApp Development">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
|
||||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.ff6dfed4.css" as="style"><link rel="preload" href="/assets/js/app.dee337e1.js" as="script"><link rel="preload" href="/assets/js/2.c401969f.js" as="script"><link rel="preload" href="/assets/js/12.85ce989d.js" as="script"><link rel="prefetch" href="/assets/js/10.df07d2be.js"><link rel="prefetch" href="/assets/js/11.b5216252.js"><link rel="prefetch" href="/assets/js/13.73efb4d7.js"><link rel="prefetch" href="/assets/js/14.513e9262.js"><link rel="prefetch" href="/assets/js/15.d48a7184.js"><link rel="prefetch" href="/assets/js/16.1b9eabd3.js"><link rel="prefetch" href="/assets/js/17.910b0e9e.js"><link rel="prefetch" href="/assets/js/18.0936c664.js"><link rel="prefetch" href="/assets/js/19.1ae67b9a.js"><link rel="prefetch" href="/assets/js/3.fc5c8748.js"><link rel="prefetch" href="/assets/js/4.e5468477.js"><link rel="prefetch" href="/assets/js/5.26dd2b41.js"><link rel="prefetch" href="/assets/js/6.8a01ae42.js"><link rel="prefetch" href="/assets/js/7.a2409073.js"><link rel="prefetch" href="/assets/js/8.901206cf.js"><link rel="prefetch" href="/assets/js/9.19ef9a17.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.ff6dfed4.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/img/logo-small.png" alt="SUBSPACE" class="logo"> <span class="site-name can-hide">SUBSPACE</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#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" 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" 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">'@status-im/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" class="header-anchor">#</a> Example</h3> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>This example is available in <a href="https://github.com/embarklabs/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" 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>
|
||||
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
|
||||
<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">"@status-im/subspace/react"</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">MyComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>eventData<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// Handle initial state when no data is available</span>
|
||||
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>eventData<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token operator"><</span>p<span class="token operator">></span>No data<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">return</span> <span class="token operator"><</span>p<span class="token operator">></span><span class="token punctuation">{</span>eventData<span class="token punctuation">.</span>someReturnedValue<span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token comment">// MyComponent will now observe any observable prop it receives</span>
|
||||
<span class="token comment">// and update its state whenever the observable emits an event</span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token function">observe</span><span class="token punctuation">(</span>MyComponent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br></div></div><h4 id="app-js"><a href="#app-js" class="header-anchor">#</a> App.js</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> Subspace <span class="token keyword">from</span> <span class="token string">'@status-im/subspace'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">import</span> MyComponentObserver <span class="token keyword">from</span> <span class="token string">'./MyComponentObserver'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">class</span> <span class="token class-name">App</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>
|
||||
state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
myEventObservable$<span class="token operator">:</span> <span class="token keyword">null</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">async</span> <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> MyContractInstance <span class="token operator">=</span> <span class="token operator">...</span><span class="token punctuation">;</span> <span class="token comment">// TODO: obtain a web3.eth.contract instance</span>
|
||||
|
||||
<span class="token keyword">const</span> subspace <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Subspace</span><span class="token punctuation">(</span><span class="token string">"wss://localhost:8545"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Use a valid websocket provider (geth, parity, infura...)</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 keyword">const</span> myEventObservable$ <span class="token operator">=</span> subspace<span class="token punctuation">.</span><span class="token function">trackEvent</span><span class="token punctuation">(</span>MyContractInstance<span class="token punctuation">,</span> <span class="token string">"MyEvent"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>filter<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> fromBlock<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> myEventObservable$ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token operator"><</span>MyComponentObserver eventData<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>myEventObservable$<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> App<span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br></div></div><div class="custom-block warning"><p class="custom-block-title">Handling Contract Objects</p> <p>The variable <code>MyContractInstance</code> is a <code>web3.eth.Contract</code> object pointing to a deployed contract address. You can use a DApp framework like <a href="https://embark.embarklabs.io/docs/contracts_javascript.html" target="_blank" rel="noopener noreferrer">Embark<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> to easily import that contract instance: <code>import { MyContract } from './embarkArtifacts/contracts';</code>, or use web3.js directly (just like in the example <a href="https://github.com/embarklabs/subspace/blob/master/examples/react/src/MyContract.js#L36-L42" target="_blank" rel="noopener noreferrer">source code<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="index-js"><a href="#index-js" class="header-anchor">#</a> index.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>
|
||||
<span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App'</span><span class="token punctuation">;</span>
|
||||
|
||||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>App <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'root'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><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">"@status-im/subspace/react"</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">ProductComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> maxRating<span class="token punctuation">,</span> minRating<span class="token punctuation">,</span> averageRating <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token operator"><</span>ul<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>minimum rating<span class="token operator">:</span> <span class="token operator"><</span><span class="token operator">/</span>b<span class="token operator">></span> <span class="token punctuation">{</span>minRating<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>maximum rating<span class="token operator">:</span> <span class="token operator"><</span><span class="token operator">/</span>b<span class="token operator">></span> <span class="token punctuation">{</span>maxRating<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>average rating<span class="token operator">:</span> <span class="token operator"><</span><span class="token operator">/</span>b<span class="token operator">></span> <span class="token punctuation">{</span>averageRating<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><span class="token operator">/</span>ul<span class="token operator">></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> ReactiveProductComponent <span class="token operator">=</span> <span class="token function">observe</span><span class="token punctuation">(</span>ProductComponent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> Product <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> address<span class="token punctuation">}</span><span class="token punctuation">)</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>Rating<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 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>
|
||||
|
||||
ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
|
||||
<span class="token operator"><</span>ReactiveProductComponent
|
||||
maxRating<span class="token operator">=</span><span class="token punctuation">{</span>rating$<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">$max</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
minRating<span class="token operator">=</span><span class="token punctuation">{</span>rating$<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">$min</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
averageRating<span class="token operator">=</span><span class="token punctuation">{</span>rating$<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">$average</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
<span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span>
|
||||
document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'hello-example'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<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.dee337e1.js" defer></script><script src="/assets/js/2.c401969f.js" defer></script><script src="/assets/js/12.85ce989d.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>reactive-graphql | SUBSPACE</title>
|
||||
<meta name="description" content="Reactive ÐApp Development">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
|
||||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.ff6dfed4.css" as="style"><link rel="preload" href="/assets/js/app.dee337e1.js" as="script"><link rel="preload" href="/assets/js/2.c401969f.js" as="script"><link rel="preload" href="/assets/js/13.73efb4d7.js" as="script"><link rel="prefetch" href="/assets/js/10.df07d2be.js"><link rel="prefetch" href="/assets/js/11.b5216252.js"><link rel="prefetch" href="/assets/js/12.85ce989d.js"><link rel="prefetch" href="/assets/js/14.513e9262.js"><link rel="prefetch" href="/assets/js/15.d48a7184.js"><link rel="prefetch" href="/assets/js/16.1b9eabd3.js"><link rel="prefetch" href="/assets/js/17.910b0e9e.js"><link rel="prefetch" href="/assets/js/18.0936c664.js"><link rel="prefetch" href="/assets/js/19.1ae67b9a.js"><link rel="prefetch" href="/assets/js/3.fc5c8748.js"><link rel="prefetch" href="/assets/js/4.e5468477.js"><link rel="prefetch" href="/assets/js/5.26dd2b41.js"><link rel="prefetch" href="/assets/js/6.8a01ae42.js"><link rel="prefetch" href="/assets/js/7.a2409073.js"><link rel="prefetch" href="/assets/js/8.901206cf.js"><link rel="prefetch" href="/assets/js/9.19ef9a17.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.ff6dfed4.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/img/logo-small.png" alt="SUBSPACE" class="logo"> <span class="site-name can-hide">SUBSPACE</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#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" 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" 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">'@status-im/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>
|
||||
<span class="token keyword">const</span> gql <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"graphql-tag"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span> graphql <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">"reactive-graphql"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">run</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> subspace <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Subspace</span><span class="token punctuation">(</span>web3<span class="token punctuation">.</span>currentProvider<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Use a valid websocket provider (geth, parity, infura...)</span>
|
||||
<span class="token keyword">await</span> subspace<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> MyContractInstance <span class="token operator">=</span> <span class="token operator">...</span><span class="token punctuation">;</span> <span class="token comment">// TODO: obtain a web3.eth.contract instance</span>
|
||||
|
||||
<span class="token keyword">const</span> typeDefs <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
type MyEvent {
|
||||
someValue: Int
|
||||
anotherValue: String
|
||||
}
|
||||
type Query {
|
||||
myEvents: MyEvent!
|
||||
}
|
||||
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> resolvers <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
Query<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">myEvents</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> subspace<span class="token punctuation">.</span><span class="token function">trackEvent</span><span class="token punctuation">(</span>MyContractInstance<span class="token punctuation">,</span> <span class="token string">'MyEvent'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> filter<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> fromBlock<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> schema <span class="token operator">=</span> <span class="token function">makeExecutableSchema</span><span class="token punctuation">(</span><span class="token punctuation">{</span> typeDefs<span class="token punctuation">,</span> resolvers <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> query <span class="token operator">=</span> gql<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
query {
|
||||
myEvents {
|
||||
someValue
|
||||
anotherValue
|
||||
}
|
||||
}
|
||||
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> stream <span class="token operator">=</span> <span class="token function">graphql</span><span class="token punctuation">(</span>schema<span class="token punctuation">,</span> query<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">pluck</span><span class="token punctuation">(</span><span class="token string">'data'</span><span class="token punctuation">,</span> <span class="token string">'myEvents'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
stream<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token parameter">data</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br></div></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>This example is available in <a href="https://github.com/embarklabs/subspace/tree/master/examples/reactive-graphql" 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></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<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.dee337e1.js" defer></script><script src="/assets/js/2.c401969f.js" defer></script><script src="/assets/js/13.73efb4d7.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
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Creating a reactive ÐApp with React and Subspace | SUBSPACE</title>
|
||||
<meta name="description" content="Reactive ÐApp Development">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
|
||||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.ff6dfed4.css" as="style"><link rel="preload" href="/assets/js/app.dee337e1.js" as="script"><link rel="preload" href="/assets/js/2.c401969f.js" as="script"><link rel="preload" href="/assets/js/17.910b0e9e.js" as="script"><link rel="prefetch" href="/assets/js/10.df07d2be.js"><link rel="prefetch" href="/assets/js/11.b5216252.js"><link rel="prefetch" href="/assets/js/12.85ce989d.js"><link rel="prefetch" href="/assets/js/13.73efb4d7.js"><link rel="prefetch" href="/assets/js/14.513e9262.js"><link rel="prefetch" href="/assets/js/15.d48a7184.js"><link rel="prefetch" href="/assets/js/16.1b9eabd3.js"><link rel="prefetch" href="/assets/js/18.0936c664.js"><link rel="prefetch" href="/assets/js/19.1ae67b9a.js"><link rel="prefetch" href="/assets/js/3.fc5c8748.js"><link rel="prefetch" href="/assets/js/4.e5468477.js"><link rel="prefetch" href="/assets/js/5.26dd2b41.js"><link rel="prefetch" href="/assets/js/6.8a01ae42.js"><link rel="prefetch" href="/assets/js/7.a2409073.js"><link rel="prefetch" href="/assets/js/8.901206cf.js"><link rel="prefetch" href="/assets/js/9.19ef9a17.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.ff6dfed4.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/img/logo-small.png" alt="SUBSPACE" class="logo"> <span class="site-name can-hide">SUBSPACE</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#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" class="header-anchor">#</a> Creating a reactive ÐApp with React and Subspace</h1> <p>See example DApp at <a href="https://github.com/embarklabs/subspace/tree/master/examples/react-example1" target="_blank" rel="noopener noreferrer">https://github.com/embarklabs/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.dee337e1.js" defer></script><script src="/assets/js/2.c401969f.js" defer></script><script src="/assets/js/17.910b0e9e.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title>Vue | SUBSPACE</title>
|
||||
<meta name="description" content="Reactive ÐApp Development">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
|
||||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.ff6dfed4.css" as="style"><link rel="preload" href="/assets/js/app.dee337e1.js" as="script"><link rel="preload" href="/assets/js/2.c401969f.js" as="script"><link rel="preload" href="/assets/js/18.0936c664.js" as="script"><link rel="prefetch" href="/assets/js/10.df07d2be.js"><link rel="prefetch" href="/assets/js/11.b5216252.js"><link rel="prefetch" href="/assets/js/12.85ce989d.js"><link rel="prefetch" href="/assets/js/13.73efb4d7.js"><link rel="prefetch" href="/assets/js/14.513e9262.js"><link rel="prefetch" href="/assets/js/15.d48a7184.js"><link rel="prefetch" href="/assets/js/16.1b9eabd3.js"><link rel="prefetch" href="/assets/js/17.910b0e9e.js"><link rel="prefetch" href="/assets/js/19.1ae67b9a.js"><link rel="prefetch" href="/assets/js/3.fc5c8748.js"><link rel="prefetch" href="/assets/js/4.e5468477.js"><link rel="prefetch" href="/assets/js/5.26dd2b41.js"><link rel="prefetch" href="/assets/js/6.8a01ae42.js"><link rel="prefetch" href="/assets/js/7.a2409073.js"><link rel="prefetch" href="/assets/js/8.901206cf.js"><link rel="prefetch" href="/assets/js/9.19ef9a17.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.ff6dfed4.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/assets/img/logo-small.png" alt="SUBSPACE" class="logo"> <span class="site-name can-hide">SUBSPACE</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#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" 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" class="header-anchor">#</a> Example</h3> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>This example is available in <a href="https://github.com/embarklabs/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" 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 operator">:</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 operator">:</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>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>ul<span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span>
|
||||
|
||||
<span class="token operator"><</span>script<span class="token operator">></span>
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'MyComponent'</span><span class="token punctuation">,</span>
|
||||
props<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
eventData<span class="token operator">:</span> Object
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token function">subscriptions</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// provide Rx observables</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
eventData$<span class="token operator">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>eventData
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>script<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><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br></div></div><h4 id="app-vue"><a href="#app-vue" class="header-anchor">#</a> App.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>div id<span class="token operator">=</span><span class="token string">"app"</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span>button v<span class="token operator">-</span>on<span class="token operator">:</span>click<span class="token operator">=</span><span class="token string">"createTrx"</span><span class="token operator">></span>Create a Transaction<span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span>
|
||||
<span class="token operator"><</span>MyComponent v<span class="token operator">-</span>bind<span class="token operator">:</span>event<span class="token operator">-</span>data<span class="token operator">=</span><span class="token string">"myEventObservable$"</span> v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"!!myEventObservable$"</span> <span class="token operator">/</span><span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span>
|
||||
|
||||
<span class="token operator"><</span>script<span class="token operator">></span>
|
||||
<span class="token keyword">import</span> MyComponent <span class="token keyword">from</span> <span class="token string">'./components/MyComponent.vue'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> Subspace <span class="token keyword">from</span> <span class="token string">"@status-im/subspace"</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
|
||||
name<span class="token operator">:</span> <span class="token string">'app'</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">data</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||||
myEventObservable$<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
|
||||
MyContractInstance<span class="token operator">:</span> <span class="token keyword">null</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
<span class="token function-variable function">created</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>MyContractInstance <span class="token operator">=</span> <span class="token operator">...</span><span class="token punctuation">;</span> <span class="token comment">// TODO: obtain a web3.eth.contract instance</span>
|
||||
|
||||
<span class="token keyword">const</span> subspace <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Subspace</span><span class="token punctuation">(</span><span class="token string">"wss://localhost:8545"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Use a valid websocket provider (geth, parity, infura...)</span>
|
||||
<span class="token keyword">await</span> subspace<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>myEventObservable$ <span class="token operator">=</span> subspace<span class="token punctuation">.</span><span class="token function">trackEvent</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>MyContractInstance<span class="token punctuation">,</span> <span class="token string">"MyEvent"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>filter<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> fromBlock<span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">createTrx</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
|
||||
<span class="token keyword">this</span><span class="token punctuation">.</span>MyContractInstance<span class="token punctuation">.</span>methods
|
||||
<span class="token punctuation">.</span><span class="token function">myFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token keyword">from</span><span class="token operator">:</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 punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
components<span class="token operator">:</span> <span class="token punctuation">{</span>
|
||||
MyComponent
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token operator"><</span><span class="token operator">/</span>script<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><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br></div></div><h4 id="further-read"><a href="#further-read" class="header-anchor">#</a> Further read</h4> <ul><li><a href="https://www.npmjs.com/package/vue-rx" target="_blank" rel="noopener noreferrer">vue-rx<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></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<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.dee337e1.js" defer></script><script src="/assets/js/2.c401969f.js" defer></script><script src="/assets/js/18.0936c664.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue