diff --git a/.vuepress/config.js b/.vuepress/config.js index 7663520..90cf6b5 100644 --- a/.vuepress/config.js +++ b/.vuepress/config.js @@ -1,5 +1,5 @@ module.exports = { - title: 'Phoenix', + title: 'Subspace', description: 'Reactive ÐApp Development', base: '/phoenix-docs/', markdown: { diff --git a/api.md b/api.md index d0827c7..602687e 100644 --- a/api.md +++ b/api.md @@ -2,23 +2,23 @@ ## General -### `new Phoenix(web3Provider [, options])` -Phoenix constructor. +### `new Subspace(web3Provider [, options])` +Constructor. **Parameters** 1. `web3Provider` - `Object`: a valid web3 websockets provider. -2. `options` - `Object` (optional): Options used to initialize Phoenix - - `dbFilename` - `String` (optional): Name of the database where the information will be stored (default `'phoenix.db'`) +2. `options` - `Object` (optional): Options used to initialize Subspace + - `dbFilename` - `String` (optional): Name of the database where the information will be stored (default `'subspace.db'`) - `callInterval` - `Number` (optional): - Interval of time in milliseconds to query a contract/address to determine changes in state or balance (default: `undefined`. Obtains data every block). ### `init()` -Initializes Phoenix +Initializes **Subspace** **Returns** -`Promise` that once it's resolved, will mean that Phoenix is available to use +`Promise` that once it's resolved, will mean that **Subspace** is available to use ### `close()` -Dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by Phoenix during its normal execution. +Dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by **Subspace** during its normal execution. ## Data tracking methods @@ -38,7 +38,7 @@ Track a contract event. `RxJS Observable` which will stream the event `returnValues`. ### `trackProperty(contractObject, functionName [, functionArgs] [, callOptions])` -Track a constant function / contract state variable on each block mined, or depending on the `callInterval` option used during Phoenix initialization. +Track a constant function / contract state variable on each block mined, or depending on the `callInterval` option used during **Subspace** initialization. **Parameters** 1. `contractObject` - `web3.eth.Contract`: An already initialized contract object pointing to an address and containing a valid ABI. @@ -53,7 +53,7 @@ Track a constant function / contract state variable on each block mined, or depe `RxJS Observable` which will stream the function / variable values. Data type will depend on the contract function invoked. ### `trackBalance(address [, tokenAddress])` -Track balance changes for an address on each block mined, or depending on the `callInterval` option used during Phoenix initialization. +Track balance changes for an address on each block mined, or depending on the `callInterval` option used during **Subspace** initialization. **Parameters** 1. `address` - `String`: The address to get the balance of. diff --git a/apollo-client.md b/apollo-client.md index 5b67879..33beb7a 100644 --- a/apollo-client.md +++ b/apollo-client.md @@ -1,5 +1,5 @@ # apollo-client -To use Phoenix with `apollo-client`, a composed `ApolloLink` must be defined using the `apollo-link-rxjs` and `reactive-graphl` npm packages. Notice that the `addTypename` option of `InMemoryCache` must be set `false`. +To use **Subspace** with `apollo-client`, a composed `ApolloLink` must be defined using the `apollo-link-rxjs` and `reactive-graphl` npm packages. Notice that the `addTypename` option of `InMemoryCache` must be set `false`. ```js import { ApolloClient } from "apollo-client"; @@ -31,8 +31,8 @@ import { graphql } from "reactive-graphql"; // ... -// Initialize Phoenix -const eventSyncer = new Phoenix(web3.currentProvider); // Use a valid websocket provider (geth, parity, infura...) +// Initialize Subspace +const eventSyncer = new Subspace(web3.currentProvider); // Use a valid websocket provider (geth, parity, infura...) await eventSyncer.init(); const MyContractInstance = ...; // TODO: obtain a web3.eth.contract instance diff --git a/d1.png b/d1.png new file mode 100644 index 0000000..310d443 Binary files /dev/null and b/d1.png differ diff --git a/d2.png b/d2.png new file mode 100644 index 0000000..e4f2bfd Binary files /dev/null and b/d2.png differ diff --git a/d3.png b/d3.png new file mode 100644 index 0000000..6ed0330 Binary files /dev/null and b/d3.png differ diff --git a/d4.png b/d4.png new file mode 100644 index 0000000..ffe129b Binary files /dev/null and b/d4.png differ diff --git a/getting-started.md b/getting-started.md index 74728dd..2e3fefd 100644 --- a/getting-started.md +++ b/getting-started.md @@ -1,7 +1,7 @@ # Getting Started ## Installation -Phoenix can be used in browser, node and native script environments. To get started install Phoenix using `npm` or `yarn` by executing this command in your project directory: +**Subspace** can be used in browser, node and native script environments. To get started install the package `phoenix` using `npm` or `yarn` by executing this command in your project directory: ```bash # Using npm npm install --save phoenix @@ -22,7 +22,7 @@ const Phoenix = require('phoenix'); ## Connecting to a web3 provider -To interact with the EVM, Phoenix requires a valid websockets Web3 provider. +To interact with the EVM, **Subspace** requires a valid websockets Web3 provider. ```js const eventSyncer = new Phoenix(web3.currentProvider); @@ -31,13 +31,13 @@ eventSyncer.init().then(() => { }); ``` -In addition to the provider, `Phoenix` also accepts an `options` object with settings that can change its behavior: -- `dbFilename` - Name of the database where the information will be stored (default `'phoenix.db'`) +In addition to the provider, `Subspace` also accepts an `options` object with settings that can change its behavior: +- `dbFilename` - Name of the database where the information will be stored (default `'subspace.db'`) - `callInterval` - Interval of time in milliseconds to query a contract/address to determine changes in state or balance (default: `undefined`. Obtains data every block). ## Reacting to data -Once it's initialized, you can use Phoenix'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. +Once it's initialized, you can use **Subspace**'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. ::: tip What is an Observable? The `Observable` type can be used to model push-based data sources such as DOM events, timer intervals, and sockets. In addition, observables are: @@ -124,7 +124,7 @@ subscription.unsubscribe(); ## Cleanup -If Phoenix is not needed anymore, you need can invoke `close()` to dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by Phoenix during its normal execution, thus avoiding any potential memory leak. +If **Subspace** is not needed anymore, you need can invoke `close()` to dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by **Subspace** during its normal execution, thus avoiding any potential memory leak. ``` eventSyncer.close(); diff --git a/how-it-works.md b/how-it-works.md index f6833c3..adcdbe9 100644 --- a/how-it-works.md +++ b/how-it-works.md @@ -1 +1,20 @@ -# How it works? \ No newline at end of file +# How it works? + +### Setup +![First Usage - Setup](./d1.png) +1. A ÐApp requests `Subspace` to track an event, property, or balance. +2. `Subspace` creates a observable for that event, and a web3 subscription to retrieve events from the chain +3. The ÐApp subscribes to the observable to receive events. + +### Receiving events +![First Usage - Receiving events](./d2.png) +Depending on the filter parameters used to track the events, once an event is found, it is stored in `localStorage` and it is also pushed to the observable which delivers it to the ÐApp subscription. + +### Usage after the first setup and Tracking already known events and +After restarting the ÐApp, either by executing it again in case of a console application or refreshing the browser the behavior of `Subspace` will change: +![Second Usage - Setup](./d3.png) +1. The Dapp will request `Subspace` to track an event it already knows, creating an observable and subscription for that event +2. 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. + +![Second Usage - Receiving events](./d4.png) +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 diff --git a/integrations-overview.md b/integrations-overview.md index ddf86c0..1d99a87 100644 --- a/integrations-overview.md +++ b/integrations-overview.md @@ -1,3 +1,3 @@ # Integrations with other frameworks -Phoenix 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 Phoenix with various frontend frameworks and libraries \ No newline at end of file +**Subspace** 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 **Subspace** with various frontend frameworks and libraries \ No newline at end of file diff --git a/package.json b/package.json index 182c3bd..1782638 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "phoenix-docs", "version": "1.0.0", - "description": "Phoenix Website", + "description": "Subspace Website", "main": "index.js", "scripts": { "clean": "rimraf .vuepress/dist", diff --git a/react.md b/react.md index de07663..1c8554f 100644 --- a/react.md +++ b/react.md @@ -1,5 +1,5 @@ # React -We provide a higher-order component to connect to enhance presentational components to react to any observable (not limited to those generated by Phoenix). +We provide a higher-order component to connect to enhance presentational components to react to any observable (not limited to those generated by **Subspace**). ### Usage ```js diff --git a/reactive-graphql.md b/reactive-graphql.md index d3217e0..9fe15fe 100644 --- a/reactive-graphql.md +++ b/reactive-graphql.md @@ -1,6 +1,6 @@ # reactive-graphql -Using `reactive-graphql` you can execute GraphQL queries against Phoenix observables after you create your own type definitions and resolvers. +Using `reactive-graphql` you can execute GraphQL queries against **Subspace** observables after you create your own type definitions and resolvers. ### Example diff --git a/readme.md b/readme.md index c1c3b7e..3fe3f3a 100644 --- a/readme.md +++ b/readme.md @@ -2,11 +2,11 @@ home: true actionText: Get Started actionLink: /getting-started/ -footer: MIT Licensed | Phoenix is part of the Status Network +footer: MIT Licensed | Subspace is part of the Status Network --- ### Overview -Phoenix is a framework agnostic JS library that embraces reactive programming with RxJS Observables, allowing you to track Smart Contract events, changes to state variables and balances and subscribe to these asynchronous data streams via callbacks. +**Subspace** is a framework agnostic JS library that embraces reactive programming with RxJS Observables, allowing you to track Smart Contract events, changes to state variables and balances and subscribe to these asynchronous data streams via callbacks. diff --git a/redux-observable.md b/redux-observable.md index 6d4250a..a18a3e8 100644 --- a/redux-observable.md +++ b/redux-observable.md @@ -1,10 +1,10 @@ # redux-observable -[redux-observables](https://redux-observable.js.org/) can be used to manage side effects via `Epics` (their core primitive to receive and create stream of actions). Phoenix can be configured inside these epics. +[redux-observables](https://redux-observable.js.org/) can be used to manage side effects via `Epics` (their core primitive to receive and create stream of actions). **Subspace** can be configured inside these epics. It's recommended to compose these epics by using [mergeMap](https://www.learnrxjs.io/operators/transformation/mergemap.html) or [switchMap](https://www.learnrxjs.io/operators/transformation/switchmap.html) operators. -Here's an example on how to use phoenix to subscribe to an Event when the action `SOME_ACTION` is dispatched, and then it will trigger `myAction` when the observable emits a value. +Here's an example on how to use **Subspace** to subscribe to an Event when the action `SOME_ACTION` is dispatched, and then it will trigger `myAction` when the observable emits a value. ```js // ... diff --git a/redux.md b/redux.md index 0daa222..4eb2527 100644 --- a/redux.md +++ b/redux.md @@ -1,9 +1,9 @@ # redux -Phoenix can be used with [redux](https://redux.js.org/). Phoenix returns [`Observables`](https://rxjs-dev.firebaseapp.com/guide/observable), which you can subscribe to, and if this subscription has access to the redux store, it will be able to dispatch actions when the observable emits an event. +**Subspace** can be used with [redux](https://redux.js.org/). **Subspace** returns [`Observables`](https://rxjs-dev.firebaseapp.com/guide/observable), which you can subscribe to, and if this subscription has access to the redux store, it will be able to dispatch actions when the observable emits an event. ### Example -Here's a simple example on how to setup Phoenix to work with `redux`: +Here's a simple example on how to setup **Subspace** to work with `redux`: ::: tip This example is available in [Github](https://github.com/status-im/phoenix/tree/master/examples/redux) diff --git a/tutorial.md b/tutorial.md index 821aa52..8d865db 100644 --- a/tutorial.md +++ b/tutorial.md @@ -1,2 +1,2 @@ -# Creating a reactive ÐApp with Embark and Phoenix +# Creating a reactive ÐApp with Embark and Subspace1