Grandpa visualization optimizations + improvements (#150)

* Prefix CSS rules properly
* Fix Jdenticon placeholder
* Implement shouldComponentUpdate()
* Force casting of block numbers in backend
* Ensure array is properly sorted
* Fix backfilling and hold only limited blocks in memory
* Use proper ellipsis
* Display note if no grandpa data available yet
* Apply flexing only when two blocks are displayed
* Display consensus icons above all other elements
* Type authoritySetId properly
* Display loading screen only when necessary
* Only measure when necessary
* Reset state on tab change
* Remove tooltips and add keys
* fix: Remove some `any` types, fix list view CSS
* Fix updateState type
* Add keys to more elements
* Limit number of authorities for which vis works

packages/frontend/src/state.ts

@@ -194,8 +194,10 @@ export interface State {
   best: Types.BlockNumber;
   finalized: Types.BlockNumber;
   consensusInfo: Types.ConsensusInfo;
+  displayConsensusLoadingScreen: boolean;
+  tabChanged: boolean;
   authorities: Types.Address[];
-  authoritySetId: Types.AuthoritySetId;
+  authoritySetId: Maybe<Types.AuthoritySetId>;
   sendFinality: boolean;
   blockTimestamp: Types.Timestamp;
   blockAverage: Maybe<Types.Milliseconds>;
@@ -208,4 +210,4 @@ export interface State {
 }
 
 export type Update = <K extends keyof State>(changes: Pick<State, K> | null) => Readonly<State>;
-
+export type UpdateBound = <K extends keyof State>(changes: Pick<State, K> | null) => void;