update fronend

client/src/app/components/EpochRow.tsx

@@ -1,7 +1,7 @@
 "use client"
 import React from 'react';
 import { cn } from '@/lib/utils';
-import { ISlot } from '@/models/preconf';
+import { ISlot } from '@/interfaces/preconf';
 
 const EpochRow = ({currentEpoch, currentEpochProposers, slotIndex}: ISlot) => {
 

client/src/app/components/LogsDisplay.tsx

@@ -1,10 +1,21 @@
 import React from 'react'
-import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card'
 import { cn } from '@/lib/utils';
 
 export default function LogsDisplay() {
 
-    const logs = [{content: 'hello'}, {content: 'hi'}];
+    const logs = [{content: `#"--execution-endpoints=http://172.16.0.10:8551",
+          "--checkpoint-sync-url=http://10.1.0.22:32999",
+          "--execution-endpoints=http://127.0.0.1:8551",
+          "--suggested-fee-recipient=0x8943545177806ED17B9F23F0a21ee5948eCaa776`}, {content: `  "--enr-address=10.1.0.22",
+          "--enr-udp-port=50050",
+          "--enr-tcp-port=50050",
+          "--listen-address=0.0.0.0",
+          "--port=50050",
+          "--http",
+          "--http-address=0.0.0.0",
+`}];
+
     return (
         <Card className='mt-4 max-w-4xl h-full'>
             <CardHeader>
@@ -17,6 +28,9 @@ export default function LogsDisplay() {
                     <div key={index} className={cn("bg-zinc-800 p-2", {"bg-zinc-900": index % 2 === 0 })}><p>{log.content}</p></div>
                 ))}
             </CardContent>
+            <CardFooter>
+                {/* place outcome here with preconfs included or not */}
+            </CardFooter>
         </Card>
     )
 }

client/src/app/components/PreconfBanner.tsx

@@ -1,39 +1,35 @@
 /* eslint-disable @next/next/no-img-element */
 import SquareCard from "@/components/ui/squarecard"
-import { IRelayerInfo, ISlot } from "@/interfaces/preconf"
+import { IBuilder, IPreconf, ISlot } from "@/interfaces/preconf"
 import { truncateAddress } from "../utils/truncate"
 
-const displayRelayerBrand = (relayer: IRelayerInfo) => {
+const displayBrand = (item: IBuilder | IPreconf) => {
   return (
     <span className='flex items-center'>
-      <img className='h-7 w-7 mr-1' src={relayer.img}  alt={relayer.name}/>
-      <p>{relayer.name}</p>
+      <img className='h-7 w-auto mr-1' src={item.img}  alt={item.name}/>
+      <p>{item.name}</p>
   </span>
   )
 }
 
-const convertProposerPubkeyToName = (currentProposerPubkey: ISlot) => {
-  return (
-    <span className='flex'>
-      <p></p>
-    </span>
-  )
-}
-
 interface Props extends ISlot {
 }
 
-export default function PreconfBanner({relayer, slotIndex, currentProposerPubkey}: Props) {
+export default function PreconfBanner({builder, preconf, slotIndex, currentProposerPubkey}: Props) {
+
+  // replace this with real mapping
+  // console.log(getNameByPubkey(proposerNames, '0x23'));
 
   const truncatedPubkey = currentProposerPubkey ? truncateAddress({address: currentProposerPubkey, firstCharCount: 5}) : null;
   return (
       <>
         <div>
           <h3 className="text-base font-semibold leading-6 text-gray-200 ">Current Preconf Details</h3>
-          <dl className="grid grid-cols-1 gap-2 sm:grid-cols-3 max-w-4xl mt-2">
+          <dl className="grid grid-cols-1 gap-2 sm:grid-cols-4 max-w-4xl mt-2">
               <SquareCard title="Current Slot" value={slotIndex ? slotIndex : 'Fetching..'} />
               <SquareCard title="Proposer" value={ truncatedPubkey ? truncatedPubkey : 'Fetching..'} />
-              <SquareCard title="Relayer" value={relayer ? displayRelayerBrand(relayer) : 'Fetching..'} />
+              <SquareCard title="Builder" value={builder ? displayBrand(builder) : 'Fetching..'} />
+              <SquareCard title="Preconf Submitted By" value={preconf ? displayBrand(preconf) : 'Fetching..'} />
           </dl>
         </div>
         <div>

client/src/app/page.tsx

@@ -6,19 +6,14 @@ import Navbar from "./components/Navbar";
 import PreconfBanner from "./components/PreconfBanner";
 import axios from "axios";
 import { useQuery } from "@tanstack/react-query";
-import SquareCard from "@/components/ui/squarecard";
 import EpochRow from "./components/EpochRow";
-import { Relayers } from "@/interfaces/preconf";
 import LogsDisplay from "./components/LogsDisplay";
 import { useEffect } from "react";
-
-const getCurrentRelayer = () => {
-  return Relayers[3];
-};
+import { Builders, Preconfs } from "@/interfaces/preconf";
 
 
 export default function Home() {
-  const { data, isLoading, isPending, error } = useQuery({
+  const { data } = useQuery({
     queryKey: ["data"],
     queryFn: async () => {
       const { data } = await axios({
@@ -36,6 +31,10 @@ export default function Home() {
   const [currentEpochProposers, setCurrentEpochProposers] = useState([])
   const [currentProposerPubkey, setCurrentProposerPubKey] = useState('')
 
+  //todo: get current builder and preconf
+  const currentBuilder = Builders[1];
+  const currentPreconf = Preconfs[1];
+
   useEffect(() => {
       console.log(data?.slot)
       console.log(data?.slot.currentEpochProposers[data?.slot.slotIndex].pubkey)
@@ -45,17 +44,13 @@ export default function Home() {
       setCurrentProposerPubKey(data?.slot.currentEpochProposers[data?.slot.slotIndex].pubkey);
 
     }, [data, slotIndex, currentEpochProposers]);
-
-
-
-  const currentRelayer = getCurrentRelayer();
   return (
     <main>
       <img src="/gradient.png" className="absolute top-0 right-0 w-fukll h-auto" alt="orb" />
       <Navbar />
       <MainContentWrapper>
         <EpochRow currentEpoch={currentEpoch} slotIndex={slotIndex} currentEpochProposers={currentEpochProposers} />
-        <PreconfBanner currentProposerPubkey={currentProposerPubkey} relayer={currentRelayer} slotIndex={slotIndex} currentEpoch={currentEpoch} currentEpochProposers={[]} />
+        <PreconfBanner currentProposerPubkey={currentProposerPubkey} builder={currentBuilder} slotIndex={slotIndex} preconf={currentPreconf} currentEpoch={currentEpoch} currentEpochProposers={[]} />
         <LogsDisplay />
       </MainContentWrapper>
     </main>

client/src/app/utils/getNameByPubkey.ts

@@ -0,0 +1,5 @@
+
+export const getNameByPubkey = (arr: any[], key: any) => {
+    const found = arr.find(item => item.pubkey === key)
+    return found ? found.name : undefined;
+}

client/src/interfaces/preconf.ts

@@ -1,18 +1,22 @@
 
-export interface IRelayerInfo {
+export interface IBuilder {
     name: string | undefined;
     img: any;
 }
-
-export interface IGatewayInfo {
-    name: string | undefined; 
+export interface IPreconf {
+    name: string | undefined;
+    img: any;
 }
 
+export interface IProposer {
+    name?: string;
+    pubkey: string;
+}
 export interface ISlot {
     currentProposerPubkey?: string;
     validatorIndex?: number;
-    relayer?: IRelayerInfo; 
-    gateway?: IGatewayInfo;
+    builder?: IBuilder; 
+    preconf?: IPreconf;
     slotIndex?: number | undefined;
     currentEpoch: number | null;
     currentEpochProposers: Object[];
@@ -29,36 +33,51 @@ export interface IEpoch {
 }
 
 
-export const RelayerNames: {[x: string]: string} = {
-    titan: "Titan",
-    ultrasound: "Ultrasound",
-    limechain: "Limechain",
-    chainbound: "Chainbound"
-}
-
-export const ProposerPubkeyToName: {[x: string]: string} = {
-    proposer1: '0x859155dd5a22f116ae8f61b1516770f8ff41ec0ea24b8b745171b4cf34981bb7d235e7e1a739a0589e7c7ff69ede9b15',
-    proposer2: '0x859155dd5a22f116ae8f61b1516770f8ff41ec0ea24b8b745171b4cf34981bb7d235e7e1a739a0589e7c7ff69ede9b15',
+export const PreconfNames: {[x: string]: string} = {
+    bolt: "Bolt",
+    primev: "Primev",
+    delegatedPreconf: "delegatedPreconf"
 }
 
-export const Gateway: {[x: string]: string} = {
+export const BuilderNames: {[x: string]: string} = {
+    titan: "Titan",
+    ultrasound: "Ultrasound",
 }
 
-export const Relayers: IRelayerInfo[] = [
+export const proposerNames = [
     {
-        name: RelayerNames.titan, 
-        img: '/logos/titan.jpg'
+        name: 'alice',
+        pubkey: '0x23',
     },
     {
-        name: RelayerNames.ultrasound, 
-        img: '/logos/ultrasound.png'
+        name: 'bob',
+        pubkey: '0x9999',
+    },
+];
+
+
+export const Preconfs: IPreconf[] = [
+    { 
+        name: PreconfNames.bolt, 
+        img: '/logos/bolt.png'
     },
+    { 
+        name: PreconfNames.primev, 
+        img: '/logos/primev.png'
+    },
+    { 
+        name: PreconfNames.delegatedPreconf, 
+        img: '/logos/delegated.png'
+    },
+]
+
+export const Builders: IBuilder[] = [
     {
-        name: RelayerNames.limechain, 
-        img: '/logos/limechain.png'
+        name: BuilderNames.titan, 
+        img: '/logos/titan.jpg'
     },
     {
-        name: RelayerNames.chainbound, 
-        img: '/logos/chainbound.jpg'
+        name: BuilderNames.ultrasound, 
+        img: '/logos/ultrasound.png'
     },
-]
+]