feat: update get started logs

web/src/parts/Header.tsx

@@ -19,6 +19,24 @@ export default function Header() {
  };
  return (
  <header className="relative z-50 pb-5 pt-2 sm:pb-7 lg:pt-7">
+ <div className="hidden sm:block absolute top-0 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 p-2 rounded-b-lg border-x-2 border-b-2 border-white/10 shadow-lg">
+ <div className="flex items-center justify-center">
+ <dt className="truncate text-sm tracking-tighter font-semibold text-gray-100">
+ Network:
+ </dt>
+ <dd className="pl-1 underline capitalize text-sm font-bold tracking-tighter text-gray-100 hover:text-gray-200 hover:animate-pulse cursor-default">
+ {majorityNetwork}
+ </dd>
+ </div>
+ <div className="flex items-center justify-center">
+ <dt className="truncate text-sm tracking-tighter font-semibold text-gray-100">
+ Operation Mode:
+ </dt>
+ <dd className="pl-1 underline capitalize text-sm font-bold tracking-tighter text-gray-100 hover:text-gray-200 hover:animate-pulse cursor-default">
+ {data?.data?.operating_mode ?? 'unknown'}
+ </dd>
+ </div>
+ </div>
  <nav>
  <Container className="relative z-50 grid grid-cols-2 content-end py-2">
  <div className="relative z-10 flex items-center justify-self-start">
@@ -42,14 +60,7 @@ export default function Header() {
  )}
  </a>
  </div>
- <div className="flex items-center justify-self-end">
- {majorityNetwork && (
- <div className="flex-col items-center hidden sm:flex mr-5">
- <span className="text-gray-500 opacity-70 font-bold">
- {majorityNetwork} network
- </span>
- </div>
- )}
+ <div className="hidden sm:flex items-center justify-self-end">
  <span
  className="cursor-pointer text-gray-600 font-bold hover:text-gray-700 flex items-center"
  onClick={onClick}
@@ -58,6 +69,27 @@ export default function Header() {
  <InformationCircleIcon className="w-8 text-fuchsia-500 hover:text-fuchsia-600" />
  </span>
  </div>
+ <div
+ onClick={onClick}
+ className="sm:hidden cursor-pointer absolute top-0 right-0 transform -translate-y-2 bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 p-2 rounded-bl-lg border-l-2 border-b-2 border-white/10 shadow-lg"
+ >
+ <div className="flex items-center justify-center">
+ <dt className="truncate text-sm tracking-tighter font-semibold text-gray-100">
+ Network:
+ </dt>
+ <dd className="pl-1 underline capitalize text-sm font-bold tracking-tighter text-gray-100 hover:text-gray-200 hover:animate-pulse cursor-default">
+ {majorityNetwork}
+ </dd>
+ </div>
+ <div className="flex items-center justify-center">
+ <dt className="truncate text-sm tracking-tighter font-semibold text-gray-100">
+ Operation Mode:
+ </dt>
+ <dd className="pl-1 underline capitalize text-sm font-bold tracking-tighter text-gray-100 hover:text-gray-200 hover:animate-pulse cursor-default">
+ {data?.data?.operating_mode ?? 'unknown'}
+ </dd>
+ </div>
+ </div>
  </Container>
  </nav>
  <Transition.Root show={open} as={Fragment}>

web/src/parts/PrimarySection.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import { Tab } from '@headlessui/react';
 import clsx from 'clsx';
 
-import useStatus from '@hooks/status';
 import Checkpoints from '@parts/checkpoints/Checkpoints';
 import Upstream from '@parts/upstream/Upstream';
 
@@ -19,7 +18,6 @@ const Sections = [
 ];
 
 export default function Section() {
- const { data } = useStatus();
  const [tabOrientation, setTabOrientation] = useState('horizontal');
 
  useEffect(() => {
@@ -40,30 +38,9 @@ export default function Section() {
  return (
  <section
  id="sections"
- className="relative overflow-hidden shadow-inner bg-scooter-200 bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500"
+ className="relative overflow-hidden shadow-inner bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500"
  >
- {data?.data?.operating_mode === 'light' && (
- <div className="absolute w-full">
- <div className="overflow-hidden h-screen">
- <div
- className="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 origin-top float-right mt-3 mr-3 w-32 text-center"
- style={{ transform: 'translateX(50%) rotate(45deg)' }}
- >
- <div
- className="text-sm text-gray-100 font-bold"
- title="Checkpointz instance is running in light operation mode"
- >
- Light
- </div>
- </div>
- </div>
- </div>
- )}
- <Tab.Group
- as="div"
- className="grid grid-cols-1 items-center gap-y-6 py-10"
- vertical={tabOrientation === 'vertical'}
- >
+ <Tab.Group as="div" className="gap-y-6 py-10" vertical={tabOrientation === 'vertical'}>
  {({ selectedIndex }) => (
  <>
  <div className="-mx-4 px-1 flex overflow-x-auto sm:overflow-visible pb-0">
@@ -93,7 +70,7 @@ export default function Section() {
  ))}
  </Tab.List>
  </div>
- <Tab.Panels className="lg:col-span-7">
+ <Tab.Panels className="block sm:flex justify-center">
  {Sections.map((section) => (
  <Tab.Panel key={section.title} unmount={false}>
  <div className="relative">

web/src/parts/checkpoints/CheckpointsTable.tsx

@@ -68,43 +68,43 @@ export default function CheckpointsTable(props: {
  <tr>
  <th
  scope="col"
- className="hidden sm:table-cell drop-shadow-lg whitespace-nowrap sm:pl-6 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+ className="hidden sm:table-cell drop-shadow-lg whitespace-nowrap sm:pl-6 sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
  >
  Epoch
  </th>
  <th
  scope="col"
- className="whitespace-nowrap drop-shadow-lg pl-2 sm:pl-0 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+ className="whitespace-nowrap drop-shadow-lg pl-2 sm:pl-0 sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
  >
  Slot
  </th>
  <th
  scope="col"
- className="whitespace-nowrap drop-shadow-lg py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+ className="whitespace-nowrap drop-shadow-lg sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
  >
  Time
  </th>
  <th
  scope="col"
- className="whitespace-nowrap drop-shadow-lg py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+ className="whitespace-nowrap drop-shadow-lg sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
  >
  State Root
  </th>
  <th
  scope="col"
- className="hidden sm:table-cell drop-shadow-lg whitespace-nowrap py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+ className="hidden sm:table-cell drop-shadow-lg whitespace-nowrap sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
  >
  Block Root
  </th>
- <th scope="col" className="">
+ <th scope="col" className="sm:px-2">
  <span className="sr-only">View</span>
  </th>
  </tr>
  </thead>
  <tbody className="divide-y divide-gray-200 bg-white/10">
  {filteredSlots.map((slot) => (
  <tr key={slot.slot}>
- <td className="hidden sm:table-cell sm:pl-6 drop-shadow-lg whitespace-nowrap py-2 font-semibold text-sm sm:text-base text-gray-100">
+ <td className="hidden sm:table-cell sm:pl-6 sm:px-2 drop-shadow-lg whitespace-nowrap py-2 font-semibold text-sm sm:text-base text-gray-100">
  {slot.epoch}
  {props.latestEpoch && slot.epoch && slot.epoch === props.latestEpoch && (
  <img
@@ -114,7 +114,7 @@ export default function CheckpointsTable(props: {
  />
  )}
  </td>
- <td className="whitespace-nowrap pl-2 drop-shadow-lg sm:pl-0 py-2 font-semibold text-sm sm:text-base text-gray-100">
+ <td className="whitespace-nowrap pl-2 sm:px-2 drop-shadow-lg sm:pl-0 py-2 font-semibold text-sm sm:text-base text-gray-100">
  {slot.slot}
  {props.latestEpoch && slot.epoch && slot.epoch === props.latestEpoch && (
  <img
@@ -124,7 +124,7 @@ export default function CheckpointsTable(props: {
  />
  )}
  </td>
- <td className="whitespace-nowrap py-2 drop-shadow-lg text-sm sm:text-base font-semibold text-gray-100">
+ <td className="whitespace-nowrap py-2 sm:px-2 drop-shadow-lg text-sm sm:text-base font-semibold text-gray-100">
  {slot.time?.start_time && (
  <>
  <ReactTimeAgo
@@ -139,7 +139,7 @@ export default function CheckpointsTable(props: {
  </>
  )}
  </td>
- <td className="whitespace-nowrap py-2 drop-shadow-lg text-sm sm:text-base font-semibold text-gray-100">
+ <td className="whitespace-nowrap py-2 sm:px-2 drop-shadow-lg text-sm sm:text-base font-semibold text-gray-100">
  {slot.state_root ? (
  <>
  <span className="xl:hidden font-mono cursor-pointer flex">
@@ -160,7 +160,7 @@ export default function CheckpointsTable(props: {
  ''
  )}
  </td>
- <td className="hidden sm:table-cell whitespace-nowrap py-2 drop-shadow-lg text-sm sm:text-base font-semibold text-gray-100">
+ <td className="hidden sm:table-cell whitespace-nowrap py-2 sm:px-2 drop-shadow-lg text-sm sm:text-base font-semibold text-gray-100">
  {slot.block_root ? (
  <>
  <span className="2xl:hidden font-mono cursor-pointer flex">
@@ -181,7 +181,7 @@ export default function CheckpointsTable(props: {
  ''
  )}
  </td>
- <td className="relative whitespace-nowrap text-right text-sm sm:text-base pr-2 sm:pr-6 font-semibold">
+ <td className="relative whitespace-nowrap text-right text-sm sm:text-base pr-2 lg:px-6 font-semibold">
  {slot.block_root && (
  <button className="align-top" onClick={() => onClick(slot)}>
  <MagnifyingGlassCircleIcon className="h-7 w-7 stroke-gray-50 hover:stroke-gray-100" />

web/src/parts/get-started/GetStarted.tsx

@@ -233,6 +233,21 @@ export default function GetStarted() {
  <div className="mt-5 text-xl font-semibold">Obtaining slot and state root</div>
  <div className="mt-2 font-semibold">
  Option A
+ <ol className="list-decimal font-normal">
+ <li className="ml-10">
+ Check your consensus client logs
+ {client.name !== 'Not applicable' && client.logCheck?.(publicURL)}
+ </li>
+ <li className="ml-10">
+ Find the <span className="font-mono bg-gray-100 p-1">slot</span> number.
+ </li>
+ <li className="ml-10">
+ Find the <span className="font-mono bg-gray-100 p-1">state_root</span> value.
+ </li>
+ </ol>
+ </div>
+ <div className="mt-2 font-semibold">
+ Option B
  <ol className="list-decimal font-normal">
  <li className="ml-10">
  Open{' '}
@@ -250,7 +265,7 @@ export default function GetStarted() {
  </ol>
  </div>
  <div className="mt-2 font-semibold">
- Option B
+ Option C
  <ol className="list-decimal font-normal">
  <li className="ml-10">
  Install <span className="font-mono bg-gray-100 p-1">curl</span> and{' '}

web/src/parts/get-started/GetStartedSelection.tsx

@@ -78,7 +78,7 @@ const clients: ConsensusClient[] = [
  <div className="bg-gray-100 rounded-lg grid">
  <pre className="overflow-x-auto p-5">
  {`INFO Starting checkpoint sync remote_url: ${publicURL}, service: beacon
-INFO Loaded checkpoint block and state state_root: 0xb6e8c25393411f252775f82b4907298572003ac37acf9422dd2500b5c368a08d, block_root: 0xefe19ea0d99bf45d50d4302f6bbc3feb2c1ec46f8d6e112594ec86b9581596ae, slot: 3480832, service: beacon
+INFO Loaded checkpoint block and state state_root: 0x854ca984298e6a0d9fc098b4e37f1b28727e545a8e4d3106188fda3587d14cdb, block_root: 0x91e4f5129bc54f7284f1690e00803db360aeb63d34610d6995e1145bd01c0d92, slot: 529024, service: beacon
 `}
  </pre>
  </div>
@@ -99,7 +99,8 @@ INFO Loaded checkpoint block and state state_root: 0xb6e8c25393411f252775f
  <div className="bg-gray-100 rounded-lg grid">
  <pre className="overflow-x-auto p-5">
  {`info: Fetching weak subjectivity state weakSubjectivityServerUrl=${publicURL}
-info: Download completed`}
+info: Download completed
+info: Initializing beacon state from anchor state slot=529024, epoch=16532, stateRoot=0x854ca984298e6a0d9fc098b4e37f1b28727e545a8e4d3106188fda3587d14cdb`}
  </pre>
  </div>
  ),
@@ -125,10 +126,9 @@ info: Download completed`}
  <pre className="overflow-x-auto p-5">
  {`Starting trusted node sync databaseDir=/data/consensus/db restUrl=${publicURL} blockId=finalized backfill=false reindex=false
 Downloading checkpoint block restUrl=${publicURL} blockId=finalized
-Downloading checkpoint state restUrl=${publicURL} checkpointSlot=370528
-Writing checkpoint state
-Writing checkpoint block
-Database initialized, historical blocks will be backfilled when starting the node`}
+Downloading checkpoint state restUrl=${publicURL} checkpointSlot=529024
+Writing checkpoint state stateRoot=91e4f512
+Writing checkpoint block blockRoot=13b4cc5f blck="(slot: 529024, proposer_index: 1466, parent_root: \\"0b019674\\", state_root: \\"854ca984\\")"`}
  </pre>
  </div>
  ),
@@ -152,7 +152,10 @@ Database initialized, historical blocks will be backfilled when starting the nod
  <div className="bg-gray-100 rounded-lg grid">
  <pre className="overflow-x-auto p-5">
  {`level=info msg="requesting ${publicURL}/eth/v2/debug/beacon/states/genesis"
-level=info msg="requesting ${publicURL}/eth/v2/debug/beacon/states/finalized"`}
+level=info msg="requesting ${publicURL}/eth/v2/debug/beacon/states/finalized"
+level=info msg="requesting ${publicURL}/eth/v2/beacon/blocks/0x91e4f5129bc54f7284f1690e00803db360aeb63d34610d6995e1145bd01c0d92"
+level=info msg="BeaconState slot=529024, Block slot=529024"
+level=info msg="BeaconState htr=0x854ca984298e6a0d9fc098b4e37f1b28727e545a8e4d3106188fda3587d14cdbd, Block state_root=0x854ca984298e6a0d9fc098b4e37f1b28727e545a8e4d3106188fda3587d14cdb"`}
  </pre>
  </div>
  ),
@@ -173,7 +176,7 @@ level=info msg="requesting ${publicURL}/eth/v2/debug/beacon/states/finalized"`}
  <div className="bg-gray-100 rounded-lg grid">
  <pre className="overflow-x-auto p-5">
  {`INFO - Loading initial state from ${publicURL}
-INFO - Loaded initial state at epoch 11348 (state root = 0x08dab651bd667b166a0c99b7a21ee455f4f9fadfce0e37dbcee490f5ec841477, block root = 0xa5bd8b3eaadd81f892f120219f3bcee6565a37d045bf0cee4c4023a51def430c, block slot = 363136). Please ensure that the supplied initial state corresponds to the latest finalized block as of the start of epoch 11348 (slot 363136)."`}
+INFO - Loaded initial state at epoch 16532 (state root = 0x854ca984298e6a0d9fc098b4e37f1b28727e545a8e4d3106188fda3587d14cdb, block root = 0x91e4f5129bc54f7284f1690e00803db360aeb63d34610d6995e1145bd01c0d92, block slot = 529024). Please ensure that the supplied initial state corresponds to the latest finalized block as of the start of epoch 16532 (slot 529024)."`}
  </pre>
  </div>
  ),

web/src/parts/get-started/GetStartedSlideout.tsx

@@ -12,7 +12,7 @@ export default function GetStartedSlideout() {
  <>
  <button
  type="button"
- className="z-50 inline-flex items-center rounded-md border border-transparent bg-fuchsia-500 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-fuchsia-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2"
+ className="z-50 inline-flex items-center rounded-md border border-transparent bg-gradient-to-r from-fuchsia-600 via-fuchsia-500 to-fuchsia-600 px-6 py-3 text-base font-medium text-white shadow-sm  outline-none ring-2 hover:ring-4 ring-fuchsia-300 ring-offset-2 hover:animate-pulse"
  onClick={() => setOpen(true)}
  >
  <span className="font-bold text-lg">Get started!</span>