Optimize society member queries (#4880)
* Optimize society member queries * wrapping * wrapping 2
This commit is contained in:
Jaco Greeff
GitHub
parent
baa5ee89c9
commit
35fb2a6b1c
@ -12,13 +12,13 @@
|
||||
"packages/*"
|
||||
],
|
||||
"resolutions": {
|
||||
"@polkadot/api": "^4.1.2-6",
|
||||
"@polkadot/api-contract": "^4.1.2-6",
|
||||
"@polkadot/api": "^4.1.2-7",
|
||||
"@polkadot/api-contract": "^4.1.2-7",
|
||||
"@polkadot/hw-ledger": "^6.0.5",
|
||||
"@polkadot/keyring": "^6.0.5",
|
||||
"@polkadot/networks": "^6.0.5",
|
||||
"@polkadot/phishing": "^0.6.31",
|
||||
"@polkadot/types": "^4.1.2-6",
|
||||
"@polkadot/types": "^4.1.2-7",
|
||||
"@polkadot/util": "^6.0.5",
|
||||
"@polkadot/util-crypto": "^6.0.5",
|
||||
"@polkadot/wasm-crypto": "^4.0.2",
|
||||
|
||||
@ -10,6 +10,6 @@
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@polkadot/api-contract": "^4.1.2-6"
|
||||
"@polkadot/api-contract": "^4.1.2-7"
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import type BN from 'bn.js';
|
||||
import type { bool } from '@polkadot/types';
|
||||
import type { BalanceOf, BlockNumber } from '@polkadot/types/interfaces';
|
||||
import type { MapMember } from '../types';
|
||||
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
||||
@ -11,7 +9,7 @@ import styled from 'styled-components';
|
||||
|
||||
import { KUSAMA_GENESIS } from '@polkadot/apps-config';
|
||||
import { AddressSmall, Columar, Expander, Icon, Modal, Tag } from '@polkadot/react-components';
|
||||
import { useApi, useCallMulti, useToggle } from '@polkadot/react-hooks';
|
||||
import { useApi, useToggle } from '@polkadot/react-hooks';
|
||||
import { BlockToTime, FormatBalance } from '@polkadot/react-query';
|
||||
import { formatNumber } from '@polkadot/util';
|
||||
|
||||
@ -21,46 +19,23 @@ import { useTranslation } from '../translate';
|
||||
interface Props {
|
||||
bestNumber?: BN;
|
||||
className?: string;
|
||||
isFounder?: boolean;
|
||||
isHead?: boolean;
|
||||
isSkeptic?: boolean;
|
||||
value: MapMember;
|
||||
}
|
||||
|
||||
interface MultiState {
|
||||
isSuspended: boolean;
|
||||
payouts: [BlockNumber, BalanceOf][];
|
||||
}
|
||||
|
||||
const CANVAS_STYLE = {
|
||||
display: 'block',
|
||||
margin: '0 auto'
|
||||
};
|
||||
|
||||
const optMulti = {
|
||||
defaultValue: {
|
||||
isSuspended: false,
|
||||
payouts: [] as [BlockNumber, BalanceOf][]
|
||||
},
|
||||
transform: ([suspended, payouts]: [bool, [BlockNumber, BalanceOf][]]): MultiState => ({
|
||||
isSuspended: suspended.isTrue,
|
||||
payouts
|
||||
})
|
||||
};
|
||||
|
||||
function Member ({ bestNumber, className = '', value: { isFounder, isHead, isSkeptic, isVoter, member: { accountId, strikes } } }: Props): React.ReactElement<Props> {
|
||||
function Member ({ bestNumber, className = '', value: { isCandidateVoter, isFounder, isHead, isSkeptic, member: { accountId, isDefenderVoter, isSuspended, payouts, strikes } } }: Props): React.ReactElement<Props> {
|
||||
const { t } = useTranslation();
|
||||
const { api } = useApi();
|
||||
const canvasRef = useRef<HTMLCanvasElement | null>(null);
|
||||
const [canInk] = useState(() => api.genesisHash.eq(KUSAMA_GENESIS));
|
||||
const [isInkShowing, toggleInk] = useToggle();
|
||||
const { isSuspended, payouts } = useCallMulti<MultiState>([
|
||||
[api.query.society.suspendedMembers, accountId],
|
||||
[api.query.society.payouts, accountId]
|
||||
], optMulti);
|
||||
|
||||
const renderPayouts = useCallback(
|
||||
() => bestNumber && payouts.map(([bn, value], index) => (
|
||||
() => bestNumber && payouts?.map(([bn, value], index) => (
|
||||
<p key={index}>
|
||||
<Columar>
|
||||
<Columar.Column>
|
||||
@ -94,7 +69,7 @@ function Member ({ bestNumber, className = '', value: { isFounder, isHead, isSke
|
||||
<td className='address'>
|
||||
<AddressSmall value={accountId} />
|
||||
</td>
|
||||
<td>
|
||||
<td className='all'>
|
||||
{isHead && (
|
||||
<Tag
|
||||
color='green'
|
||||
@ -113,7 +88,7 @@ function Member ({ bestNumber, className = '', value: { isFounder, isHead, isSke
|
||||
label={t<string>('skeptic')}
|
||||
/>
|
||||
)}
|
||||
{isVoter && (
|
||||
{(isCandidateVoter || isDefenderVoter) && (
|
||||
<Tag
|
||||
color='blue'
|
||||
label={t<string>('voted')}
|
||||
@ -126,8 +101,8 @@ function Member ({ bestNumber, className = '', value: { isFounder, isHead, isSke
|
||||
/>
|
||||
)}
|
||||
</td>
|
||||
<td className='all number'>
|
||||
{payouts.length !== 0 && (
|
||||
<td className='number together'>
|
||||
{!!payouts?.length && (
|
||||
<Expander
|
||||
renderChildren={renderPayouts}
|
||||
summary={t<string>('Payouts ({{count}})', { replace: { count: formatNumber(payouts.length) } })}
|
||||
@ -170,13 +145,14 @@ function Member ({ bestNumber, className = '', value: { isFounder, isHead, isSke
|
||||
|
||||
export default React.memo(styled(Member)`
|
||||
.ui--Column {
|
||||
min-width: 14ch;
|
||||
|
||||
&:first-child {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
max-width: 13ch;
|
||||
min-width: 13ch;
|
||||
max-width: 14ch;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,10 +29,10 @@ function getMapMembers (members: DeriveSocietyMember[], skeptics: string[], vote
|
||||
return members
|
||||
.filter((member) => !info.hasDefender || !member.accountId.eq(info.defender))
|
||||
.map((member): MapMember => ({
|
||||
isCandidateVoter: voters.includes(member.accountId.toString()),
|
||||
isFounder: info.founder?.eq(member.accountId),
|
||||
isHead: info.head?.eq(member.accountId),
|
||||
isSkeptic: skeptics.includes(member.accountId.toString()),
|
||||
isVoter: voters.includes(member.accountId.toString()),
|
||||
key: member.accountId.toString(),
|
||||
member
|
||||
}))
|
||||
@ -45,9 +45,9 @@ function getMapMembers (members: DeriveSocietyMember[], skeptics: string[], vote
|
||||
? -1
|
||||
: b.isSkeptic
|
||||
? 1
|
||||
: a.isVoter
|
||||
: a.isCandidateVoter || a.member.isDefenderVoter
|
||||
? -1
|
||||
: b.isVoter
|
||||
: b.isCandidateVoter || b.member.isDefenderVoter
|
||||
? 1
|
||||
: a.isFounder
|
||||
? 1
|
||||
|
||||
@ -5,10 +5,10 @@ import type { DeriveSocietyCandidate, DeriveSocietyMember } from '@polkadot/api-
|
||||
import type { SocietyVote } from '@polkadot/types/interfaces';
|
||||
|
||||
export interface MapMember {
|
||||
isCandidateVoter?: boolean;
|
||||
isFounder?: boolean;
|
||||
isHead?: boolean;
|
||||
isSkeptic?: boolean;
|
||||
isVoter?: boolean;
|
||||
key: string;
|
||||
member: DeriveSocietyMember;
|
||||
}
|
||||
|
||||
@ -10,10 +10,10 @@ import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
|
||||
|
||||
function transform (allAccounts: string[], members: DeriveSocietyMember[]): OwnMembers {
|
||||
const allMembers = members
|
||||
.filter((member): boolean => !member.isSuspended)
|
||||
.filter((member) => !member.isSuspended)
|
||||
.map((member): string => member.accountId.toString());
|
||||
const ownMembers = allMembers
|
||||
.filter((address): boolean => allAccounts.includes(address));
|
||||
.filter((address) => allAccounts.includes(address));
|
||||
|
||||
return { allMembers, isMember: ownMembers.length !== 0, ownMembers };
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
"homepage": "https://github.com/polkadot-js/apps/tree/master/packages/react-api#readme",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.13.10",
|
||||
"@polkadot/api": "^4.1.2-6",
|
||||
"@polkadot/api": "^4.1.2-7",
|
||||
"@polkadot/extension-dapp": "^0.37.3-8",
|
||||
"@polkadot/x-rxjs": "^6.0.5",
|
||||
"fflate": "^0.6.7"
|
||||
|
||||
106
yarn.lock
106
yarn.lock
@ -2102,54 +2102,54 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@polkadot/api-contract@npm:^4.1.2-6":
|
||||
version: 4.1.2-6
|
||||
resolution: "@polkadot/api-contract@npm:4.1.2-6"
|
||||
"@polkadot/api-contract@npm:^4.1.2-7":
|
||||
version: 4.1.2-7
|
||||
resolution: "@polkadot/api-contract@npm:4.1.2-7"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@polkadot/api": 4.1.2-6
|
||||
"@polkadot/types": 4.1.2-6
|
||||
"@polkadot/api": 4.1.2-7
|
||||
"@polkadot/types": 4.1.2-7
|
||||
"@polkadot/util": ^6.0.5
|
||||
"@polkadot/x-rxjs": ^6.0.5
|
||||
bn.js: ^4.11.9
|
||||
checksum: b0bf8d27da514ad3ddfc7976c3dfe937a8dca43f2a39261c9694878df2c16189fd79ab06659155686782e6fc51cc6a72351af30a96260de239d855b76ad0f931
|
||||
checksum: 533c08498f3782dfb244bd9d72b28533c92d72960f20720c49a3c7307a4c6fbd54f57000185a10e04001635aab09e704d2577cbdd4fdd0af181a1a6b1b39fd18
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@polkadot/api-derive@npm:4.1.2-6":
|
||||
version: 4.1.2-6
|
||||
resolution: "@polkadot/api-derive@npm:4.1.2-6"
|
||||
"@polkadot/api-derive@npm:4.1.2-7":
|
||||
version: 4.1.2-7
|
||||
resolution: "@polkadot/api-derive@npm:4.1.2-7"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@polkadot/api": 4.1.2-6
|
||||
"@polkadot/rpc-core": 4.1.2-6
|
||||
"@polkadot/types": 4.1.2-6
|
||||
"@polkadot/api": 4.1.2-7
|
||||
"@polkadot/rpc-core": 4.1.2-7
|
||||
"@polkadot/types": 4.1.2-7
|
||||
"@polkadot/util": ^6.0.5
|
||||
"@polkadot/util-crypto": ^6.0.5
|
||||
"@polkadot/x-rxjs": ^6.0.5
|
||||
bn.js: ^4.11.9
|
||||
checksum: 301b2d4825e04deeefd8c7b1bf7cdfa60caae4d8747b5e36d6fe3214ec987335390052113ead5bde0da4dee869f0560b1b3b1c8bc5acce18d44bf78cb3d3b7a3
|
||||
checksum: 948501d9a988c56eaeeb1355d4aafe6f5ff9decdf2d727229c374c6eae1a63c8771f69a3f5b9367c7c0414b1043820c82e3df67de41401285c70d75e1e4430dc
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@polkadot/api@npm:^4.1.2-6":
|
||||
version: 4.1.2-6
|
||||
resolution: "@polkadot/api@npm:4.1.2-6"
|
||||
"@polkadot/api@npm:^4.1.2-7":
|
||||
version: 4.1.2-7
|
||||
resolution: "@polkadot/api@npm:4.1.2-7"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@polkadot/api-derive": 4.1.2-6
|
||||
"@polkadot/api-derive": 4.1.2-7
|
||||
"@polkadot/keyring": ^6.0.5
|
||||
"@polkadot/metadata": 4.1.2-6
|
||||
"@polkadot/rpc-core": 4.1.2-6
|
||||
"@polkadot/rpc-provider": 4.1.2-6
|
||||
"@polkadot/types": 4.1.2-6
|
||||
"@polkadot/types-known": 4.1.2-6
|
||||
"@polkadot/metadata": 4.1.2-7
|
||||
"@polkadot/rpc-core": 4.1.2-7
|
||||
"@polkadot/rpc-provider": 4.1.2-7
|
||||
"@polkadot/types": 4.1.2-7
|
||||
"@polkadot/types-known": 4.1.2-7
|
||||
"@polkadot/util": ^6.0.5
|
||||
"@polkadot/util-crypto": ^6.0.5
|
||||
"@polkadot/x-rxjs": ^6.0.5
|
||||
bn.js: ^4.11.9
|
||||
eventemitter3: ^4.0.7
|
||||
checksum: 2b6bd6511d26e4b6e80da9f61980c211de264f3a09775a2faabe6b97ed719d581f6e79af30f20be848680ecfce532d05434b25ecad053e9399d1a0fc80a1284f
|
||||
checksum: 6c063bd9a84e96f62aee1a9aae0bb912f162b19fa2710e4900a8f0461a51f77bd8c0ca46ec567a4955b59440efc767e46b75e502b590cc0caeca3e558d206213
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@ -2213,7 +2213,7 @@ __metadata:
|
||||
resolution: "@polkadot/app-contracts@workspace:packages/page-contracts"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@polkadot/api-contract": ^4.1.2-6
|
||||
"@polkadot/api-contract": ^4.1.2-7
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
@ -2620,17 +2620,17 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@polkadot/metadata@npm:4.1.2-6":
|
||||
version: 4.1.2-6
|
||||
resolution: "@polkadot/metadata@npm:4.1.2-6"
|
||||
"@polkadot/metadata@npm:4.1.2-7":
|
||||
version: 4.1.2-7
|
||||
resolution: "@polkadot/metadata@npm:4.1.2-7"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@polkadot/types": 4.1.2-6
|
||||
"@polkadot/types-known": 4.1.2-6
|
||||
"@polkadot/types": 4.1.2-7
|
||||
"@polkadot/types-known": 4.1.2-7
|
||||
"@polkadot/util": ^6.0.5
|
||||
"@polkadot/util-crypto": ^6.0.5
|
||||
bn.js: ^4.11.9
|
||||
checksum: 4f6955f0d2d4a535207fb48383e7cbc622122ee7de14f084845ab1c5071e30ef69f3b1bd1708acfa884dfe1cc6b36e470bc590fc01874cd19a0fc1964bdd3bc3
|
||||
checksum: c572d1b4a3acb056959eeb09566f702620818f3c4862f4a9edc8b5bc526b001dcfab48b1d3912244029b17b182f9e00a8c31ea292d6369d5df3f3ea06d06e853
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@ -2660,7 +2660,7 @@ __metadata:
|
||||
resolution: "@polkadot/react-api@workspace:packages/react-api"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@polkadot/api": ^4.1.2-6
|
||||
"@polkadot/api": ^4.1.2-7
|
||||
"@polkadot/extension-dapp": ^0.37.3-8
|
||||
"@polkadot/x-rxjs": ^6.0.5
|
||||
fflate: ^0.6.7
|
||||
@ -2791,26 +2791,26 @@ __metadata:
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@polkadot/rpc-core@npm:4.1.2-6":
|
||||
version: 4.1.2-6
|
||||
resolution: "@polkadot/rpc-core@npm:4.1.2-6"
|
||||
"@polkadot/rpc-core@npm:4.1.2-7":
|
||||
version: 4.1.2-7
|
||||
resolution: "@polkadot/rpc-core@npm:4.1.2-7"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@polkadot/metadata": 4.1.2-6
|
||||
"@polkadot/rpc-provider": 4.1.2-6
|
||||
"@polkadot/types": 4.1.2-6
|
||||
"@polkadot/metadata": 4.1.2-7
|
||||
"@polkadot/rpc-provider": 4.1.2-7
|
||||
"@polkadot/types": 4.1.2-7
|
||||
"@polkadot/util": ^6.0.5
|
||||
"@polkadot/x-rxjs": ^6.0.5
|
||||
checksum: 387c9d7170e92da2a95f4bef172c5aa9c7e0fe71724ade3aa7812ba6c8e51ff22406c3249547525a18a6f876cf20b5ff79212cde8999f1e04b8d2cc0d677941f
|
||||
checksum: 33823c1450e4421eea7572eb6c3ea3111c40f0732699445dec516c44188d16187b89b1008d5d57134836306ebe6fefa2a0cfa6725e7b1359b8451befc5c46db2
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@polkadot/rpc-provider@npm:4.1.2-6":
|
||||
version: 4.1.2-6
|
||||
resolution: "@polkadot/rpc-provider@npm:4.1.2-6"
|
||||
"@polkadot/rpc-provider@npm:4.1.2-7":
|
||||
version: 4.1.2-7
|
||||
resolution: "@polkadot/rpc-provider@npm:4.1.2-7"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@polkadot/types": 4.1.2-6
|
||||
"@polkadot/types": 4.1.2-7
|
||||
"@polkadot/util": ^6.0.5
|
||||
"@polkadot/util-crypto": ^6.0.5
|
||||
"@polkadot/x-fetch": ^6.0.5
|
||||
@ -2818,7 +2818,7 @@ __metadata:
|
||||
"@polkadot/x-ws": ^6.0.5
|
||||
bn.js: ^4.11.9
|
||||
eventemitter3: ^4.0.7
|
||||
checksum: b4cd41c89aa46278f40ccdbd8d9889740d675907c37ca90bcaa88de5b670989bbabf92f790646370427dafcb72d84fe5320d7ea72de261cd0dd2edd2a5b0fa76
|
||||
checksum: 1cf4107e74790c848b8e855fd61a3af7c47cf999dc7effe51005a37347e4a4028bdbd714c10d42f3ad2fa1f4601ae59aa998c38a1bfe410494e38d800bd89c5f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
@ -2843,31 +2843,31 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@polkadot/types-known@npm:4.1.2-6":
|
||||
version: 4.1.2-6
|
||||
resolution: "@polkadot/types-known@npm:4.1.2-6"
|
||||
"@polkadot/types-known@npm:4.1.2-7":
|
||||
version: 4.1.2-7
|
||||
resolution: "@polkadot/types-known@npm:4.1.2-7"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@polkadot/networks": ^6.0.5
|
||||
"@polkadot/types": 4.1.2-6
|
||||
"@polkadot/types": 4.1.2-7
|
||||
"@polkadot/util": ^6.0.5
|
||||
bn.js: ^4.11.9
|
||||
checksum: 2ba731d5c85f1c9cfb91c83e08b6bd140f8edde3deec3babb4c8f202214cb2ac926bfd529f2d65f6a8cd82cef572da0053d7dada2c297d9267d37a5244710edb
|
||||
checksum: 2af9bb8adc1887e3b8170c512685f6c85ebdef549f43e59634e6d88d43027acb88e25ae5396650de8450a2cc48e1e23dd92d5b0220079097ede466d2bd13193c
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@polkadot/types@npm:^4.1.2-6":
|
||||
version: 4.1.2-6
|
||||
resolution: "@polkadot/types@npm:4.1.2-6"
|
||||
"@polkadot/types@npm:^4.1.2-7":
|
||||
version: 4.1.2-7
|
||||
resolution: "@polkadot/types@npm:4.1.2-7"
|
||||
dependencies:
|
||||
"@babel/runtime": ^7.13.10
|
||||
"@polkadot/metadata": 4.1.2-6
|
||||
"@polkadot/metadata": 4.1.2-7
|
||||
"@polkadot/util": ^6.0.5
|
||||
"@polkadot/util-crypto": ^6.0.5
|
||||
"@polkadot/x-rxjs": ^6.0.5
|
||||
"@types/bn.js": ^4.11.6
|
||||
bn.js: ^4.11.9
|
||||
checksum: 2af76f045970cb5d2841981272301b499f0313cd457a0546e809aec586190aeaab4da950c9b3866d6cac28ff2ea3555239060796d6420c56eceab4e37bcafb88
|
||||
checksum: 096e75e711077bdce9a15578ee3b81a388d70901b2e20100749ddfa4c24081ecd93838d496f8242364fa89c8eb822a4ae5ee7aeb802e567adc9bbb793b3b7707
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user