Merge pull request #28 from nimbus-gui/Create-Logs

Create logs
2025-02-03 07:03:30 +00:00 · 2024-01-18 20:12:12 +02:00 · 2024-01-18 20:12:12 +02:00 · 2d7db9860b
commit 2d7db9860b
parent e2d7c40e9c ed93b616f3
15 changed files with 1379 additions and 5 deletions
--- a/package.json
+++ b/package.json
@ -47,18 +47,23 @@
    "react-confetti": "^6.1.0",
    "react-dom": "18",
    "react-form-stepper": "^2.0.3",
+    "react-lazylog": "^4.5.3",
    "react-markdown": "^9.0.0",
    "react-native": "^0.72.3",
    "react-native-svg": "^13.10.0",
    "react-redux": "^8.1.2",
    "react-router-dom": "^6.14.2",
    "react-syntax-highlighter": "^15.5.0",
+    "react-virtuoso": "^4.6.2",
+    "react-window": "^1.8.9",
+    "react-window-infinite-loader": "^1.0.9",
    "recharts": "^2.9.0",
    "tamagui": "1.36.4",
    "web-bip39": "^0.0.3",
    "web3-validator": "^2.0.2"
  },
  "devDependencies": {
+    "@faker-js/faker": "^8.3.1",
    "@fsouza/prettierd": "^0.24.2",
    "@storybook/addon-essentials": "^7.2.0",
    "@storybook/addon-interactions": "^7.2.0",
@ -72,6 +77,8 @@
    "@storybook/testing-library": "^0.2.0",
    "@types/react-color": "^3.0.6",
    "@types/react-syntax-highlighter": "^15.5.7",
+    "@types/react-window": "^1.8.8",
+    "@types/react-window-infinite-loader": "^1.0.9",
    "@types/uuid": "^9.0.2",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
--- a/public/icons/communities.svg
+++ b/public/icons/communities.svg
@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="20/communities">
+<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M14.0798 3.20004C14.0798 2.50219 13.5063 1.89727 12.7661 1.94915C6.9673 2.35567 2.35547 6.9675 1.94896 12.7663C1.89707 13.5065 2.502 14.08 3.19984 14.08H8.79984C9.52477 14.08 10.0287 13.4991 10.15 12.9007C10.2864 12.2277 10.618 11.6038 11.1108 11.111C11.6036 10.6182 12.2275 10.2866 12.9005 10.1502C13.4989 10.0289 14.0798 9.52497 14.0798 8.80004V3.20004ZM12.8333 2.9068C12.9746 2.8969 13.1198 3.01423 13.1198 3.20004V4.33245C10.8335 4.45078 8.66475 5.41122 7.03789 7.03809C5.41102 8.66495 4.45058 10.8337 4.33225 13.12H3.19984C3.01403 13.12 2.8967 12.9748 2.90661 12.8335C3.27967 7.51191 7.51171 3.27986 12.8333 2.9068ZM5.29368 13.12H6.73659C6.85187 11.4707 7.5583 9.91178 8.73494 8.73514C9.91159 7.5585 11.4705 6.85207 13.1198 6.73679V5.29388C11.0883 5.4112 9.1635 6.27012 7.71671 7.71691C6.26993 9.16369 5.41101 11.0885 5.29368 13.12ZM13.1198 7.69951C11.7255 7.81289 10.4103 8.41745 9.41377 9.41397C8.41725 10.4105 7.81269 11.7257 7.69932 13.12H8.79984C8.95856 13.12 9.15487 12.9776 9.20913 12.71C9.38278 11.8534 9.80479 11.0594 10.432 10.4322C11.0592 9.80499 11.8532 9.38297 12.7098 9.20933C12.9774 9.15507 13.1198 8.95876 13.1198 8.80004V7.69951Z" fill="#647084"/>
+</g>
+</svg>
--- a/public/icons/inactive.svg
+++ b/public/icons/inactive.svg
@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="16/inactive" clip-path="url(#clip0_1281_42311)">
+<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M2.09978 8.00003C2.09978 6.63461 2.16267 5.59091 2.32949 4.78583C2.49494 3.98733 2.75343 3.4699 3.11154 3.11179C3.46965 2.75368 3.98708 2.49519 4.78558 2.32973C5.59066 2.16291 6.63436 2.10002 7.99978 2.10002C9.3652 2.10002 10.4089 2.16291 11.214 2.32973C12.0125 2.49519 12.5299 2.75368 12.888 3.11179C13.2461 3.4699 13.5046 3.98733 13.6701 4.78583C13.8369 5.59091 13.8998 6.63461 13.8998 8.00003C13.8998 9.36545 13.8369 10.4091 13.6701 11.2142C13.5046 12.0127 13.2461 12.5302 12.888 12.8883C12.5299 13.2464 12.0125 13.5049 11.214 13.6703C10.4089 13.8371 9.3652 13.9 7.99978 13.9C6.63436 13.9 5.59066 13.8371 4.78558 13.6703C3.98708 13.5049 3.46965 13.2464 3.11154 12.8883C2.75343 12.5302 2.49494 12.0127 2.32949 11.2142C2.16267 10.4091 2.09978 9.36545 2.09978 8.00003ZM7.99978 0.900024C6.6152 0.900024 5.4714 0.962136 4.5421 1.15469C3.60623 1.34861 2.84241 1.68387 2.26302 2.26326C1.68363 2.84265 1.34837 3.60647 1.15445 4.54235C0.961892 5.47164 0.89978 6.61545 0.89978 8.00003C0.89978 9.38461 0.961892 10.5284 1.15445 11.4577C1.34837 12.3936 1.68363 13.1574 2.26302 13.7368C2.84241 14.3162 3.60623 14.6514 4.5421 14.8454C5.4714 15.0379 6.6152 15.1 7.99978 15.1C9.38436 15.1 10.5282 15.0379 11.4575 14.8454C12.3933 14.6514 13.1572 14.3162 13.7365 13.7368C14.3159 13.1574 14.6512 12.3936 14.8451 11.4577C15.0377 10.5284 15.0998 9.38461 15.0998 8.00003C15.0998 6.61545 15.0377 5.47164 14.8451 4.54235C14.6512 3.60647 14.3159 2.84265 13.7365 2.26326C13.1572 1.68387 12.3933 1.34861 11.4575 1.15469C10.5282 0.962136 9.38436 0.900024 7.99978 0.900024ZM6.99999 8.00011C6.99999 5.97412 6.99999 5.31635 6.69198 5.10279C6.54391 5.00012 6.32465 5.00012 5.99999 5.00012C5.67532 5.00012 5.45606 5.00012 5.30799 5.10279C4.99999 5.31635 4.99999 5.97412 4.99999 8.00012C4.99999 10.0261 4.99999 10.6839 5.30799 10.8975C5.45606 11.0001 5.67532 11.0001 5.99999 11.0001C6.32465 11.0001 6.54391 11.0001 6.69198 10.8975C6.99999 10.6839 6.99999 10.0261 6.99999 8.00012V8.00011ZM11 8.00012C11 5.97412 11 5.31635 10.692 5.10279C10.5439 5.00012 10.3247 5.00012 9.99999 5.00012C9.67532 5.00012 9.45606 5.00012 9.30799 5.10279C8.99999 5.31635 8.99999 5.97412 8.99999 8.00012C8.99999 10.0261 8.99999 10.6839 9.30799 10.8975C9.45606 11.0001 9.67532 11.0001 9.99999 11.0001C10.3247 11.0001 10.5439 11.0001 10.692 10.8975C11 10.6839 11 10.0261 11 8.00015V8.00012Z" fill="#E95460"/>
+</g>
+<defs>
+<clipPath id="clip0_1281_42311">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/public/icons/search.svg
+++ b/public/icons/search.svg
@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="20/search">
+<path id="body" fill-rule="evenodd" clip-rule="evenodd" d="M3.1 9.00005C3.1 5.74157 5.74152 3.10005 9 3.10005C12.2585 3.10005 14.9 5.74157 14.9 9.00005C14.9 12.2585 12.2585 14.9001 9 14.9001C5.74152 14.9001 3.1 12.2585 3.1 9.00005ZM9 1.90005C5.07878 1.90005 1.9 5.07883 1.9 9.00005C1.9 12.9213 5.07878 16.1001 9 16.1001C10.7446 16.1001 12.3423 15.4708 13.5784 14.4269L17.0757 17.9242L17.9243 17.0757L14.4269 13.5783C15.4708 12.3422 16.1 10.7446 16.1 9.00005C16.1 5.07883 12.9212 1.90005 9 1.90005Z" fill="#09101C"/>
+</g>
+</svg>
--- a/src/App.tsx
+++ b/src/App.tsx
@ -17,6 +17,7 @@ import CreateLocalNode from './pages/CreateLocalNode/CreateLocalNode'
 import ValidatorOnboarding from './pages/ValidatorOnboarding/ValidatorOnboarding'
 import Dashboard from './pages/Dashboard/Dashboard'
 import ValidatorManagement from './pages/ValidatorManagement/ValidatorManagement'
+import LogsPage from './pages/LogsPage/LogsPage'
 import { ethereumRopsten, wcV2InitOptions, apiKey } from './constants'
 import './App.css'

@ -56,6 +57,7 @@ const router = createBrowserRouter([
  { path: '/create-local-node', element: <CreateLocalNode /> },
  { path: '/validator-onboarding', element: <ValidatorOnboarding /> },
  { path: '/dashboard', element: <Dashboard /> },
+  { path: '/logs', element: <LogsPage /> },
  { path: '/validator-management', element: <ValidatorManagement /> },
 ])

--- a/src/pages/LogsPage/HeaderBtns.tsx
+++ b/src/pages/LogsPage/HeaderBtns.tsx
@ -0,0 +1,61 @@
+import { Button, DropdownMenu, Input } from '@status-im/components'
+import { Stack, XStack } from 'tamagui'
+import { SearchIcon, DropdownIcon } from '@status-im/icons'
+
+import SwitchComponent from './SwitchComponent'
+
+type HeaderBtnsProps = {
+  setDropdownMenuItem: (dropdownMenuItem: string) => void
+  dropdownMenuItem: string
+  timestamps: boolean
+  setTimestamps: (timestamps: boolean) => void
+  searchInput: string
+  setSearchInput: (searchInput: string) => void
+  triggerSearch: (isTriggered: boolean) => void
+}
+
+const HeaderBtns = ({
+  setDropdownMenuItem,
+  dropdownMenuItem,
+  timestamps,
+  setTimestamps,
+  searchInput,
+  setSearchInput,
+  triggerSearch,
+}: HeaderBtnsProps) => {
+  return (
+    <XStack space={'$4'}>
+      <Input
+        variant="retractable"
+        color={'black'}
+        icon={<SearchIcon size={16} />}
+        onChange={e => setSearchInput(e.target.valueOf().toString())}
+        value={searchInput}
+        onBlur={() => triggerSearch(true)}
+      ></Input>
+      <Stack>
+        <DropdownMenu>
+          <Button variant="outline" icon={<DropdownIcon size={16} />}>
+            {dropdownMenuItem}
+          </Button>
+          <DropdownMenu.Content>
+            <DropdownMenu.Item
+              label="Validator"
+              onSelect={() => setDropdownMenuItem('Validator')}
+            />
+            <DropdownMenu.Item label="Critical" onSelect={() => setDropdownMenuItem('Critical')} />
+            <DropdownMenu.Item label="Warnings" onSelect={() => setDropdownMenuItem('Warnings')} />
+          </DropdownMenu.Content>
+        </DropdownMenu>
+      </Stack>
+      <Button
+        variant="outline"
+        icon={<SwitchComponent timestamps={timestamps} setTimestamps={setTimestamps} />}
+      >
+        Timestamps
+      </Button>
+    </XStack>
+  )
+}
+
+export default HeaderBtns
--- a/src/pages/LogsPage/LogsPage.tsx
+++ b/src/pages/LogsPage/LogsPage.tsx
@ -0,0 +1,93 @@
+import { Stack, XStack, YStack } from 'tamagui'
+
+import LeftSidebar from '../../components/General/LeftSidebar/LeftSidebar'
+import RightSidebar from '../../components/General/RightSideBar/RightSidebar'
+import LogsTerminal from './LogsTerminal'
+import LogsSumCard from './LogsSumCard'
+import SupportCard from './SupportCard'
+import { useEffect, useState } from 'react'
+import HeaderBtns from './HeaderBtns'
+import TitleLogo from '../../components/General/TitleLogo'
+
+const LogsPage = () => {
+  const [highLightSearched, setHighLightSearched] = useState(false)
+  const [searchInput, setSearchInput] = useState('')
+  const [timestamps, setTimestamps] = useState(false)
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
+  const [dropdownMenuItem, setDropdownMenuItem] = useState('Validator')
+
+  const triggerSearch = (isTriggered: boolean) => {
+    setHighLightSearched(isTriggered)
+  }
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(+window.innerWidth)
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+  return (
+    <XStack style={{ height: '100vh' }}>
+      <LeftSidebar />
+      <YStack
+        space="$4"
+        alignItems="start"
+        px="24px"
+        minWidth="500px"
+        width="50vh"
+        style={{
+          flexGrow: '1',
+          marginTop: '16px',
+          overflowY: 'auto',
+        }}
+        className={'transparent-scrollbar'}
+      >
+        <XStack justifyContent="space-between" width={'100%'} flexWrap="wrap  ">
+          <TitleLogo />
+          <HeaderBtns
+            dropdownMenuItem={dropdownMenuItem}
+            setDropdownMenuItem={setDropdownMenuItem}
+            setTimestamps={setTimestamps}
+            timestamps={timestamps}
+            searchInput={searchInput}
+            setSearchInput={setSearchInput}
+            triggerSearch={triggerSearch}
+          />
+        </XStack>
+        <Stack style={{ width: '100%', alignItems: 'center', flexWrap: 'wrap' }}>
+          <LogsTerminal
+            windowWidth={windowWidth}
+            dropdownMenuItem={dropdownMenuItem}
+            timestamps={timestamps}
+            searchInput={searchInput}
+            setSearchInput={setSearchInput}
+            highLightSearched={highLightSearched}
+          />
+          <Stack
+            space="$4"
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              flexWrap: 'wrap',
+              gap: '1vw',
+              width: '100%',
+            }}
+            width={'90%'}
+          >
+            <LogsSumCard type={'Critical'} count={16} countActive={2} countInactive={3} />
+            <LogsSumCard type={'Warning'} count={9} countActive={2} countInactive={7} />
+            <LogsSumCard type={'Critical'} count={6} countActive={2} countInactive={0} />
+            <SupportCard />
+          </Stack>
+        </Stack>
+      </YStack>
+      <RightSidebar />
+    </XStack>
+  )
+}
+
+export default LogsPage
--- a/src/pages/LogsPage/LogsSumCard.tsx
+++ b/src/pages/LogsPage/LogsSumCard.tsx
@ -0,0 +1,66 @@
+import { Text } from '@status-im/components'
+import { Separator, XStack, YStack } from 'tamagui'
+import IconText from '../../components/General/IconText'
+import Icon from '../../components/General/Icon'
+import DashboardCardWrapper from '../Dashboard/DashboardCardWrapper'
+
+type LogsSumCardProps = {
+  type: string
+  count: number
+  countActive?: number
+  countInactive?: number
+}
+const LogsSumCard = ({ type, count, countActive, countInactive }: LogsSumCardProps) => {
+  return (
+    <DashboardCardWrapper maxWidth="260px">
+      <YStack
+        style={{
+          borderRadius: '16px',
+          border: 'none',
+          backgroundColor: '#fff',
+          flexGrow: '1',
+          minWidth: '280px',
+        }}
+      >
+        <XStack
+          justifyContent="space-between"
+          style={{
+            padding: '8px 16px',
+            position: 'relative',
+            flexGrow: '1',
+          }}
+        >
+          <YStack space={'$3'} width={'100%'}>
+            <XStack justifyContent="space-between" width={'100%'}>
+              <Text size={27} weight={'semibold'}>
+                {type}
+              </Text>
+              <Text size={15} weight={'semibold'}>
+                {'>'}
+              </Text>
+            </XStack>
+            <XStack justifyContent="space-between" width={'100%'}>
+              <Text size={27} weight={'semibold'}>
+                {count}
+              </Text>
+              <Text size={19} weight={'semibold'} color="#84888E">
+                Per Minute
+              </Text>
+            </XStack>
+          </YStack>
+        </XStack>
+        <Separator borderColor={'#e3e3e3'} style={{ marginTop: 'auto' }} />
+        <XStack space={'$2'} style={{ padding: '10px 16px' }}>
+          <IconText icon={<Icon src="icons/active.svg" width={16} />} weight={'semibold'}>
+            {countActive + ' Active'}
+          </IconText>
+          <IconText icon={<Icon src="icons/inactive.svg" width={16} />} weight={'semibold'}>
+            {countInactive + ' Inactive'}
+          </IconText>
+        </XStack>
+      </YStack>
+    </DashboardCardWrapper>
+  )
+}
+
+export default LogsSumCard
--- a/src/pages/LogsPage/LogsTerminal.tsx
+++ b/src/pages/LogsPage/LogsTerminal.tsx
@ -0,0 +1,155 @@
+import { Button } from '@status-im/components'
+
+import { VariableSizeList as List } from 'react-window'
+import InfiniteLoader from 'react-window-infinite-loader'
+import './scroller.css'
+import { Stack } from 'tamagui'
+import { useEffect, useRef, useState } from 'react'
+import TerminalRow from './TerminalRow'
+
+type DataType = {
+  option: string
+  description: string
+}
+
+type LogsTerminalProps = {
+  windowWidth: number
+  dropdownMenuItem: string
+  timestamps: boolean
+  searchInput: string
+  setSearchInput: (searchInput: string) => void
+  highLightSearched: boolean
+}
+
+const fetchMoreData = (): Promise<DataType[]> => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      const newData: DataType[] = []
+      for (let i = 0; i < 10; i++) {
+        newData.push({ option: `Option ${i}`, description: `Description ${i}` })
+      }
+      resolve(newData)
+    }, 500)
+  })
+}
+
+const LogsTerminal = ({ windowWidth, timestamps, searchInput }: LogsTerminalProps) => {
+  const [data, setData] = useState<DataType[]>([])
+  const [loadedIndexes, setLoadedIndexes] = useState<{ [key: number]: boolean }>({})
+  const listRef = useRef<List | null>(null)
+
+  const [shouldAutoScroll, setShouldAutoScroll] = useState(true)
+
+  useEffect(() => {
+    if (shouldAutoScroll) {
+      setTimeout(() => {
+        listRef.current?.scrollToItem(data.length - 1, 'end')
+      }, 500)
+    }
+  }, [data.length, shouldAutoScroll])
+
+  const loadMoreItems = () => {
+    fetchMoreData().then(newItems => {
+      setData(prevData => [...prevData, ...newItems])
+    })
+  }
+  const isItemLoaded = (index: number) => !!loadedIndexes[index]
+
+  const addNewLog = () => {
+    const newLog: DataType = {
+      option: `--new-option-${data.length + 1}`,
+      description: `New log entry ${data.length + 1} ${Math.random()}`,
+    }
+
+    const newIndex = data.length
+    setData(prevData => [...prevData, newLog])
+    setLoadedIndexes(prev => ({ ...prev, [newIndex]: true }))
+    if (shouldAutoScroll) {
+      listRef.current?.scrollToItem(data.length, 'end')
+    }
+  }
+
+  const handleScroll = ({ scrollTop, scrollHeight, clientHeight }: any) => {
+    const isAtBottom = scrollTop + clientHeight >= scrollHeight
+
+    if (isAtBottom) {
+      setShouldAutoScroll(true)
+    } else {
+      setShouldAutoScroll(false)
+    }
+  }
+  function itemSize(index: number) {
+    const oneLineCountChars = 165
+    const descriptionLength = data[index].description.length
+    const value1 = 76
+    const value2 = 120
+    const value3 = 250
+
+    if (descriptionLength <= oneLineCountChars) {
+      return value1
+    } else if (descriptionLength <= oneLineCountChars * 2) {
+      return value2
+    } else {
+      return value3
+    }
+  }
+  return (
+    <Stack
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '1fr',
+      }}
+    >
+      <InfiniteLoader
+        itemCount={data.length + 1}
+        isItemLoaded={isItemLoaded}
+        loadMoreItems={loadMoreItems}
+      >
+        {({ onItemsRendered, ref }) => (
+          <List
+            ref={(list: List | null) => {
+              ref(list)
+              listRef.current = list
+            }}
+            className="custom-scroll"
+            height={650}
+            width={windowWidth - 500}
+            itemCount={data.length}
+            itemData={data}
+            itemSize={itemSize}
+            onItemsRendered={onItemsRendered}
+            onScroll={handleScroll}
+            style={{
+              borderRadius: '25px',
+              border: '1px solid #E7EAEE',
+            }}
+          >
+            {({ index, style }) => {
+              const highlight =
+                searchInput && data[index].description.split(' ').includes(searchInput)
+                  ? true
+                  : false
+              // now we only check for the existing text at the moment
+              // I have to move this statemant in the terminalRow component
+              return (
+                <Stack style={style}>
+                  <TerminalRow
+                    data={data[index]}
+                    index={index}
+                    timestamps={timestamps}
+                    highlight={highlight}
+                  />
+                </Stack>
+              )
+            }}
+          </List>
+        )}
+      </InfiniteLoader>
+      <Button fullWidth onPress={() => addNewLog()}>
+        Press to add log
+      </Button>
+    </Stack>
+  )
+}
+
+export default LogsTerminal
--- a/src/pages/LogsPage/SupportCard.tsx
+++ b/src/pages/LogsPage/SupportCard.tsx
@ -0,0 +1,54 @@
+import { Text } from '@status-im/components'
+import { Separator, XStack, YStack } from 'tamagui'
+import IconText from '../../components/General/IconText'
+import Icon from '../../components/General/Icon'
+import DashboardCardWrapper from '../Dashboard/DashboardCardWrapper'
+
+const SupportCard = () => {
+  return (
+    <DashboardCardWrapper>
+      <YStack
+        style={{
+          borderRadius: '16px',
+          border: 'none',
+          backgroundColor: '#fff',
+          flexGrow: '1',
+          minWidth: '280px',
+        }}
+      >
+        <XStack
+          justifyContent="space-between"
+          style={{
+            padding: '8px 16px',
+            position: 'relative',
+            flexGrow: '1',
+          }}
+        >
+          <YStack space={'$3'} width={'100%'}>
+            <XStack justifyContent="space-between" width={'100%'}>
+              <Text size={27} weight={'semibold'}>
+                Get Support
+              </Text>
+              <Text size={15} weight={'semibold'}>
+                {'>'}
+              </Text>
+            </XStack>
+            <XStack>
+              <Text size={27} weight={'semibold'}>
+                Nimbus
+              </Text>
+            </XStack>
+          </YStack>
+        </XStack>
+        <Separator borderColor={'#e3e3e3'} style={{ marginTop: 'auto' }} />
+        <XStack space={'$4'} style={{ padding: '10px 16px' }}>
+          <IconText icon={<Icon src="icons/communities.svg" width={16} />} weight={'semibold'}>
+            {'Join Community'}
+          </IconText>
+        </XStack>
+      </YStack>
+    </DashboardCardWrapper>
+  )
+}
+
+export default SupportCard
--- a/src/pages/LogsPage/SwitchComponent.tsx
+++ b/src/pages/LogsPage/SwitchComponent.tsx
@ -0,0 +1,31 @@
+import { Switch } from 'tamagui'
+type SwitchComponentProps = {
+  timestamps: boolean
+  setTimestamps: (timestamps: boolean) => void
+}
+
+const SwitchComponent = ({ timestamps, setTimestamps }: SwitchComponentProps) => {
+  const handleCheckedChange = () => {
+    setTimestamps(!timestamps)
+  }
+  return (
+    <Switch
+      size="$1"
+      style={{ backgroundColor: timestamps ? '#4360df' : 'grey', border: 'none' }}
+      checked={timestamps}
+      onCheckedChange={handleCheckedChange}
+    >
+      <Switch.Thumb
+        style={{
+          right: 7,
+          bottom: 3,
+          backgroundColor: '#fff',
+          height: '18px',
+          width: '18px',
+        }}
+      />
+    </Switch>
+  )
+}
+
+export default SwitchComponent
--- a/src/pages/LogsPage/TerminalRow.tsx
+++ b/src/pages/LogsPage/TerminalRow.tsx
@ -0,0 +1,74 @@
+import { Text } from '@status-im/components'
+import { Stack, XStack } from 'tamagui'
+import { faker } from '@faker-js/faker'
+
+type DataType = {
+  option: string
+  description: string
+}
+interface RowProps {
+  data: DataType | undefined
+  index: number
+  timestamps: boolean
+  highlight: boolean
+}
+function cutSentenceToRandomWords(sentence: string) {
+  const randomLength = Math.floor(Math.random() * 100) + 1
+  let words = sentence.split(' ')
+  let slicedWords = words.slice(0, randomLength)
+  return slicedWords.join(' ')
+}
+
+const TerminalRow = ({ data, index, timestamps, highlight }: RowProps) => {
+  if (!data) {
+    return <Text size={19}>Loading...</Text>
+  }
+
+  const randomName = faker.person.firstName()
+
+  const { option, description } = data
+
+  return (
+    <XStack style={{ fontFamily: 'monospace' }}>
+      <Stack
+        style={{
+          alignContent: 'flex-start',
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginRight: '20px',
+          width: '30px',
+          backgroundColor: highlight ? 'yellow' : '#f5f6f8',
+          color: '#A1ABBD',
+        }}
+      >
+        {index}
+      </Stack>
+      {timestamps && (
+        <Stack>
+          {new Date(Date.now()).getHours()}:{new Date(Date.now()).getMinutes()}:
+          {new Date(Date.now()).getSeconds()}
+        </Stack>
+      )}
+      <Stack
+        style={{
+          alignContent: 'flex-start',
+          marginRight: '20px',
+          marginLeft: '20px',
+          wordWrap: 'break-word',
+          maxWidth: '89%',
+          height: '100%',
+          backgroundColor: highlight ? 'yellow' : ' ',
+        }}
+      >
+        {option} {description} -- {randomName}{' '}
+        {cutSentenceToRandomWords(`
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
+        nobis, numquam non rerum illo eligendi quaerat neque mollitia temporibus quam placeat
+        repellat asperiores veritatis officiis unde sed praesentium obcaecati nihil? Quasi, quae
+        eveniet cupiditate mollitia est facilis ea vero, aperiam dolore dolor doloribus labore`)}
+      </Stack>
+    </XStack>
+  )
+}
+
+export default TerminalRow
--- a/src/pages/LogsPage/exampleData.ts
+++ b/src/pages/LogsPage/exampleData.ts
@ -0,0 +1,630 @@
+type DataType = {
+  option: string
+  description: string
+}
+export const exampleData: DataType[] = [
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--config-file',
+    description: 'Loads the configuration from a TOML file.',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+  {
+    option: '--log-level',
+    description:
+      'Sets the log level for process and topics (e.g., DEBUG; TRACE:discv5,libp2p; REQUIRED:none; DISABLED:none) [INFO].',
+  },
+]
--- a/src/pages/LogsPage/scroller.css
+++ b/src/pages/LogsPage/scroller.css
@ -0,0 +1,9 @@
+.custom-scroll {
+  overflow: auto !important;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.custom-scroll::-webkit-scrollbar {
+  display: none;
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -1591,7 +1591,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@babel/runtime@npm:^7.1.2":
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.7":
  version: 7.23.2
  resolution: "@babel/runtime@npm:7.23.2"
  dependencies:
@ -3017,6 +3017,13 @@ __metadata:
  languageName: node
  linkType: hard

+"@faker-js/faker@npm:^8.3.1":
+  version: 8.3.1
+  resolution: "@faker-js/faker@npm:8.3.1"
+  checksum: 33efe912411fe61f43b313784a9ce041dfbfb54bc3b2f7b923a547f97beb6b3763534f9c37af25ab330982e6b36e6f7b040dfb35c115deb8c789d8ada413bd94
+  languageName: node
+  linkType: hard
+
 "@fal-works/esbuild-plugin-global-externals@npm:^2.1.2":
  version: 2.1.2
  resolution: "@fal-works/esbuild-plugin-global-externals@npm:2.1.2"
@ -3749,6 +3756,15 @@ __metadata:
  languageName: node
  linkType: hard

+"@mattiasbuelens/web-streams-polyfill@npm:^0.2.0":
+  version: 0.2.1
+  resolution: "@mattiasbuelens/web-streams-polyfill@npm:0.2.1"
+  dependencies:
+    "@types/whatwg-streams": ^0.0.7
+  checksum: 8de93431b966c9bee6b7fe249bb8933e119de31e5e0a3c9853f528fd64cb284e498f7587ca2b8a7859db566a312300dda38f3b953c591930db625f69b04d3914
+  languageName: node
+  linkType: hard
+
 "@mdx-js/react@npm:^2.1.5":
  version: 2.3.0
  resolution: "@mdx-js/react@npm:2.3.0"
@ -8806,6 +8822,25 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/react-window-infinite-loader@npm:^1.0.9":
+  version: 1.0.9
+  resolution: "@types/react-window-infinite-loader@npm:1.0.9"
+  dependencies:
+    "@types/react": "*"
+    "@types/react-window": "*"
+  checksum: 9f2c27f24bfa726ceaef6612a4adbda745f3455c877193f68dfa48591274c670a6df4fa6870785cff5f948e289ceb9a247fb7cbf67e3cd555ab16d11866fd63f
+  languageName: node
+  linkType: hard
+
+"@types/react-window@npm:*, @types/react-window@npm:^1.8.8":
+  version: 1.8.8
+  resolution: "@types/react-window@npm:1.8.8"
+  dependencies:
+    "@types/react": "*"
+  checksum: 253c9d6e0c942f34633edbddcbc369324403c42458ff004457c5bd5972961d8433a909c0cc1a89c918063d5eb85ecbdd774142af2555fae61f4ceb3ba9884b5a
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:*, @types/react@npm:18, @types/react@npm:>=16":
  version: 18.2.21
  resolution: "@types/react@npm:18.2.21"
@ -8930,6 +8965,13 @@ __metadata:
  languageName: node
  linkType: hard

+"@types/whatwg-streams@npm:^0.0.7":
+  version: 0.0.7
+  resolution: "@types/whatwg-streams@npm:0.0.7"
+  checksum: 324b535e0d45fc2e47c5b5132f3d10249db893f702e27c2496c927e85055ab95cd267205d01a6dfb638f1c3c46eb76a8ccace2fc7bbd099a7e4009549933f0c7
+  languageName: node
+  linkType: hard
+
 "@types/yargs-parser@npm:*":
  version: 21.0.0
  resolution: "@types/yargs-parser@npm:21.0.0"
@ -11477,7 +11519,7 @@ __metadata:
  languageName: node
  linkType: hard

-"clsx@npm:^1.1.1, clsx@npm:^1.2.1":
+"clsx@npm:^1.0.4, clsx@npm:^1.1.1, clsx@npm:^1.2.1":
  version: 1.2.1
  resolution: "clsx@npm:1.2.1"
  checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
@ -12551,6 +12593,16 @@ __metadata:
  languageName: node
  linkType: hard

+"dom-helpers@npm:^5.1.3":
+  version: 5.2.1
+  resolution: "dom-helpers@npm:5.2.1"
+  dependencies:
+    "@babel/runtime": ^7.8.7
+    csstype: ^3.0.2
+  checksum: 863ba9e086f7093df3376b43e74ce4422571d404fc9828bf2c56140963d5edf0e56160f9b2f3bb61b282c07f8fc8134f023c98fd684bddcb12daf7b0f14d951c
+  languageName: node
+  linkType: hard
+
 "dom-serializer@npm:0":
  version: 0.2.2
  resolution: "dom-serializer@npm:0.2.2"
@ -14094,6 +14146,13 @@ __metadata:
  languageName: node
  linkType: hard

+"fetch-readablestream@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "fetch-readablestream@npm:0.2.0"
+  checksum: 247ec167f3afa9257176ffec3d3c42cb01dd5474ae00d4059af5ea2dd78b2b9c6e1df503c228ecaa9f208562dc47b1b27d981830a47b187e05828fec38bc8f4d
+  languageName: node
+  linkType: hard
+
 "fetch-retry@npm:^5.0.2":
  version: 5.0.6
  resolution: "fetch-retry@npm:5.0.6"
@ -15205,6 +15264,13 @@ __metadata:
  languageName: node
  linkType: hard

+"immutable@npm:^3.8.2":
+  version: 3.8.2
+  resolution: "immutable@npm:3.8.2"
+  checksum: 41909b386950ff84ca3cfca77c74cfc87d225a914e98e6c57996fa81a328da61a7c32216d6d5abad40f54747ffdc5c4b02b102e6ad1a504c1752efde8041f964
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^2.0.0":
  version: 2.0.0
  resolution: "import-fresh@npm:2.0.0"
@ -17217,7 +17283,7 @@ __metadata:
  languageName: node
  linkType: hard

-"lodash@npm:^4.0.1, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.21":
+"lodash@npm:^4.0.1, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.21, lodash@npm:^4.17.4":
  version: 4.17.21
  resolution: "lodash@npm:4.17.21"
  checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@ -17501,7 +17567,7 @@ __metadata:
  languageName: node
  linkType: hard

-"memoize-one@npm:^5.0.0":
+"memoize-one@npm:>=3.1.1 <6, memoize-one@npm:^5.0.0":
  version: 5.2.1
  resolution: "memoize-one@npm:5.2.1"
  checksum: a3cba7b824ebcf24cdfcd234aa7f86f3ad6394b8d9be4c96ff756dafb8b51c7f71320785fbc2304f1af48a0467cbbd2a409efc9333025700ed523f254cb52e3d
@ -18350,6 +18416,13 @@ __metadata:
  languageName: node
  linkType: hard

+"mitt@npm:^1.1.2":
+  version: 1.2.0
+  resolution: "mitt@npm:1.2.0"
+  checksum: 53abb94c6203250e2498e152ae096288c4866c6aab1dc093922084a7414af4aa6cda5a51d480267a8f0bd7908b0e896099bc953317aca8a18672dc67ee7e923d
+  languageName: node
+  linkType: hard
+
 "mkdirp-classic@npm:^0.5.2":
  version: 0.5.3
  resolution: "mkdirp-classic@npm:0.5.3"
@ -18483,6 +18556,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "nimbus-gui@workspace:."
  dependencies:
+    "@faker-js/faker": ^8.3.1
    "@fsouza/prettierd": ^0.24.2
    "@nivo/line": ^0.83.0
    "@nivo/pie": ^0.83.0
@ -18508,6 +18582,8 @@ __metadata:
    "@types/react-color": ^3.0.6
    "@types/react-dom": 18
    "@types/react-syntax-highlighter": ^15.5.7
+    "@types/react-window": ^1.8.8
+    "@types/react-window-infinite-loader": ^1.0.9
    "@types/uuid": ^9.0.2
    "@typescript-eslint/eslint-plugin": ^6.0.0
    "@typescript-eslint/parser": ^6.0.0
@ -18532,12 +18608,16 @@ __metadata:
    react-confetti: ^6.1.0
    react-dom: 18
    react-form-stepper: ^2.0.3
+    react-lazylog: ^4.5.3
    react-markdown: ^9.0.0
    react-native: ^0.72.3
    react-native-svg: ^13.10.0
    react-redux: ^8.1.2
    react-router-dom: ^6.14.2
    react-syntax-highlighter: ^15.5.0
+    react-virtuoso: ^4.6.2
+    react-window: ^1.8.9
+    react-window-infinite-loader: ^1.0.9
    recharts: ^2.9.0
    storybook: ^7.2.0
    storybook-addon-react-router-v6: ^2.0.5
@ -19596,7 +19676,7 @@ __metadata:
  languageName: node
  linkType: hard

-"prop-types@npm:*, prop-types@npm:^15.5.10, prop-types@npm:^15.5.8, prop-types@npm:^15.6.0, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
+"prop-types@npm:*, prop-types@npm:^15.5.10, prop-types@npm:^15.5.8, prop-types@npm:^15.6.0, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2":
  version: 15.8.1
  resolution: "prop-types@npm:15.8.1"
  dependencies:
@ -20034,6 +20114,25 @@ __metadata:
  languageName: node
  linkType: hard

+"react-lazylog@npm:^4.5.3":
+  version: 4.5.3
+  resolution: "react-lazylog@npm:4.5.3"
+  dependencies:
+    "@mattiasbuelens/web-streams-polyfill": ^0.2.0
+    fetch-readablestream: ^0.2.0
+    immutable: ^3.8.2
+    mitt: ^1.1.2
+    prop-types: ^15.6.1
+    react-string-replace: ^0.4.1
+    react-virtualized: ^9.21.0
+    text-encoding-utf-8: ^1.0.1
+    whatwg-fetch: ^2.0.4
+  peerDependencies:
+    react: ">=16.3.0"
+  checksum: e3a53becd4b985d84ed0da6462cd8f4422417f3f880a9b70e360d4525bc4f46304ebb6b652287de7dca49c7c53b264875fb87806bacbcbc5d295402dfac5cda1
+  languageName: node
+  linkType: hard
+
 "react-lifecycles-compat@npm:^3.0.4":
  version: 3.0.4
  resolution: "react-lifecycles-compat@npm:3.0.4"
@ -20335,6 +20434,15 @@ __metadata:
  languageName: node
  linkType: hard

+"react-string-replace@npm:^0.4.1":
+  version: 0.4.4
+  resolution: "react-string-replace@npm:0.4.4"
+  dependencies:
+    lodash: ^4.17.4
+  checksum: 88c41d5b0d97c9d0a9de5eb029e48ac8e3d088989329efc5333df7e85bd1b388ef61adc938b614beb122e65f3f472bffe69ab72c8dece046ab4ddd7f538f10a0
+  languageName: node
+  linkType: hard
+
 "react-style-singleton@npm:^2.2.1":
  version: 2.2.1
  resolution: "react-style-singleton@npm:2.2.1"
@ -20382,6 +20490,56 @@ __metadata:
  languageName: node
  linkType: hard

+"react-virtualized@npm:^9.21.0":
+  version: 9.22.5
+  resolution: "react-virtualized@npm:9.22.5"
+  dependencies:
+    "@babel/runtime": ^7.7.2
+    clsx: ^1.0.4
+    dom-helpers: ^5.1.3
+    loose-envify: ^1.4.0
+    prop-types: ^15.7.2
+    react-lifecycles-compat: ^3.0.4
+  peerDependencies:
+    react: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0
+    react-dom: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0
+  checksum: 01f5ed8d8db7c831d592172946c2b61fcb409bf6cbc84500468f12d6cf9b7e60453e332fac02dd608480d23cb14421f7f17716393e623e83bb10a7763fad9e2c
+  languageName: node
+  linkType: hard
+
+"react-virtuoso@npm:^4.6.2":
+  version: 4.6.2
+  resolution: "react-virtuoso@npm:4.6.2"
+  peerDependencies:
+    react: ">=16 || >=17 || >= 18"
+    react-dom: ">=16 || >=17 || >= 18"
+  checksum: 97daa55b68bb36c25a4a4d2fdd7a60418a019113551018e899f0f5689be57cdadd539e2f10d4d6cd96aa79105e6a5dc03ba6af9856cca168d0ec8e74b231f8fd
+  languageName: node
+  linkType: hard
+
+"react-window-infinite-loader@npm:^1.0.9":
+  version: 1.0.9
+  resolution: "react-window-infinite-loader@npm:1.0.9"
+  peerDependencies:
+    react: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0
+    react-dom: ^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0
+  checksum: 9ba451e827ddf1605ae12d26fe8eab1e70928e528b16c0a3443a98dcf7df93a362b0c2a0f64e6e4465b136fee6ccdfda3b1f7fa6748a441cb76a03f926559336
+  languageName: node
+  linkType: hard
+
+"react-window@npm:^1.8.9":
+  version: 1.8.9
+  resolution: "react-window@npm:1.8.9"
+  dependencies:
+    "@babel/runtime": ^7.0.0
+    memoize-one: ">=3.1.1 <6"
+  peerDependencies:
+    react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
+  checksum: cefa232f4f37269d292529ef15780fb108123d6bb5beee19eeac657e75cf8d4664be66f2da04baf0cb1bc64c5ab3d83a88199c3358f023b78940acd37b0673b2
+  languageName: node
+  linkType: hard
+
 "react@npm:18":
  version: 18.2.0
  resolution: "react@npm:18.2.0"
@ -21977,6 +22135,13 @@ __metadata:
  languageName: node
  linkType: hard

+"text-encoding-utf-8@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "text-encoding-utf-8@npm:1.0.2"
+  checksum: ec4c15d50e738c5dba7327ad432ebf0725ec75d4d69c0bd55609254c5a3bc5341272d7003691084a0a73d60d981c8eb0e87603676fdb6f3fed60f4c9192309f9
+  languageName: node
+  linkType: hard
+
 "text-table@npm:^0.2.0":
  version: 0.2.0
  resolution: "text-table@npm:0.2.0"
@ -23080,6 +23245,13 @@ __metadata:
  languageName: node
  linkType: hard

+"whatwg-fetch@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "whatwg-fetch@npm:2.0.4"
+  checksum: de7c65a68d7d62e2f144a6b30293370b3ad82b65ebcd68f2ac8e8bbe7ede90febd98ba9486b78c1cbc950e0e8838fa5c2727f939899ab3fc7b71a04be52d33a5
+  languageName: node
+  linkType: hard
+
 "whatwg-fetch@npm:^3.0.0":
  version: 3.6.18
  resolution: "whatwg-fetch@npm:3.6.18"