79 lines
30 KiB
HTML
79 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>SUBSPACE</title>
|
|
<meta name="description" content="Reactive ÐApp Development">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/logo-small.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/logo-small.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/logo-small.png">
|
|
<link rel="shortcut icon" href="/assets/img/logo-small.png">
|
|
<meta name="theme-color" content="#ffffff">
|
|
|
|
<link rel="preload" href="/assets/css/0.styles.9a3d86bc.css" as="style"><link rel="preload" href="/assets/js/app.272ef0e5.js" as="script"><link rel="preload" href="/assets/js/2.ae31a69c.js" as="script"><link rel="preload" href="/assets/js/14.195a3661.js" as="script"><link rel="preload" href="/assets/js/4.409ebe9b.js" as="script"><link rel="prefetch" href="/assets/js/10.3b1995f4.js"><link rel="prefetch" href="/assets/js/11.2a9f96fe.js"><link rel="prefetch" href="/assets/js/12.8f2e1280.js"><link rel="prefetch" href="/assets/js/13.c9d288f4.js"><link rel="prefetch" href="/assets/js/15.50f3de3e.js"><link rel="prefetch" href="/assets/js/16.b2dc4bae.js"><link rel="prefetch" href="/assets/js/17.6e4d419c.js"><link rel="prefetch" href="/assets/js/18.7017f018.js"><link rel="prefetch" href="/assets/js/19.32de2763.js"><link rel="prefetch" href="/assets/js/3.13986f99.js"><link rel="prefetch" href="/assets/js/5.3095c620.js"><link rel="prefetch" href="/assets/js/6.3def5758.js"><link rel="prefetch" href="/assets/js/7.b87cb3e3.js"><link rel="prefetch" href="/assets/js/8.37de77ca.js"><link rel="prefetch" href="/assets/js/9.a48ad32f.js">
|
|
<link rel="stylesheet" href="/assets/css/0.styles.9a3d86bc.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-exact-active router-link-active"><img src="/assets/img/logo-small.png" alt="SUBSPACE" class="logo"> <span class="site-name can-hide">SUBSPACE</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Github
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/getting-started/" class="nav-link">Getting Started</a></div><div class="nav-item"><a href="/integrations-overview.html" class="nav-link">Integrations</a></div><div class="nav-item"><a href="/api.html" class="nav-link">API</a></div><div class="nav-item"><a href="https://github.com/status-im/subspace" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Github
|
|
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/" class="active sidebar-link">Home</a></li><li><a href="/how-it-works.html" class="sidebar-link">How it works?</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/getting-started.html" class="sidebar-link">Getting Started</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/getting-started.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#importing-the-library" class="sidebar-link">Importing the library</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#connecting-to-a-web3-provider" class="sidebar-link">Connecting to a web3 provider</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#reacting-to-data" class="sidebar-link">Reacting to data</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-state" class="sidebar-link">Tracking state</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-events" class="sidebar-link">Tracking events</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#tracking-balances" class="sidebar-link">Tracking balances</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#subscriptions" class="sidebar-link">Subscriptions</a></li><li class="sidebar-sub-header"><a href="/getting-started.html#cleanup" class="sidebar-link">Cleanup</a></li></ul></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Integrations</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/integrations-overview.html" class="sidebar-link">Overview</a></li><li><a href="/react.html" class="sidebar-link">React</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/vue.html" class="sidebar-link">Vue</a><ul class="sidebar-sub-headers"></ul></li><li><section class="sidebar-group is-sub-group depth-1"><p class="sidebar-heading"><span>Redux</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/redux.html" class="sidebar-link">redux</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/redux-observable.html" class="sidebar-link">redux-observable</a></li></ul></section></li><li><a href="/reactive-graphql.html" class="sidebar-link">reactive-graphql</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/apollo-client.html" class="sidebar-link">apollo-client</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li><li><a href="/tutorial.html" class="sidebar-link">Tutorial</a></li><li><a href="/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/api.html#general" class="sidebar-link">General</a></li><li class="sidebar-sub-header"><a href="/api.html#contract-methods" class="sidebar-link">Contract methods</a></li><li class="sidebar-sub-header"><a href="/api.html#low-level-api-for-data-tracking" class="sidebar-link">Low level API for data tracking</a></li></ul></li></ul> </aside> <main aria-labelledby="main-title" class="home"><header class="hero"><img src="/assets/img/logo.svg" alt="hero"> <h1 id="main-title"> </h1> <p class="description">
|
|
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.
|
|
</div> <div class="code-content" data-v-07c470a6><div class="language-js line-numbers-mode" data-v-07c470a6><pre class="language-js" data-v-07c470a6><code data-v-07c470a6><span class="token keyword" data-v-07c470a6>import</span> <span class="token punctuation" data-v-07c470a6>{</span> $average<span class="token punctuation" data-v-07c470a6>,</span> $latest <span class="token punctuation" data-v-07c470a6>}</span> <span class="token keyword" data-v-07c470a6>from</span> <span class="token string" data-v-07c470a6>"@embarklabs/subspace"</span><span class="token punctuation" data-v-07c470a6>;</span>
|
|
|
|
<span class="token keyword" data-v-07c470a6>const</span> rating$ <span class="token operator" data-v-07c470a6>=</span> Product<span class="token punctuation" data-v-07c470a6>.</span>events<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>Rating</span><span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>track</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>map</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token string" data-v-07c470a6>"rating"</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>;</span>
|
|
|
|
rating$<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>pipe</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token function" data-v-07c470a6>$latest</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token number" data-v-07c470a6>5</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>,</span> <span class="token function" data-v-07c470a6>$average</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>subscribe</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token parameter" data-v-07c470a6>rating</span><span class="token punctuation" data-v-07c470a6>)</span> <span class="token operator" data-v-07c470a6>=></span> <span class="token punctuation" data-v-07c470a6>{</span>
|
|
console<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>log</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token string" data-v-07c470a6>"average rating of the last 5 events is "</span> <span class="token operator" data-v-07c470a6>+</span> rating<span class="token punctuation" data-v-07c470a6>)</span>
|
|
<span class="token punctuation" data-v-07c470a6>}</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>;</span>
|
|
</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></div></div></div></div> <div class="code-container" data-v-07c470a6><div class="code-text" data-v-07c470a6><h3 data-v-07c470a6>Tracking State</h3>
|
|
You can track changes to a contract state variable, by specifying the view function and arguments to call and query the contract.
|
|
</div> <div class="code-content" data-v-07c470a6><div class="language-js line-numbers-mode" data-v-07c470a6><pre class="language-js" data-v-07c470a6><code data-v-07c470a6><span class="token keyword" data-v-07c470a6>const</span> productTitle$ <span class="token operator" data-v-07c470a6>=</span> ProductList<span class="token punctuation" data-v-07c470a6>.</span>methods<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>products</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token number" data-v-07c470a6>0</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>track</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>map</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token string" data-v-07c470a6>"title"</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>;</span>
|
|
productTitle$<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>subscribe</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token parameter" data-v-07c470a6>title</span><span class="token punctuation" data-v-07c470a6>)</span> <span class="token operator" data-v-07c470a6>=></span> console<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>log</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token string" data-v-07c470a6>"product title is "</span> <span class="token operator" data-v-07c470a6>+</span> title<span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>;</span>
|
|
</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></div></div></div></div> <div class="code-container" data-v-07c470a6><div class="code-text" data-v-07c470a6><h3 data-v-07c470a6>Tracking balances</h3>
|
|
You can also track changes in both ETH and ERC20 token balances
|
|
</div> <div class="code-content" data-v-07c470a6><div class="language-js line-numbers-mode" data-v-07c470a6><pre class="language-js" data-v-07c470a6><code data-v-07c470a6><span class="token keyword" data-v-07c470a6>const</span> address <span class="token operator" data-v-07c470a6>=</span> <span class="token string" data-v-07c470a6>"0x0001020304050607080900010203040506070809"</span><span class="token punctuation" data-v-07c470a6>;</span>
|
|
|
|
subspace<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>trackBalance</span><span class="token punctuation" data-v-07c470a6>(</span>address<span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>subscribe</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token parameter" data-v-07c470a6>balance</span><span class="token punctuation" data-v-07c470a6>)</span> <span class="token operator" data-v-07c470a6>=></span> <span class="token punctuation" data-v-07c470a6>{</span>
|
|
console<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>log</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token string" data-v-07c470a6>"ETH balance is "</span><span class="token punctuation" data-v-07c470a6>,</span> balance<span class="token punctuation" data-v-07c470a6>)</span>
|
|
<span class="token punctuation" data-v-07c470a6>}</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>;</span>
|
|
|
|
subspace<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>trackBalance</span><span class="token punctuation" data-v-07c470a6>(</span>address, <span class="token string" data-v-07c470a6>"0x744d70fdbe2ba4cf95131626614a1763df805b9e"</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>subscribe</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token parameter" data-v-07c470a6>balance</span><span class="token punctuation" data-v-07c470a6>)</span> <span class="token operator" data-v-07c470a6>=></span> <span class="token punctuation" data-v-07c470a6>{</span>
|
|
console<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>log</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token string" data-v-07c470a6>"SNT balance is "</span><span class="token punctuation" data-v-07c470a6>,</span> balance<span class="token punctuation" data-v-07c470a6>)</span>
|
|
<span class="token punctuation" data-v-07c470a6>}</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>;</span>
|
|
|
|
</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></div></div></div></div> <div class="code-container" data-v-07c470a6><div class="code-text" data-v-07c470a6><h3 data-v-07c470a6>React Integration</h3>
|
|
Subspace can make any react component compatible with observables so you easily reactive components
|
|
</div> <div class="code-content" data-v-07c470a6><div class="language-js line-numbers-mode" data-v-07c470a6><pre class="language-js" data-v-07c470a6><code data-v-07c470a6><span class="token keyword" data-v-07c470a6>import</span> <span class="token punctuation" data-v-07c470a6>{</span> observe <span class="token punctuation" data-v-07c470a6>}</span> <span class="token keyword" data-v-07c470a6>from</span> <span class="token string" data-v-07c470a6>"@embarklabs/subspace/react"</span><span class="token punctuation" data-v-07c470a6>;</span>
|
|
|
|
<span class="token keyword" data-v-07c470a6>const</span> <span class="token function-variable function" data-v-07c470a6>ProductComponent</span> <span class="token operator" data-v-07c470a6>=</span> <span class="token punctuation" data-v-07c470a6>(</span><span class="token parameter" data-v-07c470a6><span class="token punctuation" data-v-07c470a6>{</span> maxRating<span class="token punctuation" data-v-07c470a6>,</span> minRating<span class="token punctuation" data-v-07c470a6>,</span> averageRating <span class="token punctuation" data-v-07c470a6>}</span></span><span class="token punctuation" data-v-07c470a6>)</span> <span class="token operator" data-v-07c470a6>=></span> <span class="token punctuation" data-v-07c470a6>{</span>
|
|
<span class="token keyword" data-v-07c470a6>return</span> <span class="token operator" data-v-07c470a6><</span>ul<span class="token operator" data-v-07c470a6>></span>
|
|
<span class="token operator" data-v-07c470a6><</span>li<span class="token operator" data-v-07c470a6>></span><span class="token operator" data-v-07c470a6><</span>b<span class="token operator" data-v-07c470a6>></span>minimum rating<span class="token punctuation" data-v-07c470a6>:</span> <span class="token operator" data-v-07c470a6><</span><span class="token operator" data-v-07c470a6>/</span>b<span class="token operator" data-v-07c470a6>></span> <span class="token punctuation" data-v-07c470a6>{</span>minRating<span class="token punctuation" data-v-07c470a6>}</span><span class="token operator" data-v-07c470a6><</span><span class="token operator" data-v-07c470a6>/</span>li<span class="token operator" data-v-07c470a6>></span>
|
|
<span class="token operator" data-v-07c470a6><</span>li<span class="token operator" data-v-07c470a6>></span><span class="token operator" data-v-07c470a6><</span>b<span class="token operator" data-v-07c470a6>></span>maximum rating<span class="token punctuation" data-v-07c470a6>:</span> <span class="token operator" data-v-07c470a6><</span><span class="token operator" data-v-07c470a6>/</span>b<span class="token operator" data-v-07c470a6>></span> <span class="token punctuation" data-v-07c470a6>{</span>maxRating<span class="token punctuation" data-v-07c470a6>}</span><span class="token operator" data-v-07c470a6><</span><span class="token operator" data-v-07c470a6>/</span>li<span class="token operator" data-v-07c470a6>></span>
|
|
<span class="token operator" data-v-07c470a6><</span>li<span class="token operator" data-v-07c470a6>></span><span class="token operator" data-v-07c470a6><</span>b<span class="token operator" data-v-07c470a6>></span>average rating<span class="token punctuation" data-v-07c470a6>:</span> <span class="token operator" data-v-07c470a6><</span><span class="token operator" data-v-07c470a6>/</span>b<span class="token operator" data-v-07c470a6>></span> <span class="token punctuation" data-v-07c470a6>{</span>averageRating<span class="token punctuation" data-v-07c470a6>}</span><span class="token operator" data-v-07c470a6><</span><span class="token operator" data-v-07c470a6>/</span>li<span class="token operator" data-v-07c470a6>></span>
|
|
<span class="token operator" data-v-07c470a6><</span><span class="token operator" data-v-07c470a6>/</span>ul<span class="token operator" data-v-07c470a6>></span><span class="token punctuation" data-v-07c470a6>;</span>
|
|
<span class="token punctuation" data-v-07c470a6>}</span><span class="token punctuation" data-v-07c470a6>;</span>
|
|
|
|
<span class="token keyword" data-v-07c470a6>const</span> ReactiveProductComponent <span class="token operator" data-v-07c470a6>=</span> <span class="token function" data-v-07c470a6>observe</span><span class="token punctuation" data-v-07c470a6>(</span>ProductComponent<span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>;</span>
|
|
<span class="token keyword" data-v-07c470a6>const</span> Product <span class="token operator" data-v-07c470a6>=</span> subspace<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>contract</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token punctuation" data-v-07c470a6>{</span>abi<span class="token punctuation" data-v-07c470a6>,</span> address<span class="token punctuation" data-v-07c470a6>}</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>;</span>
|
|
<span class="token keyword" data-v-07c470a6>const</span> rating$ <span class="token operator" data-v-07c470a6>=</span> Product<span class="token punctuation" data-v-07c470a6>.</span>events<span class="token punctuation" data-v-07c470a6>.</span>Rating<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>track</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>map</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token string" data-v-07c470a6>"rating"</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>pipe</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token function" data-v-07c470a6>map</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token parameter" data-v-07c470a6>x</span> <span class="token operator" data-v-07c470a6>=></span> <span class="token function" data-v-07c470a6>parseInt</span><span class="token punctuation" data-v-07c470a6>(</span>x<span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>;</span>
|
|
|
|
ReactDOM<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>render</span><span class="token punctuation" data-v-07c470a6>(</span>
|
|
<span class="token operator" data-v-07c470a6><</span>ReactiveProductComponent
|
|
maxRating<span class="token operator" data-v-07c470a6>=</span><span class="token punctuation" data-v-07c470a6>{</span>rating$<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>pipe</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token function" data-v-07c470a6>$max</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>}</span>
|
|
minRating<span class="token operator" data-v-07c470a6>=</span><span class="token punctuation" data-v-07c470a6>{</span>rating$<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>pipe</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token function" data-v-07c470a6>$min</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>}</span>
|
|
averageRating<span class="token operator" data-v-07c470a6>=</span><span class="token punctuation" data-v-07c470a6>{</span>rating$<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>pipe</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token function" data-v-07c470a6>$average</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>}</span>
|
|
<span class="token operator" data-v-07c470a6>/</span><span class="token operator" data-v-07c470a6>></span><span class="token punctuation" data-v-07c470a6>,</span>
|
|
document<span class="token punctuation" data-v-07c470a6>.</span><span class="token function" data-v-07c470a6>getElementById</span><span class="token punctuation" data-v-07c470a6>(</span><span class="token string" data-v-07c470a6>'hello-example'</span><span class="token punctuation" data-v-07c470a6>)</span>
|
|
<span class="token punctuation" data-v-07c470a6>)</span><span class="token punctuation" data-v-07c470a6>;</span>
|
|
</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.272ef0e5.js" defer></script><script src="/assets/js/2.ae31a69c.js" defer></script><script src="/assets/js/14.195a3661.js" defer></script><script src="/assets/js/4.409ebe9b.js" defer></script>
|
|
</body>
|
|
</html>
|