feat: update site
This commit is contained in:
Richard Ramos
parent
39f994d092
commit
dd2471b93b
6
404.html
6
404.html
|
|
@ -11,11 +11,11 @@
|
|||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/7.e27f5416.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/3.9498df45.js"><link rel="prefetch" href="/assets/js/4.08c332fb.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/8.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.eea690de.js" as="script"><link rel="preload" href="/assets/js/7.e27f5416.js" as="script"><link rel="prefetch" href="/assets/js/10.0ba7844a.js"><link rel="prefetch" href="/assets/js/11.e6fa739b.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.72c7694a.js"><link rel="prefetch" href="/assets/js/14.afbc70c1.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.b64d2715.js"><link rel="prefetch" href="/assets/js/17.6d75f10a.js"><link rel="prefetch" href="/assets/js/18.801d9314.js"><link rel="prefetch" href="/assets/js/19.91da0b43.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/3.9498df45.js"><link rel="prefetch" href="/assets/js/4.59e30da8.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/8.34bb8c58.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>How did we get here?</blockquote> <a href="/" class="router-link-active">Take me home.</a></div></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/7.e27f5416.js" defer></script>
|
||||
<div id="app" data-server-rendered="true"><div class="theme-container"><div class="theme-default-content"><h1>404</h1> <blockquote>Looks like we've got some broken links.</blockquote> <a href="/" class="router-link-active">Take me home.</a></div></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.eea690de.js" defer></script><script src="/assets/js/7.e27f5416.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
14
api.html
14
api.html
|
|
@ -11,7 +11,7 @@
|
|||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/8.65c85371.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.08c332fb.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.eea690de.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/8.34bb8c58.js" as="script"><link rel="prefetch" href="/assets/js/10.0ba7844a.js"><link rel="prefetch" href="/assets/js/11.e6fa739b.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.72c7694a.js"><link rel="prefetch" href="/assets/js/14.afbc70c1.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.b64d2715.js"><link rel="prefetch" href="/assets/js/17.6d75f10a.js"><link rel="prefetch" href="/assets/js/18.801d9314.js"><link rel="prefetch" href="/assets/js/19.91da0b43.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.59e30da8.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -27,19 +27,19 @@
|
|||
})(document, window, '//fathom.status.im/tracker.js', 'fathom');
|
||||
fathom('set', 'siteId', 'DNONS');
|
||||
fathom('trackPageview');
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link router-link-exact-active router-link-active">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="active sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="api"><a href="#api" aria-hidden="true" class="header-anchor">#</a> API</h1> <h2 id="general"><a href="#general" aria-hidden="true" class="header-anchor">#</a> General</h2> <h3 id="new-subspace-web3provider-options"><a href="#new-subspace-web3provider-options" aria-hidden="true" class="header-anchor">#</a> <code>new Subspace(web3Provider [, options])</code></h3> <p>Constructor.</p> <p><strong>Parameters</strong></p> <ol><li><code>web3Provider</code> - <code>Object</code>: a valid web3 provider.</li> <li><code>options</code> - <code>Object</code> (optional): Options used to initialize Subspace
|
||||
<ul><li><code>dbFilename</code> - <code>String</code> (optional): Name of the database where the information will be stored (default <code>'subspace.db'</code>)</li> <li><code>callInterval</code> - <code>Number</code> (optional): - Interval of time in milliseconds to poll a contract/address to determine changes in state or balance (default: <code>undefined</code>. Obtains data every block. If using a HttpProvider, the default is: <code>1000</code>)</li> <li><code>disableSubscriptions</code> - <code>Subspace</code> by default will attempt to use websocket subscriptions if the current provider supports them, otherwise it will use polling because it asumes the provider is an <code>HttpProvider</code>. This functionality can be disabled by passing <code>true</code> to this option. (default: <code>false</code>)</li></ul></li></ol> <h3 id="init"><a href="#init" aria-hidden="true" class="header-anchor">#</a> <code>init()</code></h3> <p>Initializes <strong>Subspace</strong></p> <p><strong>Returns</strong> <code>Promise</code> that once it's resolved, will mean that <strong>Subspace</strong> is available to use</p> <h3 id="close"><a href="#close" aria-hidden="true" class="header-anchor">#</a> <code>close()</code></h3> <p>Dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by <strong>Subspace</strong> during its normal execution.</p> <h3 id="contract-instance-abi-address"><a href="#contract-instance-abi-address" aria-hidden="true" class="header-anchor">#</a> <code>contract(instance|{abi,address})</code></h3> <p>Adds a <code>track</code> method to the web3 contract objects. You can obtain this functionality by passing a <code>web3.eth.Contract</code> instance, or the <code>abi</code> and <code>address</code> of your contract</p> <p><strong>Returns</strong> <code>web3.eth.Contract</code> object enhanced with <code>.track()</code> functions for methods and events.</p> <h2 id="contract-methods"><a href="#contract-methods" aria-hidden="true" class="header-anchor">#</a> Contract methods</h2> <h3 id="mycontract-events-myevent-track-options"><a href="#mycontract-events-myevent-track-options" aria-hidden="true" class="header-anchor">#</a> <code>myContract.events.MyEvent.track([options])</code></h3> <p>Track a contract event.</p> <p><strong>Parameters</strong></p> <ol><li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#getting-block-data-gas-prices-and-block-time" class="sidebar-link">Getting block data, gas prices and block time</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="active sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#blocks-gas-price-and-block-time" class="sidebar-link">Blocks, gas price and block time</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="api"><a href="#api" aria-hidden="true" class="header-anchor">#</a> API</h1> <h2 id="general"><a href="#general" aria-hidden="true" class="header-anchor">#</a> General</h2> <h3 id="new-subspace-web3provider-options"><a href="#new-subspace-web3provider-options" aria-hidden="true" class="header-anchor">#</a> <code>new Subspace(web3Provider [, options])</code></h3> <p>Constructor.</p> <p><strong>Parameters</strong></p> <ol><li><code>web3Provider</code> - <code>Object</code>: a valid web3 provider.</li> <li><code>options</code> - <code>Object</code> (optional): Options used to initialize Subspace
|
||||
<ul><li><code>dbFilename</code> - <code>String</code> (optional): Name of the database where the information will be stored (default <code>'subspace.db'</code>)</li> <li><code>callInterval</code> - <code>Number</code> (optional): - Interval of time in milliseconds to poll a contract/address to determine changes in state or balance (default: <code>undefined</code>. Obtains data every block. If using a HttpProvider, the default is: <code>1000</code>)</li> <li><code>refreshLastNBlocks</code> - Ignores last N blocks (from current block), stored in the local db and refresh them via a web3 subscription. Useful for possible reorgs (default: 12),</li> <li><code>disableSubscriptions</code> - Subspace by default will attempt to use websocket subscriptions if the current provider supports them, otherwise it will use polling because it asumes the provider is an HttpProvider. This functionality can be disabled by passing true to this option. (default: undefined)</li></ul></li></ol> <h3 id="init"><a href="#init" aria-hidden="true" class="header-anchor">#</a> <code>init()</code></h3> <p>Initializes <strong>Subspace</strong></p> <p><strong>Returns</strong> <code>Promise</code> that once it's resolved, will mean that <strong>Subspace</strong> is available to use</p> <h3 id="close"><a href="#close" aria-hidden="true" class="header-anchor">#</a> <code>close()</code></h3> <p>Dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by <strong>Subspace</strong> during its normal execution.</p> <h3 id="contract-instance-abi-address"><a href="#contract-instance-abi-address" aria-hidden="true" class="header-anchor">#</a> <code>contract(instance|{abi,address})</code></h3> <p>Adds a <code>track</code> method to the web3 contract objects. You can obtain this functionality by passing a <code>web3.eth.Contract</code> instance, or the <code>abi</code> and <code>address</code> of your contract</p> <p><strong>Returns</strong> <code>web3.eth.Contract</code> object enhanced with <code>.track()</code> functions for methods and events.</p> <h2 id="contract-methods"><a href="#contract-methods" aria-hidden="true" class="header-anchor">#</a> Contract methods</h2> <h3 id="mycontract-events-myevent-track-options"><a href="#mycontract-events-myevent-track-options" aria-hidden="true" class="header-anchor">#</a> <code>myContract.events.MyEvent.track([options])</code></h3> <p>Track a contract event.</p> <p><strong>Parameters</strong></p> <ol><li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters
|
||||
<ul><li><code>filter</code> - <code>Object</code> (optional): Lets you filter events by indexed parameters, e.g. <code>{filter: {myNumber: [12,13]}}</code> means all events where <code>"myNumber"</code> is <code>12</code> or <code>13</code>.</li> <li><code>fromBlock</code> - <code>Number</code> (optional): The block number from which to get events on.</li> <li><code>toBlock</code> - <code>Number</code> (optional): The block number to get events up to (Defaults to <code>"latest"</code>)</li> <li><code>topics</code> - <code>Array</code> (optional): This allows you to manually set the topics for the event filter. If given the filter property and event signature, (<code>topic[0]</code>) will not be set automatically.</li></ul></li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the event <code>returnValues</code>.</p> <h3 id="mycontract-methods-mymethod-param1-track-calloptions"><a href="#mycontract-methods-mymethod-param1-track-calloptions" aria-hidden="true" class="header-anchor">#</a> <code>myContract.methods.myMethod([param1[, ...]]).track([callOptions])</code></h3> <p>Track a constant function / contract state variable on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>callOptions</code> - <code>Object</code> (optional): The options used for calling.
|
||||
<ul><li><code>from</code> - <code>String</code> (optional): The address the call “transaction” should be made from.</li> <li><code>gasPrice</code> - <code>String</code> (optional): The gas price in wei to use for this call “transaction”.</li> <li><code>gas</code> - <code>Number</code> (optional): The maximum gas provided for this call “transaction” (gas limit).</li></ul></li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the function / variable values. Data type will depend on the contract function invoked.</p> <h3 id="mycontract-trackbalance-address-tokenaddress"><a href="#mycontract-trackbalance-address-tokenaddress" aria-hidden="true" class="header-anchor">#</a> <code>myContract.trackBalance(address [, tokenAddress])</code></h3> <p>Track a contract's balance changes for an address on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>address</code> - <code>String</code>: The address to get the balance of.</li> <li><code>tokenAddress</code> - <code>String</code> (optional): If you want to track the balance for an ERC20 contract, here you can specify the token address. Otherwise, Only ETH balances will be returned.</li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream a string containing the address balance.</p> <h2 id="low-level-api-for-data-tracking"><a href="#low-level-api-for-data-tracking" aria-hidden="true" class="header-anchor">#</a> Low level API for data tracking</h2> <p>These are used in case you don't want to decorate your web3 contract objects, or if you want to track the balance for an specific address.</p> <h3 id="trackevent-contractobject-eventname-options"><a href="#trackevent-contractobject-eventname-options" aria-hidden="true" class="header-anchor">#</a> <code>trackEvent(contractObject, eventName [, options])</code></h3> <p>Track a contract event.</p> <p><strong>Parameters</strong></p> <ol><li><code>contractObject</code> - <code>web3.eth.Contract</code>: An already initialized contract object pointing to an address and containing a valid ABI.</li> <li><code>eventName</code> - <code>String</code>: The name of the event to subscribe.</li> <li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters
|
||||
<ul><li><code>from</code> - <code>String</code> (optional): The address the call “transaction” should be made from.</li> <li><code>gasPrice</code> - <code>String</code> (optional): The gas price in wei to use for this call “transaction”.</li> <li><code>gas</code> - <code>Number</code> (optional): The maximum gas provided for this call “transaction” (gas limit).</li></ul></li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the function / variable values. Data type will depend on the contract function invoked.</p> <h3 id="mycontract-trackbalance-address-tokenaddress"><a href="#mycontract-trackbalance-address-tokenaddress" aria-hidden="true" class="header-anchor">#</a> <code>myContract.trackBalance(address [, tokenAddress])</code></h3> <p>Track a contract's balance changes for an address on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>address</code> - <code>String</code>: The address to get the balance of.</li> <li><code>tokenAddress</code> - <code>String</code> (optional): If you want to track the balance for an ERC20 contract, here you can specify the token address. Otherwise, Only ETH balances will be returned.</li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream a string containing the address balance.</p> <h2 id="blocks-gas-price-and-block-time"><a href="#blocks-gas-price-and-block-time" aria-hidden="true" class="header-anchor">#</a> Blocks, gas price and block time</h2> <h3 id="trackblock"><a href="#trackblock" aria-hidden="true" class="header-anchor">#</a> <code>trackBlock()</code></h3> <p>Receive the block information for any new block. It's the reactive equivalent to <code>web3.eth.getBlock("latest")</code>.</p> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream a block object for the latest block received</p> <h3 id="trackblocknumber"><a href="#trackblocknumber" aria-hidden="true" class="header-anchor">#</a> <code>trackBlockNumber()</code></h3> <p>Returns the latest block number. It's the reactive equivalent to <code>web3.eth.getBlockNumber</code>.</p> <p><strong>Returns</strong> <code>RxJS Observable</code> with the latest block number</p> <h3 id="trackgasprice"><a href="#trackgasprice" aria-hidden="true" class="header-anchor">#</a> <code>trackGasPrice()</code></h3> <p>Returns the current gas price oracle. It's the reactive equivalent to <code>web3.eth.getGasPrice</code>.</p> <p><strong>Returns</strong> <code>RxJS Observable</code> with the average gas price in wei.</p> <h3 id="trackaverageblocktime"><a href="#trackaverageblocktime" aria-hidden="true" class="header-anchor">#</a> <code>trackAverageBlocktime()</code></h3> <p>Average block time of the last 10 blocks.</p> <p><strong>Returns</strong> <code>RxJS Observable</code> with the moving average block time of the last 10 blocks. The time is returned in milliseconds:</p> <h2 id="low-level-api-for-data-tracking"><a href="#low-level-api-for-data-tracking" aria-hidden="true" class="header-anchor">#</a> Low level API for data tracking</h2> <p>These are used in case you don't want to decorate your web3 contract objects, or if you want to track the balance for an specific address.</p> <h3 id="trackevent-contractobject-eventname-options"><a href="#trackevent-contractobject-eventname-options" aria-hidden="true" class="header-anchor">#</a> <code>trackEvent(contractObject, eventName [, options])</code></h3> <p>Track a contract event.</p> <p><strong>Parameters</strong></p> <ol><li><code>contractObject</code> - <code>web3.eth.Contract</code>: An already initialized contract object pointing to an address and containing a valid ABI.</li> <li><code>eventName</code> - <code>String</code>: The name of the event to subscribe.</li> <li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters
|
||||
<ul><li><code>filter</code> - <code>Object</code> (optional): Lets you filter events by indexed parameters, e.g. <code>{filter: {myNumber: [12,13]}}</code> means all events where <code>"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" aria-hidden="true" class="header-anchor">#</a> <code>trackProperty(contractObject, functionName [, functionArgs] [, callOptions])</code></h3> <p>Track a constant function / contract state variable on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>contractObject</code> - <code>web3.eth.Contract</code>: An already initialized contract object pointing to an address and containing a valid ABI.</li> <li><code>functionName</code> - <code>String</code>: Name of the function or variable whose values will be tracked.</li> <li><code>functionArgs</code> - <code>Array</code> (optional): Array of arguments that the tracked function receives</li> <li><code>callOptions</code> - <code>Object</code> (optional): The options used for calling.
|
||||
<ul><li><code>from</code> - <code>String</code> (optional): The address the call “transaction” should be made from.</li> <li><code>gasPrice</code> - <code>String</code> (optional): The gas price in wei to use for this call “transaction”.</li> <li><code>gas</code> - <code>Number</code> (optional): The maximum gas provided for this call “transaction” (gas limit).</li></ul></li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream the function / variable values. Data type will depend on the contract function invoked.</p> <h3 id="trackbalance-address-tokenaddress"><a href="#trackbalance-address-tokenaddress" aria-hidden="true" class="header-anchor">#</a> <code>trackBalance(address [, tokenAddress])</code></h3> <p>Track balance changes for an address on each block mined, or depending on the <code>callInterval</code> option used during <strong>Subspace</strong> initialization.</p> <p><strong>Parameters</strong></p> <ol><li><code>address</code> - <code>String</code>: The address to get the balance of.</li> <li><code>tokenAddress</code> - <code>String</code> (optional): If you want to track the balance for an ERC20 contract, here you can specify the token address. Otherwise, Only ETH balances will be returned.</li></ol> <p><strong>Returns</strong> <code>RxJS Observable</code> which will stream a string containing the address balance.</p> <h3 id="tracklogs-options-abi"><a href="#tracklogs-options-abi" aria-hidden="true" class="header-anchor">#</a> <code>trackLogs(options [, abi])</code></h3> <p>Tracks incoming logs, filtered by the given options.</p> <p><strong>Parameters</strong></p> <ol><li><code>options</code> - <code>Object</code> (optional): web3 filter options object to limit the number of logs
|
||||
<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.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/8.65c85371.js" defer></script>
|
||||
<script src="/assets/js/app.eea690de.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/8.34bb8c58.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/9.e55a9a9a.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.08c332fb.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.65c85371.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.eea690de.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/9.e55a9a9a.js" as="script"><link rel="prefetch" href="/assets/js/10.0ba7844a.js"><link rel="prefetch" href="/assets/js/11.e6fa739b.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.72c7694a.js"><link rel="prefetch" href="/assets/js/14.afbc70c1.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.b64d2715.js"><link rel="prefetch" href="/assets/js/17.6d75f10a.js"><link rel="prefetch" href="/assets/js/18.801d9314.js"><link rel="prefetch" href="/assets/js/19.91da0b43.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.59e30da8.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.34bb8c58.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -27,11 +27,11 @@
|
|||
})(document, window, '//fathom.status.im/tracker.js', 'fathom');
|
||||
fathom('set', 'siteId', 'DNONS');
|
||||
fathom('trackPageview');
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="active sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="apollo-client"><a href="#apollo-client" aria-hidden="true" class="header-anchor">#</a> apollo-client</h1> <p>To use <strong>Subspace</strong> with <code>apollo-client</code>, a composed <code>ApolloLink</code> must be defined using the <code>apollo-link-rxjs</code> and <code>reactive-graphl</code> npm packages. Notice that the <code>addTypename</code> option of <code>InMemoryCache</code> must be set <code>false</code>.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ApolloClient <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"apollo-client"</span><span class="token punctuation">;</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#getting-block-data-gas-prices-and-block-time" class="sidebar-link">Getting block data, gas prices and block time</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="active sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#blocks-gas-price-and-block-time" class="sidebar-link">Blocks, gas price and block time</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="apollo-client"><a href="#apollo-client" aria-hidden="true" class="header-anchor">#</a> apollo-client</h1> <p>To use <strong>Subspace</strong> with <code>apollo-client</code>, a composed <code>ApolloLink</code> must be defined using the <code>apollo-link-rxjs</code> and <code>reactive-graphl</code> npm packages. Notice that the <code>addTypename</code> option of <code>InMemoryCache</code> must be set <code>false</code>.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> ApolloClient <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"apollo-client"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> InMemoryCache <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"apollo-cache-inmemory"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> ApolloLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"apollo-link"</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> rxjs <span class="token keyword">as</span> rxJsLink <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"apollo-link-rxjs"</span><span class="token punctuation">;</span>
|
||||
|
|
@ -95,6 +95,6 @@ fathom('trackPageview');
|
|||
←
|
||||
<a href="/reactive-graphql.html" class="prev">reactive-graphql</a></span> <span class="next"><a href="/tutorial.html">Tutorial</a>→
|
||||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/9.e55a9a9a.js" defer></script>
|
||||
<script src="/assets/js/app.eea690de.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/9.e55a9a9a.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{219:function(t,e,r){"use strict";r.r(e);var o=r(0),s=Object(o.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[r("h1",{attrs:{id:"integrations-with-other-frameworks"}},[r("a",{staticClass:"header-anchor",attrs:{href:"#integrations-with-other-frameworks","aria-hidden":"true"}},[t._v("#")]),t._v(" Integrations with other frameworks")]),t._v(" "),r("p",[r("strong",[t._v("Subspace")]),t._v(" does not force you to change the architecture of your dApps, making it easy to use on existing projects. In this section you can find some examples and tips on how to integrate "),r("strong",[t._v("Subspace")]),t._v(" with various frontend frameworks and libraries")])])}),[],!1,null,null,null);e.default=s.exports}}]);
|
||||
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 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{226:function(e,t,a){"use strict";a.r(t);var r=a(0),s=Object(r.a)({},(function(){var e=this.$createElement,t=this._self._c||e;return t("ContentSlotsDistributor",{attrs:{"slot-key":this.$parent.slotKey}},[t("h1",{attrs:{id:"creating-a-reactive-dhapp-with-react-and-subspace"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#creating-a-reactive-dhapp-with-react-and-subspace","aria-hidden":"true"}},[this._v("#")]),this._v(" Creating a reactive ÐApp with React and Subspace")]),this._v(" "),t("p",[this._v("See example DApp at "),t("a",{attrs:{href:"https://github.com/embark-framework/subspace/tree/master/examples/react-example1",target:"_blank",rel:"noopener noreferrer"}},[this._v("https://github.com/embark-framework/subspace/tree/master/examples/react-example1"),t("OutboundLink")],1)])])}),[],!1,null,null,null);t.default=s.exports}}]);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{205:function(e,t,a){e.exports=a.p+"assets/img/d1.daa5485a.png"},206:function(e,t,a){e.exports=a.p+"assets/img/d2.de512122.png"},207:function(e,t,a){e.exports=a.p+"assets/img/d3.123a2e18.png"},208:function(e,t,a){e.exports=a.p+"assets/img/d4.81f850ef.png"},218:function(e,t,a){"use strict";a.r(t);var s=a(0),r=Object(s.a)({},(function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[s("h1",{attrs:{id:"how-it-works"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#how-it-works","aria-hidden":"true"}},[e._v("#")]),e._v(" How it works?")]),e._v(" "),s("h3",{attrs:{id:"setup"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#setup","aria-hidden":"true"}},[e._v("#")]),e._v(" Setup")]),e._v(" "),s("p",[s("img",{attrs:{src:a(205),alt:"First Usage - Setup"}})]),e._v(" "),s("ol",[s("li",[e._v("A ÐApp requests "),s("code",[e._v("Subspace")]),e._v(" to track an event, property, or balance.")]),e._v(" "),s("li",[s("code",[e._v("Subspace")]),e._v(" creates a observable for that event, and a web3 subscription to retrieve events from the chain")]),e._v(" "),s("li",[e._v("The ÐApp subscribes to the observable to receive events.")])]),e._v(" "),s("h3",{attrs:{id:"receiving-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#receiving-events","aria-hidden":"true"}},[e._v("#")]),e._v(" Receiving events")]),e._v(" "),s("p",[s("img",{attrs:{src:a(206),alt:"First Usage - Receiving events"}}),e._v("\nDepending on the filter parameters used to track the events, once an event is found, it is stored in "),s("code",[e._v("localStorage")]),e._v(" and it is also pushed to the observable which delivers it to the ÐApp subscription.")]),e._v(" "),s("h3",{attrs:{id:"tracking-already-known-events"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#tracking-already-known-events","aria-hidden":"true"}},[e._v("#")]),e._v(" Tracking already known events")]),e._v(" "),s("p",[e._v("After restarting the ÐApp, either by executing it again in case of a console application or refreshing the browser the behavior of "),s("code",[e._v("Subspace")]),e._v(" will change:\n"),s("img",{attrs:{src:a(207),alt:"Second Usage - Setup"}})]),e._v(" "),s("ol",[s("li",[e._v("The Dapp will request "),s("code",[e._v("Subspace")]),e._v(" to track an event it already knows, creating an observable and subscription for that event")]),e._v(" "),s("li",[e._v("It will retrieve events that were previously stored in localStorage and deliver them to the DApp subscription, avoiding having to query the chain for the old events again.")])]),e._v(" "),s("p",[s("img",{attrs:{src:a(208),alt:"Second Usage - Receiving events"}}),e._v("\nThe web3 subscription created previously will start from the last known block instead of beginning from scratch. New events will be delivered normally from this step")])])}),[],!1,null,null,null);t.default=r.exports}}]);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -11,7 +11,7 @@
|
|||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/10.ad0555d0.js" as="script"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.08c332fb.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.eea690de.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/10.0ba7844a.js" as="script"><link rel="prefetch" href="/assets/js/11.e6fa739b.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.72c7694a.js"><link rel="prefetch" href="/assets/js/14.afbc70c1.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.b64d2715.js"><link rel="prefetch" href="/assets/js/17.6d75f10a.js"><link rel="prefetch" href="/assets/js/18.801d9314.js"><link rel="prefetch" href="/assets/js/19.91da0b43.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.59e30da8.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.34bb8c58.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -27,11 +27,11 @@
|
|||
})(document, window, '//fathom.status.im/tracker.js', 'fathom');
|
||||
fathom('set', 'siteId', 'DNONS');
|
||||
fathom('trackPageview');
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
<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#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="getting-started"><a href="#getting-started" aria-hidden="true" class="header-anchor">#</a> Getting Started</h1> <h2 id="installation"><a href="#installation" aria-hidden="true" class="header-anchor">#</a> Installation</h2> <p><strong>Subspace</strong> can be used in browser, node and native script environments. To get started install the package <code>@embarklabs/subspace</code> using <code>npm</code> or <code>yarn</code> by executing this command in your project directory:</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># Using npm</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="active sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#getting-block-data-gas-prices-and-block-time" class="sidebar-link">Getting block data, gas prices and block time</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#blocks-gas-price-and-block-time" class="sidebar-link">Blocks, gas price and block time</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="getting-started"><a href="#getting-started" aria-hidden="true" class="header-anchor">#</a> Getting Started</h1> <h2 id="installation"><a href="#installation" aria-hidden="true" class="header-anchor">#</a> Installation</h2> <p><strong>Subspace</strong> can be used in browser, node and native script environments. To get started install the package <code>@embarklabs/subspace</code> using <code>npm</code> or <code>yarn</code> by executing this command in your project directory:</p> <div class="language-bash line-numbers-mode"><pre class="language-bash"><code><span class="token comment"># Using npm</span>
|
||||
<span class="token function">npm</span> <span class="token function">install</span> --save @embarklabs/subspace
|
||||
|
||||
<span class="token comment"># Using yarn</span>
|
||||
|
|
@ -43,7 +43,7 @@ fathom('trackPageview');
|
|||
<span class="token keyword">const</span> Subspace <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@embarklabs/subspace'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="connecting-to-a-web3-provider"><a href="#connecting-to-a-web3-provider" aria-hidden="true" class="header-anchor">#</a> Connecting to a web3 provider</h2> <p>To interact with the EVM, <strong>Subspace</strong> requires a valid Web3 provider.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> subspace <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Subspace</span><span class="token punctuation">(</span>web3<span class="token punctuation">.</span>currentProvider<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">await</span> subspace<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>In addition to the provider, <code>Subspace</code> also accepts an <code>options</code> object with settings that can change its behavior:</p> <ul><li><code>dbFilename</code> - Name of the database where the information will be stored (default <code>'subspace.db'</code>)</li> <li><code>callInterval</code> - Interval of time in milliseconds to query a contract/address to determine changes in state or balance (default: <code>undefined</code>. Obtains data every block).</li> <li><code>disableSubscriptions</code> - <code>Subspace</code> by default will attempt to use websocket subscriptions if the current provider supports them, otherwise it will use polling because it asumes the provider is an <code>HttpProvider</code>. This functionality can be disabled by passing <code>true</code> to this option. (default: <code>false</code>)tionality can be forced by passing <code>true</code> to this option. (default: <code>undefined</code>)</li></ul> <h2 id="enhancing-your-contract-objects"><a href="#enhancing-your-contract-objects" aria-hidden="true" class="header-anchor">#</a> Enhancing your contract objects</h2> <p>Subspace provides a method to enhance your web3 Contract objects: <code>subspace.contract(instance|{abi,address})</code>. Calling this method will return a new contract object decorated with a <code>.track()</code> method for your contract view functions and events.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> myRxContract <span class="token operator">=</span> subspace<span class="token punctuation">.</span><span class="token function">contract</span><span class="token punctuation">(</span>myContractInstance<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>In addition to the provider, <code>Subspace</code> also accepts an <code>options</code> object with settings that can change its behavior:</p> <ul><li><code>dbFilename</code> - Name of the database where the information will be stored (default <code>'subspace.db'</code>)</li> <li><code>callInterval</code> - Interval of time in milliseconds to query a contract/address to determine changes in state or balance (default: <code>undefined</code>. Obtains data every block).</li> <li><code>refreshLastNBlocks</code> - Ignores last N blocks (from current block), stored in the local db and refresh them via a web3 subscription. Useful for possible reorgs (default: 12),</li> <li><code>disableSubscriptions</code> - Subspace by default will attempt to use websocket subscriptions if the current provider supports them, otherwise it will use polling because it asumes the provider is an HttpProvider. This functionality can be disabled by passing true to this option. (default: undefined)</li></ul> <h2 id="enhancing-your-contract-objects"><a href="#enhancing-your-contract-objects" aria-hidden="true" class="header-anchor">#</a> Enhancing your contract objects</h2> <p>Subspace provides a method to enhance your web3 Contract objects: <code>subspace.contract(instance|{abi,address})</code>. Calling this method will return a new contract object decorated with a <code>.track()</code> method for your contract view functions and events.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> myRxContract <span class="token operator">=</span> subspace<span class="token punctuation">.</span><span class="token function">contract</span><span class="token punctuation">(</span>myContractInstance<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>You can also instantiate a contract directly by passing the contract ABI and its address:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> myRXContract <span class="token operator">=</span> subspace<span class="token punctuation">.</span><span class="token function">contract</span><span class="token punctuation">(</span><span class="token punctuation">{</span>abi<span class="token punctuation">:</span> <span class="token operator">...</span><span class="token punctuation">.</span><span class="token punctuation">,</span> address<span class="token punctuation">:</span> <span class="token string">'0x1234...CDEF'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="reacting-to-data"><a href="#reacting-to-data" aria-hidden="true" class="header-anchor">#</a> Reacting to data</h2> <p>Once it's initialized, you can use <strong>Subspace</strong>'s methods to track the contract state, events and balances. These functions return RxJS Observables which you can subscribe to, and obtain and transform the observed data via operators.</p> <div class="tip custom-block"><p class="custom-block-title">What is an Observable?</p> <p>The <code>Observable</code> type can be used to model push-based data sources such as DOM events, timer intervals, and sockets. In addition, observables are:</p> <ul><li>Compositional: Observables can be composed with higher-order combinators.</li> <li>Lazy: Observables do not start emitting data until an observer has subscribed.</li></ul></div> <h4 id="further-read"><a href="#further-read" aria-hidden="true" class="header-anchor">#</a> Further read</h4> <ul><li><a href="https://rxjs-dev.firebaseapp.com/guide/observable" target="_blank" rel="noopener noreferrer">RxJS Observables<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul> <h2 id="tracking-state"><a href="#tracking-state" aria-hidden="true" class="header-anchor">#</a> Tracking state</h2> <p>You can track changes to a contract state variable, by specifying the view function and arguments to call and query the contract.</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> stateObservable$ <span class="token operator">=</span> Contract<span class="token punctuation">.</span>methods<span class="token punctuation">.</span><span class="token function">functionName</span><span class="token punctuation">(</span>functionArgs<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><div class="tip custom-block"><p class="custom-block-title">Tracking the public variables of a contract</p> <p>State variables implicity create a <code>view</code> function when they're defined as <code>public</code>. The <code>functionName</code> would be the same as the variable name, and <code>functionArgs</code> will have a value when the type is a <code>mapping</code> or <code>array</code> (since these require an index value to query them).</p></div> <p>Example:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> productTitle$ <span class="token operator">=</span> ProductList<span class="token punctuation">.</span>methods<span class="token punctuation">.</span><span class="token function">products</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token string">"title"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
|
@ -79,7 +79,19 @@ subspace<span class="token punctuation">.</span><span class="token function">tra
|
|||
</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="warning custom-block"><p>Balances are returned as a string containing the value in <em>wei</em>.</p></div> <h2 id="subscriptions"><a href="#subscriptions" aria-hidden="true" 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>
|
||||
</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="warning custom-block"><p>Balances are returned as a string containing the value in <em>wei</em>.</p></div> <h2 id="getting-block-data-gas-prices-and-block-time"><a href="#getting-block-data-gas-prices-and-block-time" aria-hidden="true" class="header-anchor">#</a> Getting block data, gas prices and block time</h2> <p>Subspace also provides a way to always receive the latest block object:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>subspace<span class="token punctuation">.</span><span class="token function">trackBlock</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 parameter">block</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 latest block data: "</span><span class="token punctuation">,</span> block<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></div></div><p>If you don't need all the block information, but just the block number, you can use instead:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>subspace<span class="token punctuation">.</span><span class="token function">trackBlockNumber</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 parameter">blockNumber</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 latest block number: "</span><span class="token punctuation">,</span> blockNumber<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></div></div><p>You can also access the average block time. This takes in account only the last 10 blocks:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>subspace<span class="token punctuation">.</span><span class="token function">trackAverageBlocktime</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 parameter">blocktimeMS</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 average block time in milliseconds is: "</span><span class="token punctuation">,</span> blocktimeMS<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></div></div><p>Finally, if you want to obtain the most up to date median gas price:</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>subspace<span class="token punctuation">.</span><span class="token function">trackGasPrice</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 parameter">gasPrice</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">"Gas price in wei"</span><span class="token punctuation">,</span> gasPrice<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></div></div><h2 id="subscriptions"><a href="#subscriptions" aria-hidden="true" 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>
|
||||
|
|
@ -92,6 +104,6 @@ subscription<span class="token punctuation">.</span><span class="token function"
|
|||
←
|
||||
<a href="/how-it-works.html" class="prev">How it works?</a></span> <span class="next"><a href="/integrations-overview.html">Overview</a>→
|
||||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/10.ad0555d0.js" defer></script>
|
||||
<script src="/assets/js/app.eea690de.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/10.0ba7844a.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/4.08c332fb.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.eea690de.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/4.59e30da8.js" as="script"><link rel="prefetch" href="/assets/js/10.0ba7844a.js"><link rel="prefetch" href="/assets/js/11.e6fa739b.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.72c7694a.js"><link rel="prefetch" href="/assets/js/14.afbc70c1.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.b64d2715.js"><link rel="prefetch" href="/assets/js/17.6d75f10a.js"><link rel="prefetch" href="/assets/js/18.801d9314.js"><link rel="prefetch" href="/assets/js/19.91da0b43.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.34bb8c58.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -27,17 +27,17 @@
|
|||
})(document, window, '//fathom.status.im/tracker.js', 'fathom');
|
||||
fathom('set', 'siteId', 'DNONS');
|
||||
fathom('trackPageview');
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
<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#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="how-it-works"><a href="#how-it-works" aria-hidden="true" class="header-anchor">#</a> How it works?</h1> <h3 id="setup"><a href="#setup" aria-hidden="true" class="header-anchor">#</a> Setup</h3> <p><img src="/assets/img/d1.daa5485a.png" alt="First Usage - Setup"></p> <ol><li>A ÐApp requests <code>Subspace</code> to track an event, property, or balance.</li> <li><code>Subspace</code> creates a observable for that event, and a web3 subscription to retrieve events from the chain</li> <li>The ÐApp subscribes to the observable to receive events.</li></ol> <h3 id="receiving-events"><a href="#receiving-events" aria-hidden="true" class="header-anchor">#</a> Receiving events</h3> <p><img src="/assets/img/d2.de512122.png" alt="First Usage - Receiving events">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="active sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#getting-block-data-gas-prices-and-block-time" class="sidebar-link">Getting block data, gas prices and block time</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#blocks-gas-price-and-block-time" class="sidebar-link">Blocks, gas price and block time</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="how-it-works"><a href="#how-it-works" aria-hidden="true" class="header-anchor">#</a> How it works?</h1> <h3 id="setup"><a href="#setup" aria-hidden="true" class="header-anchor">#</a> Setup</h3> <p><img src="/assets/img/d1.daa5485a.png" alt="First Usage - Setup"></p> <ol><li>A ÐApp requests <code>Subspace</code> to track an event, property, or balance.</li> <li><code>Subspace</code> creates a observable for that event, and a web3 subscription to retrieve events from the chain</li> <li>The ÐApp subscribes to the observable to receive events.</li></ol> <h3 id="receiving-events"><a href="#receiving-events" aria-hidden="true" class="header-anchor">#</a> Receiving events</h3> <p><img src="/assets/img/d2.de512122.png" alt="First Usage - Receiving events">
|
||||
Depending on the filter parameters used to track the events, once an event is found, it is stored in <code>localStorage</code> and it is also pushed to the observable which delivers it to the ÐApp subscription.</p> <h3 id="tracking-already-known-events"><a href="#tracking-already-known-events" aria-hidden="true" class="header-anchor">#</a> Tracking already known events</h3> <p>After restarting the ÐApp, either by executing it again in case of a console application or refreshing the browser the behavior of <code>Subspace</code> will change:
|
||||
<img src="/assets/img/d3.123a2e18.png" alt="Second Usage - Setup"></p> <ol><li>The Dapp will request <code>Subspace</code> to track an event it already knows, creating an observable and subscription for that event</li> <li>It will retrieve events that were previously stored in localStorage and deliver them to the DApp subscription, avoiding having to query the chain for the old events again.</li></ol> <p><img src="/assets/img/d4.81f850ef.png" alt="Second Usage - Receiving events">
|
||||
The web3 subscription created previously will start from the last known block instead of beginning from scratch. New events will be delivered normally from this step</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/" class="prev router-link-active">Home</a></span> <span class="next"><a href="/getting-started.html">Getting Started</a>→
|
||||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/4.08c332fb.js" defer></script>
|
||||
<script src="/assets/js/app.eea690de.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/4.59e30da8.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
10
index.html
10
index.html
|
|
@ -11,7 +11,7 @@
|
|||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/15.df26724a.js" as="script"><link rel="preload" href="/assets/js/5.73836d55.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.08c332fb.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.eea690de.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/15.1e59e25f.js" as="script"><link rel="preload" href="/assets/js/5.73836d55.js" as="script"><link rel="prefetch" href="/assets/js/10.0ba7844a.js"><link rel="prefetch" href="/assets/js/11.e6fa739b.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.72c7694a.js"><link rel="prefetch" href="/assets/js/14.afbc70c1.js"><link rel="prefetch" href="/assets/js/16.b64d2715.js"><link rel="prefetch" href="/assets/js/17.6d75f10a.js"><link rel="prefetch" href="/assets/js/18.801d9314.js"><link rel="prefetch" href="/assets/js/19.91da0b43.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.59e30da8.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.34bb8c58.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -27,11 +27,11 @@
|
|||
})(document, window, '//fathom.status.im/tracker.js', 'fathom');
|
||||
fathom('set', 'siteId', 'DNONS');
|
||||
fathom('trackPageview');
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
<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#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main aria-labelledby="main-title" class="home"><header class="hero"><img src="/assets/img/logo.svg" alt="hero"> <h1 id="main-title"> </h1> <p class="description">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="active sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#getting-block-data-gas-prices-and-block-time" class="sidebar-link">Getting block data, gas prices and block time</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#blocks-gas-price-and-block-time" class="sidebar-link">Blocks, gas price and block time</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main aria-labelledby="main-title" class="home"><header class="hero"><img src="/assets/img/logo.svg" alt="hero"> <h1 id="main-title"> </h1> <p class="description">
|
||||
Reactive ÐApp Development
|
||||
</p> <p class="action"><a href="/getting-started/" class="nav-link action-button">Get Started</a></p></header> <div class="features"><div class="feature"><h2>Automatic Syncing</h2> <p>Subspace takes care of syncing under the hood, syncing exactly what you need when you need it. It saves the state to a local database ensuring the DApp always syncs from the last known point even after reloading the DApp.</p></div><div class="feature"><h2>Reactive</h2> <p>Subspace embraces reactive programming with RxJS. It provides methods to track and subscribe to events, contract state & balances, and react to changes via observables.</p></div><div class="feature"><h2>Framework Agnostic</h2> <p>Subspace is framework agnostic and integrates well with your favourite frameworks, from React to Angular. It works in the browser and in nodejs.</p></div></div> <div class="theme-default-content custom content__default"><hr> <div id="intro" data-v-07c470a6><div class="code-container" data-v-07c470a6><div class="code-text" data-v-07c470a6><h3 data-v-07c470a6>Event Tracking & Event Sourcing</h3>
|
||||
You can track events and react to their values. With Subspace observables doing event sourcing is easy.
|
||||
|
|
@ -85,6 +85,6 @@ ReactDOM<span class="token punctuation" data-v-07c470a6>.</span><span class="tok
|
|||
</code></pre> <div class="line-numbers-wrapper" data-v-07c470a6><span class="line-number" data-v-07c470a6>1</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>2</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>3</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>4</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>5</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>6</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>7</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>8</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>9</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>10</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>11</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>12</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>13</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>14</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>15</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>16</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>17</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>18</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>19</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>20</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>21</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>22</span><br data-v-07c470a6><span class="line-number" data-v-07c470a6>23</span><br data-v-07c470a6></div></div></div></div></div></div> <div class="footer">
|
||||
MIT Licensed | Subspace is part of the Status Network
|
||||
</div></main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/15.df26724a.js" defer></script><script src="/assets/js/5.73836d55.js" defer></script>
|
||||
<script src="/assets/js/app.eea690de.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/15.1e59e25f.js" defer></script><script src="/assets/js/5.73836d55.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/11.2ab88290.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.08c332fb.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.eea690de.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/11.e6fa739b.js" as="script"><link rel="prefetch" href="/assets/js/10.0ba7844a.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.72c7694a.js"><link rel="prefetch" href="/assets/js/14.afbc70c1.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.b64d2715.js"><link rel="prefetch" href="/assets/js/17.6d75f10a.js"><link rel="prefetch" href="/assets/js/18.801d9314.js"><link rel="prefetch" href="/assets/js/19.91da0b43.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.59e30da8.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.34bb8c58.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -27,14 +27,14 @@
|
|||
})(document, window, '//fathom.status.im/tracker.js', 'fathom');
|
||||
fathom('set', 'siteId', 'DNONS');
|
||||
fathom('trackPageview');
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
<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#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="active sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="integrations-with-other-frameworks"><a href="#integrations-with-other-frameworks" aria-hidden="true" class="header-anchor">#</a> Integrations with other frameworks</h1> <p><strong>Subspace</strong> does not force you to change the architecture of your dApps, making it easy to use on existing projects. In this section you can find some examples and tips on how to integrate <strong>Subspace</strong> with various frontend frameworks and libraries</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#getting-block-data-gas-prices-and-block-time" class="sidebar-link">Getting block data, gas prices and block time</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="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#blocks-gas-price-and-block-time" class="sidebar-link">Blocks, gas price and block time</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="integrations-with-other-frameworks"><a href="#integrations-with-other-frameworks" aria-hidden="true" class="header-anchor">#</a> Integrations with other frameworks</h1> <p><strong>Subspace</strong> does not force you to change the architecture of your dApps, making it easy to use on existing projects. In this section you can find some examples and tips on how to integrate <strong>Subspace</strong> with various frontend frameworks and libraries</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
||||
←
|
||||
<a href="/getting-started.html" class="prev">Getting Started</a></span> <span class="next"><a href="/react.html">React</a>→
|
||||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/11.2ab88290.js" defer></script>
|
||||
<script src="/assets/js/app.eea690de.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/11.e6fa739b.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/12.44cb4d70.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.08c332fb.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.eea690de.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/12.44cb4d70.js" as="script"><link rel="prefetch" href="/assets/js/10.0ba7844a.js"><link rel="prefetch" href="/assets/js/11.e6fa739b.js"><link rel="prefetch" href="/assets/js/13.72c7694a.js"><link rel="prefetch" href="/assets/js/14.afbc70c1.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.b64d2715.js"><link rel="prefetch" href="/assets/js/17.6d75f10a.js"><link rel="prefetch" href="/assets/js/18.801d9314.js"><link rel="prefetch" href="/assets/js/19.91da0b43.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.59e30da8.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.34bb8c58.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -27,11 +27,11 @@
|
|||
})(document, window, '//fathom.status.im/tracker.js', 'fathom');
|
||||
fathom('set', 'siteId', 'DNONS');
|
||||
fathom('trackPageview');
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/12.44cb4d70.js" defer></script>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#getting-block-data-gas-prices-and-block-time" class="sidebar-link">Getting block data, gas prices and block time</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#blocks-gas-price-and-block-time" class="sidebar-link">Blocks, gas price and block time</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.eea690de.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/12.44cb4d70.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
12
react.html
12
react.html
|
|
@ -11,7 +11,7 @@
|
|||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/13.8d36d8c0.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/14.16c0ba27.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.08c332fb.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.eea690de.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/13.72c7694a.js" as="script"><link rel="prefetch" href="/assets/js/10.0ba7844a.js"><link rel="prefetch" href="/assets/js/11.e6fa739b.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/14.afbc70c1.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.b64d2715.js"><link rel="prefetch" href="/assets/js/17.6d75f10a.js"><link rel="prefetch" href="/assets/js/18.801d9314.js"><link rel="prefetch" href="/assets/js/19.91da0b43.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.59e30da8.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.34bb8c58.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -27,11 +27,11 @@
|
|||
})(document, window, '//fathom.status.im/tracker.js', 'fathom');
|
||||
fathom('set', 'siteId', 'DNONS');
|
||||
fathom('trackPageview');
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="active sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="react"><a href="#react" aria-hidden="true" class="header-anchor">#</a> React</h1> <p>We provide a higher-order component to connect to enhance presentational components to react to any observable (not limited to those generated by <strong>Subspace</strong>).</p> <h3 id="usage"><a href="#usage" aria-hidden="true" class="header-anchor">#</a> Usage</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> observe <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@embarklabs/subspace/react'</span><span class="token punctuation">;</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#getting-block-data-gas-prices-and-block-time" class="sidebar-link">Getting block data, gas prices and block time</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="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#blocks-gas-price-and-block-time" class="sidebar-link">Blocks, gas price and block time</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="react"><a href="#react" aria-hidden="true" class="header-anchor">#</a> React</h1> <p>We provide a higher-order component to connect to enhance presentational components to react to any observable (not limited to those generated by <strong>Subspace</strong>).</p> <h3 id="usage"><a href="#usage" aria-hidden="true" class="header-anchor">#</a> Usage</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> observe <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@embarklabs/subspace/react'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> ObserverComponent <span class="token operator">=</span> <span class="token function">observe</span><span class="token punctuation">(</span>WrappedComponent<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>This enhanced component will subscribe to any observable property it receives when the component is mounted and automatically unsubscribe when the component is unmounted.</p> <h3 id="example"><a href="#example" aria-hidden="true" class="header-anchor">#</a> Example</h3> <div class="tip custom-block"><p>This example is available in <a href="https://github.com/embark-framework/subspace/tree/master/examples/react-example1" target="_blank" rel="noopener noreferrer">Github<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p></div> <h4 id="mycomponentobserver-js"><a href="#mycomponentobserver-js" aria-hidden="true" class="header-anchor">#</a> MyComponentObserver.js</h4> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||||
|
|
@ -77,7 +77,7 @@ fathom('trackPageview');
|
|||
<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="warning custom-block"><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.status.im/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/status-im/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" aria-hidden="true" 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>
|
||||
</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="warning custom-block"><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.status.im/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" aria-hidden="true" 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>
|
||||
|
||||
|
|
@ -109,6 +109,6 @@ ReactDOM<span class="token punctuation">.</span><span class="token function">ren
|
|||
←
|
||||
<a href="/integrations-overview.html" class="prev">Overview</a></span> <span class="next"><a href="/vue.html">Vue</a>→
|
||||
</span></p></div> </main></div><div class="global-ui"></div></div>
|
||||
<script src="/assets/js/app.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/13.8d36d8c0.js" defer></script>
|
||||
<script src="/assets/js/app.eea690de.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/13.72c7694a.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.0eb61ebf.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/14.16c0ba27.js" as="script"><link rel="prefetch" href="/assets/js/10.ad0555d0.js"><link rel="prefetch" href="/assets/js/11.2ab88290.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.8d36d8c0.js"><link rel="prefetch" href="/assets/js/15.df26724a.js"><link rel="prefetch" href="/assets/js/16.c6d7927e.js"><link rel="prefetch" href="/assets/js/17.94e619f7.js"><link rel="prefetch" href="/assets/js/18.71f9ba08.js"><link rel="prefetch" href="/assets/js/19.8c50e175.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.08c332fb.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.65c85371.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="preload" href="/assets/css/0.styles.514b72f5.css" as="style"><link rel="preload" href="/assets/js/app.eea690de.js" as="script"><link rel="preload" href="/assets/js/3.9498df45.js" as="script"><link rel="preload" href="/assets/js/14.afbc70c1.js" as="script"><link rel="prefetch" href="/assets/js/10.0ba7844a.js"><link rel="prefetch" href="/assets/js/11.e6fa739b.js"><link rel="prefetch" href="/assets/js/12.44cb4d70.js"><link rel="prefetch" href="/assets/js/13.72c7694a.js"><link rel="prefetch" href="/assets/js/15.1e59e25f.js"><link rel="prefetch" href="/assets/js/16.b64d2715.js"><link rel="prefetch" href="/assets/js/17.6d75f10a.js"><link rel="prefetch" href="/assets/js/18.801d9314.js"><link rel="prefetch" href="/assets/js/19.91da0b43.js"><link rel="prefetch" href="/assets/js/2.ced3bc39.js"><link rel="prefetch" href="/assets/js/20.4691289d.js"><link rel="prefetch" href="/assets/js/4.59e30da8.js"><link rel="prefetch" href="/assets/js/5.73836d55.js"><link rel="prefetch" href="/assets/js/6.5f41d563.js"><link rel="prefetch" href="/assets/js/7.e27f5416.js"><link rel="prefetch" href="/assets/js/8.34bb8c58.js"><link rel="prefetch" href="/assets/js/9.e55a9a9a.js">
|
||||
<link rel="stylesheet" href="/assets/css/0.styles.514b72f5.css">
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -27,11 +27,11 @@
|
|||
})(document, window, '//fathom.status.im/tracker.js', 'fathom');
|
||||
fathom('set', 'siteId', 'DNONS');
|
||||
fathom('trackPageview');
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
</script> <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/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/embarklabs/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
||||
Github
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="active sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="reactive-graphql"><a href="#reactive-graphql" aria-hidden="true" class="header-anchor">#</a> reactive-graphql</h1> <p>Using <code>reactive-graphql</code> you can execute GraphQL queries against <strong>Subspace</strong> observables after you create your own type definitions and resolvers.</p> <h3 id="example"><a href="#example" aria-hidden="true" class="header-anchor">#</a> Example</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> Subspace <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@embarklabs/subspace'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#enhancing-your-contract-objects" class="sidebar-link">Enhancing your contract objects</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#getting-block-data-gas-prices-and-block-time" class="sidebar-link">Getting block data, gas prices and block time</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="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#blocks-gas-price-and-block-time" class="sidebar-link">Blocks, gas price and block time</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="reactive-graphql"><a href="#reactive-graphql" aria-hidden="true" class="header-anchor">#</a> reactive-graphql</h1> <p>Using <code>reactive-graphql</code> you can execute GraphQL queries against <strong>Subspace</strong> observables after you create your own type definitions and resolvers.</p> <h3 id="example"><a href="#example" aria-hidden="true" class="header-anchor">#</a> Example</h3> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> Subspace <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@embarklabs/subspace'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> MyContract <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./MyContract'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span> pluck <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'rxjs/operators'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">const</span> <span class="token punctuation">{</span> makeExecutableSchema <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"graphql-tools"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
|
@ -81,10 +81,10 @@ fathom('trackPageview');
|
|||
<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="tip custom-block"><p>This example is available in <a href="https://github.com/status-im/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">
|
||||
</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="tip custom-block"><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.0eb61ebf.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/14.16c0ba27.js" defer></script>
|
||||
<script src="/assets/js/app.eea690de.js" defer></script><script src="/assets/js/3.9498df45.js" defer></script><script src="/assets/js/14.afbc70c1.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
12
redux.html
12
redux.html
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue