proposer added

nextjs/nextjs-routes.d.ts

@@ -5,6 +5,11 @@
 
 // prettier-ignore
 declare module "nextjs-routes" {
+  import type {
+    GetServerSidePropsContext as NextGetServerSidePropsContext,
+    GetServerSidePropsResult as NextGetServerSidePropsResult
+  } from "nextjs";
+
   export type Route =
     | StaticRoute<"/404">
     | StaticRoute<"/account/api-key">
@@ -100,6 +105,33 @@ declare module "nextjs-routes" {
    * route({ pathname: "/foos/[foo]", query: { foo: "bar" }}) will produce "/foos/bar".
    */
   export declare function route(r: Route): string;
+
+  /**
+   * Nearly identical to GetServerSidePropsContext from next, but further narrows
+   * types based on nextjs-route's route data.
+   */
+  export type GetServerSidePropsContext<
+    Pathname extends Route["pathname"] = Route["pathname"],
+    Preview extends NextGetServerSidePropsContext["previewData"] = NextGetServerSidePropsContext["previewData"]
+  > = Omit<NextGetServerSidePropsContext, 'params' | 'query' | 'defaultLocale' | 'locale' | 'locales'> & {
+    params: Extract<Route, { pathname: Pathname }>["query"];
+    query: Query;
+    defaultLocale?: undefined;
+    locale?: Locale;
+    locales?: undefined;
+  };
+
+  /**
+   * Nearly identical to GetServerSideProps from next, but further narrows
+   * types based on nextjs-route's route data.
+   */
+  export type GetServerSideProps<
+    Props extends { [key: string]: any } = { [key: string]: any },
+    Pathname extends Route["pathname"] = Route["pathname"],
+    Preview extends NextGetServerSideProps["previewData"] = NextGetServerSideProps["previewData"]
+  > = (
+    context: GetServerSidePropsContext<Pathname, Preview>
+  ) => Promise<NextGetServerSidePropsResult<Props>>
 }
 
 // prettier-ignore
@@ -114,13 +146,12 @@ declare module "next/link" {
   } from "react";
   export * from "next/dist/client/link";
 
-  type Query = { query?: { [key: string]: string | string[] | undefined } };
   type StaticRoute = Exclude<Route, { query: any }>["pathname"];
 
   export interface LinkProps
     extends Omit<NextLinkProps, "href" | "locale">,
       AnchorHTMLAttributes<HTMLAnchorElement> {
-    href: Route | StaticRoute | Query;
+    href: Route | StaticRoute | Omit<Route, "pathname">
     locale?: false;
   }
 
@@ -148,7 +179,6 @@ declare module "next/router" {
 
   type NextTransitionOptions = NonNullable<Parameters<Router["push"]>[2]>;
   type StaticRoute = Exclude<Route, { query: any }>["pathname"];
-  type Query = { query?: { [key: string]: string | string[] | undefined } };
 
   interface TransitionOptions extends Omit<NextTransitionOptions, "locale"> {
     locale?: false;
@@ -170,12 +200,12 @@ declare module "next/router" {
         locale?: Locale;
         locales?: undefined;
         push(
-          url: Route | StaticRoute | Query,
+          url: Route | StaticRoute | Omit<Route, "pathname">,
           as?: string,
           options?: TransitionOptions
         ): Promise<boolean>;
         replace(
-          url: Route | StaticRoute | Query,
+          url: Route | StaticRoute | Omit<Route, "pathname">,
           as?: string,
           options?: TransitionOptions
         ): Promise<boolean>;

pages/_app.tsx

@@ -28,6 +28,7 @@ import Layout from 'ui/shared/layout/Layout';
 import Web3ModalProvider from 'ui/shared/Web3ModalProvider';
 
 import 'lib/setLocale';
+import 'ui/home/App.css';
 // import 'focus-visible/dist/focus-visible';
 
 type AppPropsWithLayout = AppProps & {

playwright-ct.config.ts

@@ -3,6 +3,8 @@ import { devices, defineConfig } from '@playwright/experimental-ct-react';
 import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import { PluginOption } from 'vite';
+
 
 import appConfig from 'configs/app';
 
@@ -50,11 +52,9 @@ const config: PlaywrightTestConfig = defineConfig({
 
     ctViteConfig: {
       plugins: [
-        tsconfigPaths({ loose: true, ignoreConfigErrors: true }),
+        tsconfigPaths({ loose: true, ignoreConfigErrors: true }) as any, // type cast
         react(),
-        svgr({
-          exportAsDefault: true,
-        }),
+        svgr({ exportAsDefault: true })
       ],
       build: {
         // it actually frees some memory that vite needs a lot

ui/home/App.css

@@ -0,0 +1,47 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
+    background-color: #f0f0f0;
+}
+.stats-card {
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    max-width: 800px;
+    margin: 0 auto;
+}
+h1, h2 {
+    color: #333;
+    margin-top: 0;
+}
+.proposer-section {
+    margin-bottom: 20px;
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 10px;
+    background-color: black; /* Set table background to black */
+    color: white;
+}
+th, td {
+    padding: 8px;
+    text-align: left;
+    border-bottom: 1px solid #ddd;
+}
+th {
+    background-color: #333; /* Darker shade for table headers */
+    color: white; /* Ensure header text is white */
+}
+.count {
+    font-weight: bold;
+    color: #666;
+}
+.bolt {
+    background-color: #444; /* Adjusted color for bolt row */
+}
+.interstate {
+    background-color: #fff0e6;
+}

ui/home/LatestBlocks.tsx

@@ -19,6 +19,7 @@ import { HOMEPAGE_STATS } from 'stubs/stats';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 
 import LatestBlocksItem from './LatestBlocksItem';
+import Proposer from './Proposer';
 
 const LatestBlocks = () => {
   const isMobile = useIsMobile();
@@ -96,7 +97,8 @@ const LatestBlocks = () => {
   }
 
   return (
-    <Box width={{ base: '100%', lg: '280px' }} flexShrink={ 0 }>
+    <Box width={{ base: '100%', lg: '100%' }} flexShrink={ 0 } style={{flexDirection:'column'}}>
+      <Proposer  />
       <Heading as="h4" size="sm">Latest blocks</Heading>
       { statsQueryResult.data?.network_utilization_percentage !== undefined && (
         <Skeleton isLoaded={ !statsQueryResult.isPlaceholderData } mt={ 1 } display="inline-block">

ui/home/Proposer.tsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Proposers } from './components/Proposers';
+import { Gateway } from './components/Gateway';
+
+
+
+interface Proposer {
+  slot: number;
+  validator_index: number;
+
+}
+
+function Proposer() {
+    const [proposers, setProposers] = useState<Proposer[]>([]); 
+    const [timestamp, setTimestamp] = useState<string>(""); // Type the timestamp state
+
+    const updateProposers = async () => {
+        setTimestamp(new Date().toLocaleString());
+        console.log("timestamp");
+        try {
+            const response = await fetch(
+                "http://135.181.191.125:58017/api/v1/proposers/lookahead?activeOnly=true&futureOnly=true"
+            );
+
+            if (!response.ok) {
+                throw new Error(`Network response was not ok: ${response.statusText}`);
+            }
+
+            const data :any= await response.json();
+
+            // Ensure the data matches the expected type
+            const mappedProposers = data.map((item: any) => ({
+                slot: item.slot,
+                validator_index: item.validator_index,
+
+            }));
+            console.log("mapped_data", mappedProposers);
+
+            setProposers(mappedProposers);
+        } catch (error) {
+            console.error("Error fetching proposers:", error);
+        }
+    };
+
+
+    useEffect(() => {
+        const id = setInterval(() => updateProposers(), 1000);
+        return () => clearInterval(id);
+    }, []);
+
+    return (
+        <div className="App" style={{width:"100%"}}>
+            <h1 style={{color:'white'}}>Holesky Proposer Statistics</h1>
+            <h2 style={{color:'white'}}>Available Aggregated Proposers || Last Updated: <span className="count">{timestamp}</span></h2>
+            <h2 style={{color:'white'}}>Average response latency: <span className="count">200ms (est)</span></h2>
+            <h2 style={{color:'white'}}>Total proposers: <span className="count">51,431</span></h2>
+
+            <Proposers proposers={proposers} />
+            <Gateway />
+        </div>
+    );
+}
+
+export default Proposer;

ui/home/components/Gateway.tsx

@@ -0,0 +1,13 @@
+
+export const Gateway = () => {
+    return (
+      <div>
+        Gateways
+        <ul>
+          <li>api.interstate.so</li>
+          <li>http://135.181.191.125:58017</li>
+        </ul>
+      </div>
+    )
+  }
+

ui/home/components/Proposers.tsx

@@ -0,0 +1,54 @@
+interface Proposer {
+  slot: number;
+  validator_index: number;
+  // Add other fields as necessary
+}
+
+interface ProposersProps {
+  proposers: Proposer[];
+
+}
+
+interface ProposerItemProps {
+  item: Proposer;
+}
+
+export const Proposers = ({ proposers }: ProposersProps) => {
+  return (
+    <>
+      <h2 style={{color:"white"}}>
+        Total Proposers In Upcoming 32 Slots: <span className="count">{proposers.length}</span>
+      </h2>
+      <div className="proposer-section">
+        <table>
+          <thead>
+            <tr>
+              <th>Type</th>
+              <th>Slot</th>
+              <th>Validator Index</th>
+              <th>Insurance Size</th>
+              <th>Total Value Transacted</th>
+            </tr>
+          </thead>
+          <tbody>
+            {proposers.map((proposer, index) => (
+              <ProposerItem key={index} item={proposer} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+};
+
+export const ProposerItem = ({ item }: ProposerItemProps) => {
+  return (
+    <tr className="bolt">
+      <td>Agg</td>
+      <td>{item.slot}</td>
+      <td>{item.validator_index}</td>
+      <td>_</td>
+      <td>_</td>
+    </tr>
+  );
+};

ui/pages/Home.tsx

@@ -36,7 +36,7 @@ const Home = () => {
         <ChainIndicators/>
       </Flex>
       <AdBanner mt={ 6 } mx="auto" display={{ base: 'flex', lg: 'none' }} justifyContent="center"/>
-      <Flex mt={ 8 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 6 }>
+      <Flex mt={ 8 } direction={{ base: 'column', lg: 'column' }} columnGap={ 12 } rowGap={ 6 }>
         { leftWidget }
         <Box flexGrow={ 1 }>
           <Transactions/>

ui/shared/forms/inputs/select/utils.ts

@@ -59,14 +59,14 @@ const getChakraStyles: (colorMode: ColorMode) => ChakraStylesConfig<Option> = (c
     }),
     valueContainer: (provided, state) => ({
       ...provided,
-      ...getValueContainerStyles(state.selectProps.size),
+      ...getValueContainerStyles(state.selectProps.size as Size | undefined),  // Cast size here
       py: 0,
     }),
     singleValue: (provided, state) => ({
       ...provided,
       mx: 0,
       transform: 'none',
-      ...getSingleValueStyles(state.selectProps.size),
+      ...getSingleValueStyles(state.selectProps.size as Size | undefined),  // Cast size here
     }),
   };
 };