b5c4bc0122
* Update dependencies * Update examples with simplified storage * Update dependencies * Revert tsc location override (check) * Update dependencies
66 lines
2.3 KiB
Markdown
66 lines
2.3 KiB
Markdown
# sorting by balance
|
|
|
|
After [the last section](tut-006.md), we are at a point we we have the intentions, actual validators and their balances. For users, we would like this display to be more usable, so here we are aiming on sorting by balance.
|
|
|
|
# component
|
|
|
|
Expanding on our previous component, we now change the previously used `<Balance />` component, into doing [actual `freeBalanceOf` queries](../packages/app-example/src/comp-007.tsx). There are 2 options here - we could also use the `onChange` event on the `Balance` component to return the display value. However here we opt for querying the raw value, transforming it and sorting with it.
|
|
|
|
```js
|
|
class Comp extends React.PureComponent<ApiProps, State> {
|
|
...
|
|
subscribeBalances (accounts: string[]) {
|
|
const { api } = this.props;
|
|
const { balances, subscriptions } = this.state;
|
|
const newBalances = { ...balances };
|
|
|
|
accounts.forEach((account) => {
|
|
if (newBalances[account]) {
|
|
return;
|
|
} else {
|
|
newBalances[account] = ZERO;
|
|
}
|
|
|
|
subscriptions.push(
|
|
api.state
|
|
// Here we pass a parameter to the key generator, so it points to the correct storage entry
|
|
.getStorage(storage.staking.public.freeBalanceOf, account)
|
|
.subscribe((balance: BN) => {
|
|
this.setState(({ balances }: State) => {
|
|
const newBalances = { ...balances };
|
|
|
|
newBalances[account] = balance;
|
|
|
|
return {
|
|
balances: newBalances
|
|
};
|
|
});
|
|
})
|
|
);
|
|
});
|
|
|
|
this.setState({
|
|
balances: newBalances,
|
|
subscriptions
|
|
});
|
|
}
|
|
...
|
|
render () {
|
|
const { balances, intentions, proposals, validators } = this.state;
|
|
const sortedIntentions = intentions.sort((a, b) =>
|
|
(balances[b] || ZERO).cmp(balances[a] || ZERO)
|
|
);
|
|
...
|
|
}
|
|
...
|
|
}
|
|
```
|
|
|
|
# walk through
|
|
|
|
By now the subscription approach is known. Where things do differ however is the passing of a parameter to the key encoder. Since each balance entry is denoted by the actual account, the hashing needs to take the actual account and append it to the prefix location before making a hash that the runtime understands.
|
|
|
|
# actual output
|
|
|
|
|