Finish val fetching and staking stats

src/app/app.tsx

@@ -10,6 +10,7 @@ import { Header } from 'src/components/nav/Header';
 import { WagmiContext } from 'src/config/wagmi';
 import { useIsSsr } from 'src/utils/ssr';
 import 'src/vendor/inpage-metamask';
+import 'src/vendor/polyfill';
 
 function SafeHydrate({ children }: PropsWithChildren<any>) {
   // Disable app SSR for now as it's not needed and

src/app/staking/page.tsx

@@ -1,19 +1,38 @@
 'use client';
+import { useMemo } from 'react';
 import { SolidButton } from 'src/components/buttons/SolidButton';
 import { Card } from 'src/components/layout/Card';
 import { Section } from 'src/components/layout/Section';
+import { Amount } from 'src/components/numbers/Amount';
 import { useValidatorGroups } from 'src/features/validators/hooks';
+import { ValidatorGroup, ValidatorStatus } from 'src/features/validators/types';
+import { bigIntMin } from 'src/utils/math';
 
 export default function Index() {
+  const { groups, totalVotes } = useValidatorGroups();
   return (
     <div className="space-y-8">
-      <HeroSection />
-      <ListSection />
+      <HeroSection totalVotes={totalVotes} groups={groups} />
+      <ListSection groups={groups} />
     </div>
   );
 }
 
-function HeroSection() {
+function HeroSection({ totalVotes, groups }: { totalVotes?: bigint; groups?: ValidatorGroup[] }) {
+  const minVotes = useMemo(() => {
+    if (!groups?.length) return 0n;
+    let min = BigInt(1e40);
+    for (const g of groups) {
+      const numElectedMembers = Object.values(g.members).filter(
+        (m) => m.status === ValidatorStatus.Elected,
+      ).length;
+      if (!numElectedMembers) continue;
+      const votesPerMember = g.votes / BigInt(numElectedMembers);
+      min = bigIntMin(min, votesPerMember);
+    }
+    return min;
+  }, [groups]);
+
   return (
     <Section className="bg-purple-500 text-white">
       <div className="my-10 flex items-center justify-between gap-20 lg:gap-x-40 xl:gap-x-80">
@@ -23,27 +42,37 @@ function HeroSection() {
           <SolidButton>{`Stake and earn up to 6%`}</SolidButton>
         </div>
         <div className="hidden grid-cols-2 grid-rows-2 gap-10 border border-white/20 p-6 md:grid">
-          <HeroStat label="Staking APY" value="6%" />
-          <HeroStat label="Validators Groups" value="100" />
-          <HeroStat label="Elected Minimum Votes" value="12345" />
-          <HeroStat label="Total Staked CELO" value="1234567" />
+          <HeroStat label="Staking APY" text="6%" />
+          <HeroStat label="Validators Groups" text={groups?.length || 0} />
+          <HeroStat label="Elected Minimum Votes" amount={minVotes} />
+          <HeroStat label="Total Staked CELO" amount={totalVotes} />
         </div>
       </div>
     </Section>
   );
 }
 
-function HeroStat({ label, value }: { label: string; value: string }) {
+function HeroStat({
+  label,
+  text,
+  amount,
+}: {
+  label: string;
+  text?: string | number;
+  amount?: bigint;
+}) {
   return (
     <div className="flex flex-col">
       <label>{label}</label>
-      <div className="mt-1 font-serif text-3xl">{value}</div>
+      {!!text && <div className="mt-1 font-serif text-3xl">{text}</div>}
+      {!!amount && (
+        <Amount valueWei={amount} className="mt-1 text-3xl" decimals={0} showSymbol={false} />
+      )}
     </div>
   );
 }
 
-function ListSection() {
-  const { groups } = useValidatorGroups();
+function ListSection({ groups }: { groups?: ValidatorGroup[] }) {
   return (
     <Section>
       <Card>

src/components/numbers/Amount.tsx

@@ -14,21 +14,31 @@ export function Amount({
   tokenId,
   tokenAddress,
   className,
+  decimals = 2,
+  showSymbol = true,
 }: {
   value?: BigNumber.Value | bigint;
-  valueWei?: string;
+  valueWei?: BigNumber.Value | bigint;
   tokenId?: TokenId;
   tokenAddress?: Address;
   className?: string;
+  decimals?: number;
+  showSymbol?: boolean;
 }) {
   if (valueWei) {
     value = fromWei(valueWei);
   }
-  const valueFormatted = BigNumber(value?.toString() || '0').toFormat(NUMBER_FORMAT);
+  const valueFormatted = BigNumber(value?.toString() || '0')
+    .decimalPlaces(decimals)
+    .toFormat(NUMBER_FORMAT);
 
   const token =
     (tokenId ? getTokenById(tokenId) : tokenAddress ? getTokenByAddress(tokenAddress) : null) ||
     CELO;
 
-  return <span className={`font-serif ${className}`}>{`${valueFormatted} ${token.symbol}`}</span>;
+  return (
+    <span className={`font-serif ${className}`}>{`${valueFormatted} ${
+      showSymbol ? token.symbol : ''
+    }`}</span>
+  );
 }

src/config/consts.ts

@@ -1 +1,4 @@
 export const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
+
+// From the Election contract electableValidators config
+export const MAX_NUM_ELECTABLE_VALIDATORS = 110;