Rework Staking Overview page

[kianenigma]

The major issues are that:

1. Own stake is not shown
2. Nominator count is only showing first page (see westend)

I think under the hood, based on what I have learned in #11930, this page is using some api.derive stuff that is wrong.

I suggest two actions:

1. For this page, we don't need anything else other than reading erasStakersOverview. The keys are the validators, the value has nominator_count, own_stake, total_stake. We don't need to show all nominators one by one. If we try and show nominators, it should show all pages properly.
2. Fix the drive stuff

I think a first PR should implement only 1 and finish #11930
A second PR can re-add nominator list in a paginated way
A third PR can fix api.derive details.

[sigurpol]

Another issue we have found is that era duration seems to be hard-coded to 6h for all chains including Polkadot and Westend where era duration is ~24h unlike Kusama (~6h).

I believe the issue is in

apps/packages/page-staking-async/src/Validators/SummarySession.tsx

Lines 54 to 61 in a7ee0e1

	const eraDuration = useMemo(
	() => {
	// default to 1800 blocks i.e. 6 hours
	return new BN(6 * 60 * 60 * 1000).div(blockTime);
	},
	[blockTime]
	);

  const eraDuration = useMemo(
    () => {
      // default to 1800 blocks i.e. 6 hours
      return new BN(6 * 60 * 60 * 1000).div(blockTime);
    },
    [blockTime]
  );

[Ank4n]

(Westend is 6h as well)
All chains are 6 sessions for an era (in ideal case). But sessions are 4 times longer (4h) in Polkadot.

[ap211unitech]

Another issue we have found is that era duration seems to be hard-coded to 6h for all chains including Polkadot and Westend where era duration is ~24h unlike Kusama (~6h).

Fixing with #11972