3fb85094a6
* Add tutorial step 001 * Update LICENSE header * Query storage via HOC * Tut 003, read proposals * Tut 004 replacing HOC * Pull Intentions & Proposals together * Add final image * Cleanup unused methods * Source links * Remove unused var
86 lines
3.0 KiB
Markdown
86 lines
3.0 KiB
Markdown
# storage via HOC
|
|
|
|
In the [previous section](tut-001.md) we setup a basic application framework in [app-example](../packages/app-example). Here we will continute adding some useful queries using bare-bones UI components.
|
|
|
|
In substrate chains, the storage (state) is exposed via API, allowing any app to perform queries against the current (and previous) states. Here we will use some built-in components to perform a query over the intentions, displaying the results.
|
|
|
|
# creating a component
|
|
|
|
Here we are creating a component that will attach to a specific storage entry, and display any changes as they happen on-chain. For this example, we are interested in the `intentions` storage area, i.e. those accounts that wish to participate in staking.
|
|
|
|
Initially we will just create it, and then walk through what actually happens. In [comp-002.tsx](../packages/app-example/src/comp-002.tsx) we have -
|
|
|
|
```js
|
|
import React from 'react';
|
|
|
|
import storage from '@polkadot/storage';
|
|
import withStorageDiv from '@polkadot/ui-react-rx/with/storageDiv';
|
|
import encodeAddress from '@polkadot/util-keyring/address/encode';
|
|
|
|
const method = storage.staking.public.intentions;
|
|
|
|
const Comp: React.ComponentType<any> = withStorageDiv(method)(
|
|
(value: Uint8Array[]): string => {
|
|
if (!value || !value.length) {
|
|
return 'No intentions found';
|
|
}
|
|
|
|
return value.map(encodeAddress).join(', ');
|
|
}
|
|
);
|
|
|
|
export default Comp;
|
|
```
|
|
|
|
Additionally, we change our entry-point to import this component.
|
|
|
|
```js
|
|
import React from 'react';
|
|
|
|
import Comp from './comp-002';
|
|
|
|
export default class App extends React.PureComponent<any> {
|
|
render () {
|
|
return (
|
|
<Comp />
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
Now going to the app via [localhost:3000/#/example](http://localhost:3000/#/example) renders a list of accounts.
|
|
|
|
# walk-through
|
|
|
|
So what have we done. First off, we import all available storage entries and select the method we are interested in, i.e.
|
|
|
|
```js
|
|
import storage from '@polkadot/storage';
|
|
|
|
const method = storage.staking.public.intentions;
|
|
```
|
|
|
|
Storage entries can be explored via the storage app and will always be (in code) `storage.<section>.public.<method>`. These are all defined in [@polkadot/storage](https://github.com/polkadot-js/common/tree/master/packages/type-storage/src)
|
|
|
|
Next up we use an HOC helper `withStorageDiv` which basically takes a storage method and with the specified renderer wraps it in a Div.
|
|
|
|
```js
|
|
import withStorageDiv from '@polkadot/ui-react-rx/with/storageDiv';
|
|
|
|
const Comp: React.ComponentType<any> = withStorageDiv(method)(
|
|
(value: Uint8Array[]): string => {
|
|
...
|
|
}
|
|
);
|
|
```
|
|
|
|
Here the storage query will return an `Uint8Array[]`, or rather an array of Accounts as used internally. These Accounts however are a list of the actual publicKeys, so for display we convert them with a formatter,
|
|
|
|
```js
|
|
return value.map(encodeAddress).join(', ');
|
|
```
|
|
|
|
# next steps
|
|
|
|
At this point we have, with minimal effort, used some HOC helpers to display information from a storage area. [Next up](tut-003.md) we will actually pull this together and do the same query directly via the API.
|