-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix slow loading on Staking page (#705)
* Render all validator infos at once instead of streaming * Flush to state periodically * Tweak how we load delegations * Pass down more props to avoid unnecessary rerenders * Move Delegations to its own component to avoid unnecessary rerenders * Fix tests * Use more granular selectors instead of prop drilling * Use useShallow * Revert name change * Tweak syntax * Simplify use of state in Delegations; remove unused props * Remove unneeded fragment * Tweak logic; add comments * Add performance learnings to docs * Create a useStoreShallow hook * Tweak interval * Allow fetching metadata by any property of AssetID (#719) * Use throttle() * Fix test
- Loading branch information
1 parent
f06c2a8
commit c3903a5
Showing
17 changed files
with
344 additions
and
120 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 38 additions & 0 deletions
38
apps/minifront/src/components/staking/account/delegations.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { getIdentityKeyFromValueView } from '@penumbra-zone/getters'; | ||
| import { VotingPowerAsIntegerPercentage, bech32IdentityKey } from '@penumbra-zone/types'; | ||
| import { AllSlices } from '../../../state'; | ||
| import { DelegationValueView } from './delegation-value-view'; | ||
| import { ValueView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb'; | ||
| import { useStoreShallow } from '../../../utils/use-store-shallow'; | ||
|
|
||
| const getVotingPowerAsIntegerPercentage = ( | ||
| votingPowerByValidatorInfo: Record<string, VotingPowerAsIntegerPercentage>, | ||
| delegation: ValueView, | ||
| ) => votingPowerByValidatorInfo[bech32IdentityKey(getIdentityKeyFromValueView(delegation))]; | ||
|
|
||
| const delegationsSelector = (state: AllSlices) => ({ | ||
| delegations: state.staking.delegationsByAccount.get(state.staking.account) ?? [], | ||
| unstakedTokens: state.staking.unstakedTokensByAccount.get(state.staking.account), | ||
| votingPowerByValidatorInfo: state.staking.votingPowerByValidatorInfo, | ||
| }); | ||
|
|
||
| export const Delegations = () => { | ||
| const { delegations, unstakedTokens, votingPowerByValidatorInfo } = | ||
| useStoreShallow(delegationsSelector); | ||
|
|
||
| return ( | ||
| <div className='mt-8 flex flex-col gap-8'> | ||
| {delegations.map(delegation => ( | ||
| <DelegationValueView | ||
| key={bech32IdentityKey(getIdentityKeyFromValueView(delegation))} | ||
| valueView={delegation} | ||
| unstakedTokens={unstakedTokens} | ||
| votingPowerAsIntegerPercentage={getVotingPowerAsIntegerPercentage( | ||
| votingPowerByValidatorInfo, | ||
| delegation, | ||
| )} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,20 @@ | ||
| import { VotingPowerAsIntegerPercentage, bech32IdentityKey } from '@penumbra-zone/types'; | ||
| import { getIdentityKeyFromValueView } from '@penumbra-zone/getters'; | ||
| import { useStore } from '../../../state'; | ||
| import { stakingSelector } from '../../../state/staking'; | ||
| import { DelegationValueView } from './delegation-value-view'; | ||
| import { Card, CardContent, CardHeader, CardTitle } from '@penumbra-zone/ui'; | ||
| import { ValueView } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb'; | ||
| import { Header } from './header'; | ||
|
|
||
| const getVotingPowerAsIntegerPercentage = ( | ||
| votingPowerByValidatorInfo: Record<string, VotingPowerAsIntegerPercentage>, | ||
| delegation: ValueView, | ||
| ) => votingPowerByValidatorInfo[bech32IdentityKey(getIdentityKeyFromValueView(delegation))]; | ||
| import { Delegations } from './delegations'; | ||
|
|
||
| export const Account = () => { | ||
| const { account, delegationsByAccount, unstakedTokensByAccount, votingPowerByValidatorInfo } = | ||
| useStore(stakingSelector); | ||
| const unstakedTokens = unstakedTokensByAccount.get(account); | ||
| const delegations = delegationsByAccount.get(account) ?? []; | ||
|
|
||
| return ( | ||
| <div className='flex flex-col gap-4'> | ||
| <Header /> | ||
|
|
||
| {!!delegations.length && ( | ||
| <Card> | ||
| <CardHeader> | ||
| <CardTitle>Delegation tokens</CardTitle> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <div className='mt-8 flex flex-col gap-8'> | ||
| {delegations.map(delegation => ( | ||
| <DelegationValueView | ||
| key={bech32IdentityKey(getIdentityKeyFromValueView(delegation))} | ||
| valueView={delegation} | ||
| unstakedTokens={unstakedTokens} | ||
| votingPowerAsIntegerPercentage={getVotingPowerAsIntegerPercentage( | ||
| votingPowerByValidatorInfo, | ||
| delegation, | ||
| )} | ||
| /> | ||
| ))} | ||
| </div> | ||
| </CardContent> | ||
| </Card> | ||
| )} | ||
| <Card> | ||
| <CardHeader> | ||
| <CardTitle>Delegation tokens</CardTitle> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <Delegations /> | ||
| </CardContent> | ||
| </Card> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.