-
-
-
- {children}
-
+
+
+
+ {children}
+
- )
+ );
}
diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx
deleted file mode 100644
index 1e75b8ad..00000000
--- a/src/components/Map/index.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-'use client'
-import React, { useState, useEffect } from 'react'
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
-import MarkerIcon from '../../assets/marker_map_icon.png'
-import L, { LatLngExpression } from 'leaflet'
-import 'leaflet/dist/leaflet.css'
-import styles from './style.module.css'
-import { useMapContext } from '../../context/MapContext'
-import { Alert, Box, LinearProgress, Skeleton } from '@mui/material'
-import { LocationNode } from '../../shared/types/locationNodeType'
-
-export default function Map() {
- const [isClient, setIsClient] = useState(false)
- const { data, loading, error } = useMapContext()
-
- useEffect(() => {
- setIsClient(true)
- }, [])
-
- if (loading || !data) {
- return (
-
-
-
- )
- }
-
- if (error) {
- return (
-
-
- Error loading map data: {error?.message || 'Something went wrong'}
-
-
- )
- }
-
- const center: [number, number] = [25, 0]
-
- const customIcon = L.icon({
- iconUrl: MarkerIcon.src,
- iconSize: [36, 36],
- iconAnchor: [19, 36],
- popupAnchor: [0, -36]
- })
-
- const getRandomOffset = (): number => {
- const min = 0.0002
- const max = 0.0006
- const randomValue = Math.random() * (max - min) + min
- return Math.random() < 0.5 ? -randomValue : randomValue
- }
-
- const offsetCoordinates = (latitude: number, longitude: number): LatLngExpression => {
- const latOffset = getRandomOffset()
- const lngOffset = getRandomOffset()
- return [latitude + latOffset, longitude + lngOffset]
- }
-
- const groupedNodesByCity = data.reduce(
- (
- acc: Record
,
- node: LocationNode
- ) => {
- const { city, lat, lon, country, count } = node
-
- if (city) {
- if (!acc[city]) {
- acc[city] = { lat, lon, country, count }
- } else {
- acc[city].count += count
- }
- }
-
- return acc
- },
- {}
- )
-
- return (
- isClient && (
-
-
- {!loading &&
- !error &&
- Object.entries(groupedNodesByCity).map(
- ([city, { lat, lon, country, count }]) => {
- if (
- typeof lat !== 'number' ||
- typeof lon !== 'number' ||
- isNaN(lat) ||
- isNaN(lon)
- ) {
- console.warn(
- `Invalid coordinates for city: ${city}, lat: ${lat}, lon: ${lon}`
- )
- return null
- }
-
- return (
-
-
- City: {city}
-
- Country: {country}
-
- Total Nodes: {count}
-
-
-
- )
- }
- )}
- {loading && }
-
- )
- )
-}
diff --git a/src/components/Map/style.module.css b/src/components/Map/style.module.css
deleted file mode 100644
index 241b799d..00000000
--- a/src/components/Map/style.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.popup{
- width: 420px;
-}
-
-.mapContainer {
- animation: fadeIn 0.5s ease-in;
-}
-
-@keyframes fadeIn {
- from {
- opacity: 0;
- transform: translateY(10px);
- }
- to {
- opacity: 1;
- transform: translateY(0);
- }
-}
\ No newline at end of file
diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx
deleted file mode 100644
index d3bf76e5..00000000
--- a/src/components/Navigation/index.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client'
-import Image from 'next/image'
-import logo from '../../assets/logo.svg'
-import styles from './style.module.css'
-// import { ConnectButton } from '@rainbow-me/rainbowkit'
-import Link from 'next/link'
-import { getRoutes } from '../../config'
-
-const NavBar = () => {
- const routes = getRoutes()
-
- return (
-
-
-
- Phase 1 of Ocean Nodes is complete. We're building towards Phase 2.
-
-
- Join us as an
Alpha GPU Node Tester and help build the
- decentralized GPU network of tomorrow.{' '}
-
- View details here
-
-
-
-
-
-
-
-
-
-
- {Object.values(routes).map((route) => (
-
- {route.name}
-
- ))}
-
- {/*
*/}
-
-
- {keyValuePairs.map((item) => (
-
-
{item.key}
-
{String(item.value)}
-
- ))}
-
-
Connected Nodes
- {isLoadingNodePeers && (
-
-
-
- )}
-
- {nodePeers.length > 0 ? (
- nodePeers.map((address) => (
-
- {truncateString(address, 12)}
-
- ))
- ) : (
-
There are no nodes connected
- )}
-
-
-
{
- setCurrentPage(page)
- setPageSize(size)
- }}
- />
-
- )
-}
-
-export default CountriesPage
diff --git a/src/components/Pages/History/index.module.css b/src/components/Pages/History/index.module.css
deleted file mode 100644
index 94b4dd6d..00000000
--- a/src/components/Pages/History/index.module.css
+++ /dev/null
@@ -1,130 +0,0 @@
-.root {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 24px;
- width: 100%;
-}
-
-.searchBarCenter {
- display: flex;
- justify-content: center;
- width: 100%;
- margin: 32px 0;
-}
-
-.searchBarTop {
- display: flex;
- justify-content: center;
- padding: 20px;
- transition: all 0.3s ease-in-out;
- width: 100%;
-}
-
-.searchForm {
- width: 100%;
- max-width: 600px;
- display: flex;
- justify-content: center;
-}
-
-.resultsContainer {
- width: 100%;
- max-width: 1200px;
- margin: 0 auto;
- display: flex;
- flex-direction: column;
- align-items: center;
- background-color: white;
- border-radius: 8px;
- padding: 24px;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-}
-
-.resultsTitle {
- font-family: 'Sharp Sans', sans-serif;
- font-size: 20px;
- margin-bottom: 24px;
- text-align: center;
- width: 100%;
- color: #333;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-.statsCardsContainer {
- width: 100%;
- margin: 0 auto;
- display: flex;
- flex-direction: row;
- align-items: center;
-}
-
-@media (max-width: 768px) {
- .searchBarCenter, .searchBarTop {
- padding: 0 15px;
- }
-
- .resultsContainer {
- padding: 0 15px 30px 15px;
- }
-}
-.root {
- width: 100%;
-}
-
-.dashboardContainer {
- max-width: 1280px;
- margin: 0 auto 50px;
- width: 100%;
-}
-
-.searchBarCenter {
- display: flex;
- justify-content: center;
- margin-bottom: 30px;
-}
-
-.searchForm {
- width: 100%;
- max-width: 600px;
-}
-
-.resultsContainer {
- max-width: 1280px;
- margin: 0 auto;
-}
-
-.dateRangeContainer {
- width: 100%;
- max-width: 1280px;
- margin: 0 auto 20px;
- padding: 0 16px;
- display: flex;
- justify-content: flex-end;
- position: relative;
- z-index: 1;
-}
-
-/* Ensure the date picker shows clearly */
-.dateRangeContainer > div {
- min-width: 300px;
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
-}
-
-/* Responsive styles for date picker */
-@media (max-width: 768px) {
- .dateRangeContainer {
- padding: 0 12px;
- }
-
- .dateRangeContainer > div {
- min-width: 260px;
- }
-}
-
-.dashboardContainer {
- margin-top: 20px;
-}
diff --git a/src/components/Pages/History/index.tsx b/src/components/Pages/History/index.tsx
deleted file mode 100644
index 27e92cd7..00000000
--- a/src/components/Pages/History/index.tsx
+++ /dev/null
@@ -1,176 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import { TextField, Box, InputAdornment, IconButton } from '@mui/material'
-import SearchIcon from '@mui/icons-material/Search'
-import ClearIcon from '@mui/icons-material/Clear'
-import styles from './index.module.css'
-import Table from '../../Table'
-import HeroSection from '../../HeroSection/HeroSection'
-import { TableTypeEnum } from '../../../shared/enums/TableTypeEnum'
-import { useHistoryContext } from '../../../context/HistoryContext'
-import { HistoryDashboard } from '../../Dashboard'
-import PeriodSelect, { DateRange } from '../../PeriodSelect'
-
-const DEBOUNCE_DELAY = 1000
-
-const HistoryPage: React.FC = () => {
- const router = useRouter()
- const [debounceTimeout, setDebounceTimeout] = useState(null)
-
- const {
- data,
- loading,
- currentPage,
- pageSize,
- totalItems,
- nodeId,
- setNodeId,
- setCurrentPage,
- setPageSize,
- dateRange,
- setDateRange,
- setIsSearching,
- availablePeriods,
- periodsLoading,
- isInitialising,
- isSearching
- } = useHistoryContext()
-
-
- useEffect(() => {
- const nodeIdFromUrl = router.query.id || router.query.nodeid
-
- if (typeof nodeIdFromUrl === 'string' && nodeIdFromUrl) {
- setNodeId(nodeIdFromUrl)
- if (!isSearching) {
- if (debounceTimeout) clearTimeout(debounceTimeout)
-
- const timeout = setTimeout(() => {
- setIsSearching(true)
- }, DEBOUNCE_DELAY)
-
- setDebounceTimeout(timeout)
- }
- } else if (!nodeIdFromUrl && nodeId) {
- setNodeId('')
- }
-
- return () => {
- if (debounceTimeout) clearTimeout(debounceTimeout)
- }
- }, [router.query])
-
- const handleSearch = () => {
- const trimmedNodeId = nodeId.trim()
- if (trimmedNodeId) {
- const currentQuery = { ...router.query }
- const newQuery: { [key: string]: string | string[] | undefined } = {
- ...currentQuery,
- id: trimmedNodeId
- }
- delete newQuery.nodeid
-
- router.push({
- pathname: router.pathname,
- query: newQuery
- })
- setIsSearching(true)
- }
- }
-
- const handleClear = () => {
- setNodeId('')
- const newQuery = { ...router.query }
- delete newQuery.id
- delete newQuery.nodeid
- router.push({
- pathname: router.pathname,
- query: newQuery
- })
- setIsSearching(false)
- }
-
-
- const handleDateRangeChange = (newRange: DateRange) => {
- if (newRange.startDate && newRange.endDate) {
- setDateRange(newRange)
- setCurrentPage(1)
- } else {
- console.log('[HistoryPage] Ignoring invalid date range change (missing dates)')
- }
- }
-
- return (
-
-
-
-
- setNodeId(e.target.value)}
- placeholder="Enter node ID..."
- onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
- variant="outlined"
- InputProps={{
- startAdornment: (
-
-
-
- ),
- endAdornment: nodeId && (
-
-
-
-
-
- ),
- sx: {
- borderRadius: '20px',
- backgroundColor: 'rgba(255, 255, 255, 0.9)',
- '&.Mui-focused': {
- boxShadow: '0 1px 6px rgba(32, 33, 36, 0.28)'
- },
- boxShadow: '0 1px 3px rgba(32, 33, 36, 0.28)',
- height: '40px',
- maxHeight: '40px'
- }
- }}
- />
-
-
-
-
- {nodeId && nodeId.trim() !== '' && (
- <>
-
-
-
-
-
{
- setCurrentPage(page)
- setPageSize(size)
- }}
- />
-
- )}
-
- )
-}
-
-export default HistoryPage
diff --git a/src/components/Pages/Homepage/index.tsx b/src/components/Pages/Homepage/index.tsx
deleted file mode 100644
index e4cee000..00000000
--- a/src/components/Pages/Homepage/index.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import dynamic from 'next/dynamic'
-import { useEffect } from 'react'
-
-import styles from './style.module.css'
-
-import PieChartCard from '@/components/PieChart/PieChart'
-import HeroSection from '@/components/HeroSection/HeroSection'
-import { useNodesContext } from '@/context/NodesContext'
-import TopCountriesChart from '@/components/TopCountriesChart/TopCountriesChart '
-import { NodesDashboard } from '@/components/Dashboard'
-
-const Map = dynamic(() => import('../../Map'), { ssr: false })
-
-interface SystemStats {
- cpuCounts: { [key: string]: number }
- operatingSystems: { [key: string]: number }
- cpuArchitectures: { [key: string]: number }
-}
-
-const brandColors = {
- primary: ['#7b1173', '#bd2881', '#d53288', '#e000cf', '#fe4796', '#ff4092'],
- other: '#f7f7f7'
-}
-
-interface ChartDataItem {
- name: string
- value: number
- color: string
- details?: string[]
-}
-
-const processChartData = (
- data: Record,
- maxSlices: number
-): ChartDataItem[] => {
- if (!data) return []
-
- const sortedEntries = Object.entries(data).sort(([, a], [, b]) => b - a)
-
- const mainEntries = sortedEntries.slice(0, maxSlices)
- const otherEntries = sortedEntries.slice(maxSlices)
- const otherCount = otherEntries.reduce((sum, [, count]) => sum + count, 0)
-
- const result = mainEntries.map(
- ([key, count], index): ChartDataItem => ({
- name: key,
- value: count,
- color: brandColors.primary[index]
- })
- )
-
- if (otherCount > 0) {
- result.push({
- name: 'Other',
- value: otherCount,
- color: brandColors.other,
- details: otherEntries.map(([key, count]) => `${key}: ${count} nodes`)
- })
- }
-
- return result
-}
-
-const processCpuData = (stats: SystemStats): ChartDataItem[] => {
- if (!stats?.cpuCounts) return []
- const data = processChartData(stats.cpuCounts, 5)
- return data.map((item) => ({
- ...item,
- name:
- item.name === 'Other'
- ? item.name
- : `${item.name} CPU${item.name !== '1' ? 's' : ''}`,
- details: item.details?.map((detail) => {
- const [count, nodes] = detail.split(':')
- return `${count} CPU${count !== '1' ? 's' : ''}:${nodes}`
- })
- }))
-}
-
-const processOsData = (stats: SystemStats): ChartDataItem[] => {
- if (!stats?.operatingSystems) return []
- return processChartData(stats.operatingSystems, 3)
-}
-
-const processCpuArchData = (stats: SystemStats): ChartDataItem[] => {
- if (!stats?.cpuArchitectures) return []
- const data = processChartData(stats.cpuArchitectures, 3)
-
- return data.map((item) => ({
- ...item,
- name: item.name.toUpperCase(),
- details: item.details?.map((detail) => detail.toUpperCase())
- }))
-}
-
-export default function HomePage() {
- const { systemStats } = useNodesContext()
-
- return (
-
- )
-}
diff --git a/src/components/Pages/Incentives/index.module.css b/src/components/Pages/Incentives/index.module.css
deleted file mode 100644
index 71ce9328..00000000
--- a/src/components/Pages/Incentives/index.module.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.root {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 100px;
-}
-
-@media (max-width: 768px) {
- .root {
- gap: 50px;
- }
-}
-
-.title {
- font-size: 50px;
- font-weight: 700;
- line-height: 62px;
- color: white;
- margin-bottom: 16px;
-}
-
-@media (max-width: 768px) {
- .title {
- font-size: 36px;
- line-height: 44px;
- }
-}
-
-.description {
- font-size: 18px;
- font-weight: 400;
- line-height: 30px;
- color: white;
- margin-bottom: 40px;
-}
-
-@media (max-width: 768px) {
- .description {
- font-size: 16px;
- line-height: 24px;
- }
-}
diff --git a/src/components/Pages/Incentives/index.tsx b/src/components/Pages/Incentives/index.tsx
deleted file mode 100644
index 2f7e6190..00000000
--- a/src/components/Pages/Incentives/index.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react'
-import styles from './index.module.css'
-
-// import Table from '../../Table'
-import HeroSection from '../../HeroSection/HeroSection'
-
-const IncentivesPage: React.FC = () => {
- return (
-
- )
-}
-
-export default IncentivesPage
diff --git a/src/components/Pages/NodeDashboard/AdminAccounts.tsx b/src/components/Pages/NodeDashboard/AdminAccounts.tsx
deleted file mode 100644
index f46d8df5..00000000
--- a/src/components/Pages/NodeDashboard/AdminAccounts.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import styles from './index.module.css'
-import { useAdminContext } from '@/context/AdminProvider'
-
-export default function AdminAccounts() {
- const { allAdmins } = useAdminContext()
-
- return (
-
-
Admin Accounts
-
- {allAdmins.map((admin, i) => {
- return (
-
- {admin}
-
- )
- })}
-
-
-
INDEXER
-
- {data?.indexer.map((item) => {
- return (
-
-
- {item.network}
- ChainID: {item.chainId}
- BLOCK: {item.block}
-
-
- )
- })}
-
-
-
-
-
PLATFORM
-
- {platformData.map((item) => {
- return (
-
-
- {item.key}:
-
-
{item.value}
-
- )
- })}
-
-
-
SUPPORTED STORAGE
-
-
-
- arwave:
-
-
{data?.arwave.toString()}
-
-
-
- ipfs:
-
-
{data?.ipfs.toString()}
-
-
-
- url:
-
-
{data?.url.toString()}
-
-
-
-
NETWORK
-
-
-
-
- P2P - {filteredNodeData?.nodeDetails.P2P ? 'UP' : 'DOWN'}
-
-
-
NODE ID
- {nodeData.map((node) => {
- return (
-
-
-
{truncateString(node.id, 12)}
-
-
-
- )
- })}
-
-
-
Location
-
{filteredNodeData?.location}
-
City
-
{filteredNodeData?.nodeDetails.city}
-
Address
-
- {filteredNodeData?.ipAddress}
-
-
-
- {/*
*/}
-
-
-
- HTTP - {filteredNodeData?.nodeDetails.Http ? 'UP' : 'DOWN'}
-
- {/*
-
-
IP :
-
{filteredNodeData?.ipAddress}
-
-
-
*/}
-
-
-
-
-
-
-
- {/* {filteredNodeData ? (
-
-
-
- ) : ( */}
-
-
- {/*
*/}
-
- {/*
*/}
-
-
- {/* )} */}
-
-
-
-
-
-
-
-
{
- setCurrentPage(page)
- setPageSize(size)
- }}
- />
-
-
- )
-}
-
-export default NodesPage
diff --git a/src/components/PeriodSelect/index.tsx b/src/components/PeriodSelect/index.tsx
deleted file mode 100644
index 6962a700..00000000
--- a/src/components/PeriodSelect/index.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react'
-import {
- Select,
- MenuItem,
- FormControl,
- Box,
- IconButton,
- Typography,
- CircularProgress
-} from '@mui/material'
-import 'react-day-picker/dist/style.css'
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import RestartAltIcon from '@mui/icons-material/RestartAlt'
-import { Dayjs } from 'dayjs'
-import styles from './styles.module.css'
-import { PeriodOption } from '@/services/historyService'
-import { useInitializePeriodState } from './useInitializePeriodState'
-import { usePeriodSelectionHandlers } from './usePeriodSelectionHandlers'
-
-export interface DateRange {
- startDate: Dayjs | null
- endDate: Dayjs | null
-}
-
-interface PeriodSelectProps {
- onChange: (range: DateRange) => void
- initialRange?: DateRange
- availablePeriods: PeriodOption[]
- periodsLoading?: boolean
- isContextInitialising?: boolean
-}
-
-const PeriodSelect: React.FC = ({
- onChange,
- initialRange,
- availablePeriods,
- periodsLoading = false,
- isContextInitialising = false
-}) => {
- const { selectedPeriod, setSelectedPeriod, setDayPickerRange } =
- useInitializePeriodState(initialRange, availablePeriods, onChange)
-
- const { handlePeriodChange, handleReset } = usePeriodSelectionHandlers(
- availablePeriods,
- setSelectedPeriod,
- setDayPickerRange,
- onChange
- )
-
- const [lastSelectedPeriod, setLastSelectedPeriod] = useState('')
-
- useEffect(() => {
- if (selectedPeriod) {
- setLastSelectedPeriod(selectedPeriod)
- }
- }, [selectedPeriod])
-
- const selectValue = selectedPeriod || lastSelectedPeriod
-
- const formatDateRangeText = useMemo(() => {
- const period = availablePeriods.find((p) => p.value === selectValue)
- if (period) {
- return `Round ${period.weekIdentifier} (${period.startDate.format('MMM D')} - ${period.endDate.format('MMM D, YYYY')})`
- }
- return 'Select Period'
- }, [selectValue, availablePeriods])
-
- return (
-
-
- {isContextInitialising || periodsLoading ? (
-
-
-
- Loading periods...
-
-
- ) : (
-
- )}
-
-
- )
-}
-
-export default PeriodSelect
diff --git a/src/components/PeriodSelect/styles.module.css b/src/components/PeriodSelect/styles.module.css
deleted file mode 100644
index 5fb00dbb..00000000
--- a/src/components/PeriodSelect/styles.module.css
+++ /dev/null
@@ -1,475 +0,0 @@
-.container {
- position: relative;
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- width: fit-content;
-}
-
-.container :global(.MuiFormControl-root) {
- width: 100% !important;
-}
-
-.container :global(.MuiBox-root) {
- width: 100% !important;
-}
-
-.selectWrapper {
- position: relative;
- display: flex;
- align-items: center;
- width: 100%;
-}
-
-.select {
- width: 100%;
- min-width: 200px;
- height: 48px;
- font-family: 'Sharp Sans', sans-serif;
- font-size: 16px;
- line-height: 20px;
- font-weight: 500;
- color: white;
- background: linear-gradient(135deg, #0E001A 0%, #CF1FB1 100%);
- border-radius: 20px;
- padding: 8px 16px;
- padding-right: 48px;
- cursor: pointer;
- display: flex;
- align-items: center;
- position: relative;
-}
-
-.select :global(.MuiSelect-select) {
- color: white !important;
-}
-
-.dateText {
- font-family: 'Sharp Sans', sans-serif !important;
- font-size: 16px !important;
- line-height: 20px !important;
- font-weight: 500 !important;
- color: white !important;
- flex: 1;
-}
-
-.iconWrapper {
- position: absolute;
- left: 90%;
- top: 50%;
- transform: translateY(-50%);
- pointer-events: none;
- display: flex;
- align-items: center;
-}
-
-.selectIcon {
- color: white !important;
- font-size: 24px !important;
- transition: transform 0.2s ease;
-}
-
-.select[aria-expanded="true"] ~ .iconWrapper .selectIcon {
- transform: rotate(180deg);
-}
-
-.resetButton {
- position: absolute !important;
- right: 40px !important;
- color: white !important;
- padding: 4px !important;
-}
-
-.resetButton:hover {
- background-color: rgba(255, 255, 255, 0.1) !important;
-}
-
-.select :global(.MuiOutlinedInput-notchedOutline) {
- border: none !important;
-}
-
-.select:hover {
- cursor: pointer;
-}
-
-.select :global(.MuiSelect-icon) {
- display: none;
-}
-
-.select :global(.MuiInput-underline)::before {
- border-bottom: none !important;
-}
-
-.select :global(.MuiInput-underline)::after {
- border-bottom: none !important;
-}
-
-.select:global(.MuiInputBase-root.MuiInput-root.MuiInput-underline),
-.select:global(.MuiInputBase-root.MuiInput-root.MuiInput-underline)::before,
-.select:global(.MuiInputBase-root.MuiInput-root.MuiInput-underline)::after,
-.select:global(.MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl),
-.select:global(.MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl)::before,
-.select:global(.MuiInputBase-root.MuiInput-root.MuiInput-underline.MuiInputBase-colorPrimary.MuiInputBase-formControl)::after {
- border-bottom: none !important;
- border: none !important;
- box-shadow: none !important;
-}
-
-.menuPaper {
- margin-top: 8px;
- background: #0E001A;
- border-radius: 12px;
- box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
-}
-
-.menuItem {
- font-family: 'Sharp Sans', sans-serif;
- font-size: 14px;
- line-height: 18px;
- font-weight: 500;
- padding: 12px 16px;
- color: white;
-}
-
-.menuItem:hover {
- background-color: rgba(207, 31, 177, 0.1) !important;
-}
-
-.menuItem.Mui-selected {
- background-color: rgba(207, 31, 177, 0.2) !important;
-}
-
-.datePickerContainer {
- position: absolute;
- top: calc(100% + 8px);
- right: 0;
- z-index: 1000;
- background: rgba(14, 0, 26, 0.5);
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- border-radius: 12px;
- padding: 16px;
- box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
-}
-
-.datePickerContainer :global(.MuiPickersLayout-root) {
- background: transparent;
- color: white;
-}
-
-.datePickerContainer :global(.MuiPickersCalendarHeader-root) {
- color: white;
-}
-
-.datePickerContainer :global(.MuiPickersDay-root) {
- color: white;
-}
-
-.datePickerContainer :global(.MuiPickersDay-root.Mui-selected) {
- background-color: #CF1FB1;
-}
-
-.datePickerContainer :global(.MuiPickersDay-root:hover) {
- background-color: rgba(207, 31, 177, 0.2);
-}
-
-.datePickerContainer :global(.MuiDayCalendar-weekDayLabel) {
- color: rgba(255, 255, 255, 0.7);
-}
-
-.datePickerContainer :global(.MuiPickersLayout-root),
-.datePickerContainer :global(.MuiPickersLayout-contentWrapper) {
- background: transparent !important;
-}
-
-.datePickerContainer :global(.MuiTextField-root) {
- background: transparent !important;
-}
-
-.datePickerContainer :global(.MuiOutlinedInput-root) {
- background: transparent !important;
-}
-
-.customDateContainer {
- min-width: 200px;
- background: linear-gradient(135deg, #0E001A 0%, #CF1FB1 100%);
- border-radius: 20px;
- padding: 8px 16px;
- padding-right: 48px;
- position: relative;
- display: flex;
- align-items: center;
-}
-
-.datePickersContainer {
- display: flex;
- gap: 8px;
- width: 100%;
-}
-
-.inlineDatePicker {
- flex: 1;
-}
-
-.inlineDatePicker :global(.MuiInputBase-root) {
- height: 32px;
- font-family: 'Sharp Sans', sans-serif !important;
- font-size: 16px !important;
- line-height: 20px !important;
- font-weight: 500 !important;
- padding: 0;
-}
-
-.inlineDatePicker :global(.MuiOutlinedInput-notchedOutline) {
- border: none !important;
-}
-
-.datePickerPopover {
- background: linear-gradient(135deg, rgba(14, 0, 26, 0.95) 0%, rgba(14, 0, 26, 0.85) 100%);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(255, 255, 255, 0.1);
- border-radius: 24px;
- margin-top: 8px;
- overflow: hidden;
- box-shadow:
- 0 4px 24px rgba(0, 0, 0, 0.4),
- inset 0 0 40px rgba(207, 31, 177, 0.1);
-}
-
-.dayPicker {
- background: transparent;
- color: white;
- padding: 24px;
- font-family: 'Sharp Sans', sans-serif;
-}
-
-/* Month header styling */
-.dayPicker :global(.rdp-caption) {
- position: relative;
- padding: 8px 0;
- margin-bottom: 16px;
-}
-
-.dayPicker :global(.rdp-caption_label) {
- font-size: 24px;
- font-weight: 500;
- color: white;
- margin: 0;
- padding: 8px 0;
- text-align: left;
-}
-
-/* Navigation buttons */
-.dayPicker :global(.rdp-nav) {
- position: absolute;
- right: 0;
- transform: translateY(-50%);
- display: flex;
- gap: 8px;
-}
-
-.dayPicker :global(.rdp-nav > button > svg) {
- fill: #CF1FB1;
-}
-
-.dayPicker :global(.rdp-nav_button) {
- width: 32px;
- height: 32px;
- padding: 0;
- border-radius: 50%;
- background: rgba(255, 255, 255, 0.1);
- color: white;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: all 0.2s ease;
-}
-
-.dayPicker :global(.rdp-nav_button:disabled) {
- opacity: 0.5;
-}
-
-.dayPicker :global(.rdp-nav_button:hover) {
- background: rgba(255, 255, 255, 0.2);
-}
-
-.dayPicker :global(.rdp-nav_button svg) {
- width: 24px;
- height: 24px;
- fill: white;
-}
-
-/* Week day headers */
-.dayPicker :global(.rdp-head_cell) {
- font-weight: 500;
- font-size: 14px;
- color: rgba(255, 255, 255, 0.6);
- padding: 8px 0;
-}
-
-/* Calendar days */
-.dayPicker :global(.rdp-button) {
- width: 40px;
- height: 40px;
- font-size: 14px;
- color: white;
- transition: all 0.2s ease;
- position: relative;
- z-index: 1;
-}
-
-.dayPicker :global(.rdp-day_today:not(.rdp-day_selected)) {
- background: rgba(255, 255, 255, 0.1);
- font-weight: bold;
-}
-
-.dayPicker :global(.rdp-button:hover:not([disabled])) {
- background: rgba(207, 31, 177, 0.2);
-}
-
-/* Range selection wrapper */
-.dayPicker :global(.rdp-row) {
- position: relative;
-}
-
-/* Range selection background */
-.dayPicker :global(.rdp-row:has(.rdp-day_range_start)),
-.dayPicker :global(.rdp-row:has(.rdp-day_range_middle)),
-.dayPicker :global(.rdp-row:has(.rdp-day_range_end)) {
- background: linear-gradient(135deg, #0E001A 0%, #CF1FB1 100%);
- border-radius: 0;
-}
-
-/* First row with selection */
-.dayPicker :global(.rdp-row:has(.rdp-day_range_start)) {
- border-top-left-radius: 20px;
- border-bottom-left-radius: 20px;
-}
-
-/* Last row with selection */
-.dayPicker :global(.rdp-row:has(.rdp-day_range_end)) {
- border-top-right-radius: 20px;
- border-bottom-right-radius: 20px;
-}
-
-/* Selected days */
-.dayPicker :global(.rdp-day_selected),
-.dayPicker :global(.rdp-day_range_start),
-.dayPicker :global(.rdp-day_range_middle),
-.dayPicker :global(.rdp-day_range_end) {
- color: white;
- font-weight: bold;
- background: transparent !important;
-}
-
-/* Single day selection */
-.dayPicker :global(.rdp-day_selected:not(.rdp-day_range_start):not(.rdp-day_range_middle):not(.rdp-day_range_end)) {
- background: linear-gradient(135deg, #0E001A 0%, #CF1FB1 100%) !important;
- border-radius: 50%;
-}
-
-/* Disabled days */
-.dayPicker :global(.rdp-button[disabled]) {
- opacity: 0.3;
-}
-
-/* Table layout */
-.dayPicker :global(.rdp-table) {
- margin: 0;
- border-spacing: 0;
-}
-
-/* Selected range container */
-.dayPicker :global(.rdp-day_range_start),
-.dayPicker :global(.rdp-day_range_end),
-.dayPicker :global(.rdp-day_range_middle) {
- position: relative;
- background: transparent !important;
- color: white;
- font-weight: bold;
-}
-
-/* Continuous gradient background */
-.dayPicker :global(.rdp-day_range_start)::before,
-.dayPicker :global(.rdp-day_range_end)::before,
-.dayPicker :global(.rdp-day_range_middle)::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: linear-gradient(135deg, #0E001A 0%, #CF1FB1 100%);
- z-index: -1;
-}
-
-/* Range start specific styles */
-.dayPicker :global(.rdp-day_range_start)::before {
- border-top-left-radius: 50%;
- border-bottom-left-radius: 50%;
-}
-
-/* Range end specific styles */
-.dayPicker :global(.rdp-day_range_end)::before {
- border-top-right-radius: 50%;
- border-bottom-right-radius: 50%;
-}
-
-/* Single selected day */
-.dayPicker :global(.rdp-day_selected:not(.rdp-day_range_start):not(.rdp-day_range_end):not(.rdp-day_range_middle)) {
- position: relative;
- background: transparent !important;
-}
-
-.dayPicker :global(.rdp-day_selected:not(.rdp-day_range_start):not(.rdp-day_range_end):not(.rdp-day_range_middle))::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: linear-gradient(135deg, #0E001A 0%, #CF1FB1 100%);
- border-radius: 50%;
- z-index: -1;
-}
-
-/* Ensure text remains visible */
-.dayPicker :global(.rdp-button) {
- position: relative;
- z-index: 1;
-}
-/*
-.dayPicker :global(.rdp-today:not(.rdp-outside)) {
- background: linear-gradient(135deg, #0E001A 0%, #CF1FB1 100%);
-} */
-
-.dayPicker :global(.rdp-range_start) {
- border-radius: 0;
- background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, #CF1FB190 50%);
-}
-
-.dayPicker :global(.rdp-range_end) {
- border-radius: 0;
- background: linear-gradient(var(--rdp-gradient-direction), #CF1FB190 50%, transparent 50%);
-}
-
-.dayPicker :global(.rdp-range_middle) {
- border-radius: 0;
- background: #CF1FB190!important;
-}
-
-.dayPicker :global(.rdp-range_start .rdp-day_button) {
- border: 0;
- background: linear-gradient(135deg, #0E001A 0%, #CF1FB1 100%);
-}
-
-.dayPicker :global(.rdp-range_end .rdp-day_button) {
- border: 0;
- background: linear-gradient(135deg, #0E001A 0%, #CF1FB1 100%);
-}
-
-.dayPicker :global(.rdp-today:not(.rdp-outside)) {
- color: #CF1FB1;
- font-weight: 800;
-}
-
diff --git a/src/components/PeriodSelect/useInitializePeriodState.ts b/src/components/PeriodSelect/useInitializePeriodState.ts
deleted file mode 100644
index 76d83d10..00000000
--- a/src/components/PeriodSelect/useInitializePeriodState.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { useState, useEffect } from 'react'
-import { DateRange as DayPickerRange } from 'react-day-picker'
-import { PeriodOption } from '@/services/historyService'
-import { DateRange } from './index'
-
-export const useInitializePeriodState = (
- initialRange?: DateRange,
- availablePeriods: PeriodOption[] = [],
- onChange?: (range: DateRange) => void
-) => {
- const [selectedPeriod, setSelectedPeriod] = useState(() => {
- if (initialRange?.startDate && availablePeriods.length > 0) {
- const matchingPeriod = availablePeriods.find((p) =>
- p.startDate.isSame(initialRange.startDate, 'day')
- )
- if (matchingPeriod) {
- return matchingPeriod.value
- }
- }
- return availablePeriods.length > 0 ? availablePeriods[0].value : ''
- })
-
- const [dayPickerRange, setDayPickerRange] = useState(() => {
- if (initialRange?.startDate && initialRange.endDate) {
- return { from: initialRange.startDate.toDate(), to: initialRange.endDate.toDate() }
- }
- if (
- availablePeriods.length > 0 &&
- availablePeriods[0].startDate &&
- availablePeriods[0].endDate
- ) {
- return {
- from: availablePeriods[0].startDate.toDate(),
- to: availablePeriods[0].endDate.toDate()
- }
- }
- return undefined
- })
-
- useEffect(() => {
- if (availablePeriods.length > 0 && onChange) {
- let activePeriodValue = ''
- let activeDayPickerRange: DayPickerRange | undefined = undefined
- let activeDateRange: DateRange | null = null
-
- if (initialRange?.startDate && initialRange.endDate) {
- const matchingPeriod = availablePeriods.find((p) =>
- p.startDate.isSame(initialRange.startDate, 'day')
- )
-
- if (matchingPeriod) {
- activePeriodValue = matchingPeriod.value
- activeDayPickerRange = {
- from: matchingPeriod.startDate.toDate(),
- to: matchingPeriod.endDate.toDate()
- }
- } else {
- const firstPeriod = availablePeriods[0]
- activePeriodValue = firstPeriod.value
- activeDayPickerRange = {
- from: firstPeriod.startDate.toDate(),
- to: firstPeriod.endDate.toDate()
- }
- activeDateRange = {
- startDate: firstPeriod.startDate,
- endDate: firstPeriod.endDate
- }
- }
- } else {
- const firstPeriod = availablePeriods[0]
- activePeriodValue = firstPeriod.value
- activeDayPickerRange = {
- from: firstPeriod.startDate.toDate(),
- to: firstPeriod.endDate.toDate()
- }
- activeDateRange = {
- startDate: firstPeriod.startDate,
- endDate: firstPeriod.endDate
- }
- }
-
- setSelectedPeriod(activePeriodValue)
- setDayPickerRange(activeDayPickerRange)
- if (activeDateRange) {
- onChange(activeDateRange)
- }
- }
- }, [
- initialRange?.startDate?.valueOf(),
- initialRange?.endDate?.valueOf(),
- availablePeriods,
- onChange
- ])
-
- return {
- selectedPeriod,
- setSelectedPeriod,
- dayPickerRange,
- setDayPickerRange
- }
-}
diff --git a/src/components/PeriodSelect/usePeriodSelectionHandlers.ts b/src/components/PeriodSelect/usePeriodSelectionHandlers.ts
deleted file mode 100644
index 35724820..00000000
--- a/src/components/PeriodSelect/usePeriodSelectionHandlers.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { PeriodOption } from '@/services/historyService'
-import { DateRange } from './index'
-import { DateRange as DayPickerRange } from 'react-day-picker'
-
-type SetSelectedPeriodType = (value: string) => void
-type SetDayPickerRangeType = (range: DayPickerRange | undefined) => void
-type OnChangeType = (range: DateRange) => void
-
-export const usePeriodSelectionHandlers = (
- availablePeriods: PeriodOption[],
- setSelectedPeriod: SetSelectedPeriodType,
- setDayPickerRange: SetDayPickerRangeType,
- onChange: OnChangeType
-) => {
- const handlePeriodChange = (event: any) => {
- const value = event.target.value as string
- console.log(`[PeriodSelect] Period changed to: ${value}`)
- setSelectedPeriod(value)
-
- const selectedHistoricalPeriod = availablePeriods.find((p) => p.value === value)
- if (selectedHistoricalPeriod) {
- setDayPickerRange({
- from: selectedHistoricalPeriod.startDate.toDate(),
- to: selectedHistoricalPeriod.endDate.toDate()
- })
- onChange({
- startDate: selectedHistoricalPeriod.startDate,
- endDate: selectedHistoricalPeriod.endDate
- })
- }
- }
-
- const handleReset = () => {
- if (availablePeriods.length > 0) {
- const firstPeriod = availablePeriods[0]
- setSelectedPeriod(firstPeriod.value)
- setDayPickerRange({
- from: firstPeriod.startDate.toDate(),
- to: firstPeriod.endDate.toDate()
- })
- onChange({ startDate: firstPeriod.startDate, endDate: firstPeriod.endDate })
- }
- }
-
- return { handlePeriodChange, handleReset }
-}
diff --git a/src/components/PieChart/PieChart.tsx b/src/components/PieChart/PieChart.tsx
deleted file mode 100644
index da354bb5..00000000
--- a/src/components/PieChart/PieChart.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import React, { useState, useMemo } from 'react'
-import { PieChart, Pie, Cell, ResponsiveContainer, Sector, Tooltip } from 'recharts'
-import styles from './PieChartCard.module.css'
-
-interface PieChartCardProps {
- data: {
- name: string
- value: number
- color: string
- details?: string[]
- }[]
- title: string
-}
-
-const PieChartCard: React.FC = ({ data, title }) => {
- const [activeIndex, setActiveIndex] = useState(undefined)
- const [lockedIndex, setLockedIndex] = useState(undefined)
- const [hoverText, setHoverText] = useState('Hover to see details')
-
- const totalValue = useMemo(
- () => data.reduce((sum, entry) => sum + entry.value, 0),
- [data]
- )
-
- const onPieEnter = (_: any, index: number) => {
- if (lockedIndex === undefined) {
- setActiveIndex(index)
- const percentage = ((data[index].value / totalValue) * 100).toFixed(2)
- setHoverText(`${data[index].name}: ${percentage}%`)
- }
- }
-
- const onPieLeave = () => {
- if (lockedIndex === undefined) {
- setActiveIndex(undefined)
- setHoverText('Hover to see details')
- }
- }
-
- const onPieClick = (_: any, index: number) => {
- if (lockedIndex === index) {
- setLockedIndex(undefined)
- setActiveIndex(undefined)
- setHoverText('Hover to see details')
- } else {
- setLockedIndex(index)
- setActiveIndex(index)
- const percentage = ((data[index].value / totalValue) * 100).toFixed(2)
- setHoverText(`${data[index].name}: ${percentage}%`)
- }
- }
-
- const renderActiveShape = (props: any) => {
- const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- )
- }
-
- const CustomTooltip = ({ active, payload }: any) => {
- const isActive = active || lockedIndex !== undefined
- let item
- if (lockedIndex !== undefined) {
- item = data[lockedIndex]
- } else if (payload && payload.length > 0) {
- item = payload[0].payload
- }
- if (isActive && item) {
- const percentage = ((item.value / totalValue) * 100).toFixed(1)
- return (
-
-
{item.name}
-
- Total: {item.value} nodes ({percentage}%)
-
- {item.details && (
-
- {Array.isArray(item.details) &&
- item.details.map((detail: string, index: number) => (
-
- ))}
-
- )}
-
-
{title}
-
-
-
- {data.map((entry, index) => (
- |
- ))}
-
- }
- position={{ y: 250 }}
- wrapperStyle={{
- transition: 'opacity 0.3s ease-in-out',
- opacity: activeIndex !== undefined || lockedIndex !== undefined ? 1 : 0,
- zIndex: 1000
- }}
- />
-
-
-
{hoverText}
-
- {getEligibleCheckbox(params.row.eligible)}
-
- )
- },
- {
- field: 'eligibilityCauseStr',
- headerName: 'Eligibility Issue',
- flex: 1,
- width: 100,
- sortable: false,
- filterable: false,
- renderCell: (params: GridRenderCellParams) => (
- {params.row.eligibilityCauseStr || 'none'}
- )
- },
- {
- field: 'lastCheck',
- headerName: 'Last Check',
- flex: 1,
- minWidth: 140,
- filterable: true,
- renderCell: (params: GridRenderCellParams) => (
-
- {new Date(params?.row?.lastCheck)?.toLocaleString(undefined, {
- timeZoneName: 'short'
- })}
-
- ),
- filterOperators: [
- {
- label: 'equals',
- value: 'eq',
- getApplyFilterFn: (filterItem) => {
- return (params) => {
- if (!filterItem.value) return true
- const filterDate = new Date(filterItem.value).getTime()
- const cellDate = new Date(params.value).getTime()
- return cellDate === filterDate
- }
- },
- InputComponent: GridFilterInputValue,
- InputComponentProps: { type: 'datetime-local' }
- },
- {
- label: 'after',
- value: 'gt',
- getApplyFilterFn: (filterItem) => {
- return (params) => {
- if (!filterItem.value) return true
- const filterDate = new Date(filterItem.value).getTime()
- const cellDate = new Date(params.value).getTime()
- return cellDate > filterDate
- }
- },
- InputComponent: GridFilterInputValue,
- InputComponentProps: { type: 'datetime-local' }
- },
- {
- label: 'before',
- value: 'lt',
- getApplyFilterFn: (filterItem) => {
- return (params) => {
- if (!filterItem.value) return true
- const filterDate = new Date(filterItem.value).getTime()
- const cellDate = new Date(params.value).getTime()
- return cellDate < filterDate
- }
- },
- InputComponent: GridFilterInputValue,
- InputComponentProps: { type: 'datetime-local' }
- }
- ]
- },
- {
- field: 'network',
- headerName: 'Network',
- flex: 1,
- minWidth: 200,
- sortable: false,
- filterable: false,
- renderCell: (params: GridRenderCellParams) => {
- const networks = params.row.provider?.map((p) => p.network).join(', ') || ''
- return {networks}
- }
- },
- {
- field: 'actions',
- headerName: 'Actions',
- sortable: false,
- width: 130,
- align: 'center',
- headerAlign: 'center',
- renderCell: (params: GridRenderCellParams) => {
- const node = params.row
- return (
-
-
-
-
-
-
-
-
-
-
-
- )
- },
- cellClassName: styles.actionCell
- },
- {
- field: 'publicKey',
- headerName: 'Public Key',
- flex: 1,
- sortable: false,
- minWidth: 200,
- filterable: false
- },
- {
- field: 'version',
- headerName: 'Version',
- flex: 1,
- minWidth: 100,
- sortable: false,
- filterable: false
- },
- {
- field: 'http',
- headerName: 'HTTP Enabled',
- flex: 1,
- minWidth: 100,
- sortable: false,
- filterable: false
- },
- {
- field: 'p2p',
- headerName: 'P2P Enabled',
- flex: 1,
- minWidth: 100,
- sortable: false,
- filterable: false
- },
- {
- field: 'supportedStorage',
- headerName: 'Supported Storage',
- flex: 1,
- minWidth: 200,
- sortable: false,
- filterable: false,
- renderCell: (params: GridRenderCellParams) => (
- {formatSupportedStorage(params.row.supportedStorage)}
- )
- },
- {
- field: 'platform',
- headerName: 'Platform',
- flex: 1,
- minWidth: 200,
- sortable: false,
- filterable: false,
- renderCell: (params: GridRenderCellParams) => (
- {formatPlatform(params.row.platform)}
- )
- },
- {
- field: 'codeHash',
- headerName: 'Code Hash',
- flex: 1,
- minWidth: 200,
- sortable: false,
- filterable: false
- },
- {
- field: 'allowedAdmins',
- headerName: 'Allowed Admins',
- flex: 1,
- minWidth: 200,
- sortable: false,
- filterable: false
- }
-]
-
-export const countryColumns: GridColDef[] = [
- {
- field: 'index',
- headerName: 'Index',
- width: 70,
- align: 'center',
- headerAlign: 'center',
- sortable: false,
- filterable: false
- },
- {
- field: 'country',
- headerName: 'Country',
- flex: 1,
- minWidth: 200,
- align: 'left',
- headerAlign: 'left',
- sortable: true,
- filterable: true,
- filterOperators: [
- {
- label: 'contains',
- value: 'contains',
- getApplyFilterFn: (filterItem) => {
- return (params) => {
- if (!filterItem.value) return true
- return params.value?.toLowerCase().includes(filterItem.value.toLowerCase())
- }
- },
- InputComponent: GridFilterInputValue,
- InputComponentProps: { type: 'text' }
- },
- {
- label: 'equals',
- value: 'eq',
- getApplyFilterFn: (filterItem) => {
- return (params) => {
- return params.value === filterItem.value
- }
- },
- InputComponent: GridFilterInputValue,
- InputComponentProps: { type: 'text' }
- }
- ]
- },
- {
- field: 'totalNodes',
- headerName: 'Total Nodes',
- flex: 1,
- minWidth: 150,
- type: 'number',
- align: 'left',
- headerAlign: 'left',
- sortable: true,
- filterable: true,
- filterOperators: [
- {
- label: 'equals',
- value: 'eq',
- getApplyFilterFn: (filterItem) => {
- return (params) => {
- return params.value === Number(filterItem.value)
- }
- },
- InputComponent: GridFilterInputValue,
- InputComponentProps: { type: 'number' }
- },
- {
- label: 'greater than',
- value: 'gt',
- getApplyFilterFn: (filterItem) => {
- return (params) => {
- return params.value > Number(filterItem.value)
- }
- },
- InputComponent: GridFilterInputValue,
- InputComponentProps: { type: 'number' }
- },
- {
- label: 'less than',
- value: 'lt',
- getApplyFilterFn: (filterItem) => {
- return (params) => {
- return params.value < Number(filterItem.value)
- }
- },
- InputComponent: GridFilterInputValue,
- InputComponentProps: { type: 'number' }
- }
- ]
- },
- {
- field: 'citiesWithNodes',
- headerName: 'Cities with Nodes',
- flex: 1,
- minWidth: 200,
- type: 'number',
- align: 'left',
- headerAlign: 'left',
- sortable: true,
- filterable: true,
- filterOperators: [
- {
- label: 'equals',
- value: 'eq',
- getApplyFilterFn: (filterItem) => {
- return (params) => {
- return params.value === Number(filterItem.value)
- }
- },
- InputComponent: GridFilterInputValue,
- InputComponentProps: { type: 'number' }
- },
- {
- label: 'greater than',
- value: 'gt',
- getApplyFilterFn: (filterItem) => {
- return (params) => {
- return params.value > Number(filterItem.value)
- }
- },
- InputComponent: GridFilterInputValue,
- InputComponentProps: { type: 'number' }
- },
- {
- label: 'less than',
- value: 'lt',
- getApplyFilterFn: (filterItem) => {
- return (params) => {
- return params.value < Number(filterItem.value)
- }
- },
- InputComponent: GridFilterInputValue,
- InputComponentProps: { type: 'number' }
- }
- ]
- },
- {
- field: 'cityWithMostNodes',
- headerName: 'City with Most Nodes',
- flex: 1,
- minWidth: 200,
- align: 'left',
- headerAlign: 'left',
- sortable: true,
- filterable: true,
- valueGetter: (params: { row: any }) => {
- return params.row?.cityWithMostNodesCount || 0
- },
- filterOperators: [
- {
- label: 'equals',
- value: 'eq',
- getApplyFilterFn: (filterItem) => {
- return (params) => {
- return params.value === Number(filterItem.value)
- }
- },
- InputComponent: GridFilterInputValue,
- InputComponentProps: { type: 'number' }
- },
- {
- label: 'greater than',
- value: 'gt',
- getApplyFilterFn: (filterItem) => {
- return (params) => {
- return params.value > Number(filterItem.value)
- }
- },
- InputComponent: GridFilterInputValue,
- InputComponentProps: { type: 'number' }
- },
- {
- label: 'less than',
- value: 'lt',
- getApplyFilterFn: (filterItem) => {
- return (params) => {
- return params.value < Number(filterItem.value)
- }
- },
- InputComponent: GridFilterInputValue,
- InputComponentProps: { type: 'number' }
- }
- ],
- renderCell: (params: GridRenderCellParams) => (
-
- {params.row.cityWithMostNodes} ({params.row.cityWithMostNodesCount} nodes)
-
- )
- }
-]
-
-export const historyColumns: GridColDef[] = [
- {
- field: 'round',
- headerName: 'Round no.',
- flex: 0.5,
- minWidth: 100,
- align: 'left',
- headerAlign: 'left',
- renderCell: (params: GridRenderCellParams) => {
- return params?.row?.round ?? '-'
- }
- },
- {
- field: 'timestamp',
- headerName: 'Timestamp',
- flex: 1,
- minWidth: 180,
- align: 'left',
- headerAlign: 'left',
- renderCell: (params: GridRenderCellParams) => {
- if (params.value == null) {
- return '-'
- }
- try {
- const date = new Date(params.value)
- const hours = String(date.getUTCHours()).padStart(2, '0')
- const minutes = String(date.getUTCMinutes()).padStart(2, '0')
- const seconds = String(date.getUTCSeconds()).padStart(2, '0')
- return `${hours}:${minutes}:${seconds} UTC`
- } catch (e) {
- console.error('Error formatting timestamp:', e)
- return 'Invalid Date'
- }
- }
- },
- {
- field: 'errorCause',
- headerName: 'Reason for Issue',
- flex: 1,
- minWidth: 200,
- align: 'left',
- headerAlign: 'left',
- renderCell: (params: GridRenderCellParams) => {
- return params?.row?.errorCause || '-'
- }
- },
- {
- field: 'derivedStatus',
- headerName: 'Status',
- flex: 0.5,
- minWidth: 120,
- align: 'left',
- headerAlign: 'left',
- sortable: false,
- renderCell: (params: GridRenderCellParams) => {
- const hasError = !!params?.row?.errorCause
- const statusText = hasError ? 'Failed' : 'Success'
- const color = hasError ? '#FF4444' : '#4CAF50'
-
- return (
-
- )
- }
- }
-]
diff --git a/src/components/Table/data.ts b/src/components/Table/data.ts
deleted file mode 100644
index 6b1e975d..00000000
--- a/src/components/Table/data.ts
+++ /dev/null
@@ -1,604 +0,0 @@
-const Data = [
- {
- nodeId: 'R4Ht8DfKxX1LNZ3Y',
- network: 'Ethereum',
- ipAddress: '192.168.1.5',
- location: 'France',
- blockNumber: '601529',
- coordinates: [48.8566, 2.3522],
- uptime: '89%',
- nodeDetails: {
- port: 30306,
- last_seen: 'a few moments ago',
- enode: 'enode://qrst...7890',
- client_type: 'Geth',
- client_version: 'v1.9.25',
- os: 'linux-x64',
- country: 'France',
- city: 'Paris',
- P2P: true,
- Http: false
- },
- supportedStorage: {
- url: true,
- arwave: false,
- ipfs: false
- },
- platform: {
- cpus: 12,
- freemem: 579903488,
- totalmem: 17179869184,
- loadavg: [2.32373046875, 2.7783203125, 2.6728515625],
- arch: 'x64',
- machine: 'x86_64',
- platform: 'darwin',
- release: '22.6.0',
- osType: 'Darwin',
- osVersion:
- 'Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64',
- node: 'v18.16.0'
- }
- },
- {
- nodeId: 'V8Jfh6RaXmH9LPK2',
- network: 'Polygon',
- ipAddress: '192.168.1.3',
- location: 'USA',
- blockNumber: '401529',
- coordinates: [40.7128, -74.006],
- uptime: '95%',
- nodeDetails: {
- port: 30304,
- last_seen: 'a few moments ago',
- enode: 'enode://ijkl...9012',
- client_type: 'Besu',
- client_version: 'v21.1.1',
- os: 'win-x64',
- country: 'USA',
- city: 'New York',
- P2P: true,
- Http: true
- },
- supportedStorage: {
- url: true,
- arwave: false,
- ipfs: false
- },
- platform: {
- cpus: 12,
- freemem: 579903488,
- totalmem: 17179869184,
- loadavg: [2.32373046875, 2.7783203125, 2.6728515625],
- arch: 'x64',
- machine: 'x86_64',
- platform: 'darwin',
- release: '22.6.0',
- osType: 'Darwin',
- osVersion:
- 'Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64',
- node: 'v18.16.0'
- }
- },
- {
- nodeId: 'Q3Gs7BfJvW9DMN2X',
- network: 'Optimism',
- ipAddress: '192.168.1.4',
- location: 'UK',
- blockNumber: '501529',
- coordinates: [51.5074, -0.1278],
- uptime: '92%',
- nodeDetails: {
- port: 30305,
- last_seen: 'a few moments ago',
- enode: 'enode://mnop...3456',
- client_type: 'Parity',
- client_version: 'v2.7.2',
- os: 'linux-x64',
- country: 'UK',
- city: 'London',
- P2P: false,
- Http: true
- },
- supportedStorage: {
- url: false,
- arwave: true,
- ipfs: false
- },
- platform: {
- cpus: 12,
- freemem: 579903488,
- totalmem: 17179869184,
- loadavg: [2.32373046875, 2.7783203125, 2.6728515625],
- arch: 'x64',
- machine: 'x86_64',
- platform: 'darwin',
- release: '22.6.0',
- osType: 'Darwin',
- osVersion:
- 'Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64',
- node: 'v18.16.0'
- }
- },
- {
- nodeId: 'B3Ls9CnTzQW8JKH4',
- network: 'Ethereum',
- ipAddress: '192.168.1.5',
- location: 'Brazil',
- blockNumber: '901529',
- coordinates: [-23.5558, -46.6396],
- uptime: '91%',
- nodeDetails: {
- port: 30309,
- last_seen: 'a few moments ago',
- enode: 'enode://yzab...5678',
- client_type: 'Geth',
- client_version: 'v1.9.25',
- os: 'linux-x64',
- country: 'Brazil',
- city: 'Sao Paulo',
- P2P: true,
- Http: false
- },
- supportedStorage: {
- url: false,
- arwave: true,
- ipfs: true
- },
- platform: {
- cpus: 12,
- freemem: 579903488,
- totalmem: 17179869184,
- loadavg: [2.32373046875, 2.7783203125, 2.6728515625],
- arch: 'x64',
- machine: 'x86_64',
- platform: 'darwin',
- release: '22.6.0',
- osType: 'Darwin',
- osVersion:
- 'Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64',
- node: 'v18.16.0'
- }
- },
- {
- nodeId: 'C6Np5BtMwD7FYLR9',
- network: 'Polygon',
- ipAddress: '192.168.1.6',
- location: 'Australia',
- blockNumber: '801529',
- coordinates: [-33.8688, 151.2093],
- uptime: '93%',
- nodeDetails: {
- port: 30308,
- last_seen: 'a few moments ago',
- enode: 'enode://uvwx...1234',
- client_type: 'Besu',
- client_version: 'v21.1.1',
- os: 'linux-x64',
- country: 'Australia',
- city: 'Sydney',
- P2P: true,
- Http: true
- },
- supportedStorage: {
- url: false,
- arwave: false,
- ipfs: true
- },
- platform: {
- cpus: 12,
- freemem: 579903488,
- totalmem: 17179869184,
- loadavg: [2.32373046875, 2.7783203125, 2.6728515625],
- arch: 'x64',
- machine: 'x86_64',
- platform: 'darwin',
- release: '22.6.0',
- osType: 'Darwin',
- osVersion:
- 'Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64',
- node: 'v18.16.0'
- }
- },
- {
- nodeId: 'D7Uf1QrWzF3AYZ5K',
- network: 'Ethereum',
- ipAddress: '192.168.1.7',
- location: 'Japan',
- blockNumber: '1001529',
- coordinates: [35.6764, 139.65],
- uptime: '96%',
- nodeDetails: {
- port: 30310,
- last_seen: 'a few moments ago',
- enode: 'enode://cdef...9012',
- client_type: 'Geth',
- client_version: 'v1.9.25',
- os: 'linux-x64',
- country: 'Japan',
- city: 'Tokyo',
- P2P: true,
- Http: false
- },
- supportedStorage: {
- url: true,
- arwave: false,
- ipfs: false
- },
- platform: {
- cpus: 12,
- freemem: 579903488,
- totalmem: 17179869184,
- loadavg: [2.32373046875, 2.7783203125, 2.6728515625],
- arch: 'x64',
- machine: 'x86_64',
- platform: 'darwin',
- release: '22.6.0',
- osType: 'Darwin',
- osVersion:
- 'Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64',
- node: 'v18.16.0'
- }
- },
- {
- nodeId: 'E8Vg2RsXzG4BZ6L',
- network: 'Polygon',
- ipAddress: '192.168.1.8',
- location: 'India',
- blockNumber: '1101529',
- coordinates: [19.076, 72.8777],
- uptime: '92%',
- nodeDetails: {
- port: 30311,
- last_seen: 'a few moments ago',
- enode: 'enode://ghij...3456',
- client_type: 'Besu',
- client_version: 'v21.1.1',
- os: 'win-x64',
- country: 'India',
- city: 'Mumbai',
- P2P: true,
- Http: true
- },
- supportedStorage: {
- url: true,
- arwave: false,
- ipfs: false
- },
- platform: {
- cpus: 12,
- freemem: 579903488,
- totalmem: 17179869184,
- loadavg: [2.32373046875, 2.7783203125, 2.6728515625],
- arch: 'x64',
- machine: 'x86_64',
- platform: 'darwin',
- release: '22.6.0',
- osType: 'Darwin',
- osVersion:
- 'Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64',
- node: 'v18.16.0'
- }
- },
- {
- nodeId: 'F9Wh3StYzH5CZ7M',
- network: 'Optimism',
- ipAddress: '192.168.1.9',
- location: 'China',
- blockNumber: '1201529',
- coordinates: [39.9042, 116.4074],
- uptime: '93%',
- nodeDetails: {
- port: 30312,
- last_seen: 'a few moments ago',
- enode: 'enode://ijkl...7890',
- client_type: 'Parity',
- client_version: 'v2.7.2',
- os: 'linux-x64',
- country: 'China',
- city: 'Beijing',
- P2P: true,
- Http: true
- },
- supportedStorage: {
- url: true,
- arwave: false,
- ipfs: false
- },
- platform: {
- cpus: 12,
- freemem: 579903488,
- totalmem: 17179869184,
- loadavg: [2.32373046875, 2.7783203125, 2.6728515625],
- arch: 'x64',
- machine: 'x86_64',
- platform: 'darwin',
- release: '22.6.0',
- osType: 'Darwin',
- osVersion:
- 'Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64',
- node: 'v18.16.0'
- }
- },
- {
- nodeId: 'G0Xj4UvAzI6EZ8N',
- network: 'Ethereum',
- ipAddress: '192.168.1.10',
- location: 'South Korea',
- blockNumber: '1301529',
- coordinates: [37.5519, 126.9918],
- uptime: '94%',
- nodeDetails: {
- port: 30313,
- last_seen: 'a few moments ago',
- enode: 'enode://klmn...1234',
- client_type: 'Geth',
- client_version: 'v1.9.25',
- os: 'linux-x64',
- country: 'South Korea',
- city: 'Seoul',
- P2P: true,
- Http: false
- },
- supportedStorage: {
- url: false,
- arwave: true,
- ipfs: false
- },
- platform: {
- cpus: 12,
- freemem: 579903488,
- totalmem: 17179869184,
- loadavg: [2.32373046875, 2.7783203125, 2.6728515625],
- arch: 'x64',
- machine: 'x86_64',
- platform: 'darwin',
- release: '22.6.0',
- osType: 'Darwin',
- osVersion:
- 'Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64',
- node: 'v18.16.0'
- }
- },
- {
- nodeId: 'H1Yk5WbBzJ7GZ9O',
- network: 'Polygon',
- ipAddress: '192.168.1.11',
- location: 'Canada',
- blockNumber: '1401529',
- coordinates: [43.651, -79.347],
- uptime: '95%',
- nodeDetails: {
- port: 30314,
- last_seen: 'a few moments ago',
- enode: 'enode://mnop...5678',
- client_type: 'Besu',
- client_version: 'v21.1.1',
- os: 'win-x64',
- country: 'Canada',
- city: 'Toronto',
- P2P: true,
- Http: true
- },
- supportedStorage: {
- url: false,
- arwave: false,
- ipfs: true
- },
- platform: {
- cpus: 12,
- freemem: 579903488,
- totalmem: 17179869184,
- loadavg: [2.32373046875, 2.7783203125, 2.6728515625],
- arch: 'x64',
- machine: 'x86_64',
- platform: 'darwin',
- release: '22.6.0',
- osType: 'Darwin',
- osVersion:
- 'Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64',
- node: 'v18.16.0'
- }
- },
- {
- nodeId: 'N0Op9YaEzL1HZ1P',
- network: 'Ethereum',
- ipAddress: '192.168.1.15',
- location: 'South Africa',
- blockNumber: '1801529',
- uptime: '90%',
- coordinates: [-33.9249, 18.4241],
- nodeDetails: {
- port: 30316,
- last_seen: 'a few moments ago',
- enode: 'enode://abcd...5678',
- client_type: 'Geth',
- client_version: 'v1.9.25',
- os: 'linux-x64',
- country: 'South Africa',
- city: 'Cape Town',
- P2P: true,
- Http: false
- },
- supportedStorage: {
- url: true,
- arwave: false,
- ipfs: true
- },
- platform: {
- cpus: 12,
- freemem: 579903488,
- totalmem: 17179869184,
- loadavg: [2.32373046875, 2.7783203125, 2.6728515625],
- arch: 'x64',
- machine: 'x86_64',
- platform: 'darwin',
- release: '22.6.0',
- osType: 'Darwin',
- osVersion:
- 'Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64',
- node: 'v18.16.0'
- }
- },
- {
- nodeId: 'P1Pq0YbFzM2IZ2Q',
- network: 'Polygon',
- ipAddress: '192.168.1.16',
- location: 'Argentina',
- blockNumber: '1901529',
- uptime: '92%',
- coordinates: [-34.6037, -58.3816],
- nodeDetails: {
- port: 30317,
- last_seen: 'a few moments ago',
- enode: 'enode://efgh...7890',
- client_type: 'Besu',
- client_version: 'v21.1.1',
- os: 'win-x64',
- country: 'Argentina',
- city: 'Buenos Aires',
- P2P: true,
- Http: true
- },
- supportedStorage: {
- url: false,
- arwave: true,
- ipfs: true
- },
- platform: {
- cpus: 12,
- freemem: 579903488,
- totalmem: 17179869184,
- loadavg: [2.32373046875, 2.7783203125, 2.6728515625],
- arch: 'x64',
- machine: 'x86_64',
- platform: 'darwin',
- release: '22.6.0',
- osType: 'Darwin',
- osVersion:
- 'Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64',
- node: 'v18.16.0'
- }
- },
- {
- nodeId: 'Q2Rq1ZcGzN3JZ3R',
- network: 'Optimism',
- ipAddress: '192.168.1.17',
- location: 'New Zealand',
- blockNumber: '2001529',
- uptime: '94%',
- coordinates: [-36.8485, 174.7633],
- nodeDetails: {
- port: 30318,
- last_seen: 'a few moments ago',
- enode: 'enode://ijkl...9012',
- client_type: 'Parity',
- client_version: 'v2.7.2',
- os: 'linux-x64',
- country: 'New Zealand',
- city: 'Auckland',
- P2P: true,
- Http: false
- },
- supportedStorage: {
- url: true,
- arwave: false,
- ipfs: true
- },
- platform: {
- cpus: 12,
- freemem: 579903488,
- totalmem: 17179869184,
- loadavg: [2.32373046875, 2.7783203125, 2.6728515625],
- arch: 'x64',
- machine: 'x86_64',
- platform: 'darwin',
- release: '22.6.0',
- osType: 'Darwin',
- osVersion:
- 'Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64',
- node: 'v18.16.0'
- }
- },
- {
- nodeId: 'V7Wu6EgLzS8OD8W',
- network: 'Polygon',
- ipAddress: '192.168.1.22',
- location: 'Singapore',
- blockNumber: '2501529',
- uptime: '93%',
- coordinates: [1.3521, 103.8198],
- nodeDetails: {
- port: 30323,
- last_seen: 'a few moments ago',
- enode: 'enode://efgh...5678',
- client_type: 'Besu',
- client_version: 'v21.1.1',
- os: 'win-x64',
- country: 'Singapore',
- city: 'Singapore',
- P2P: false,
- Http: true
- },
- supportedStorage: {
- url: false,
- arwave: true,
- ipfs: true
- },
- platform: {
- cpus: 12,
- freemem: 579903488,
- totalmem: 17179869184,
- loadavg: [2.32373046875, 2.7783203125, 2.6728515625],
- arch: 'x64',
- machine: 'x86_64',
- platform: 'darwin',
- release: '22.6.0',
- osType: 'Darwin',
- osVersion:
- 'Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64',
- node: 'v18.16.0'
- }
- },
- {
- nodeId: 'W8Xv7FhMzT9PE9X',
- network: 'Optimism',
- ipAddress: '192.168.1.23',
- location: 'Romania',
- blockNumber: '2601529',
- uptime: '94%',
- coordinates: [44.4268, 26.1025],
- nodeDetails: {
- port: 30324,
- last_seen: 'a few moments ago',
- enode: 'enode://ijkl...9012',
- client_type: 'Parity',
- client_version: 'v2.7.2',
- os: 'linux-x64',
- country: 'Romania',
- city: 'Bucharest',
- P2P: true,
- Http: false
- },
- supportedStorage: {
- url: true,
- arwave: false,
- ipfs: true
- },
- platform: {
- cpus: 12,
- freemem: 579903488,
- totalmem: 17179869184,
- loadavg: [2.32373046875, 2.7783203125, 2.6728515625],
- arch: 'x64',
- machine: 'x86_64',
- platform: 'darwin',
- release: '22.6.0',
- osType: 'Darwin',
- osVersion:
- 'Darwin Kernel Version 22.6.0: Wed Jul 5 22:21:56 PDT 2023; root:xnu-8796.141.3~6/RELEASE_X86_64',
- node: 'v18.16.0'
- }
- }
-]
-
-export { Data }
diff --git a/src/components/Table/hooks/useTable.ts b/src/components/Table/hooks/useTable.ts
deleted file mode 100644
index 017741b8..00000000
--- a/src/components/Table/hooks/useTable.ts
+++ /dev/null
@@ -1,255 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from 'react'
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid'
-import { useNodesContext } from '@/context/NodesContext'
-import { useCountriesContext } from '@/context/CountriesContext'
-import { useHistoryContext } from '@/context/HistoryContext'
-import { TableTypeEnum } from '../../../shared/enums/TableTypeEnum'
-import { NodeData } from '../../../shared/types/RowDataType'
-
-export const useTable = (tableType: TableTypeEnum) => {
- const {
- data: nodesData,
- loading: nodesLoading,
- currentPage: nodesCurrentPage,
- pageSize: nodesPageSize,
- totalItems: nodesTotalItems,
- setCurrentPage: setNodesCurrentPage,
- setPageSize: setNodesPageSize,
- setFilter: setNodesFilter,
- totalUptime,
- searchTerm,
- setSearchTerm
- } = useNodesContext()
-
- const {
- data: countryData,
- loading: countriesLoading,
- currentPage: countriesCurrentPage,
- pageSize: countriesPageSize,
- totalItems: countriesTotalItems,
- setCurrentPage: setCountriesCurrentPage,
- setPageSize: setCountriesPageSize,
- setFilter: setCountriesFilter
- } = useCountriesContext()
-
- const {
- data: historyData,
- loading: historyLoading,
- currentPage: historyCurrentPage,
- pageSize: historyPageSize,
- totalItems: historyTotalItems,
- setCurrentPage: setHistoryCurrentPage,
- setPageSize: setHistoryPageSize,
- nodeId,
- setNodeId
- } = useHistoryContext()
-
- const [selectedNode, setSelectedNode] = useState(null)
- // const [searchTerm, setSearchTerm] = useState('')
- const [searchTermCountry, setSearchTermCountry] = useState('')
- const searchTimeout = useRef(null)
-
- const data = useMemo(() => {
- switch (tableType) {
- case TableTypeEnum.NODES:
- return nodesData
- case TableTypeEnum.COUNTRIES:
- return countryData
- case TableTypeEnum.HISTORY:
- return historyData
- default:
- return []
- }
- }, [tableType, nodesData, countryData, historyData])
-
- const loading = useMemo(() => {
- switch (tableType) {
- case TableTypeEnum.NODES:
- return nodesLoading
- case TableTypeEnum.COUNTRIES:
- return countriesLoading
- case TableTypeEnum.HISTORY:
- return historyLoading
- default:
- return false
- }
- }, [tableType, nodesLoading, countriesLoading, historyLoading])
-
- const currentPage = useMemo(() => {
- switch (tableType) {
- case TableTypeEnum.NODES:
- return nodesCurrentPage
- case TableTypeEnum.COUNTRIES:
- return countriesCurrentPage
- case TableTypeEnum.HISTORY:
- return historyCurrentPage
- default:
- return 1
- }
- }, [tableType, nodesCurrentPage, countriesCurrentPage, historyCurrentPage])
-
- const pageSize = useMemo(() => {
- switch (tableType) {
- case TableTypeEnum.NODES:
- return nodesPageSize
- case TableTypeEnum.COUNTRIES:
- return countriesPageSize
- case TableTypeEnum.HISTORY:
- return historyPageSize
- default:
- return 10
- }
- }, [tableType, nodesPageSize, countriesPageSize, historyPageSize])
-
- const totalItems = useMemo(() => {
- switch (tableType) {
- case TableTypeEnum.NODES:
- return nodesTotalItems
- case TableTypeEnum.COUNTRIES:
- return countriesTotalItems
- case TableTypeEnum.HISTORY:
- return historyTotalItems
- default:
- return 0
- }
- }, [tableType, nodesTotalItems, countriesTotalItems, historyTotalItems])
-
- const handlePaginationChange = useCallback(
- (model: { page: number; pageSize: number }) => {
- switch (tableType) {
- case TableTypeEnum.NODES:
- setNodesCurrentPage(model.page + 1)
- setNodesPageSize(model.pageSize)
- break
- case TableTypeEnum.COUNTRIES:
- setCountriesCurrentPage(model.page + 1)
- setCountriesPageSize(model.pageSize)
- break
- case TableTypeEnum.HISTORY:
- setHistoryCurrentPage(model.page + 1)
- setHistoryPageSize(model.pageSize)
- break
- }
- },
- [
- tableType,
- setNodesCurrentPage,
- setNodesPageSize,
- setCountriesCurrentPage,
- setCountriesPageSize,
- setHistoryCurrentPage,
- setHistoryPageSize
- ]
- )
-
- const handleSortModelChange = useCallback(
- (model: GridSortModel) => {
- if (model.length > 0) {
- const { field, sort } = model[0]
- const filterModel: GridFilterModel = {
- items: [
- {
- id: 1,
- field,
- operator: 'sort',
- value: sort
- }
- ]
- }
-
- switch (tableType) {
- case TableTypeEnum.NODES:
- setNodesFilter(filterModel)
- break
- case TableTypeEnum.COUNTRIES:
- setCountriesFilter(filterModel)
- break
- }
- }
- },
- [tableType, setNodesFilter, setCountriesFilter]
- )
-
- const handleFilterChange = useCallback(
- (model: GridFilterModel) => {
- switch (tableType) {
- case TableTypeEnum.NODES:
- setNodesFilter(model)
- break
- case TableTypeEnum.COUNTRIES:
- setCountriesFilter(model)
- break
- case TableTypeEnum.HISTORY:
- if (model.items?.[0]?.field === 'id') {
- setNodeId(model.items[0].value as string)
- }
- break
- }
- },
- [tableType, setNodesFilter, setCountriesFilter, setNodeId]
- )
-
- const handleSearchChange = useCallback(
- (term: string) => {
- // const filterModel: GridFilterModel = {
- // items: [{ field: 'name', operator: 'contains', value: term }]
- // }
- console.log(
- `[useTable] handleSearchChange called with term: "${term}" for tableType: ${tableType}`
- )
- if (tableType === TableTypeEnum.COUNTRIES) {
- setSearchTermCountry(term)
- if (searchTimeout.current) {
- clearTimeout(searchTimeout.current)
- }
- // searchTimeout.current = setTimeout(() => {
- // setCountriesFilter(filterModel)
- // }, 500)
- } else {
- setSearchTerm(term)
- if (searchTimeout.current) {
- clearTimeout(searchTimeout.current)
- }
- // searchTimeout.current = setTimeout(() => {
- // setNodesFilter(filterModel)
- // }, 500)
- }
- },
- [tableType, setCountriesFilter, setSearchTerm, setNodesFilter]
- )
-
- const handleReset = useCallback(() => {
- const emptyFilter: GridFilterModel = { items: [] }
-
- if (tableType === TableTypeEnum.COUNTRIES) {
- setSearchTermCountry('')
- setCountriesFilter(emptyFilter)
- } else {
- setSearchTerm('')
- setNodesFilter(emptyFilter)
- }
-
- if (searchTimeout.current) {
- clearTimeout(searchTimeout.current)
- }
- }, [tableType, setCountriesFilter, setSearchTerm, setNodesFilter])
-
- return {
- data,
- loading,
- currentPage,
- pageSize,
- totalItems,
- selectedNode,
- setSelectedNode,
- searchTerm,
- searchTermCountry,
- totalUptime,
- nodeId,
- handlePaginationChange,
- handleSortModelChange,
- handleFilterChange,
- handleSearchChange,
- handleReset
- }
-}
diff --git a/src/components/Table/index.module.css b/src/components/Table/index.module.css
deleted file mode 100644
index 2fe62548..00000000
--- a/src/components/Table/index.module.css
+++ /dev/null
@@ -1,164 +0,0 @@
-.root {
- width: 100%;
- height: calc(100vh - 64px);
- margin: 0 auto;
- border-radius: 15px;
- background: var(--white);
- box-shadow: 0px 3.5px 5.5px 0px rgba(0, 0, 0, 0.02);
- padding: 32px;
- display: flex;
- flex-direction: column;
- overflow: hidden;
-}
-
-.search{
- background: var(--white);
- color: var(--gray-700);
- border: none;
- margin-bottom: '10px';
- padding: '5px'
-}
-
-.title {
- color: var(--gray-700);
- font-family: 'Sharp Sans', Helvetica, Arial, sans-serif;
- font-size: 18px;
- font-style: normal;
- font-weight: 700;
- line-height: 140%;
-}
-
-.headerTitle {
- font-family: 'Sharp Sans', sans-serif;
- font-size: 14px;
- font-weight: 600;
- line-height: 21px;
- color: #6c757d;
- text-transform: uppercase;
-}
-
-.dropdownTriggerBox {
- width: 100%;
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
-}
-
-.dropdown {
- background-color: transparent;
- border: 0;
- outline: none;
-}
-
-.download {
- background-color: transparent;
- border: none;
- color: inherit;
- font: inherit;
- padding: 0;
- margin: 0;
- cursor: pointer;
- outline: none;
- text-decoration: none;
-}
-
-.download:hover,
-.download:focus {
- outline: none;
- background-color: rgba(0, 0, 0, 0.1);
-}
-
-.actionButtons {
- display: flex;
- gap: 8px;
- justify-content: center;
- align-items: center;
- width: 100%;
- height: 100%;
-}
-
-.actionButton {
- min-width: 36px !important;
- width: 36px;
- height: 36px;
- padding: 6px;
- border-radius: 50% !important;
- color: #CF1FB1 !important;
- border-color: #CF1FB1 !important;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.actionButton:hover {
- background-color: rgba(207, 31, 177, 0.04) !important;
-}
-
-.actionButton svg {
- font-size: 18px;
-}
-
-.actionCell {
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0;
-}
-
-.statusContainer {
- display: flex;
- align-items: center;
- gap: 8px;
- justify-content: center;
-}
-
-.statusDot {
- width: 10px;
- height: 10px;
- border-radius: 50%;
- display: inline-block;
-}
-
-/* History table specific styles */
-.historyTable {
- border-collapse: separate;
- border-spacing: 0;
- width: 100%;
-}
-
-.historyTable th {
- background-color: #f8f9fa;
- color: #6c757d;
- font-weight: 600;
- text-transform: uppercase;
- padding: 16px;
- border-bottom: 1px solid #e9ecef;
-}
-
-.historyTable td {
- padding: 16px;
- border-bottom: 1px solid #e9ecef;
- color: #212529;
-}
-
-.historyTable tr:last-child td {
- border-bottom: none;
-}
-
-/* Status colors */
-.statusDot {
- display: inline-block;
- width: 8px;
- height: 8px;
- border-radius: 50%;
- margin-right: 8px;
-}
-
-.statusText {
- font-weight: 500;
-}
-
-.fixedWidth {
- max-width: 1240px;
-}
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
deleted file mode 100644
index a7bb705b..00000000
--- a/src/components/Table/index.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-import React, { JSXElementConstructor, useMemo, useEffect } from 'react'
-import {
- DataGrid,
- GridColDef,
- GridToolbarProps,
- GridValidRowModel,
- useGridApiRef,
- GridSortModel,
- GridFilterModel
-} from '@mui/x-data-grid'
-import { useTable } from './hooks/useTable'
-import { TableTypeEnum } from '../../shared/enums/TableTypeEnum'
-import { nodeColumns, countryColumns, historyColumns } from './columns'
-import { styled } from '@mui/material/styles'
-
-import styles from './index.module.css'
-
-import NodeDetails from './NodeDetails'
-import CustomToolbar from '../Toolbar'
-import CustomPagination from './CustomPagination'
-
-const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
- '& .MuiDataGrid-toolbarContainer': {
- display: 'flex',
- gap: '50px',
- '& .MuiButton-root': {
- fontFamily: 'Sharp Sans, sans-serif',
- fontSize: '14px',
- fontWeight: 400,
- lineHeight: '21px',
- textAlign: 'left',
- color: '#000000',
- '& .MuiSvgIcon-root': {
- color: '#CF1FB1'
- }
- },
- '& .MuiBadge-badge': {
- backgroundColor: '#CF1FB1'
- }
- },
- '& .MuiDataGrid-columnHeaders': {
- backgroundColor: '#f8f9fa',
- borderBottom: '1px solid #e9ecef'
- },
- '& .MuiDataGrid-columnHeaderTitle': {
- fontFamily: "'Sharp Sans', sans-serif",
- fontSize: '14px',
- fontWeight: 600,
- lineHeight: '21px',
- textAlign: 'left',
- color: '#6c757d',
- textTransform: 'uppercase',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis'
- },
- '& .MuiDataGrid-cell': {
- fontFamily: "'Sharp Sans', sans-serif",
- fontSize: '14px',
- fontWeight: 400,
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis'
- },
- '& .MuiDataGrid-columnSeparator': {
- visibility: 'visible',
- color: '#E0E0E0'
- },
- '& .MuiDataGrid-columnHeader:hover .MuiDataGrid-columnSeparator': {
- visibility: 'visible',
- color: '#BDBDBD'
- },
- '& .MuiDataGrid-columnHeader:hover': {
- '& .MuiDataGrid-columnSeparator': {
- visibility: 'visible'
- }
- },
- '& .MuiDataGrid-cellContent': {
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis'
- }
-}))
-
-interface TableProps {
- data?: any[]
- loading?: boolean
- currentPage?: number
- pageSize?: number
- totalItems?: number
- nodeId?: string
- tableType: TableTypeEnum
- onPaginationChange?: (page: number, pageSize: number) => void
- onSortModelChange?: (model: GridSortModel) => void
- onFilterChange?: (model: GridFilterModel) => void
-}
-
-export const Table: React.FC = ({
- data: propsData,
- loading: propsLoading,
- currentPage: propCurrentPage,
- pageSize: propPageSize,
- totalItems: propTotalItems,
- nodeId,
- tableType,
- onPaginationChange,
- onSortModelChange,
- onFilterChange
-}) => {
- const {
- data: hookData,
- loading: hookLoading,
- currentPage: hookCurrentPage,
- pageSize: hookPageSize,
- totalItems: hookTotalItems,
- selectedNode,
- setSelectedNode,
- searchTerm,
- searchTermCountry,
- totalUptime,
- handlePaginationChange,
- handleSortModelChange,
- handleFilterChange,
- handleSearchChange,
- handleReset
- } = useTable(tableType)
-
- const apiRef = useGridApiRef()
-
- // Add a ref to track previous address
- const prevNodeAddressRef = React.useRef('')
-
- // Use props data if provided, otherwise use hook data
- const data = propsData || hookData
- const loading = propsLoading || hookLoading
- const currentPage = propCurrentPage || hookCurrentPage
- const pageSize = propPageSize || hookPageSize
- const totalItems = propTotalItems || hookTotalItems
-
- const columns = useMemo(() => {
- switch (tableType) {
- case TableTypeEnum.NODES:
- return nodeColumns(totalUptime, setSelectedNode)
- case TableTypeEnum.COUNTRIES:
- return countryColumns
- case TableTypeEnum.HISTORY:
- return historyColumns
- default:
- return []
- }
- }, [tableType, totalUptime, setSelectedNode])
-
- useEffect(() => {
- if (nodeId && onFilterChange) {
- onFilterChange({
- items: [
- {
- id: 1,
- field: 'id',
- operator: 'equals',
- value: nodeId
- }
- ]
- })
- }
- }, [nodeId, onFilterChange])
-
- const handlePaginationModelChange = (model: { page: number; pageSize: number }) => {
- if (onPaginationChange) {
- onPaginationChange(model.page + 1, model.pageSize)
- } else {
- handlePaginationChange(model)
- }
- }
-
- return (
-
-
- []}
- slots={{
- toolbar: CustomToolbar as JSXElementConstructor
- }}
- slotProps={{
- toolbar: {
- searchTerm:
- tableType === TableTypeEnum.COUNTRIES ? searchTermCountry : searchTerm,
- onSearchChange: handleSearchChange,
- onReset: handleReset,
- tableType: tableType,
- apiRef: apiRef.current,
- totalUptime: totalUptime
- }
- }}
- initialState={{
- columns: {
- columnVisibilityModel:
- tableType === TableTypeEnum.NODES
- ? {
- network: false,
- publicKey: false,
- version: false,
- http: false,
- p2p: false,
- supportedStorage: false,
- platform: false,
- codeHash: false,
- allowedAdmins: false,
- dnsFilter: false,
- city: false,
- country: false
- }
- : {}
- },
- pagination: {
- paginationModel: {
- pageSize: pageSize,
- page: currentPage - 1
- }
- },
- density: 'comfortable'
- }}
- pagination
- disableColumnMenu
- pageSizeOptions={[10, 25, 50, 100]}
- paginationModel={{
- page: currentPage - 1,
- pageSize: pageSize
- }}
- onPaginationModelChange={handlePaginationModelChange}
- loading={loading}
- disableRowSelectionOnClick
- getRowId={(row) =>
- tableType === TableTypeEnum.HISTORY ? row.timestamp : row.id
- }
- paginationMode="server"
- sortingMode="server"
- filterMode="server"
- onSortModelChange={handleSortModelChange}
- onFilterModelChange={handleFilterChange}
- rowCount={totalItems}
- autoHeight={false}
- hideFooter={true}
- processRowUpdate={(
- newRow: GridValidRowModel,
- oldRow: GridValidRowModel
- ): GridValidRowModel => {
- const processCell = (value: unknown) => {
- if (typeof value === 'object' && value !== null) {
- if ('dns' in value || 'ip' in value) {
- const dnsIpObj = value as { dns?: string; ip?: string; port?: string }
- return `${dnsIpObj.dns || dnsIpObj.ip}${dnsIpObj.port ? ':' + dnsIpObj.port : ''}`
- }
-
- if ('city' in value || 'country' in value) {
- const locationObj = value as { city?: string; country?: string }
- return `${locationObj.city} ${locationObj.country}`
- }
- }
- return value
- }
-
- return Object.fromEntries(
- Object.entries(newRow).map(([key, value]) => [key, processCell(value)])
- ) as GridValidRowModel
- }}
- apiRef={apiRef}
- />
-
-
onPaginationChange(page, pageSize)
- : (page: number) => handlePaginationChange({ page: page - 1, pageSize })
- }
- onPageSizeChange={
- onPaginationChange
- ? (size: number) => onPaginationChange(currentPage, size)
- : (size: number) =>
- handlePaginationChange({ page: currentPage - 1, pageSize: size })
- }
- />
- {selectedNode && (
- setSelectedNode(null)} />
- )}
-
-
-
-
- }
- onClick={handleExport}
- size="small"
- >
- Export
-
-
-
-
- onSearchChange(e.target.value)}
- onKeyPress={handleKeyPress}
- placeholder="Search..."
- variant="outlined"
- size="small"
- InputProps={{
- endAdornment: (
- <>
-
-
-
- {searchTerm && (
-
-
-
- )}
-
- )
- }}
- />
-
-
- )
-}
-
-export default CustomToolbar
diff --git a/src/components/TopCountriesChart/TopCountriesChart .tsx b/src/components/TopCountriesChart/TopCountriesChart .tsx
deleted file mode 100644
index a0389e4a..00000000
--- a/src/components/TopCountriesChart/TopCountriesChart .tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React from 'react'
-import Link from 'next/link'
-import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer, CartesianGrid } from 'recharts'
-import styles from './TopCountriesChart.module.css'
-import { getRoutes } from '../../config'
-import { useCountriesContext } from '@/context/CountriesContext'
-import { CountryStatsType } from '@/shared/types/dataTypes'
-
-const TopCountriesChart: React.FC = () => {
- const routes = getRoutes()
- const { data: countryStats } = useCountriesContext()
-
- const topCountries = countryStats.slice(0, 5).map((stat: CountryStatsType) => ({
- country: stat.country,
- nodes: stat.totalNodes
- }))
-
- const maxNodes = Math.max(...topCountries.map((country) => country.nodes))
-
- const tickInterval = maxNodes > 50000 ? 5000 : 1000
- const roundedMax = Math.ceil(maxNodes / tickInterval) * tickInterval
- const tickValues = Array.from({ length: 6 }, (_, i) => Math.round((roundedMax / 5) * i))
-
- return (
-
-
Top 5 countries by Ocean Nodes
-
-
-
- }
- domain={[0, roundedMax]}
- ticks={tickValues}
- />
-
-
-
-
-
-
-
-
-
-
-
-
-
- VIEW ALL
-
-
-
-
-
Total Eligible
-
- VIEW ALL
-
-
-
{total}
-
+ {children}
+
+);
+
+export default Card;
diff --git a/src/components/chart/chart-type.ts b/src/components/chart/chart-type.ts
new file mode 100644
index 00000000..5fc29aa7
--- /dev/null
+++ b/src/components/chart/chart-type.ts
@@ -0,0 +1,7 @@
+export enum ChartTypeEnum {
+ CPU_ARCH_DISTRIBUTION = 'cpu-arch-distribution',
+ CPU_CORES_DISTRIBUTION = 'cpu-cores-distribution',
+ JOBS_PER_EPOCH = 'jobs-per-epoch',
+ OS_DISTRIBUTION = 'os-distribution',
+ REVENUE_PER_EPOCH = 'revenue-per-epoch',
+}
diff --git a/src/components/chart/gauge.module.css b/src/components/chart/gauge.module.css
new file mode 100644
index 00000000..94bdc5fc
--- /dev/null
+++ b/src/components/chart/gauge.module.css
@@ -0,0 +1,54 @@
+.root {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ .heading {
+ text-align: center;
+ }
+
+ .chartWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ height: 100%;
+
+ .chart {
+ height: 110px;
+ position: relative;
+ width: 220px;
+
+ .valueWrapper {
+ align-items: center;
+ bottom: -16px;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ left: 0;
+ position: absolute;
+ text-align: center;
+ width: 100%;
+
+ .value {
+ font-size: 30px;
+ font-weight: bold;
+ line-height: 1;
+ }
+
+ .label {
+ font-size: 12px;
+ color: var(--text-secondary);
+ }
+ }
+ }
+
+ .footer {
+ color: var(--text-secondary);
+ display: flex;
+ font-size: 14px;
+ gap: 16px;
+ justify-content: space-between;
+ }
+ }
+}
diff --git a/src/components/chart/gauge.tsx b/src/components/chart/gauge.tsx
new file mode 100644
index 00000000..6543a938
--- /dev/null
+++ b/src/components/chart/gauge.tsx
@@ -0,0 +1,70 @@
+import { formatNumber } from '@/utils/formatters';
+import { useMemo } from 'react';
+import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
+import styles from './gauge.module.css';
+
+type GaugeProps = {
+ label?: string;
+ max: number;
+ min: number;
+ title: string;
+ value: number;
+ valueSuffix?: string;
+};
+
+const Gauge = ({ label, max, min, title, value, valueSuffix }: GaugeProps) => {
+ const slices = useMemo(() => {
+ const offsetValue = value - min;
+ const offsetMax = max - offsetValue;
+ return [
+ { value: offsetValue, color: 'var(--accent1)' },
+ { value: offsetMax, color: 'var(--background-glass)' },
+ ];
+ }, [max, min, value]);
+
+ return (
+
+
{title}
+
+
+
+
+
+ {slices.map((entry, index) => (
+ |
+ ))}
+
+
+
+
+
+ {formatNumber(value)}
+ {valueSuffix}
+
+ {label ?
{label}
: null}
+
+
+
+
+ {formatNumber(min)}
+ {valueSuffix}
+
+
+ {formatNumber(max)}
+ {valueSuffix}
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+export default HBarChart;
diff --git a/src/components/PieChart/PieChartCard.module.css b/src/components/chart/pie-chart.module.css
similarity index 63%
rename from src/components/PieChart/PieChartCard.module.css
rename to src/components/chart/pie-chart.module.css
index 0f05d101..927a82e4 100644
--- a/src/components/PieChart/PieChartCard.module.css
+++ b/src/components/chart/pie-chart.module.css
@@ -1,25 +1,14 @@
-.card {
- background-color: transparent;
- border-radius: 16px;
- padding: 24px;
- color: #FFFFFF;
+.root {
+ color: var(--text-primary);
text-align: center;
width: 100%;
max-width: 300px;
transition: all 0.3s ease-in-out;
}
-.card h3 {
- font-size: 18px;
- margin-bottom: 20px;
- font-weight: 500;
- line-height: 24px;
- margin-bottom: 0;
-}
-
.tapToSee {
font-size: 14px;
- color: #A0AEC0;
+ color: var(--text-secondary);
margin-top: 0;
font-weight: 400;
line-height: 18px;
diff --git a/src/components/chart/pie-chart.tsx b/src/components/chart/pie-chart.tsx
new file mode 100644
index 00000000..bb1dd805
--- /dev/null
+++ b/src/components/chart/pie-chart.tsx
@@ -0,0 +1,136 @@
+import { ChartTypeEnum } from '@/components/chart/chart-type';
+import { useCustomTooltip } from '@/components/chart/use-custom-tooltip';
+import React, { useMemo, useState } from 'react';
+import {
+ Cell,
+ Pie,
+ PieChart as RechartsPieChart,
+ Tooltip as RechartsTooltip,
+ ResponsiveContainer,
+ Sector,
+} from 'recharts';
+import styles from './pie-chart.module.css';
+
+type PieChartItem = {
+ color: string;
+ details?: string[];
+ name: string;
+ value: number;
+};
+
+type PieChartCardProps = {
+ chartType?: ChartTypeEnum;
+ data: PieChartItem[];
+ title: string;
+};
+
+const PieChart: React.FC = ({ chartType, data, title }) => {
+ const { handleMouseMove, handleMouseLeave, CustomRechartsTooltipComponent, renderTooltipPortal } = useCustomTooltip({
+ chartType,
+ labelKey: 'name',
+ });
+
+ const [activeIndex, setActiveIndex] = useState(undefined);
+ const [lockedIndex, setLockedIndex] = useState(undefined);
+ const [hoverText, setHoverText] = useState('Hover to see details');
+
+ const totalValue = useMemo(() => data.reduce((sum, entry) => sum + entry.value, 0), [data]);
+
+ const onPieEnter = (_: any, index: number) => {
+ if (lockedIndex === undefined) {
+ setActiveIndex(index);
+ const percentage = ((data[index].value / totalValue) * 100).toFixed(2);
+ setHoverText(`${data[index].name}: ${percentage}%`);
+ }
+ };
+
+ const onPieLeave = () => {
+ if (lockedIndex === undefined) {
+ setActiveIndex(undefined);
+ setHoverText('Hover to see details');
+ }
+ };
+
+ const onPieClick = (_: any, index: number) => {
+ if (lockedIndex === index) {
+ setLockedIndex(undefined);
+ setActiveIndex(undefined);
+ setHoverText('Hover to see details');
+ } else {
+ setLockedIndex(index);
+ setActiveIndex(index);
+ const percentage = ((data[index].value / totalValue) * 100).toFixed(2);
+ setHoverText(`${data[index].name}: ${percentage}%`);
+ }
+ };
+
+ const renderActiveShape = (props: any) => {
+ const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ };
+
+ return (
+
+
{title}
+
+
+
+ {data.map((entry, index) => (
+ |
+ ))}
+
+ } cursor={false} />
+
+
+
{hoverText}
+ {renderTooltipPortal()}
+
+
{label}
+
Total: {value} nodes
+ {payload.details && (
+
+ {Array.isArray(payload.details)
+ ? payload.details.map((detail: string, index: number) => (
+
+ ))
+ : null}
+
+ )}
+
+ Epoch {label}: {Number(value).toLocaleString()} jobs
+
+ );
+ break;
+ }
+ case ChartTypeEnum.REVENUE_PER_EPOCH: {
+ tooltipContent = (
+
+ Epoch {label}: USDC {Number(value).toLocaleString()}
+
+ );
+ break;
+ }
+ default: {
+ tooltipContent = Value: {Number(value).toLocaleString()}
;
+ }
+ }
+
+ return ReactDOM.createPortal(
+
+ {tooltipContent}
+
,
+ document.body
+ );
+ }, [tooltipInfo, chartType, labelKey /*cardTitle*/]);
+
+ return {
+ handleMouseMove,
+ handleMouseLeave,
+ CustomRechartsTooltipComponent,
+ renderTooltipPortal,
+ };
+};
diff --git a/src/components/chart/v-bar-chart.module.css b/src/components/chart/v-bar-chart.module.css
new file mode 100644
index 00000000..7e163790
--- /dev/null
+++ b/src/components/chart/v-bar-chart.module.css
@@ -0,0 +1,36 @@
+.chartWrapper {
+ align-content: start;
+ align-items: center;
+ display: grid;
+ grid-template-rows: auto 110px auto;
+ gap: 8px;
+}
+
+.chartFooter {
+ align-items: center;
+ display: flex;
+ gap: 16px;
+ justify-content: space-between;
+ padding: 0 4px;
+
+ .label {
+ color: var(--text-secondary);
+ font-size: 14px;
+ }
+
+ .currency {
+ color: var(--text-secondary);
+ font-size: 12px;
+ font-weight: 400;
+ }
+
+ .amount {
+ font-size: 20px;
+ font-weight: 600;
+ }
+}
+
+.heading {
+ margin-bottom: 16px;
+ text-align: center;
+}
diff --git a/src/components/chart/v-bar-chart.tsx b/src/components/chart/v-bar-chart.tsx
new file mode 100644
index 00000000..d3a2b0e0
--- /dev/null
+++ b/src/components/chart/v-bar-chart.tsx
@@ -0,0 +1,55 @@
+import { ChartTypeEnum } from '@/components/chart/chart-type';
+import { useCustomTooltip } from '@/components/chart/use-custom-tooltip';
+import { Bar, BarChart as RechartsBarChart, Tooltip as RechartsTooltip, ResponsiveContainer, XAxis } from 'recharts';
+import styles from './v-bar-chart.module.css';
+
+type VBarChartProps = {
+ axisKey: string;
+ barKey: string;
+ chartType?: ChartTypeEnum;
+ data: any[];
+ footer?: {
+ amount: string;
+ currency?: string;
+ label: string;
+ };
+ title: string;
+};
+
+const VBarChart = ({ axisKey, barKey, chartType, data, footer, title }: VBarChartProps) => {
+ const { handleMouseMove, handleMouseLeave, CustomRechartsTooltipComponent, renderTooltipPortal } = useCustomTooltip({
+ chartType,
+ labelKey: axisKey,
+ });
+
+ return (
+
+
{title}
+
+
+
+
+
+ } cursor={false} />
+
+
+ {renderTooltipPortal()}
+
+ {footer ? (
+
+
{footer.label}
+
+ {footer.currency && {footer.currency} }
+ {footer.amount}
+
+
+ ) : null}
+
{children}
;
+};
+
+export default Container;
diff --git a/src/components/environment-card/environment-card.module.css b/src/components/environment-card/environment-card.module.css
new file mode 100644
index 00000000..075cd131
--- /dev/null
+++ b/src/components/environment-card/environment-card.module.css
@@ -0,0 +1,117 @@
+.gridWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ .grid {
+ display: flex;
+ flex-direction: column;
+ gap: 16px 32px;
+
+ @media (min-width: 768px) {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+
+ &.compact {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
+
+ @media (min-width: 1100px) {
+ &.specsWithoutGpus,
+ &.gpuSpecs {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
+ }
+}
+
+.compactGrid {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 16px 32px;
+
+ .label {
+ font-size: 12px;
+ }
+}
+
+.link {
+ color: var(--accent1);
+
+ &:hover {
+ text-decoration: underline;
+ }
+}
+
+.label {
+ align-items: center;
+ color: var(--text-secondary);
+ display: flex;
+ font-size: 14px;
+
+ &.heading,
+ .heading {
+ color: var(--text-primary);
+ font-size: 14px;
+ font-weight: 600;
+ }
+
+ &.em,
+ .em {
+ color: var(--text-primary);
+ font-weight: 700;
+ }
+
+ .icon {
+ color: var(--accent1);
+ margin-right: 4px;
+ }
+}
+
+.balance {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 16px;
+
+ .link {
+ color: var(--accent1);
+ cursor: pointer;
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+}
+
+.footer {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ .buttons {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ .select {
+ min-width: 200px;
+ }
+ }
+
+ @media (min-width: 768px) {
+ align-items: center;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ .buttons {
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
+ }
+}
diff --git a/src/components/environment-card/environment-card.tsx b/src/components/environment-card/environment-card.tsx
new file mode 100644
index 00000000..f755823c
--- /dev/null
+++ b/src/components/environment-card/environment-card.tsx
@@ -0,0 +1,365 @@
+import Button from '@/components/button/button';
+import Card from '@/components/card/card';
+import GpuLabel from '@/components/gpu-label/gpu-label';
+import useEnvResources from '@/components/hooks/use-env-resources';
+import ProgressBar from '@/components/progress-bar/progress-bar';
+import { USDC_TOKEN_ADDRESS } from '@/constants/tokens';
+import { useRunJobContext } from '@/context/run-job-context';
+import useTokenSymbol from '@/lib/token-symbol';
+import { ComputeEnvironment, EnvNodeInfo } from '@/types/environments';
+import { formatNumber } from '@/utils/formatters';
+import DnsIcon from '@mui/icons-material/Dns';
+import MemoryIcon from '@mui/icons-material/Memory';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import SdStorageIcon from '@mui/icons-material/SdStorage';
+import classNames from 'classnames';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useMemo } from 'react';
+import styles from './environment-card.module.css';
+
+type EnvironmentCardProps = {
+ compact?: boolean;
+ environment: ComputeEnvironment;
+ nodeInfo: EnvNodeInfo;
+ showNodeName?: boolean;
+};
+
+const EnvironmentCard = ({ compact, environment, nodeInfo, showNodeName }: EnvironmentCardProps) => {
+ const router = useRouter();
+
+ const { selectEnv, selectToken } = useRunJobContext();
+
+ // const [selectedTokenAddress, setSelectedTokenAddress] = useState(getEnvSupportedTokens(environment)[0]);
+ const selectedTokenAddress = USDC_TOKEN_ADDRESS;
+ const tokenSymbol = useTokenSymbol(selectedTokenAddress);
+
+ const { cpu, cpuFee, disk, diskFee, gpus, gpuFees, ram, ramFee } = useEnvResources({
+ environment,
+ freeCompute: false,
+ tokenAddress: selectedTokenAddress,
+ });
+
+ const startingFee = useMemo(() => {
+ const minGpuFee = Object.values(gpuFees).reduce((min, fee) => (fee < min ? fee : min), Infinity);
+ return (cpuFee ?? 0) + (ramFee ?? 0) + (diskFee ?? 0) + (minGpuFee === Infinity ? 0 : minGpuFee);
+ }, [cpuFee, diskFee, gpuFees, ramFee]);
+
+ const minJobDurationHours = (environment.minJobDuration ?? 0) / 60 / 60;
+ const maxJobDurationHours = (environment.maxJobDuration ?? 0) / 60 / 60;
+
+ const selectEnvironment = () => {
+ selectEnv({
+ environment,
+ freeCompute: false,
+ nodeInfo,
+ });
+ selectToken(selectedTokenAddress, tokenSymbol);
+ router.push('/run-job/resources');
+ };
+
+ const selectFreeCompute = () => {
+ selectEnv({
+ environment,
+ freeCompute: true,
+ nodeInfo,
+ });
+ selectToken(selectedTokenAddress, tokenSymbol);
+ router.push('/run-job/resources');
+ };
+
+ const getCpuProgressBar = () => {
+ if (!cpu) {
+ return null;
+ }
+ const max = cpu.max ?? 0;
+ const inUse = cpu.inUse ?? 0;
+ const available = max - inUse;
+ const fee = cpuFee ?? 0;
+ if (compact) {
+ return (
+
+
+
+ {cpu?.description}
+
+
+ {fee} {tokenSymbol}/min
+
+
+
+ {available}/{max}
+
+ available
+
+
+
+
+ {fee} {tokenSymbol}/min
+
+
+
+ {available}/{max}
+
+ available
+
+
+
+
+ GB RAM capacity
+
+
+ {fee} {tokenSymbol}/min
+
+
+
+ {available}/{max}
+
+ available
+
+
+
+
+ GB Disk space
+
+
+ {fee} {tokenSymbol}/min
+
+
+
+ {available}/{max}
+
+ available
+
+
+ {compact ? (
+
+ {getGpuProgressBars()}
+ {getCpuProgressBar()}
+ {getRamProgressBar()}
+ {getDiskProgressBar()}
+
+ ) : gpus.length === 1 ? (
+ <>
+
Specs
+
+ {getGpuProgressBars()}
+ {getCpuProgressBar()}
+ {getRamProgressBar()}
+ {getDiskProgressBar()}
+
+
+ ) : (
+ <>
+
GPUs
+
{getGpuProgressBars()}
+
Other specs
+
+ {getCpuProgressBar()}
+ {getRamProgressBar()}
+ {getDiskProgressBar()}
+
+
+ )}
+
+
+
+ Job duration:
+
+ {formatNumber(minJobDurationHours)} - {formatNumber(maxJobDurationHours)}
+
+ hours
+
+ {showNodeName ? (
+
+ Node:{' '}
+
+ {nodeInfo.friendlyName ?? nodeInfo.id}
+
+
+ ) : null}
+
+
+ {environment.free ? (
+
+ ) : null}
+ } onClick={selectEnvironment}>
+ From {startingFee} {tokenSymbol}/min
+
+
+
+ {getLogo()}
+ {gpu}
+
+ );
+};
+
+export default GpuLabel;
diff --git a/src/components/homepage/docs-cta-section.module.css b/src/components/homepage/docs-cta-section.module.css
new file mode 100644
index 00000000..fc198568
--- /dev/null
+++ b/src/components/homepage/docs-cta-section.module.css
@@ -0,0 +1,188 @@
+@keyframes float {
+ from {
+ transform: translate3d(0, 0, 0);
+ }
+
+ 50% {
+ transform: translate3d(0, -6px, 0);
+ }
+
+ to {
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.root {
+ position: relative;
+ padding: 140px 0 120px;
+ background: #f8fbff;
+ color: #021e42;
+ overflow: hidden;
+}
+
+.root::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: url('/build-the-future.svg') no-repeat left center;
+ background-size: min(680px, 60%);
+ pointer-events: none;
+}
+
+.root::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ /* background: linear-gradient(115deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0)); */
+ pointer-events: none;
+}
+
+.container {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ gap: 40px;
+}
+
+.title {
+ font-family: var(--font-orbitron), sans-serif;
+ font-weight: 700;
+ font-style: normal;
+ font-size: clamp(42px, 5vw, 56px);
+ line-height: clamp(46px, 5.4vw, 60px);
+ letter-spacing: 0.02em;
+ text-transform: capitalize;
+ max-width: 780px;
+ margin: 0;
+}
+
+.docsButton {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+ padding: 18px 46px;
+ border-radius: 999px;
+ background: #009bff;
+ color: #ffffff;
+ font-family: var(--font-orbitron), sans-serif;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 22px;
+ letter-spacing: 0;
+ text-transform: capitalize;
+ vertical-align: middle;
+ box-shadow: 0 18px 40px rgba(0, 114, 255, 0.35);
+ transition:
+ transform 0.2s ease,
+ box-shadow 0.2s ease;
+}
+
+.docsButton:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 22px 48px rgba(0, 114, 255, 0.45);
+}
+
+.docsButton:active {
+ transform: translateY(0);
+}
+
+.buttonIcon {
+ font-size: 22px;
+ line-height: 1;
+ animation: float 2.6s ease-in-out infinite;
+}
+
+.socialLinks {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ justify-content: center;
+ gap: 28px;
+}
+
+.socialLink {
+ display: inline-flex;
+ gap: 12px;
+ align-items: center;
+ color: #be00ff;
+ font-family: var(--font-inter), sans-serif;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 20px;
+ line-height: 22px;
+ text-transform: capitalize;
+ transition:
+ transform 0.2s ease,
+ color 0.2s ease;
+}
+
+.socialLink:hover {
+ transform: translateY(-4px);
+ color: #f066ff;
+}
+
+.socialLinkIcon {
+ width: 28px;
+ height: 28px;
+ display: inline-block;
+ background-color: currentColor;
+}
+
+.discordIcon {
+ -webkit-mask: url('/icons/discord.svg') no-repeat center/contain;
+ mask: url('/icons/discord.svg') no-repeat center/contain;
+}
+
+.xIcon {
+ -webkit-mask: url('/icons/x.svg') no-repeat center/contain;
+ mask: url('/icons/x.svg') no-repeat center/contain;
+}
+
+@media (max-width: 900px) {
+ .root {
+ padding: 110px 0 90px;
+ }
+
+ .root::before {
+ background-position: top left;
+ background-size: 320px;
+ opacity: 0.65;
+ }
+
+ .container {
+ gap: 32px;
+ }
+
+ .docsButton {
+ padding: 16px 36px;
+ }
+}
+
+@media (max-width: 600px) {
+ .root::before {
+ background-position: top -40px left -40px;
+ background-size: 280px;
+ }
+
+ .root::after {
+ background: linear-gradient(
+ 125deg,
+ rgba(255, 255, 255, 0.96),
+ rgba(255, 255, 255, 0.72) 45%,
+ rgba(255, 255, 255, 0)
+ );
+ }
+
+ .docsButton {
+ width: 100%;
+ max-width: 320px;
+ }
+
+ .socialLinks {
+ gap: 20px;
+ }
+}
diff --git a/src/components/homepage/docs-cta-section.tsx b/src/components/homepage/docs-cta-section.tsx
new file mode 100644
index 00000000..1bd57742
--- /dev/null
+++ b/src/components/homepage/docs-cta-section.tsx
@@ -0,0 +1,32 @@
+import config, { getRoutes } from '@/config';
+import Link from 'next/link';
+import Container from '../container/container';
+import styles from './docs-cta-section.module.css';
+
+const DocsCtaSection = () => {
+ const routes = getRoutes();
+
+ return (
+
+
+ Build The Future Of AI With Decentralized Compute
+
+ Explore Docs
+ â–¸
+
+
+
+ Join Discord
+
+
+
+ Follow On
+
+
+
+
+
+ );
+};
+
+export default DocsCtaSection;
diff --git a/src/components/homepage/features.module.css b/src/components/homepage/features.module.css
new file mode 100644
index 00000000..30bd6048
--- /dev/null
+++ b/src/components/homepage/features.module.css
@@ -0,0 +1,117 @@
+.root {
+ background-color: #040a12;
+ padding: 60px 50px;
+ position: relative;
+ overflow: hidden;
+}
+
+.root::before,
+.root::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ background-repeat: no-repeat;
+ background-size: 70%;
+ opacity: 0.45;
+}
+
+.root::before {
+ background-image: url('/circuit-left.svg');
+ background-position: left 0;
+}
+
+.root::after {
+ background-image: url('/circuit-right.svg');
+ background-position: right 60%;
+}
+
+.featuresWrapper {
+ margin-top: 50px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+}
+
+.featureItem {
+ box-sizing: border-box;
+ background-color: rgba(0, 153, 255, 0.16);
+ padding: 24px;
+ border-radius: 40px;
+ border: 1px solid rgba(0, 153, 255, 0.16);
+ backdrop-filter: blur(10px);
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.featureItemBlue {
+ background-color: #009bff;
+ border-color: #009bff;
+}
+
+.featuresWrapper > *:nth-child(4n + 1) {
+ flex: 0 0 calc(66% - 20px);
+}
+
+.featuresWrapper > *:nth-child(4n + 2),
+.featuresWrapper > *:nth-child(4n + 3) {
+ flex: 0 0 calc(34% - 20px);
+}
+
+.featuresWrapper > *:nth-child(4n + 4) {
+ flex: 0 0 calc(66% - 20px);
+}
+
+.featureTextWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
+
+@media (max-width: 1100px) {
+ .root {
+ padding: 50px 40px;
+ }
+
+ .featuresWrapper > *:nth-child(4n + 1),
+ .featuresWrapper > *:nth-child(4n + 2),
+ .featuresWrapper > *:nth-child(4n + 3),
+ .featuresWrapper > *:nth-child(4n + 4) {
+ flex: 1 1 calc(50% - 20px);
+ }
+}
+
+@media (max-width: 768px) {
+ .root {
+ padding: 40px 24px;
+ }
+
+ .featureItem {
+ border-radius: 28px;
+ }
+
+ .featuresWrapper {
+ gap: 16px;
+ }
+
+ .featuresWrapper > *:nth-child(4n + 1),
+ .featuresWrapper > *:nth-child(4n + 2),
+ .featuresWrapper > *:nth-child(4n + 3),
+ .featuresWrapper > *:nth-child(4n + 4) {
+ flex: 1 1 100%;
+ }
+}
+
+@media (max-width: 480px) {
+ .root {
+ padding: 32px 18px;
+ }
+
+ .featureItem {
+ padding: 20px;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 14px;
+ }
+}
diff --git a/src/components/homepage/features.tsx b/src/components/homepage/features.tsx
new file mode 100644
index 00000000..c4db4630
--- /dev/null
+++ b/src/components/homepage/features.tsx
@@ -0,0 +1,86 @@
+import BoxIcon from '@/assets/icons/box.svg';
+import CreditCardIcon from '@/assets/icons/credit-card.svg';
+import GlobeIcon from '@/assets/icons/globe.svg';
+import LockIcon from '@/assets/icons/lock.svg';
+import PlayIcon from '@/assets/icons/play.svg';
+import ShieldIcon from '@/assets/icons/shield.svg';
+import SliderIcon from '@/assets/icons/slider.svg';
+import UsersIcon from '@/assets/icons/users.svg';
+import cx from 'classnames';
+import Container from '../container/container';
+import SectionTitle from '../section-title/section-title';
+import styles from './features.module.css';
+
+const features: {
+ title: string;
+ description: string;
+ icon: JSX.Element;
+ isBlue?: boolean;
+}[] = [
+ {
+ title: 'Pay-as-you-go',
+ description:
+ 'Only pay for the compute you use. You are not billed while idle and you are not locked into a fixed instance.',
+ icon: ,
+ },
+ {
+ title: 'Ease of use',
+ description: 'Launch from VS Code. Clear logs and status in one place.',
+ icon: ,
+ isBlue: true,
+ },
+ {
+ title: 'Container-Based',
+ description: 'Bring your own container or use templates. Reproducible runs and consistent results.',
+ icon: ,
+ isBlue: true,
+ },
+ {
+ title: 'Maximum flexibility',
+ description: 'You are not constrained to preset CPU/GPU/RAM bundles. Choose the resources you need.',
+ icon: ,
+ },
+ {
+ title: 'Security',
+ description: 'Isolated execution, signed attestations, on-chain provenance for jobs when applicable.',
+ icon: ,
+ },
+ {
+ title: 'Inclusive by design',
+ description: 'We support both high-end rigs and smaller operators. Everyone can participate.',
+ icon: ,
+ isBlue: true,
+ },
+ {
+ title: 'Privacy-first jobs',
+ description: 'Run algorithms where data lives. Raw data stays private and never leaves its source.',
+ icon: ,
+ isBlue: true,
+ },
+ {
+ title: 'Global GPU/CPU pool',
+ description: 'Access diverse hardware across the network to match your budget and performance needs.',
+ icon: ,
+ },
+];
+
+export default function FeaturesSection() {
+ return (
+
+
+
+
+ {features.map((item) => (
+
+
{item.icon}
+
+
{item.title}
+
{item.description}
+
+
+ ))}
+
+
+
+
+
+ Keep your data, jobs, and infrastructure secure while tapping into a global network of decentralized
+ compute.
+
+
+ © {currentYear} All Rights Reserved. Powered by{' '}
+
+ Ocean Network
+
+ .
+
+
+
+
Pages
+
+ {pageKeys.map((key) => {
+ const route = routes[key];
+ if (!route) {
+ return null;
+ }
+
+ return (
+ -
+
+ {route.name}
+
+
+ );
+ })}
+
+
+
+
+
+
+ Global
+ Compute
+ Power
+
+
+ Keep control of your data, jobs & infrastructure on a decentralized compute network.
+
+
+
+
+
+
+
+ ONE
+ NETWORK
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/homepage/how-it-works.module.css b/src/components/homepage/how-it-works.module.css
new file mode 100644
index 00000000..aaeb8f2a
--- /dev/null
+++ b/src/components/homepage/how-it-works.module.css
@@ -0,0 +1,139 @@
+.root {
+ background-color: #040a12;
+ padding: 60px 50px;
+ position: relative;
+ z-index: 2;
+}
+
+.twoSections {
+ display: flex;
+ gap: 50px;
+ justify-content: center;
+ margin-top: 50px;
+}
+
+.featuresWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ flex: 1;
+}
+
+.animation {
+ position: relative;
+ width: 568px;
+ height: 538px;
+ overflow: hidden;
+ border-radius: 32px;
+}
+
+.animation img {
+ width: 100%;
+ height: auto;
+ display: block;
+ border-radius: 32px;
+}
+
+.animation video {
+ width: 100%;
+ height: 100%;
+ display: block;
+ border-radius: 32px;
+ object-fit: cover;
+ object-position: 50% 30%;
+}
+
+.featureItem {
+ display: flex;
+ gap: 16px;
+ align-items: flex-start;
+ color: rgba(255, 255, 255, 0.4);
+ transition: 0.2s all ease-in-out;
+}
+
+.featureItem:hover {
+ color: rgba(255, 255, 255, 1);
+}
+
+.featureItemActive {
+ color: rgba(255, 255, 255, 1);
+}
+
+.featureItem:hover .indexNumber {
+ color: #be00ff;
+}
+
+.featureItemActive .indexNumber {
+ color: #be00ff;
+}
+
+.indexNumber {
+ font-family: var(--font-orbitron), var(--font-inter), sans-serif;
+ font-size: 18px;
+ transition: 0.2s all ease-in-out;
+ font-weight: bold;
+}
+
+.featureTextWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+}
+
+@media (max-width: 1100px) {
+ .root {
+ padding: 50px 40px;
+ }
+
+ .twoSections {
+ gap: 32px;
+ }
+}
+
+@media (max-width: 900px) {
+ .twoSections {
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .animation {
+ align-self: center;
+ width: 90vw;
+ max-width: 568px;
+ height: calc(90vw * 538 / 568);
+ }
+}
+
+@media (max-width: 768px) {
+ .root {
+ padding: 40px 24px;
+ }
+
+ .featuresWrapper {
+ gap: 28px;
+ }
+
+ .featureItem {
+ gap: 12px;
+ }
+
+ .animation {
+ width: 92vw;
+ max-width: 520px;
+ height: calc(92vw * 538 / 568);
+ }
+}
+
+@media (max-width: 480px) {
+ .root {
+ padding: 32px 18px;
+ }
+
+ .twoSections {
+ margin-top: 36px;
+ }
+
+ .indexNumber {
+ font-size: 16px;
+ }
+}
diff --git a/src/components/homepage/how-it-works.tsx b/src/components/homepage/how-it-works.tsx
new file mode 100644
index 00000000..5724628c
--- /dev/null
+++ b/src/components/homepage/how-it-works.tsx
@@ -0,0 +1,70 @@
+import { useVideoScroll } from '../../hooks/useVideoScroll';
+import Container from '../container/container';
+import SectionTitle from '../section-title/section-title';
+import styles from './how-it-works.module.css';
+
+const itemsList: {
+ title: string;
+ description: string;
+}[] = [
+ {
+ title: 'Select Environment',
+ description: 'Use the Smart Compute Wizard to filter by GPU/CPU, RAM, storage, location, and price.',
+ },
+ {
+ title: 'Define Resources',
+ description: 'Pick container or template, set params and limits.',
+ },
+ {
+ title: 'Fund the Job',
+ description: 'Allocate funds in escrow. See a clear cost estimate before launch.',
+ },
+ {
+ title: 'Maximum flexibility',
+ description: 'You are not constrained to preset CPU/GPU/RAM bundles. Choose the resources you need.',
+ },
+ {
+ title: 'Run Job',
+ description: 'Execution on Ocean Nodes with live status and logs.',
+ },
+ {
+ title: 'Get Results',
+ description: 'Outputs are returned. Raw data remains private.',
+ },
+];
+
+const videoSrc = '/globe_how-it-works.mp4';
+const posterSrc = '/banner-how-it-works.png';
+
+export default function HowItWorksSection() {
+ const { sectionRef, videoRef, activeIndex } = useVideoScroll({
+ numSteps: itemsList.length,
+ });
+
+ return (
+
+
+
+
+
+ {itemsList.map((item, index) => (
+
+
0{index + 1}
+
+
{item.title}
+
{item.description}
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ {columns.map((column) => (
+
+ {column.label}
+
+ ))}
+
Loading...
+ ) : (
+ itemsList.map((item, index) => (
+
+ {columns.map((column) => (
+
+ {item[column.key]}
+
+ ))}
+
+
+ View Full Leaderboard
+
+
+
+
+
+
+ {items.map((item, idx) => (
+
+ ))}
+
+
+
+ {renderSelectedValue?.(option.label) ?? option.label}
+
+ ))}
+
+ );
+ (MultiRenderValue as any).displayName = 'SelectMultiRenderValue';
+ return MultiRenderValue as (value: any) => React.ReactNode;
+ }
+ return undefined;
+ }, [multiple, options, renderSelectedValue]);
+
+ return (
+
+
+ {options?.map((option) => (
+
+ ))}
+
+
+ );
+};
+
+export default Select;
diff --git a/src/components/leaderboard/leaderboard-page.tsx b/src/components/leaderboard/leaderboard-page.tsx
new file mode 100644
index 00000000..ba32f98e
--- /dev/null
+++ b/src/components/leaderboard/leaderboard-page.tsx
@@ -0,0 +1,31 @@
+import Card from '@/components/card/card';
+import Container from '@/components/container/container';
+import SectionTitle from '@/components/section-title/section-title';
+import JobsRevenueStats from '@/components/stats/jobs-revenue-stats';
+import { Table } from '@/components/table/table';
+import { TableTypeEnum } from '@/components/table/table-type';
+import { useLeaderboardTableContext } from '@/context/table/leaderboard-table-context';
+import { AnyNode } from '@/types/nodes';
+
+const LeaderboardPage = () => {
+ const leaderboardTableContext = useLeaderboardTableContext();
+
+ return (
+
+
+
+
+
+
+ context={leaderboardTableContext}
+ paginationType="context"
+ showToolbar
+ tableType={TableTypeEnum.NODES_LEADERBOARD}
+ />
+
+
+
+
+
+
+ {environment && (
+
+ )}
+
+
+
+
+
+
+
+
+ {title &&
{title}
}
+ {hideCloseButton ? null : (
+
+ )}
+
+ {children}
+
+);
+
+export default Modal;
diff --git a/src/components/node-details/balance.module.css b/src/components/node-details/balance.module.css
new file mode 100644
index 00000000..21ee0b21
--- /dev/null
+++ b/src/components/node-details/balance.module.css
@@ -0,0 +1,35 @@
+.root {
+ display: flex;
+ flex-direction: column;
+ gap: 48px;
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ .heading {
+ text-align: center;
+ }
+
+ .list {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+
+ .listItem {
+ align-items: center;
+ display: flex;
+ font-size: 18px;
+ justify-content: space-between;
+ }
+ }
+ }
+
+ .buttons {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ }
+}
diff --git a/src/components/node-details/balance.tsx b/src/components/node-details/balance.tsx
new file mode 100644
index 00000000..2ca3cc41
--- /dev/null
+++ b/src/components/node-details/balance.tsx
@@ -0,0 +1,88 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import Button from '@/components/button/button';
+import Card from '@/components/card/card';
+import GasFeeModal from '@/components/node-details/gas-fee-modal';
+import WithdrawModal from '@/components/node-details/withdraw-modal';
+import { useOceanAccount } from '@/lib/use-ocean-account';
+import { NodeBalance } from '@/types/nodes';
+import { formatNumber } from '@/utils/formatters';
+import DownloadIcon from '@mui/icons-material/Download';
+import styles from './balance.module.css';
+
+interface BalanceProps {
+ admins: string[];
+ peerId: string;
+}
+
+export const Balance = ({ admins, peerId }: BalanceProps) => {
+ const { account, ocean } = useOceanAccount();
+
+ const [balances, setBalances] = useState([]);
+ const [loadingBalance, setLoadingBalance] = useState(false);
+ const [isGasFeeModalOpen, setIsGasFeeModalOpen] = useState(false);
+ const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
+
+ const isAdmin = useMemo(() => admins.includes(account?.address as string), [admins, account]);
+
+ useEffect(() => {
+ if (ocean && peerId) {
+ setLoadingBalance(true);
+
+ ocean.getNodeBalance(peerId).then((res) => {
+ res.length === 0 ? setBalances([]) : setBalances(res);
+ setLoadingBalance(false);
+ });
+ }
+ }, [ocean, peerId]);
+
+ return (
+
+
+
Node balance
+
+ {!ocean ? (
+
Connect your wallet to see node balance
+ ) : loadingBalance ? (
+
Fetching data...
+ ) : balances.length >= 1 ? (
+ balances.map((balance, index) => (
+
+
{balance.token}
+ {balance.amount &&
{formatNumber(balance.amount)}}
+
+ ))
+ ) : (
+
No balance
+ )}
+
+
+ {isAdmin ? (
+ <>
+
+ }
+ disabled={!ocean}
+ onClick={() => setIsWithdrawModalOpen(true)}
+ size="lg"
+ >
+ Withdraw funds
+
+
+ ) : null}
+ setIsGasFeeModalOpen(false)} />
+ setIsWithdrawModalOpen(false)} />
+
+
+ );
+};
diff --git a/src/components/node-details/benchmark-jobs.tsx b/src/components/node-details/benchmark-jobs.tsx
new file mode 100644
index 00000000..6ce79441
--- /dev/null
+++ b/src/components/node-details/benchmark-jobs.tsx
@@ -0,0 +1,41 @@
+import Card from '@/components/card/card';
+import { Table } from '@/components/table/table';
+import { TableTypeEnum } from '@/components/table/table-type';
+import {
+ BenchmarkJobsHistoryTableProvider,
+ useBenchmarkJobsHistoryTableContext,
+} from '@/context/table/benchmark-jobs-history-table-context';
+import { Job } from '@/types/jobs';
+import { useParams } from 'next/navigation';
+
+const BenchmarkJobsContent = () => {
+ const benchmarkJobsHistoryTableContext = useBenchmarkJobsHistoryTableContext();
+
+ return (
+
+ Benchmark jobs history
+
+ context={benchmarkJobsHistoryTableContext}
+ paginationType="context"
+ showToolbar
+ tableType={TableTypeEnum.BENCHMARK_JOBS}
+ />
+
+ );
+};
+
+const BenchmarkJobs = () => {
+ const params = useParams<{ nodeId: string }>();
+
+ if (!params?.nodeId) {
+ return null;
+ }
+
+ return (
+
+
+
+ );
+};
+
+export default BenchmarkJobs;
diff --git a/src/components/node-details/config-modal.module.css b/src/components/node-details/config-modal.module.css
new file mode 100644
index 00000000..f2f2663f
--- /dev/null
+++ b/src/components/node-details/config-modal.module.css
@@ -0,0 +1,29 @@
+.modalContent {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ .buttons {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ gap: 8px;
+ justify-content: flex-end;
+ }
+
+ .editorWrapper {
+ border-radius: 16px;
+ border: 1px solid var(--border-glass);
+ max-height: calc(100vh - 300px);
+ overflow-y: auto;
+ }
+
+ .fetching {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 40px;
+ color: var(--text-secondary);
+ font-style: italic;
+ }
+}
diff --git a/src/components/node-details/config-modal.tsx b/src/components/node-details/config-modal.tsx
new file mode 100644
index 00000000..3e373df6
--- /dev/null
+++ b/src/components/node-details/config-modal.tsx
@@ -0,0 +1,66 @@
+import Button from '@/components/button/button';
+import Modal from '@/components/modal/modal';
+import { githubDarkTheme, JsonEditor } from 'json-edit-react';
+import { Dispatch, SetStateAction } from 'react';
+import styles from './config-modal.module.css';
+
+type ConfigModalProps = {
+ isOpen: boolean;
+ fetchingConfig: boolean;
+ pushingConfig: boolean;
+ config: Record;
+ editedConfig: Record;
+ setEditedConfig: Dispatch>>;
+ handlePushConfig: (config: Record) => Promise;
+ onClose: () => void;
+};
+
+const ConfigModal = ({
+ isOpen,
+ fetchingConfig,
+ pushingConfig,
+ config,
+ editedConfig,
+ setEditedConfig,
+ handlePushConfig,
+ onClose,
+}: ConfigModalProps) => {
+ return (
+
+
+ {fetchingConfig && (!config || Object.keys(config).length === 0) ? (
+
Fetching config...
+ ) : (
+
+
+ typeof value === 'object' && value !== null && Object.keys(value).length === 0}
+ data={editedConfig}
+ onUpdate={({ newData }) => setEditedConfig(newData as Record)}
+ theme={githubDarkTheme}
+ minWidth="100%"
+ />
+
+
+
+
+
+
+ )}
+
Eligible
+ This node is active and can receive rewards
+
+ );
+ case NodeEligibility.NON_ELIGIBLE:
+ return (
+
+
+ Not eligible
+
+ This node is active, but does not meet the criteria for receiving rewards
+ Reason: {eligibilityCauseStr ?? '-'}
+
+
+ );
+ case NodeEligibility.BANNED:
+ return (
+
+
+ Banned
+
+
+ This node is excluded from all operations and rewards
+
+ Reason: {banInfo?.reason ?? 'Unknown'}
+
+
Environments
+
+ {!isReady ? (
+
Fetching data...
+ ) : (
+ envs.map((env) =>
)
+ )}
+
+
+
+
+
+ {selectedNode.eligibilityCauseStr !== 'Banned' && unbanRequests?.length === 0 ? null : (
+
+ )}
+
+
+ );
+};
+
+export default NodeDetailsPage;
diff --git a/src/components/node-details/node-info.module.css b/src/components/node-details/node-info.module.css
new file mode 100644
index 00000000..000f6a96
--- /dev/null
+++ b/src/components/node-details/node-info.module.css
@@ -0,0 +1,63 @@
+.root {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+
+ @media (min-width: 992px) {
+ display: grid;
+ grid-template-columns: 1fr 380px;
+ }
+
+ .infoWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ justify-content: space-between;
+ min-width: 0;
+
+ .infoContent {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+
+ .title {
+ font-size: 32px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ }
+
+ .grid {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ column-gap: 12px;
+ row-gap: 8px;
+ }
+
+ .buttons {
+ display: flex;
+ gap: 8px;
+ }
+ }
+
+ .infoFooter {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+ }
+
+ .statusWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ }
+}
+
+.hash {
+ color: var(--text-secondary);
+ font-size: 14px;
+}
+
+.icon {
+ color: var(--accent1);
+}
diff --git a/src/components/node-details/node-info.tsx b/src/components/node-details/node-info.tsx
new file mode 100644
index 00000000..216bb15e
--- /dev/null
+++ b/src/components/node-details/node-info.tsx
@@ -0,0 +1,184 @@
+import Button from '@/components/button/button';
+import Card from '@/components/card/card';
+import { Balance } from '@/components/node-details/balance';
+import Eligibility from '@/components/node-details/eligibility';
+import { useP2P } from '@/contexts/P2PContext';
+import { useOceanAccount } from '@/lib/use-ocean-account';
+import { Node, NodeEligibility } from '@/types/nodes';
+import { useAuthModal, useSignMessage, useSmartAccountClient } from '@account-kit/react';
+import DnsIcon from '@mui/icons-material/Dns';
+import LocationPinIcon from '@mui/icons-material/LocationPin';
+import PublicIcon from '@mui/icons-material/Public';
+import UploadIcon from '@mui/icons-material/Upload';
+import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'react-toastify';
+import ConfigModal from './config-modal';
+import styles from './node-info.module.css';
+
+type NodeInfoProps = {
+ node: Node;
+};
+
+const NodeInfo = ({ node }: NodeInfoProps) => {
+ const { client } = useSmartAccountClient({ type: 'LightAccount' });
+ const { signMessageAsync } = useSignMessage({
+ client,
+ });
+ const { openAuthModal } = useAuthModal();
+ const { account, ocean } = useOceanAccount();
+ const { config, fetchConfig, pushConfig } = useP2P();
+
+ const [fetchingConfig, setFetchingConfig] = useState(false);
+ const [pushingConfig, setPushingConfig] = useState(false);
+ const [isEditConfigDialogOpen, setIsEditConfigDialogOpen] = useState(false);
+ const [editedConfig, setEditedConfig] = useState>({});
+
+ const isAdmin = useMemo(
+ () => node.allowedAdmins?.includes(account?.address as string),
+ [node.allowedAdmins, account]
+ );
+
+ useEffect(() => {
+ if (config) {
+ setEditedConfig(config);
+ }
+ }, [config]);
+
+ async function handleFetchConfig() {
+ if (!account.isConnected) {
+ openAuthModal();
+ return;
+ }
+ if (!ocean || !node?.id) {
+ return;
+ }
+ const timestamp = Date.now() + 5 * 60 * 1000; // 5 minutes expiry
+ const signedMessage = await signMessageAsync({
+ message: timestamp.toString(),
+ });
+
+ setFetchingConfig(true);
+ try {
+ await fetchConfig(node.id, signedMessage, timestamp, account.address as string);
+ } catch (error) {
+ console.error('Error fetching node config :', error);
+ } finally {
+ setFetchingConfig(false);
+ }
+ }
+
+ async function handlePushConfig(config: Record) {
+ let success = false;
+ if (!account.isConnected) {
+ openAuthModal();
+ return;
+ }
+ if (!ocean || !node?.id) {
+ return;
+ }
+ const timestamp = Date.now() + 5 * 60 * 1000; // 5 minutes expiry
+ const signedMessage = await signMessageAsync({
+ message: timestamp.toString(),
+ });
+
+ setPushingConfig(true);
+ try {
+ await pushConfig(node.id, signedMessage, timestamp, config, account.address as string);
+ success = true;
+ } catch (error) {
+ console.error('Error pushing node config :', error);
+ } finally {
+ setPushingConfig(false);
+ if (success) {
+ toast.success('Successfully pushed new config!');
+ setIsEditConfigDialogOpen(false);
+ } else {
+ toast.error('Failed to push new config');
+ }
+ }
+ }
+
+ function handleOpenEditConfigModal() {
+ if (!config || Object.keys(config).length === 0) {
+ handleFetchConfig();
+ }
+
+ setIsEditConfigDialogOpen(true);
+ }
+
+ function handleCloseModal() {
+ setIsEditConfigDialogOpen(false);
+ }
+
+ return (
+
+
+
+
+
{node.friendlyName ?? node.id}
+
{node.id}
+
+
+
+
{`${node.location?.ip} / ${node.ipAndDns?.dns}`}
+ {
+ <>
+
+ {node.platform?.osType ?
{node.platform?.osType}
:
Unknown
}
+
+ }
+
+
+
+ {node.location?.city}, {node.location?.country}
+
+
+ {isAdmin ? (
+
+
+ } onClick={handleOpenEditConfigModal} variant="outlined">
+ Edit node config
+
+
+ ) : null}
+
+
+
+
Admins:
+ {node.allowedAdmins?.map((admin) => (
+
+ {admin}
+
+ ))}
+
+
{node.version && Ocean Node v{node.version}}
+
+
+
+
+
+
+ );
+};
+
+export default NodeInfo;
diff --git a/src/components/Toolbar/style.module.css b/src/components/node-details/unban-requests.module.css
similarity index 59%
rename from src/components/Toolbar/style.module.css
rename to src/components/node-details/unban-requests.module.css
index ba6c7770..e0fea914 100644
--- a/src/components/Toolbar/style.module.css
+++ b/src/components/node-details/unban-requests.module.css
@@ -1,12 +1,7 @@
-.root {
+.header {
+ align-items: center;
display: flex;
flex-direction: row;
- align-items: center;
+ gap: 16px;
justify-content: space-between;
- padding: 8px;
-}
-
-.buttons {
- display: flex;
- gap: 50px;
}
diff --git a/src/components/node-details/unban-requests.tsx b/src/components/node-details/unban-requests.tsx
new file mode 100644
index 00000000..15a4b3e9
--- /dev/null
+++ b/src/components/node-details/unban-requests.tsx
@@ -0,0 +1,72 @@
+import Button from '@/components/button/button';
+import Card from '@/components/card/card';
+import { Table } from '@/components/table/table';
+import { TableTypeEnum } from '@/components/table/table-type';
+import { useUnbanRequestsContext } from '@/context/unban-requests-context';
+import { useOceanAccount } from '@/lib/use-ocean-account';
+import { Node } from '@/types';
+import { UnbanRequest } from '@/types/unban-requests';
+import { useAuthModal, useSignMessage, useSmartAccountClient } from '@account-kit/react';
+import { useMemo, useState } from 'react';
+import styles from './unban-requests.module.css';
+
+type UnbanRequestsProps = {
+ node: Node;
+};
+
+const UnbanRequests = ({ node }: UnbanRequestsProps) => {
+ const { client } = useSmartAccountClient({ type: 'LightAccount' });
+ const { signMessageAsync } = useSignMessage({
+ client,
+ });
+ const { openAuthModal } = useAuthModal();
+ const { account, ocean } = useOceanAccount();
+ const { unbanRequests, fetchUnbanRequests, requestNodeUnban } = useUnbanRequestsContext();
+
+ const [loading, setLoading] = useState(false);
+
+ const isAdmin = useMemo(
+ () => node.allowedAdmins?.includes(account?.address as string),
+ [node.allowedAdmins, account]
+ );
+
+ const handleRequestUnban = async () => {
+ if (!account.isConnected) {
+ openAuthModal();
+ return;
+ }
+ if (!ocean || !node?.id) {
+ return;
+ }
+ setLoading(true);
+ try {
+ const timestamp = Date.now() + 5 * 60 * 1000; // 5 minutes expiry
+ const signedMessage = await signMessageAsync({
+ message: timestamp.toString(),
+ });
+
+ await requestNodeUnban(node.id, signedMessage as string, timestamp, account.address as string);
+ await fetchUnbanRequests(node.id);
+ } catch (error) {
+ console.error('Error requesting unban:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+
+
Unban requests
+ {isAdmin && (
+
+ )}
+
+ data={unbanRequests} paginationType="none" tableType={TableTypeEnum.UNBAN_REQUESTS} />
+
+ );
+};
+
+export default UnbanRequests;
diff --git a/src/components/node-details/withdraw-modal.tsx b/src/components/node-details/withdraw-modal.tsx
new file mode 100644
index 00000000..5ae246e9
--- /dev/null
+++ b/src/components/node-details/withdraw-modal.tsx
@@ -0,0 +1,187 @@
+import Button from '@/components/button/button';
+import Input from '@/components/input/input';
+import Select from '@/components/input/select';
+import Modal from '@/components/modal/modal';
+import { useWithdrawTokens, UseWithdrawTokensReturn } from '@/lib/use-withdraw-tokens';
+import { NodeBalance } from '@/types/nodes';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import styles from './balance.module.css';
+
+interface WithdrawModalProps {
+ balances: NodeBalance[];
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+type WithdrawModalFormValues = {
+ amounts: Record;
+ tokens: string[];
+};
+
+const WithdrawModalContent = ({
+ balances,
+ onClose,
+ withdrawTokens,
+}: WithdrawModalProps & { withdrawTokens: UseWithdrawTokensReturn }) => {
+ const formik = useFormik({
+ initialValues: {
+ amounts: {},
+ tokens: [],
+ },
+ onSubmit: (values) => {
+ const tokenAddresses = values.tokens
+ .map((token) => balances.find((b) => b.token === token)?.address)
+ .filter((addr): addr is string => !!addr);
+ const amounts = values.tokens.map((token) => values.amounts[token] ?? '0');
+ if (tokenAddresses.length > 0 && amounts.every((amt) => parseFloat(amt) > 0)) {
+ withdrawTokens.handleWithdraw({
+ tokenAddresses,
+ amounts,
+ });
+ }
+ },
+ validationSchema: Yup.object({
+ tokens: Yup.array().min(1, 'Select at least one token'),
+ amounts: Yup.object().test(
+ 'amounts-validation',
+ 'Invalid amounts',
+ (amounts: Record, context) => {
+ const tokens = (context.parent.tokens as string[]) || [];
+ if (tokens.length === 0) {
+ return true;
+ }
+ const errors: Yup.ValidationError[] = [];
+ for (const token of tokens) {
+ const amount = amounts?.[token];
+ if (!amount || isNaN(Number(amount)) || Number(amount) <= 0) {
+ errors.push(
+ context.createError({
+ path: `amounts.${token}`,
+ message: `${token} amount required`,
+ })
+ );
+ }
+ }
+ if (errors.length > 0) {
+ return new Yup.ValidationError(errors, amounts, 'amounts');
+ }
+ return true;
+ }
+ ),
+ }),
+ });
+
+ const setMaxAmount = (token: string) => {
+ const balance = balances.find((b) => b.token === token)?.amount;
+ if (balance) {
+ formik.setFieldValue(`amounts.${token}`, balance);
+ }
+ };
+
+ /**
+ * Handles token selection change
+ * When a token is removed from the selection, the corresponding amount is also removed
+ */
+ const handleTokensChange = (newTokens: string[]) => {
+ formik.setFieldValue('tokens', newTokens);
+ const newAmounts = { ...formik.values.amounts };
+ // Remove amounts for deselected tokens
+ Object.keys(newAmounts).forEach((token) => {
+ if (!newTokens.includes(token)) {
+ newAmounts[token] = '';
+ }
+ });
+ // Initialize amounts for newly selected tokens
+ newTokens.forEach((token) => {
+ if (!(token in newAmounts)) {
+ newAmounts[token] = '';
+ }
+ });
+ formik.setFieldValue('amounts', newAmounts);
+ };
+
+ return (
+
+ );
+};
+
+const WithdrawModal = ({ balances, isOpen, onClose }: WithdrawModalProps) => {
+ const withdrawTokens = useWithdrawTokens({
+ onSuccess: onClose,
+ });
+ return (
+
+
+
+ );
+};
+
+export default WithdrawModal;
diff --git a/src/components/profile/consumer-jobs.tsx b/src/components/profile/consumer-jobs.tsx
new file mode 100644
index 00000000..9b34e451
--- /dev/null
+++ b/src/components/profile/consumer-jobs.tsx
@@ -0,0 +1,22 @@
+import Card from '@/components/card/card';
+import { Table } from '@/components/table/table';
+import { TableTypeEnum } from '@/components/table/table-type';
+import { useMyJobsTableContext } from '@/context/table/my-jobs-table-context';
+import { Job } from '@/types/jobs';
+
+const ConsumerJobs = () => {
+ return (
+
+ My jobs
+
+ context={useMyJobsTableContext()}
+ autoHeight
+ showToolbar
+ paginationType="context"
+ tableType={TableTypeEnum.MY_JOBS}
+ />
+
+ );
+};
+
+export default ConsumerJobs;
diff --git a/src/components/profile/consumer-stats.module.css b/src/components/profile/consumer-stats.module.css
new file mode 100644
index 00000000..3c160e78
--- /dev/null
+++ b/src/components/profile/consumer-stats.module.css
@@ -0,0 +1,5 @@
+.root {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 48px;
+}
diff --git a/src/components/profile/consumer-stats.tsx b/src/components/profile/consumer-stats.tsx
new file mode 100644
index 00000000..746f1097
--- /dev/null
+++ b/src/components/profile/consumer-stats.tsx
@@ -0,0 +1,65 @@
+import Card from '@/components/card/card';
+import { ChartTypeEnum } from '@/components/chart/chart-type';
+import Gauge from '@/components/chart/gauge';
+import VBarChart from '@/components/chart/v-bar-chart';
+import { useProfileContext } from '@/context/profile-context';
+import { formatNumber } from '@/utils/formatters';
+import { useEffect } from 'react';
+import styles from './consumer-stats.module.css';
+
+const ConsumerStats = () => {
+ const {
+ totalJobs,
+ totalPaidAmount,
+ consumerStatsPerEpoch,
+ successfullJobs,
+ fetchConsumerStats,
+ fetchJobsSuccessRate,
+ } = useProfileContext();
+
+ useEffect(() => {
+ fetchConsumerStats();
+ }, [fetchConsumerStats]);
+
+ useEffect(() => {
+ fetchJobsSuccessRate();
+ }, [fetchJobsSuccessRate]);
+
+ return (
+
+
+
+ 0 ? Number(((successfullJobs / totalJobs) * 100).toFixed(1)) : 0}
+ valueSuffix="%"
+ />
+
+ );
+};
+
+export default ConsumerStats;
diff --git a/src/components/profile/consumer.profile-page.tsx b/src/components/profile/consumer.profile-page.tsx
new file mode 100644
index 00000000..cb563d49
--- /dev/null
+++ b/src/components/profile/consumer.profile-page.tsx
@@ -0,0 +1,24 @@
+import Container from '@/components/container/container';
+import ConsumerJobs from '@/components/profile/consumer-jobs';
+import ConsumerStats from '@/components/profile/consumer-stats';
+import ProfileHeader from '@/components/profile/profile-header';
+import SectionTitle from '@/components/section-title/section-title';
+
+const ConsumerProfilePage = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default ConsumerProfilePage;
diff --git a/src/components/profile/owner-nodes.module.css b/src/components/profile/owner-nodes.module.css
new file mode 100644
index 00000000..e0fea914
--- /dev/null
+++ b/src/components/profile/owner-nodes.module.css
@@ -0,0 +1,7 @@
+.header {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+ justify-content: space-between;
+}
diff --git a/src/components/profile/owner-nodes.tsx b/src/components/profile/owner-nodes.tsx
new file mode 100644
index 00000000..dc6cee84
--- /dev/null
+++ b/src/components/profile/owner-nodes.tsx
@@ -0,0 +1,29 @@
+import Button from '@/components/button/button';
+import Card from '@/components/card/card';
+import { Table } from '@/components/table/table';
+import { TableTypeEnum } from '@/components/table/table-type';
+import { useMyNodesTableContext } from '@/context/table/my-nodes-table-context';
+import { AnyNode } from '@/types/nodes';
+import styles from './owner-nodes.module.css';
+
+const OwnerNodes = () => {
+ return (
+
+
+
My nodes
+
+
+
+ context={useMyNodesTableContext()}
+ autoHeight
+ paginationType="context"
+ showToolbar
+ tableType={TableTypeEnum.MY_NODES}
+ />
+
+ );
+};
+
+export default OwnerNodes;
diff --git a/src/components/profile/owner-profile-page.tsx b/src/components/profile/owner-profile-page.tsx
new file mode 100644
index 00000000..b938ecb8
--- /dev/null
+++ b/src/components/profile/owner-profile-page.tsx
@@ -0,0 +1,24 @@
+import Container from '@/components/container/container';
+import OwnerNodes from '@/components/profile/owner-nodes';
+import OwnerStats from '@/components/profile/owner-stats';
+import ProfileHeader from '@/components/profile/profile-header';
+import SectionTitle from '@/components/section-title/section-title';
+
+const OwnerProfilePage = () => {
+ return (
+
+
+
+
+ );
+};
+
+export default OwnerProfilePage;
diff --git a/src/components/profile/owner-stats.module.css b/src/components/profile/owner-stats.module.css
new file mode 100644
index 00000000..3c160e78
--- /dev/null
+++ b/src/components/profile/owner-stats.module.css
@@ -0,0 +1,5 @@
+.root {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 48px;
+}
diff --git a/src/components/profile/owner-stats.tsx b/src/components/profile/owner-stats.tsx
new file mode 100644
index 00000000..bcf3f36a
--- /dev/null
+++ b/src/components/profile/owner-stats.tsx
@@ -0,0 +1,68 @@
+import Card from '@/components/card/card';
+import { ChartTypeEnum } from '@/components/chart/chart-type';
+import Gauge from '@/components/chart/gauge';
+import VBarChart from '@/components/chart/v-bar-chart';
+import { useProfileContext } from '@/context/profile-context';
+import { formatNumber } from '@/utils/formatters';
+import { useEffect } from 'react';
+import styles from './owner-stats.module.css';
+
+const OwnerStats = () => {
+ const {
+ totalNetworkRevenue,
+ totalBenchmarkRevenue,
+ totalNetworkJobs,
+ totalBenchmarkJobs,
+ ownerStatsPerEpoch,
+ eligibleNodes,
+ totalNodes,
+ fetchOwnerStats,
+ fetchActiveNodes,
+ } = useProfileContext();
+
+ useEffect(() => {
+ fetchActiveNodes();
+ }, [fetchActiveNodes]);
+
+ useEffect(() => {
+ fetchOwnerStats();
+ }, [fetchOwnerStats]);
+
+ return (
+
+
+
+ 0 ? Number(((eligibleNodes / totalNodes) * 100).toFixed(1)) : 0}
+ valueSuffix="%"
+ />
+
+ );
+};
+
+export default OwnerStats;
diff --git a/src/components/profile/profile-header.module.css b/src/components/profile/profile-header.module.css
new file mode 100644
index 00000000..a7fd0a59
--- /dev/null
+++ b/src/components/profile/profile-header.module.css
@@ -0,0 +1,21 @@
+.tabBar {
+ align-self: center;
+}
+
+.root {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 24px;
+
+ .name {
+ font-size: 28px;
+ }
+
+ .address {
+ font-size: 14px;
+ color: var(--text-secondary);
+ word-break: break-word;
+ }
+}
diff --git a/src/components/profile/profile-header.tsx b/src/components/profile/profile-header.tsx
new file mode 100644
index 00000000..37de3577
--- /dev/null
+++ b/src/components/profile/profile-header.tsx
@@ -0,0 +1,59 @@
+import Avatar from '@/components/avatar/avatar';
+import Card from '@/components/card/card';
+import TabBar from '@/components/tab-bar/tab-bar';
+import { useProfileContext } from '@/context/profile-context';
+import { useOceanAccount } from '@/lib/use-ocean-account';
+import { formatWalletAddress } from '@/utils/formatters';
+import { useMemo } from 'react';
+import styles from './profile-header.module.css';
+
+type ProfileHeaderProps = {
+ role: 'owner' | 'consumer';
+};
+
+const ProfileHeader = ({ role }: ProfileHeaderProps) => {
+ const { account } = useOceanAccount();
+ const { ensName, ensProfile } = useProfileContext();
+
+ const accountName = useMemo(() => {
+ if (account.status === 'connected' && account.address) {
+ if (ensName) {
+ return ensName;
+ }
+ if (account.address) {
+ return formatWalletAddress(account.address);
+ }
+ }
+ return 'Not connected';
+ }, [account, ensName]);
+
+ return (
+ <>
+
+
+ {account.address ? : null}
+
+
{accountName}
+
{account?.address}
+
+ {topLeftContent || topRightContent ? (
+
+
{topLeftContent}
+
{topRightContent}
+
+ ) : null}
+
+ {bottomLeftContent || bottomRightContent ? (
+
+
{bottomLeftContent}
+
{bottomRightContent}
+
+ ) : null}
+
+
+
+
+ );
+};
+
+export default EnvironmentsPage;
diff --git a/src/components/run-job/payment-authorize.module.css b/src/components/run-job/payment-authorize.module.css
new file mode 100644
index 00000000..0f0c75b5
--- /dev/null
+++ b/src/components/run-job/payment-authorize.module.css
@@ -0,0 +1,21 @@
+.root {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+
+ .inputs {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+
+ @media (min-width: 576px) {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @media (min-width: 992px) {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
+}
diff --git a/src/components/run-job/payment-authorize.tsx b/src/components/run-job/payment-authorize.tsx
new file mode 100644
index 00000000..55cadd77
--- /dev/null
+++ b/src/components/run-job/payment-authorize.tsx
@@ -0,0 +1,116 @@
+import Button from '@/components/button/button';
+import Input from '@/components/input/input';
+import { SelectedToken } from '@/context/run-job-context';
+import { useAuthorizeTokens } from '@/lib/use-authorize-tokens';
+import { ComputeEnvironment, EnvResourcesSelection } from '@/types/environments';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import styles from './payment-authorize.module.css';
+
+type AuthorizeFormValues = {
+ // amountToAuthorize: number;
+ maxLockedAmount: number;
+ maxLockCount: number;
+ maxLockSeconds: number;
+};
+
+type PaymentAuthorizeProps = {
+ // authorizations: any;
+ loadPaymentInfo: () => void;
+ selectedEnv: ComputeEnvironment;
+ selectedResources: EnvResourcesSelection;
+ selectedToken: SelectedToken;
+ totalCost: number;
+};
+
+const PaymentAuthorize = ({
+ // authorizations,
+ loadPaymentInfo,
+ selectedEnv,
+ selectedResources,
+ selectedToken,
+ totalCost,
+}: PaymentAuthorizeProps) => {
+ const { handleAuthorize, isAuthorizing } = useAuthorizeTokens({ onSuccess: loadPaymentInfo });
+
+ const formik = useFormik({
+ enableReinitialize: true,
+ initialValues: {
+ // amountToAuthorize: totalCost - (authorizations?.currentLockedAmount ?? 0),
+ maxLockedAmount: totalCost,
+ maxLockCount: 10,
+ maxLockSeconds: selectedResources.maxJobDurationHours * 60 * 60,
+ },
+ onSubmit: async (values) => {
+ handleAuthorize({
+ tokenAddress: selectedToken.address,
+ spender: selectedEnv.consumerAddress,
+ maxLockedAmount: values.maxLockedAmount.toString(),
+ maxLockSeconds: values.maxLockSeconds.toString(),
+ maxLockCount: values.maxLockCount.toString(),
+ });
+ },
+ validateOnMount: true,
+ validationSchema: Yup.object({}),
+ });
+
+ return (
+
+ );
+};
+
+export default PaymentAuthorize;
diff --git a/src/components/run-job/payment-deposit.module.css b/src/components/run-job/payment-deposit.module.css
new file mode 100644
index 00000000..a8bfd788
--- /dev/null
+++ b/src/components/run-job/payment-deposit.module.css
@@ -0,0 +1,5 @@
+.root {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+}
diff --git a/src/components/run-job/payment-deposit.tsx b/src/components/run-job/payment-deposit.tsx
new file mode 100644
index 00000000..d1a78ea6
--- /dev/null
+++ b/src/components/run-job/payment-deposit.tsx
@@ -0,0 +1,59 @@
+import Button from '@/components/button/button';
+import Input from '@/components/input/input';
+import { SelectedToken } from '@/context/run-job-context';
+import { useDepositTokens } from '@/lib/use-deposit-tokens';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import styles from './payment-deposit.module.css';
+
+type DepositFormValues = {
+ amount: number;
+};
+
+type PaymentDepositProps = {
+ escrowBalance: number;
+ loadPaymentInfo: () => void;
+ selectedToken: SelectedToken;
+ totalCost: number;
+};
+
+const PaymentDeposit = ({ escrowBalance, loadPaymentInfo, selectedToken, totalCost }: PaymentDepositProps) => {
+ const { handleDeposit, isDepositing } = useDepositTokens({ onSuccess: loadPaymentInfo });
+
+ const formik = useFormik({
+ enableReinitialize: true,
+ initialValues: {
+ amount: totalCost - escrowBalance,
+ },
+ onSubmit: async (values) => {
+ handleDeposit({
+ tokenAddress: selectedToken.address,
+ amount: values.amount.toString(),
+ });
+ },
+ validateOnMount: true,
+ validationSchema: Yup.object({
+ amount: Yup.number().required('Required').min(0, 'Invalid amount'),
+ }),
+ });
+
+ return (
+
+ );
+};
+
+export default PaymentDeposit;
diff --git a/src/components/run-job/payment-page.tsx b/src/components/run-job/payment-page.tsx
new file mode 100644
index 00000000..ca075719
--- /dev/null
+++ b/src/components/run-job/payment-page.tsx
@@ -0,0 +1,43 @@
+import Container from '@/components/container/container';
+import Payment from '@/components/run-job/payment';
+import SectionTitle from '@/components/section-title/section-title';
+import { getRunJobSteps, RunJobStep } from '@/components/stepper/get-steps';
+import Stepper from '@/components/stepper/stepper';
+import { useRunJobContext } from '@/context/run-job-context';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+const PaymentPage = () => {
+ const router = useRouter();
+
+ const { estimatedTotalCost, freeCompute, selectedEnv, selectedResources, selectedToken } = useRunJobContext();
+
+ useEffect(() => {
+ if (!selectedToken) {
+ router.replace('/run-job/environments');
+ }
+ }, [router, selectedToken]);
+
+ return (
+
+ currentStep="payment" steps={getRunJobSteps(freeCompute)} />}
+ />
+ {selectedEnv && selectedResources && selectedToken ? (
+
+ ) : null}
+
+ );
+};
+
+export default PaymentPage;
diff --git a/src/components/run-job/payment-summary.module.css b/src/components/run-job/payment-summary.module.css
new file mode 100644
index 00000000..1e4ebf09
--- /dev/null
+++ b/src/components/run-job/payment-summary.module.css
@@ -0,0 +1,45 @@
+.cost {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 12px 24px;
+
+ @media (min-width: 768px) {
+ align-items: center;
+ display: grid;
+ grid-template-columns: 1fr auto;
+ }
+
+ .valueWithChip {
+ align-items: end;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .values {
+ text-align: right;
+
+ .token {
+ color: var(--text-secondary);
+ font-size: 14px;
+ }
+
+ .amount {
+ font-size: 32px;
+ font-weight: 700;
+ }
+ }
+
+ .sm {
+ color: var(--text-secondary);
+ font-size: 16px;
+
+ .token {
+ font-size: 12px;
+ }
+
+ .amount {
+ font-size: 20px;
+ }
+ }
+}
diff --git a/src/components/run-job/payment-summary.tsx b/src/components/run-job/payment-summary.tsx
new file mode 100644
index 00000000..3d5ebc49
--- /dev/null
+++ b/src/components/run-job/payment-summary.tsx
@@ -0,0 +1,78 @@
+import Card from '@/components/card/card';
+import { Authorizations } from '@/types/payment';
+import { formatNumber } from '@/utils/formatters';
+import classNames from 'classnames';
+import styles from './payment-summary.module.css';
+
+type PaymentSummaryProps = {
+ authorizations: Authorizations | null;
+ escrowBalance: number | null;
+ tokenSymbol: string;
+ totalCost: number;
+ walletBalance: number;
+};
+
+const PaymentSummary = ({
+ authorizations,
+ escrowBalance,
+ tokenSymbol,
+ totalCost,
+ walletBalance,
+}: PaymentSummaryProps) => {
+ const insufficientAutorized = (Number(authorizations?.maxLockedAmount) ?? 0) < totalCost;
+ const insufficientEscrow = escrowBalance !== null && escrowBalance < totalCost;
+
+ return (
+
+ {/* Estimated total cost */}
+ Estimated total cost
+
+ {tokenSymbol}
+
+ {formatNumber(totalCost)}
+
+ {/* User available funds in escrow */}
+ User available funds in escrow
+
+
+ {tokenSymbol}
+
+
+ {formatNumber(escrowBalance ?? 0)}
+
+
+ {insufficientEscrow ?
Insufficient funds
: null}
+
Current locked amount
+
+
+ {tokenSymbol}
+
+ {formatNumber(authorizations?.currentLockedAmount ?? 0)}
+
+
Max locked amount
+
+
+ {tokenSymbol}
+
+
+ {formatNumber(authorizations?.maxLockedAmount ?? 0)}
+
+
+ {insufficientAutorized ?
Insufficient allowance
: null}
+
User available funds in wallet
+
+ {tokenSymbol}
+
+ {formatNumber(walletBalance)}
+
+
+ );
+};
+
+export default PaymentSummary;
diff --git a/src/components/run-job/payment.tsx b/src/components/run-job/payment.tsx
new file mode 100644
index 00000000..ac45f390
--- /dev/null
+++ b/src/components/run-job/payment.tsx
@@ -0,0 +1,112 @@
+import Card from '@/components/card/card';
+import PaymentAuthorize from '@/components/run-job/payment-authorize';
+import PaymentDeposit from '@/components/run-job/payment-deposit';
+import PaymentSummary from '@/components/run-job/payment-summary';
+import { SelectedToken } from '@/context/run-job-context';
+import { useOceanAccount } from '@/lib/use-ocean-account';
+import { ComputeEnvironment, EnvResourcesSelection } from '@/types/environments';
+import { Authorizations } from '@/types/payment';
+import { CircularProgress } from '@mui/material';
+import { useRouter } from 'next/router';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+type PaymentProps = {
+ selectedEnv: ComputeEnvironment;
+ selectedResources: EnvResourcesSelection;
+ selectedToken: SelectedToken;
+ totalCost: number;
+};
+
+const Payment = ({ selectedEnv, selectedResources, selectedToken, totalCost }: PaymentProps) => {
+ const router = useRouter();
+
+ const { account, ocean } = useOceanAccount();
+
+ const [authorizations, setAuthorizations] = useState(null);
+ const [escrowBalance, setEscrowBalance] = useState(null);
+ const [walletBalance, setWalletBalance] = useState(null);
+
+ const [loadingAuthorizations, setLoadingAuthorizations] = useState(false);
+ const [loadingUserFunds, setLoadingUserFunds] = useState(false);
+
+ const step: 'authorize' | 'deposit' = useMemo(() => {
+ if ((escrowBalance ?? 0) >= totalCost) {
+ return 'authorize';
+ }
+ return 'deposit';
+ }, [escrowBalance, totalCost]);
+
+ const loadPaymentInfo = useCallback(() => {
+ if (ocean && account?.address) {
+ setLoadingAuthorizations(true);
+ ocean
+ .getAuthorizations(selectedToken.address, account.address, selectedEnv.consumerAddress)
+ .then((authorizations) => {
+ setAuthorizations(authorizations);
+ setLoadingAuthorizations(false);
+ });
+ ocean.getBalance(selectedToken.address, account.address).then((balance) => {
+ setWalletBalance(Number(balance));
+ });
+ setLoadingUserFunds(true);
+ ocean.getUserFunds(selectedToken.address, account.address).then((balance) => {
+ setEscrowBalance(Number(balance));
+ setLoadingUserFunds(false);
+ });
+ }
+ }, [ocean, account.address, selectedToken.address, selectedEnv.consumerAddress]);
+
+ useEffect(() => {
+ loadPaymentInfo();
+ }, [loadPaymentInfo]);
+
+ useEffect(() => {
+ const sufficientEscrow = (escrowBalance ?? 0) >= totalCost;
+ const suffficientAuthorized = (Number(authorizations?.maxLockedAmount) ?? 0) >= totalCost;
+ const enoughLockSeconds = (Number(authorizations?.maxLockSeconds) ?? 0) >= selectedResources.maxJobDurationHours;
+ if (sufficientEscrow && suffficientAuthorized && enoughLockSeconds) {
+ router.push('/run-job/summary');
+ }
+ }, [
+ authorizations?.maxLockSeconds,
+ authorizations?.maxLockedAmount,
+ escrowBalance,
+ router,
+ selectedResources.maxJobDurationHours,
+ totalCost,
+ ]);
+
+ return loadingAuthorizations || loadingUserFunds ? (
+
+ ) : (
+
+ Payment
+
+ {step === 'deposit' ? (
+
+ ) : step === 'authorize' ? (
+
+ ) : null}
+
+ );
+};
+
+export default Payment;
diff --git a/src/components/run-job/resources-page.tsx b/src/components/run-job/resources-page.tsx
new file mode 100644
index 00000000..7d83ea95
--- /dev/null
+++ b/src/components/run-job/resources-page.tsx
@@ -0,0 +1,38 @@
+import Container from '@/components/container/container';
+import SelectResources from '@/components/run-job/select-resources';
+import SectionTitle from '@/components/section-title/section-title';
+import { getRunJobSteps, RunJobStep } from '@/components/stepper/get-steps';
+import Stepper from '@/components/stepper/stepper';
+import { useRunJobContext } from '@/context/run-job-context';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+const ResourcesPage = () => {
+ const router = useRouter();
+
+ const { freeCompute, selectedEnv, selectedToken } = useRunJobContext();
+
+ useEffect(() => {
+ if (!selectedEnv || !selectedToken) {
+ router.replace('/run-job/environments');
+ }
+ }, [router, selectedEnv, selectedToken]);
+
+ return (
+
+ currentStep="resources" steps={getRunJobSteps(freeCompute)} />}
+ />
+ {selectedEnv && selectedToken ? (
+
+
+
+ ) : null}
+
+ );
+};
+
+export default ResourcesPage;
diff --git a/src/components/run-job/select-environment.module.css b/src/components/run-job/select-environment.module.css
new file mode 100644
index 00000000..b826e0a0
--- /dev/null
+++ b/src/components/run-job/select-environment.module.css
@@ -0,0 +1,40 @@
+.extraFilters {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ @media (min-width: 576px) {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @media (min-width: 992px) {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+.footer {
+ align-items: end;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 16px;
+ justify-content: space-between;
+
+ .sortSelect {
+ min-width: 250px;
+ }
+
+ .buttons {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ gap: 8px;
+ }
+}
+
+.list {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
diff --git a/src/components/run-job/select-environment.tsx b/src/components/run-job/select-environment.tsx
new file mode 100644
index 00000000..37384ae2
--- /dev/null
+++ b/src/components/run-job/select-environment.tsx
@@ -0,0 +1,200 @@
+import Button from '@/components/button/button';
+import Card from '@/components/card/card';
+import EnvironmentCard from '@/components/environment-card/environment-card';
+import GpuLabel from '@/components/gpu-label/gpu-label';
+import Input from '@/components/input/input';
+import Select from '@/components/input/select';
+import { RawFilters, useRunJobEnvsContext } from '@/context/run-job-envs-context';
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import { Collapse } from '@mui/material';
+import { useFormik } from 'formik';
+import { useEffect, useMemo, useState } from 'react';
+import styles from './select-environment.module.css';
+
+const sortOptions = [
+ { label: 'No sorting', value: '' },
+ { label: 'Price ascending', value: JSON.stringify({ price: 'asc' }) },
+ { label: 'Price descending', value: JSON.stringify({ price: 'desc' }) },
+];
+
+type FilterFormValues = {
+ gpuName: string[];
+ fromMaxJobDuration: number | '';
+ minimumCPU: number | '';
+ minimumRAM: number | '';
+ minimumStorage: number | '';
+ feeToken: string;
+ sortBy: string;
+};
+
+const SelectEnvironment = () => {
+ const { fetchGpus, filters, gpus, loading, loadMoreEnvs, nodeEnvs, paginationResponse, setFilters, setSort, sort } =
+ useRunJobEnvsContext();
+
+ const [expanded, setExpanded] = useState(!!filters);
+
+ useEffect(() => {
+ fetchGpus();
+ }, [fetchGpus]);
+
+ const gpuOptions = useMemo(() => gpus.map((gpu) => ({ value: gpu.gpuName, label: gpu.gpuName })), [gpus]);
+
+ const formik = useFormik({
+ initialValues: {
+ gpuName: filters.gpuName ?? [],
+ fromMaxJobDuration: filters.fromMaxJobDuration ?? '',
+ minimumCPU: filters.minimumCPU ?? '',
+ minimumRAM: filters.minimumRAM ?? '',
+ minimumStorage: filters.minimumStorage ?? '',
+ feeToken: '',
+ sortBy: sort ?? '',
+ },
+ onSubmit: async (values) => {
+ const filters: RawFilters = { gpuName: values.gpuName };
+ if (values.fromMaxJobDuration !== '') {
+ filters.fromMaxJobDuration = Number(values.fromMaxJobDuration);
+ }
+ if (values.minimumCPU !== '') {
+ filters.minimumCPU = Number(values.minimumCPU);
+ }
+ if (values.minimumRAM !== '') {
+ filters.minimumRAM = Number(values.minimumRAM);
+ }
+ if (values.minimumStorage !== '') {
+ filters.minimumStorage = Number(values.minimumStorage);
+ }
+ if (values.gpuName.length > 0) {
+ filters.gpuName = values.gpuName;
+ }
+ setFilters(filters);
+ setSort(values.sortBy);
+ },
+ });
+
+ const toggleFilters = () => {
+ if (expanded) {
+ formik.setValues({
+ ...formik.values,
+ fromMaxJobDuration: '',
+ minimumCPU: '',
+ minimumRAM: '',
+ minimumStorage: '',
+ feeToken: '',
+ });
+ }
+ setExpanded(!expanded);
+ };
+
+ return (
+
+ Environments
+
+
+ {nodeEnvs.map((node) =>
+ node.computeEnvironments.environments.map((env) => (
+
+ ))
+ )}
+ {paginationResponse && paginationResponse.currentPage < paginationResponse.totalPages && (
+
+ )}
+
+
+ );
+};
+
+export default SelectEnvironment;
diff --git a/src/components/run-job/select-resources.module.css b/src/components/run-job/select-resources.module.css
new file mode 100644
index 00000000..85d25252
--- /dev/null
+++ b/src/components/run-job/select-resources.module.css
@@ -0,0 +1,76 @@
+.form {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ .selectRow {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ .inputsGrid {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+ }
+
+ .button {
+ align-self: end;
+ }
+
+ @media (min-width: 768px) {
+ .selectRow {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ }
+
+ .inputsGrid {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ }
+ }
+
+ @media (min-width: 992px) {
+ .selectRow {
+ grid-template-columns: 2fr 1fr;
+ }
+ }
+
+ @media (min-width: 1200px) {
+ .selectRow {
+ grid-template-columns: 3fr 1fr;
+ }
+ }
+}
+
+.cost {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 32px;
+ justify-content: space-between;
+ padding: 12px 24px;
+
+ .values {
+ display: flex;
+ flex-grow: 1;
+ flex-direction: column;
+ align-items: end;
+
+ .token {
+ color: var(--text-secondary);
+ font-size: 14px;
+ }
+
+ .amount {
+ font-size: 32px;
+ font-weight: 700;
+ }
+
+ .reimbursment {
+ color: var(--success);
+ }
+ }
+}
diff --git a/src/components/run-job/select-resources.tsx b/src/components/run-job/select-resources.tsx
new file mode 100644
index 00000000..e180591c
--- /dev/null
+++ b/src/components/run-job/select-resources.tsx
@@ -0,0 +1,267 @@
+import Button from '@/components/button/button';
+import Card from '@/components/card/card';
+import GpuLabel from '@/components/gpu-label/gpu-label';
+import useEnvResources from '@/components/hooks/use-env-resources';
+import Input from '@/components/input/input';
+import Select from '@/components/input/select';
+import Slider from '@/components/slider/slider';
+import { SelectedToken, useRunJobContext } from '@/context/run-job-context';
+import { ComputeEnvironment } from '@/types/environments';
+import { formatNumber } from '@/utils/formatters';
+import { useAuthModal, useSignerStatus } from '@account-kit/react';
+import { useFormik } from 'formik';
+import { useRouter } from 'next/router';
+import { useMemo } from 'react';
+import * as Yup from 'yup';
+import styles from './select-resources.module.css';
+
+type SelectResourcesProps = {
+ environment: ComputeEnvironment;
+ freeCompute: boolean;
+ token: SelectedToken;
+};
+
+type ResourcesFormValues = {
+ cpuCores: number;
+ diskSpace: number;
+ gpus: string[];
+ maxJobDurationHours: number;
+ ram: number;
+};
+
+const SelectResources = ({ environment, freeCompute, token }: SelectResourcesProps) => {
+ const { openAuthModal } = useAuthModal();
+ const router = useRouter();
+ const { isAuthenticating, isDisconnected } = useSignerStatus();
+
+ const { setEstimatedTotalCost, setSelectedResources } = useRunJobContext();
+
+ const { cpu, cpuFee, disk, diskFee, gpus, gpuFees, ram, ramFee } = useEnvResources({
+ environment,
+ freeCompute,
+ tokenAddress: token.address,
+ });
+
+ const minAllowedCpuCores = cpu?.min ?? 1;
+ const minAllowedDiskSpace = disk?.min ?? 0;
+ const minAllowedJobDurationHours = environment.minJobDuration ?? 0;
+ const minAllowedRam = ram?.min ?? 0;
+
+ const maxAllowedCpuCores = cpu?.max ?? minAllowedCpuCores;
+ const maxAllowedDiskSpace = disk?.max ?? minAllowedDiskSpace;
+ const maxAllowedJobDurationHours = (environment.maxJobDuration ?? minAllowedJobDurationHours) / 60 / 60;
+ const maxAllowedRam = ram?.max ?? minAllowedRam;
+
+ const formik = useFormik({
+ initialValues: {
+ cpuCores: minAllowedCpuCores,
+ diskSpace: minAllowedDiskSpace,
+ gpus: [],
+ maxJobDurationHours: minAllowedJobDurationHours,
+ ram: minAllowedRam,
+ },
+ onSubmit: (values) => {
+ if (isDisconnected) {
+ openAuthModal();
+ return;
+ }
+ setEstimatedTotalCost(estimatedTotalCost);
+ setSelectedResources({
+ cpuCores: values.cpuCores,
+ cpuId: cpu?.id ?? 'cpu',
+ diskSpace: values.diskSpace,
+ diskId: disk?.id ?? 'disk',
+ gpus: gpus
+ .filter((gpu) => values.gpus.includes(gpu.id))
+ .map((gpu) => ({ id: gpu.id, description: gpu.description })),
+ maxJobDurationHours: values.maxJobDurationHours,
+ ram: values.ram,
+ ramId: ram?.id ?? 'ram',
+ });
+ if (estimatedTotalCost > 0 && !freeCompute) {
+ router.push('/run-job/payment');
+ } else {
+ router.push('/run-job/summary');
+ }
+ },
+ validateOnMount: true,
+ validationSchema: Yup.object({
+ cpuCores: Yup.number()
+ .required('Required')
+ .min(minAllowedCpuCores, 'Limits exceeded')
+ .max(maxAllowedCpuCores, 'Limits exceeded')
+ .integer('Invalid format'),
+ diskSpace: Yup.number()
+ .required('Required')
+ .min(minAllowedDiskSpace, 'Limits exceeded')
+ .max(maxAllowedDiskSpace, 'Limits exceeded'),
+ gpus: Yup.array().of(Yup.string()),
+ maxJobDurationHours: Yup.number()
+ .required('Required')
+ .min(minAllowedJobDurationHours, 'Limits exceeded')
+ .max(maxAllowedJobDurationHours, 'Limits exceeded'),
+ ram: Yup.number()
+ .required('Required')
+ .min(minAllowedRam, 'Limits exceeded')
+ .max(maxAllowedRam, 'Limits exceeded'),
+ }),
+ });
+
+ const estimatedTotalCost = useMemo(() => {
+ if (freeCompute) {
+ return 0;
+ }
+ const timeInMinutes = Number(formik.values.maxJobDurationHours) * 60;
+ const cpuCost = Number(formik.values.cpuCores) * (cpuFee ?? 0) * timeInMinutes;
+ const ramCost = Number(formik.values.ram) * (ramFee ?? 0) * timeInMinutes;
+ const diskCost = Number(formik.values.diskSpace) * (diskFee ?? 0) * timeInMinutes;
+ const gpuCost = formik.values.gpus.reduce((total, gpuId) => {
+ const fee = gpuFees[gpuId] ?? 0;
+ return total + fee * timeInMinutes;
+ }, 0);
+ return cpuCost + ramCost + diskCost + gpuCost;
+ }, [
+ cpuFee,
+ diskFee,
+ formik.values.cpuCores,
+ formik.values.diskSpace,
+ formik.values.gpus,
+ formik.values.maxJobDurationHours,
+ formik.values.ram,
+ freeCompute,
+ gpuFees,
+ ramFee,
+ ]);
+
+ const selectAllGpus = () => {
+ formik.setFieldValue(
+ 'gpus',
+ gpus.map((gpu) => gpu.id)
+ );
+ };
+
+ const setMaxDiskSpace = () => {
+ formik.setFieldValue('diskSpace', maxAllowedDiskSpace);
+ };
+
+ const setMaxJobDurationHours = () => {
+ formik.setFieldValue('maxJobDurationHours', maxAllowedJobDurationHours);
+ };
+
+ return (
+
+ Select resources
+
+
+ );
+};
+
+export default SelectResources;
diff --git a/src/components/run-job/summary-page.tsx b/src/components/run-job/summary-page.tsx
new file mode 100644
index 00000000..b16a0320
--- /dev/null
+++ b/src/components/run-job/summary-page.tsx
@@ -0,0 +1,45 @@
+import Container from '@/components/container/container';
+import Summary from '@/components/run-job/summary';
+import SectionTitle from '@/components/section-title/section-title';
+import { getRunJobSteps, RunJobStep } from '@/components/stepper/get-steps';
+import Stepper from '@/components/stepper/stepper';
+import { useRunJobContext } from '@/context/run-job-context';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+const SummaryPage = () => {
+ const router = useRouter();
+
+ const { estimatedTotalCost, freeCompute, nodeInfo, selectedEnv, selectedResources, selectedToken } =
+ useRunJobContext();
+
+ useEffect(() => {
+ if (!selectedEnv || !selectedResources) {
+ router.replace('/run-job/environments');
+ }
+ }, [router, selectedEnv, selectedResources]);
+
+ return (
+
+ currentStep="finish" steps={getRunJobSteps(freeCompute)} />}
+ />
+ {nodeInfo && selectedEnv && selectedResources && selectedToken ? (
+
+
+
+ ) : null}
+
+ );
+};
+
+export default SummaryPage;
diff --git a/src/components/run-job/summary.module.css b/src/components/run-job/summary.module.css
new file mode 100644
index 00000000..c4292375
--- /dev/null
+++ b/src/components/run-job/summary.module.css
@@ -0,0 +1,41 @@
+.grid {
+ display: flex;
+ flex-direction: column;
+ gap: 8px 32px;
+
+ .label {
+ font-weight: 700;
+ color: var(--text-secondary);
+ }
+
+ .gpus {
+ display: flex;
+ gap: 12px;
+ }
+
+ @media (min-width: 768px) {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ }
+}
+
+.footer {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 16px;
+
+ .buttons {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ gap: 16px;
+
+ @media (min-width: 576px) {
+ align-items: center;
+ flex-direction: row;
+ justify-content: end;
+ }
+ }
+}
diff --git a/src/components/run-job/summary.tsx b/src/components/run-job/summary.tsx
new file mode 100644
index 00000000..41069bad
--- /dev/null
+++ b/src/components/run-job/summary.tsx
@@ -0,0 +1,219 @@
+import VscodeLogoWhite from '@/assets/icons/ide/vscode-white.svg';
+import Button from '@/components/button/button';
+import Card from '@/components/card/card';
+import GpuLabel from '@/components/gpu-label/gpu-label';
+import useEnvResources from '@/components/hooks/use-env-resources';
+import { SelectedToken } from '@/context/run-job-context';
+import { useOceanAccount } from '@/lib/use-ocean-account';
+import { ComputeEnvironment, EnvNodeInfo, EnvResourcesSelection } from '@/types/environments';
+import { Ide } from '@/types/ide';
+import { useSignMessage, useSmartAccountClient } from '@account-kit/react';
+import { ListItemIcon, Menu, MenuItem } from '@mui/material';
+import classNames from 'classnames';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import styles from './summary.module.css';
+
+type SummaryProps = {
+ estimatedTotalCost: number;
+ freeCompute: boolean;
+ nodeInfo: EnvNodeInfo;
+ selectedEnv: ComputeEnvironment;
+ selectedResources: EnvResourcesSelection;
+ token: SelectedToken;
+};
+
+const Summary = ({
+ estimatedTotalCost,
+ freeCompute,
+ nodeInfo,
+ selectedEnv,
+ selectedResources,
+ token,
+}: SummaryProps) => {
+ const { client } = useSmartAccountClient({ type: 'LightAccount' });
+ const { signMessageAsync } = useSignMessage({
+ client,
+ });
+
+ const { account, ocean } = useOceanAccount();
+
+ const { gpus } = useEnvResources({
+ environment: selectedEnv,
+ freeCompute,
+ tokenAddress: token.address,
+ });
+
+ const [anchorEl, setAnchorEl] = useState(null);
+ const [authToken, setAuthToken] = useState(null);
+
+ const generateToken = async () => {
+ if (!account.address || !ocean) {
+ return;
+ }
+ try {
+ const nonce = await ocean.getNonce(account.address, nodeInfo.id);
+ const incrementedNonce = nonce + 1;
+ const signedMessage = await signMessageAsync({
+ message: account.address + incrementedNonce,
+ });
+ const token = await ocean.generateAuthToken(account.address, incrementedNonce, signedMessage, nodeInfo.id);
+ setAuthToken(token);
+ } catch (error) {
+ console.error('Failed to generate auth token:', error);
+ toast.error('Failed to generate auth token');
+ }
+ };
+
+ const openIde = async (uriScheme: string) => {
+ if (!authToken || !account.address || !ocean) {
+ return;
+ }
+ const resources = [
+ {
+ id: selectedResources.cpuId,
+ amount: selectedResources.cpuCores,
+ },
+ {
+ id: selectedResources.ramId,
+ amount: selectedResources.ram,
+ },
+ {
+ id: selectedResources.diskId,
+ amount: selectedResources.diskSpace,
+ },
+ ...gpus.map((availableGpu) => ({
+ id: availableGpu.id,
+ amount: selectedResources.gpus.find((selectedGpu) => selectedGpu.id === availableGpu.id) ? 1 : 0,
+ })),
+ ];
+ const isFreeCompute = estimatedTotalCost === 0;
+ ocean.updateConfiguration(
+ authToken,
+ account.address,
+ nodeInfo.id,
+ isFreeCompute,
+ selectedEnv.id,
+ token.address,
+ selectedResources.maxJobDurationHours * 60 * 60,
+ resources,
+ uriScheme
+ );
+ };
+
+ const handleOpenIdeMenu = () => {
+ setAnchorEl(document.getElementById('choose-editor-button'));
+ };
+
+ const handleCloseIdeMenu = () => {
+ setAnchorEl(null);
+ };
+
+ return (
+
+ Your selection
+
+ {nodeInfo.friendlyName ? (
+ <>
+
Node:
+
{nodeInfo.friendlyName}
+
+ ) : null}
+
Peer ID:
+
{nodeInfo.id}
+
Environment:
+
{selectedEnv.consumerAddress}
+
Fee token address:
+
{token.address}
+
Job duration:
+
+ {selectedResources!.maxJobDurationHours} hours ({selectedResources!.maxJobDurationHours * 60 * 60} seconds)
+
+
GPU:
+
+ {selectedResources.gpus.length
+ ? selectedResources.gpus.map((gpu) => )
+ : '-'}
+
+
CPU cores:
+
{selectedResources!.cpuCores}
+
RAM:
+
{selectedResources!.ram} GB
+
Disk space:
+
{selectedResources!.diskSpace} GB
+
Total cost:
+
{freeCompute ? 'Free' : `${estimatedTotalCost} ${token.symbol}`}
+
+
Continue on our VSCode extension, or select your editor of choice
+
+
+
+ }
+ onClick={async () => await openIde('vscode')}
+ size="lg"
+ >
+ Open VSCode
+
+
+
+
Continue on our VSCode extension, or select your editor of choice
+
+
+
+
+
+
+ ) : null}
+
+ );
+};
+
+export default ConfigurePage;
diff --git a/src/components/run-node/node-config.module.css b/src/components/run-node/node-config.module.css
new file mode 100644
index 00000000..9e7f5993
--- /dev/null
+++ b/src/components/run-node/node-config.module.css
@@ -0,0 +1,19 @@
+.editorWrapper {
+ border-radius: 16px;
+ border: 1px solid var(--border-glass);
+ max-height: calc(100vh - 300px);
+ overflow-y: auto;
+}
+
+.buttons {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 16px;
+ justify-content: flex-end;
+}
+
+.errorsList {
+ list-style-type: disc;
+ padding-left: 14px;
+}
diff --git a/src/components/run-node/node-config.tsx b/src/components/run-node/node-config.tsx
new file mode 100644
index 00000000..df5eda9f
--- /dev/null
+++ b/src/components/run-node/node-config.tsx
@@ -0,0 +1,78 @@
+import Button from '@/components/button/button';
+import Card from '@/components/card/card';
+import NodePreview from '@/components/run-node/node-preview';
+import { useRunNodeContext } from '@/context/run-node-context';
+import { githubDarkTheme, JsonEditor } from 'json-edit-react';
+import { useEffect, useState } from 'react';
+import styles from './node-config.module.css';
+
+const NodeConfig = () => {
+ const { configErrors, loadingPushConfig, loadingFetchConfig, nodeConfig, pushConfig } = useRunNodeContext();
+
+ const [editedConfig, setEditedConfig] = useState(nodeConfig ?? {});
+
+ useEffect(() => {
+ setEditedConfig(nodeConfig ?? {});
+ }, [nodeConfig]);
+
+ return (
+
+ {loadingFetchConfig ? (
+ 'Loading config...'
+ ) : (
+ <>
+
+ setEditedConfig(newData as Record)}
+ theme={githubDarkTheme}
+ />
+
+ {editedConfig ? : null}
+ {configErrors.length > 0 ? (
+
+ Format errors
+
+ {configErrors.map((error, index) => (
+ - {error}
+ ))}
+
+
+ ) : null}
+
+ )}
+
+
+
+
+
+ );
+};
+
+export default NodeConfig;
diff --git a/src/components/run-node/node-connection.module.css b/src/components/run-node/node-connection.module.css
new file mode 100644
index 00000000..96a0f184
--- /dev/null
+++ b/src/components/run-node/node-connection.module.css
@@ -0,0 +1,11 @@
+.header {
+ align-items: center;
+ display: flex;
+ gap: 8px;
+}
+
+.form {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
diff --git a/src/components/run-node/node-connection.tsx b/src/components/run-node/node-connection.tsx
new file mode 100644
index 00000000..3e3ad6a4
--- /dev/null
+++ b/src/components/run-node/node-connection.tsx
@@ -0,0 +1,86 @@
+import Button from '@/components/button/button';
+import Card from '@/components/card/card';
+import Input from '@/components/input/input';
+import { useRunNodeContext } from '@/context/run-node-context';
+import { useOceanAccount } from '@/lib/use-ocean-account';
+import { useAuthModal } from '@account-kit/react';
+import LinkIcon from '@mui/icons-material/Link';
+import classNames from 'classnames';
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+import styles from './node-connection.module.css';
+
+type ConnectFormValues = {
+ nodeId: string;
+};
+
+const NodeConnection = () => {
+ const { openAuthModal } = useAuthModal();
+
+ const { account } = useOceanAccount();
+
+ const { clearRunNodeSelection, connectToNode, peerId } = useRunNodeContext();
+
+ const isConnected = !!peerId;
+
+ const formik = useFormik({
+ initialValues: {
+ nodeId: '',
+ },
+ validationSchema: Yup.object().shape({
+ nodeId: Yup.string().required('Node ID is required'),
+ }),
+ onSubmit: async (values) => {
+ if (!account.isConnected) {
+ openAuthModal();
+ return;
+ }
+ await connectToNode(values.nodeId);
+ },
+ });
+
+ return (
+
+
+
Connect to your node
+
+ {isConnected ? 'Connected' : 'Not connected'}
+
+
+ Currently connected to node ID: {peerId}
+
+
+
+ ) : (
+ <>
+ Enter the ID of your node to connect and configure it
+
+ }
+ loading={formik.isSubmitting}
+ onClick={formik.submitForm}
+ >
+ Connect
+
+
+ )}
+
+ );
+};
+
+export default NodeConnection;
diff --git a/src/components/run-node/node-preview.module.css b/src/components/run-node/node-preview.module.css
new file mode 100644
index 00000000..ce864cca
--- /dev/null
+++ b/src/components/run-node/node-preview.module.css
@@ -0,0 +1,37 @@
+.grid {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 16px 32px;
+}
+
+.label {
+ align-items: center;
+ color: var(--text-secondary);
+ display: flex;
+ font-size: 14px;
+
+ &.heading,
+ .heading {
+ color: var(--text-primary);
+ font-size: 14px;
+ font-weight: 600;
+ }
+
+ &.em,
+ .em {
+ color: var(--text-primary);
+ font-weight: 700;
+ }
+
+ .icon {
+ color: var(--accent1);
+ margin-right: 4px;
+ }
+}
+
+.envWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+}
diff --git a/src/components/run-node/node-preview.tsx b/src/components/run-node/node-preview.tsx
new file mode 100644
index 00000000..ef131cbd
--- /dev/null
+++ b/src/components/run-node/node-preview.tsx
@@ -0,0 +1,169 @@
+import Card from '@/components/card/card';
+import GpuLabel from '@/components/gpu-label/gpu-label';
+import useEnvResources from '@/components/hooks/use-env-resources';
+import { USDC_TOKEN_ADDRESS } from '@/constants/tokens';
+import { ComputeEnvironment } from '@/types/environments';
+import DnsIcon from '@mui/icons-material/Dns';
+import MemoryIcon from '@mui/icons-material/Memory';
+import SdStorageIcon from '@mui/icons-material/SdStorage';
+import classNames from 'classnames';
+import styles from './node-preview.module.css';
+
+type NodePreviewProps = {
+ nodeConfig: Record;
+};
+
+const NodePreview = ({ nodeConfig }: NodePreviewProps) => {
+ return (
+
+ Preview configuration
+ {nodeConfig.dockerComputeEnvironments?.length > 0 ? (
+ nodeConfig.dockerComputeEnvironments?.map((env: ComputeEnvironment, index: number) => (
+ 1}
+ />
+ ))
+ ) : (
+ No valid compute environments to display
+ )}
+
+ );
+};
+
+const NodeEnvPreview = ({
+ environment,
+ index,
+ showEnvName,
+}: {
+ environment: ComputeEnvironment;
+ index: number;
+ showEnvName?: boolean;
+}) => {
+ const { cpu, cpuFee, disk, diskFee, gpus, gpuFees, ram, ramFee } = useEnvResources({
+ environment,
+ freeCompute: false,
+ tokenAddress: USDC_TOKEN_ADDRESS,
+ });
+
+ // TODO
+ const tokenSymbol = 'USDC';
+
+ const renderCpu = () => {
+ if (!cpu) {
+ return null;
+ }
+ const max = cpu.max ?? cpu.total ?? 0;
+ const fee = cpuFee ?? 0;
+ return (
+
+
+
+ {cpu?.description}
+
+
+ {fee} {tokenSymbol}/min
+
+
+ 1 - {max}
+ available
+
+
+
+
+ {fee} {tokenSymbol}/min
+
+
+ 0 - {max}
+ available
+
+
+
+
+ GB RAM capacity
+
+
+ {fee} {tokenSymbol}/min
+
+
+ 0 - {max}
+ available
+
+
+
+
+ GB Disk space
+
+
+ {fee} {tokenSymbol}/min
+
+
+ 0 - {max}
+ available
+
+
+ {showEnvName ?
Environment {index}
: null}
+
+ {renderGpus()}
+ {renderCpu()}
+ {renderRam()}
+ {renderDisk()}
+
+
Set up Ocean Node via Docker
+ Before starting, make sure the system requirements are met
+
+ Docker Engine and Docker Compose are recommended for hosting a node eligible for incentives
+
+ You can explore other options in the Ocean Node readme
+
+
+
1. Download the setup script
+
+
+
+
2. Run the setup script and provide the required info
+
+
+
+
3. Run Ocean Node
+
+
+
+
4. Confirm that Docker containers are running
+
+
+
+ {peerId ? (
+
+ ) : null}
+
+ );
+};
+
+export default NodeSetup;
diff --git a/src/components/run-node/setup-page.tsx b/src/components/run-node/setup-page.tsx
new file mode 100644
index 00000000..315f7389
--- /dev/null
+++ b/src/components/run-node/setup-page.tsx
@@ -0,0 +1,23 @@
+import Container from '@/components/container/container';
+import NodeSetup from '@/components/run-node/node-setup';
+import SectionTitle from '@/components/section-title/section-title';
+import { getRunNodeSteps, RunNodeStep } from '@/components/stepper/get-steps';
+import Stepper from '@/components/stepper/stepper';
+
+const SetupPage = () => {
+ return (
+
+ currentStep="setup" steps={getRunNodeSteps()} />}
+ />
+
+
+
+
+ );
+};
+
+export default SetupPage;
diff --git a/src/components/section-title/section-title.module.css b/src/components/section-title/section-title.module.css
new file mode 100644
index 00000000..049947e7
--- /dev/null
+++ b/src/components/section-title/section-title.module.css
@@ -0,0 +1,17 @@
+.root {
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
+}
+
+.title {
+ margin: 0;
+ color: #009bff;
+ font-size: 40px;
+}
+
+.subTitle {
+ font-size: 20px;
+}
diff --git a/src/components/section-title/section-title.tsx b/src/components/section-title/section-title.tsx
new file mode 100644
index 00000000..6d9f1842
--- /dev/null
+++ b/src/components/section-title/section-title.tsx
@@ -0,0 +1,21 @@
+import cx from 'classnames';
+import styles from './section-title.module.css';
+
+type SectionTitleProps = {
+ title: string;
+ subTitle?: string;
+ className?: string;
+ contentBetween?: React.ReactNode;
+};
+
+const SectionTitle = ({ title, subTitle, className, contentBetween }: SectionTitleProps) => {
+ return (
+
+
{title}
+ {contentBetween}
+ {subTitle &&
{subTitle}
}
+
+
Total revenue
+
+ USDC {formatNumber(totalRevenue)}
+
+
+
+
+
+
+
+
+ );
+};
+
+export default StatsPage;
diff --git a/src/components/stats/system-stats.module.css b/src/components/stats/system-stats.module.css
new file mode 100644
index 00000000..a0e2454d
--- /dev/null
+++ b/src/components/stats/system-stats.module.css
@@ -0,0 +1,8 @@
+.root {
+ column-gap: 16px;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ row-gap: 32px;
+}
diff --git a/src/components/stats/system-stats.tsx b/src/components/stats/system-stats.tsx
new file mode 100644
index 00000000..92a1471f
--- /dev/null
+++ b/src/components/stats/system-stats.tsx
@@ -0,0 +1,105 @@
+import Card from '@/components/card/card';
+import { ChartTypeEnum } from '@/components/chart/chart-type';
+import PieChart from '@/components/chart/pie-chart';
+import { useStatsContext } from '@/context/stats-context';
+import { SystemStatsData } from '@/types/stats';
+import { useEffect } from 'react';
+import styles from './system-stats.module.css';
+
+const brandColors = {
+ primary: ['#009bff', '#0084dc', '#006eb9', '#005896', '#004273', '#002c50'],
+ other: '#ffffff',
+};
+
+interface ChartDataItem {
+ name: string;
+ value: number;
+ color: string;
+ details?: string[];
+}
+
+const processChartData = (data: Record, maxSlices: number): ChartDataItem[] => {
+ if (!data) return [];
+
+ const sortedEntries = Object.entries(data).sort(([, a], [, b]) => b - a);
+
+ const mainEntries = sortedEntries.slice(0, maxSlices);
+ const otherEntries = sortedEntries.slice(maxSlices);
+ const otherCount = otherEntries.reduce((sum, [, count]) => sum + count, 0);
+
+ const result = mainEntries.map(
+ ([key, count], index): ChartDataItem => ({
+ name: key,
+ value: count,
+ color: brandColors.primary[index],
+ })
+ );
+
+ if (otherCount > 0) {
+ result.push({
+ name: 'Other',
+ value: otherCount,
+ color: brandColors.other,
+ details: otherEntries.map(([key, count]) => `${key}: ${count} nodes`),
+ });
+ }
+
+ return result;
+};
+
+const processCpuData = (stats: SystemStatsData): ChartDataItem[] => {
+ if (!stats?.cpuCounts) return [];
+ const data = processChartData(stats.cpuCounts, 5);
+ return data.map((item) => ({
+ ...item,
+ name: item.name === 'Other' ? item.name : `${item.name} CPU${item.name !== '1' ? 's' : ''}`,
+ details: item.details?.map((detail) => {
+ const [count, nodes] = detail.split(':');
+ return `${count} CPU${count !== '1' ? 's' : ''}:${nodes}`;
+ }),
+ }));
+};
+
+const processOsData = (stats: SystemStatsData): ChartDataItem[] => {
+ if (!stats?.operatingSystems) return [];
+ return processChartData(stats.operatingSystems, 3);
+};
+
+const processCpuArchData = (stats: SystemStatsData): ChartDataItem[] => {
+ if (!stats?.cpuArchitectures) return [];
+ const data = processChartData(stats.cpuArchitectures, 3);
+
+ return data.map((item) => ({
+ ...item,
+ name: item.name.toUpperCase(),
+ details: item.details?.map((detail) => detail.toUpperCase()),
+ }));
+};
+
+const SystemStats = () => {
+ const { fetchSystemStats, systemStats } = useStatsContext();
+
+ useEffect(() => {
+ if (!systemStats.cpuCounts || Object.keys(systemStats.cpuCounts).length === 0) {
+ fetchSystemStats();
+ }
+ }, [fetchSystemStats, systemStats.cpuCounts]);
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default SystemStats;
diff --git a/src/components/stats/top-gpu-models.tsx b/src/components/stats/top-gpu-models.tsx
new file mode 100644
index 00000000..f56ab8c4
--- /dev/null
+++ b/src/components/stats/top-gpu-models.tsx
@@ -0,0 +1,21 @@
+import Card from '@/components/card/card';
+import HBarChart from '@/components/chart/h-bar-chart';
+import { useStatsContext } from '@/context/stats-context';
+import { useEffect } from 'react';
+
+const TopGpuModels = () => {
+ const { topGpuModels, fetchTopGpus } = useStatsContext();
+
+ useEffect(() => {
+ fetchTopGpus();
+ }, [fetchTopGpus]);
+
+ return (
+
+ Top GPUs by popularity
+
+
+ );
+};
+
+export default TopGpuModels;
diff --git a/src/components/stats/top-nodes.tsx b/src/components/stats/top-nodes.tsx
new file mode 100644
index 00000000..0479fa4b
--- /dev/null
+++ b/src/components/stats/top-nodes.tsx
@@ -0,0 +1,45 @@
+import Card from '@/components/card/card';
+import { Table } from '@/components/table/table';
+import { TableTypeEnum } from '@/components/table/table-type';
+import { useStatsContext } from '@/context/stats-context';
+import { Node } from '@/types/nodes';
+import { useEffect } from 'react';
+
+const TopNodes = () => {
+ const { topNodesByJobs, topNodesByRevenue, fetchTopNodesByRevenue, fetchTopNodesByJobCount } = useStatsContext();
+
+ useEffect(() => {
+ fetchTopNodesByRevenue();
+ }, [fetchTopNodesByRevenue]);
+
+ useEffect(() => {
+ fetchTopNodesByJobCount();
+ }, [fetchTopNodesByJobCount]);
+
+ return (
+ <>
+
+ Top nodes by revenue
+
+ autoHeight
+ data={topNodesByRevenue.map((item, idx) => ({ index: idx + 1, ...item }))}
+ paginationType="none"
+ tableType={TableTypeEnum.NODES_TOP_REVENUE}
+ getRowId={(row) => row.nodeId}
+ />
+
+
+ Top nodes by number of jobs
+
+ autoHeight
+ data={topNodesByJobs.map((item, idx) => ({ index: idx + 1, ...item }))}
+ paginationType="none"
+ tableType={TableTypeEnum.NODES_TOP_JOBS}
+ getRowId={(row) => row.nodeId}
+ />
+
+
+ );
+};
+
+export default TopNodes;
diff --git a/src/components/stepper/get-steps.tsx b/src/components/stepper/get-steps.tsx
new file mode 100644
index 00000000..014ab5bb
--- /dev/null
+++ b/src/components/stepper/get-steps.tsx
@@ -0,0 +1,15 @@
+import { Step } from '@/components/stepper/stepper';
+
+export type RunJobStep = 'environment' | 'resources' | 'payment' | 'finish';
+export const getRunJobSteps = (freeCompute: boolean): Step[] => [
+ { key: 'environment', label: 'Environment' },
+ { key: 'resources', label: 'Resources' },
+ { key: 'payment', label: 'Payment', hidden: freeCompute },
+ { key: 'finish', label: 'Finish' },
+];
+
+export type RunNodeStep = 'setup' | 'configure';
+export const getRunNodeSteps = (): Step[] => [
+ { key: 'setup', label: 'Set up' },
+ { key: 'configure', label: 'Configure' },
+];
diff --git a/src/components/stepper/stepper.module.css b/src/components/stepper/stepper.module.css
new file mode 100644
index 00000000..ffa6d940
--- /dev/null
+++ b/src/components/stepper/stepper.module.css
@@ -0,0 +1,50 @@
+.root {
+ border-radius: 24px;
+ display: flex;
+ flex-direction: column;
+ font-size: 16px;
+ font-weight: 500;
+ gap: 8px;
+ min-width: 250px;
+ padding: 8px;
+
+ .separator {
+ color: var(--border-glass);
+ transform: rotate(90deg);
+
+ &.active {
+ color: var(--success);
+ }
+ }
+
+ .step {
+ align-items: center;
+ background: var(--background-glass);
+ border: 2px solid transparent;
+ border-radius: 18px;
+ color: var(--text-primary);
+ display: flex;
+ gap: 8px;
+ justify-content: center;
+ padding: 8px 18px;
+
+ &.active {
+ background: var(--accent1);
+ }
+
+ &.complete {
+ background: none;
+ border-color: var(--success);
+ color: var(--success);
+ }
+ }
+
+ @media (min-width: 992px) {
+ align-items: center;
+ flex-direction: row;
+
+ .separator {
+ transform: rotate(0deg);
+ }
+ }
+}
diff --git a/src/components/stepper/stepper.tsx b/src/components/stepper/stepper.tsx
new file mode 100644
index 00000000..b0c8b819
--- /dev/null
+++ b/src/components/stepper/stepper.tsx
@@ -0,0 +1,49 @@
+import Card from '@/components/card/card';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import styles from './stepper.module.css';
+
+export type Step = {
+ hidden?: boolean;
+ key: T;
+ label: string;
+};
+
+type StepperProps = {
+ currentStep: T;
+ steps: Step[];
+};
+
+const Stepper = ({ currentStep, steps }: StepperProps) => {
+ const visibleSteps = useMemo(() => steps.filter((step) => !step.hidden), [steps]);
+
+ const currentStepIndex = useMemo(
+ () => visibleSteps.findIndex((step) => step.key === currentStep),
+ [currentStep, visibleSteps]
+ );
+
+ const renderStep = (step: Step, index: number) => {
+ const isActive = currentStepIndex === index;
+ const isComplete = currentStepIndex > index;
+ return (
+ <>
+ {index > 0 ? (
+ —
+ ) : null}
+
+ {isComplete ? : null}
+ {step.label}
+
+
+ );
+ };
+
+ return (
+
+ {visibleSteps.map((step, index) => renderStep(step, index))}
+
+ );
+};
+
+export default Stepper;
diff --git a/src/components/tab-bar/tab-bar.module.css b/src/components/tab-bar/tab-bar.module.css
new file mode 100644
index 00000000..309ef60c
--- /dev/null
+++ b/src/components/tab-bar/tab-bar.module.css
@@ -0,0 +1,27 @@
+.root {
+ display: inline-flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 8px;
+ padding: 8px;
+
+ .tab {
+ border-radius: 32px;
+ font-size: 16px;
+ font-weight: 600;
+ padding: 8px 18px;
+
+ &:not(.tabActive) {
+ cursor: pointer;
+
+ &:hover {
+ background-color: var(--background-glass);
+ }
+ }
+ }
+
+ .tabActive {
+ background-color: var(--accent1);
+ color: var(--text-primary);
+ }
+}
diff --git a/src/components/tab-bar/tab-bar.tsx b/src/components/tab-bar/tab-bar.tsx
new file mode 100644
index 00000000..973d712e
--- /dev/null
+++ b/src/components/tab-bar/tab-bar.tsx
@@ -0,0 +1,46 @@
+import Card from '@/components/card/card';
+import classNames from 'classnames';
+import { useRouter } from 'next/router';
+import styles from './tab-bar.module.css';
+
+type Tab = {
+ href?: string;
+ key: string;
+ label: React.ReactNode;
+ onClick?: () => void;
+};
+
+type TabBarProps = {
+ activeKey: string;
+ className?: string;
+ tabs: Tab[];
+};
+
+const TabBar = ({ activeKey, className, tabs }: TabBarProps) => {
+ const router = useRouter();
+
+ const handleTabClick = (tab: Tab) => {
+ if (tab.onClick) {
+ tab.onClick();
+ }
+ if (tab.href) {
+ router.push(tab.href);
+ }
+ };
+
+ return (
+
+ {tabs.map((tab) => (
+ handleTabClick(tab)}
+ >
+ {tab.label}
+
+ ))}
+
+ );
+};
+
+export default TabBar;
diff --git a/src/components/table/columns.tsx b/src/components/table/columns.tsx
new file mode 100644
index 00000000..5e8c3c60
--- /dev/null
+++ b/src/components/table/columns.tsx
@@ -0,0 +1,357 @@
+import InfoButton from '@/components/button/info-button';
+import JobInfoButton from '@/components/button/job-info-button';
+import { ComputeJob } from '@/types/jobs';
+import { GPUPopularity, Node } from '@/types/nodes';
+import { UnbanRequest } from '@/types/unban-requests';
+import { formatNumber } from '@/utils/formatters';
+import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
+import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';
+import HighlightOffOutlinedIcon from '@mui/icons-material/HighlightOffOutlined';
+import { getGridNumericOperators, getGridStringOperators, GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
+import classNames from 'classnames';
+
+function getEligibleCheckbox(eligible = false, eligibilityCauseStr?: string) {
+ if (eligible) {
+ return (
+ <>
+
+ Eligible
+
+ );
+ } else {
+ switch (eligibilityCauseStr) {
+ case 'Invalid status response':
+ return (
+ <>
+
+ Not eligible
+
+ );
+
+ case 'Banned':
+ return (
+ <>
+
+ Banned
+
+ );
+
+ case 'No peer data':
+ return (
+ <>
+
+ Not eligible
+
+ );
+
+ default:
+ return (
+ <>
+
+ Not eligible
+
+ );
+ }
+ }
+}
+
+function getUnbanAttemptResult(result: string) {
+ switch (result) {
+ case 'Pending':
+ return (
+ <>
+
+ Pending
+
+ );
+
+ default:
+ return (
+ <>
+
+ Failed
+
+ );
+ }
+}
+
+function getUnbanAttemptStatus(status: string) {
+ return (
+
+ {status}
+
+ );
+}
+
+export const nodesLeaderboardColumns: GridColDef[] = [
+ {
+ align: 'center',
+ field: 'index',
+ filterable: false,
+ headerAlign: 'center',
+ headerName: 'Index',
+ sortable: false,
+ },
+ {
+ field: 'friendlyName',
+ filterable: true,
+ flex: 1,
+ headerName: 'Name',
+ sortable: false,
+ filterOperators: getGridStringOperators().filter(
+ (operator) => operator.value === 'contains' || operator.value === 'startsWith' || operator.value === 'equals'
+ ),
+ },
+ {
+ field: 'gpus',
+ filterable: false,
+ flex: 1,
+ headerName: 'GPUs',
+ sortable: false,
+ renderCell: (params) => params.value?.map((gpu: GPUPopularity) => `${gpu.vendor} ${gpu.name}`).join(', ') ?? '-',
+ },
+ {
+ field: 'latestBenchmarkResults.totalScore',
+ filterable: false,
+ flex: 1,
+ headerName: 'Total Score',
+ sortable: false,
+ valueGetter: (_value, row) => row.latestBenchmarkResults?.totalScore || 0,
+ filterOperators: getGridNumericOperators().filter(
+ (operator) => operator.value === '=' || operator.value === '>' || operator.value === '<'
+ ),
+ },
+ {
+ field: 'location.region',
+ filterable: true,
+ flex: 1,
+ headerName: 'Region',
+ valueGetter: (_value, row) => row.location?.region,
+ sortable: false,
+ filterOperators: getGridStringOperators().filter(
+ (operator) => operator.value === 'contains' || operator.value === 'startsWith' || operator.value === 'equals'
+ ),
+ },
+ {
+ field: 'eligible',
+ filterable: true,
+ flex: 1,
+ headerName: 'Reward eligibility',
+ sortable: false,
+ renderCell: (params: GridRenderCellParams) => (
+
+ {getEligibleCheckbox(params.row.eligible, params.row.eligibilityCauseStr)}
+
+ ),
+ filterOperators: getGridStringOperators().filter((operator) => operator.value === 'equals'),
+ },
+ {
+ align: 'right',
+ field: 'actions',
+ filterable: false,
+ headerAlign: 'center',
+ headerName: 'Actions',
+ sortable: false,
+ renderCell: (params) => {
+ return ;
+ },
+ },
+];
+
+export const jobsColumns: GridColDef[] = [
+ {
+ align: 'center',
+ field: 'index',
+ filterable: false,
+ headerAlign: 'center',
+ headerName: 'Index',
+ sortable: false,
+ },
+ {
+ field: 'statusText',
+ filterable: false,
+ flex: 1,
+ headerName: 'Status',
+ sortable: false,
+ },
+ {
+ field: 'startTime',
+ filterable: true,
+ flex: 1,
+ headerName: 'Start Time',
+ sortable: false,
+ filterOperators: getGridNumericOperators().filter(
+ (operator) => operator.value === '=' || operator.value === '>' || operator.value === '<'
+ ),
+ },
+ {
+ field: 'nodeFriendlyName',
+ filterable: true,
+ flex: 1,
+ headerName: 'Node Name',
+ sortable: false,
+ },
+ {
+ field: 'amountPaid',
+ filterable: true,
+ flex: 1,
+ headerName: 'Amount Paid',
+ sortable: false,
+ valueGetter: (_value, row) => row.paymentInfo?.cost,
+ filterOperators: getGridNumericOperators().filter(
+ (operator) => operator.value === '=' || operator.value === '>' || operator.value === '<'
+ ),
+ },
+ {
+ field: 'duration',
+ filterable: true,
+ flex: 1,
+ headerName: 'Duration',
+ sortable: false,
+ filterOperators: getGridNumericOperators().filter(
+ (operator) => operator.value === '=' || operator.value === '>' || operator.value === '<'
+ ),
+ },
+ {
+ align: 'right',
+ field: 'actions',
+ filterable: false,
+ headerAlign: 'center',
+ headerName: 'Actions',
+ sortable: false,
+ renderCell: (params: GridRenderCellParams) => {
+ return ;
+ },
+ },
+];
+
+export const unbanRequestsColumns: GridColDef[] = [
+ {
+ align: 'center',
+ field: 'index',
+ filterable: false,
+ headerAlign: 'center',
+ headerName: 'Index',
+ sortable: false,
+ },
+ {
+ field: 'status',
+ filterable: false,
+ flex: 1,
+ headerName: 'Status',
+ sortable: false,
+ renderCell: (params: GridRenderCellParams) => getUnbanAttemptStatus(params.row.status),
+ },
+ {
+ field: 'startedAt',
+ filterable: false,
+ flex: 1,
+ headerName: 'Start Time',
+ sortable: false,
+ },
+ {
+ field: 'completedAt',
+ filterable: false,
+ flex: 1,
+ headerName: 'End Time',
+ sortable: false,
+ },
+ {
+ field: 'benchmarkResult',
+ filterable: false,
+ flex: 1,
+ headerName: 'Result',
+ sortable: false,
+ renderCell: (params: GridRenderCellParams) => (
+
+ {getUnbanAttemptResult(params.row.benchmarkResult)}
+
+ ),
+ },
+];
+
+export const topNodesByRevenueColumns: GridColDef[] = [
+ {
+ align: 'center',
+ field: 'index',
+ filterable: false,
+ headerAlign: 'center',
+ headerName: 'Index',
+ sortable: false,
+ },
+ {
+ field: 'friendlyName',
+ filterable: true,
+ flex: 1,
+ headerName: 'Name',
+ sortable: false,
+ },
+ {
+ field: 'region',
+ filterable: true,
+ flex: 1,
+ headerName: 'Region',
+ sortable: false,
+ },
+ {
+ field: 'totalRevenue',
+ filterable: false,
+ renderCell: ({ value }) => formatNumber(value.toFixed(2)),
+ flex: 1,
+ headerName: 'Total Revenue',
+ sortable: false,
+ },
+ {
+ field: 'latestGpuScore',
+ filterable: false,
+ flex: 1,
+ headerName: 'Last benchmark score (GPU)',
+ sortable: false,
+ },
+];
+
+export const topNodesByJobsColumns: GridColDef[] = [
+ {
+ align: 'center',
+ field: 'index',
+ filterable: false,
+ headerAlign: 'center',
+ headerName: 'Index',
+ sortable: false,
+ },
+ {
+ field: 'friendlyName',
+ filterable: false,
+ flex: 1,
+ headerName: 'Name',
+ sortable: true,
+ },
+ {
+ field: 'region',
+ filterable: false,
+ flex: 1,
+ headerName: 'Region',
+ sortable: true,
+ },
+ {
+ field: 'totalJobs',
+ filterable: false,
+ flex: 1,
+ headerName: 'Total Jobs',
+ sortable: true,
+ },
+ {
+ field: 'latestGpuScore',
+ filterable: false,
+ flex: 1,
+ headerName: 'Last benchmark score (GPU)',
+ sortable: false,
+ },
+];
diff --git a/src/components/table/context-type.ts b/src/components/table/context-type.ts
new file mode 100644
index 00000000..c6052113
--- /dev/null
+++ b/src/components/table/context-type.ts
@@ -0,0 +1,21 @@
+import { GridFilterModel } from '@mui/x-data-grid';
+
+export type TableContextType = {
+ crtPage: number;
+ data: T[];
+ error: any;
+ filterModel: GridFilterModel;
+ filters: Record;
+ loading: boolean;
+ pageSize: number;
+ searchTerm: string;
+ sortModel: Record;
+ totalItems: number;
+ fetchData: () => Promise;
+ setCrtPage: (page: TableContextType['crtPage']) => void;
+ setFilterModel: (filter: TableContextType['filterModel']) => void;
+ setFilters: (filters: TableContextType['filters']) => void;
+ setPageSize: (size: TableContextType['pageSize']) => void;
+ setSearchTerm: (term: string) => void;
+ setSortModel: (model: TableContextType['sortModel']) => void;
+};
diff --git a/src/components/Table/CustomPagination.module.css b/src/components/table/custom-pagination.module.css
similarity index 75%
rename from src/components/Table/CustomPagination.module.css
rename to src/components/table/custom-pagination.module.css
index ee09197a..1f89d904 100644
--- a/src/components/Table/CustomPagination.module.css
+++ b/src/components/table/custom-pagination.module.css
@@ -4,8 +4,8 @@
justify-content: space-between;
align-items: center;
gap: 16px;
- padding: 30px 90px;
- font-family: 'Sharp Sans', sans-serif!important;
+ /* padding: 30px 90px; */
+ font-family: var(--font-inter), sans-serif !important;
}
@media (max-width: 768px) {
@@ -14,7 +14,7 @@
padding: 10px;
align-items: center;
}
-
+
.pagination > div {
width: 100%;
display: flex;
@@ -40,12 +40,12 @@
flex-direction: row;
align-items: center;
gap: 8px;
- font-family: 'Sharp Sans', sans-serif;
+ font-family: var(--font-inter), sans-serif;
}
.paginationArrowText {
- color: #000000;
- font-family: 'Sharp Sans', sans-serif;
+ color: #ffffff;
+ font-family: var(--font-inter), sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 18px;
@@ -59,12 +59,12 @@
display: flex;
align-items: center;
gap: 8px;
- font-family: 'Sharp Sans', sans-serif;
+ font-family: var(--font-inter), sans-serif;
}
.paginationCore {
display: flex;
align-items: center;
gap: 8px;
- font-family: 'Sharp Sans', sans-serif!important;
+ font-family: var(--font-inter), sans-serif !important;
}
diff --git a/src/components/Table/CustomPagination.tsx b/src/components/table/custom-pagination.tsx
similarity index 65%
rename from src/components/Table/CustomPagination.tsx
rename to src/components/table/custom-pagination.tsx
index f25ae4ef..a83a2b9d 100644
--- a/src/components/Table/CustomPagination.tsx
+++ b/src/components/table/custom-pagination.tsx
@@ -1,142 +1,141 @@
-import React, { useCallback, useState, useEffect } from 'react'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
import {
- Pagination,
- styled,
Button,
- Typography,
- Select,
+ IconButton,
+ InputAdornment,
MenuItem,
+ Pagination,
+ Select,
+ styled,
TextField,
- InputAdornment,
- IconButton,
+ Typography,
+ useMediaQuery,
useTheme,
- useMediaQuery
-} from '@mui/material'
-import ArrowBackIcon from '@mui/icons-material/ArrowBack'
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward'
-import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
-import styles from './CustomPagination.module.css'
+} from '@mui/material';
+import React, { useCallback, useEffect, useState } from 'react';
+import styles from './custom-pagination.module.css';
const StyledPagination = styled(Pagination)(({ theme }) => ({
'& .MuiPaginationItem-root': {
- color: '#000000',
- fontFamily: 'Sharp Sans, sans-serif',
+ color: '#ffffff',
+ fontFamily: 'var(--font-inter), sans-serif',
fontSize: '16px',
fontWeight: 400,
lineHeight: '16px',
- paddingTop: '3px'
+ paddingTop: '3px',
},
'& .MuiPaginationItem-page.Mui-selected': {
- backgroundColor: '#CF1FB1',
+ backgroundColor: 'var(--accent1)',
color: '#FFFFFF',
'&:hover': {
- backgroundColor: '#CF1FB1'
+ backgroundColor: 'var(--accent1)',
},
minWidth: '32px',
height: '32px',
borderRadius: '8px',
- padding: '3px 8px'
- }
-}))
+ padding: '3px 8px',
+ },
+}));
const NavButton = styled(Button)(({ theme }) => ({
minWidth: 'auto',
padding: '6px',
'&.Mui-disabled': {
- opacity: 0.5
+ opacity: 0.5,
},
'& .MuiTypography-root': {
- fontFamily: "'Sharp Sans', sans-serif",
+ fontFamily: 'var(--font-inter), sans-serif',
fontSize: '16px',
fontWeight: 400,
- lineHeight: '24px'
- }
-}))
+ lineHeight: '24px',
+ },
+}));
const StyledSelect = styled(Select)(({ theme }) => ({
minWidth: 80,
marginLeft: theme.spacing(2),
'& .MuiOutlinedInput-notchedOutline': {
- borderColor: '#CF1FB1'
+ borderColor: 'var(--accent1)',
},
'&:hover .MuiOutlinedInput-notchedOutline': {
- borderColor: '#CF1FB1'
+ borderColor: 'var(--accent1)',
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
- borderColor: '#CF1FB1'
+ borderColor: 'var(--accent1)',
},
'& .MuiSelect-icon': {
- color: '#CF1FB1'
+ color: 'var(--accent1)',
},
'& .MuiSelect-select': {
paddingTop: 5,
paddingBottom: 5,
- fontFamily: "'Sharp Sans', sans-serif",
+ fontFamily: 'var(--font-inter), sans-serif',
fontSize: '16px',
fontWeight: 400,
lineHeight: '24px',
- color: '#000000'
+ color: '#ffffff',
},
'& .MuiMenuItem-root': {
- fontFamily: "'Sharp Sans', sans-serif",
+ fontFamily: 'var(--font-inter), sans-serif',
fontSize: '16px',
fontWeight: 400,
lineHeight: '16px',
- color: '#000000'
- }
-}))
+ color: '#ffffff',
+ },
+}));
const StyledTextField = styled(TextField)(({ theme }) => ({
'& .MuiOutlinedInput-root': {
'& fieldset': {
- borderColor: '#CF1FB1',
- borderRadius: '4px'
+ borderColor: 'var(--accent1)',
+ borderRadius: '4px',
},
'&:hover fieldset': {
- borderColor: '#CF1FB1'
+ borderColor: 'var(--accent1)',
},
'&.Mui-focused fieldset': {
- borderColor: '#CF1FB1'
- }
+ borderColor: 'var(--accent1)',
+ },
},
'& .MuiInputBase-input': {
padding: '5px 12px',
- fontFamily: "'Sharp Sans', sans-serif",
+ fontFamily: 'var(--font-inter), sans-serif',
fontSize: '16px',
fontWeight: 400,
lineHeight: '24px',
- color: '#000000',
- minWidth: '42px'
+ color: '#ffffff',
+ minWidth: '42px',
},
'& .MuiInputBase-input::placeholder': {
color: '#A0AEC0',
- opacity: 1
+ opacity: 1,
+ },
+ '& input[type=number]::-webkit-inner-spin-button, & input[type=number]::-webkit-outer-spin-button': {
+ WebkitAppearance: 'none',
+ margin: 0,
},
- '& input[type=number]::-webkit-inner-spin-button, & input[type=number]::-webkit-outer-spin-button':
- {
- WebkitAppearance: 'none',
- margin: 0
- },
'& input[type=number]': {
- MozAppearance: 'textfield'
+ MozAppearance: 'textfield',
},
'& .MuiInputAdornment-root': {
'& button': {
- color: '#CF1FB1',
+ color: 'var(--accent1)',
'&:hover': {
- backgroundColor: 'transparent'
- }
- }
- }
-}))
+ backgroundColor: 'transparent',
+ },
+ },
+ },
+}));
interface CustomPaginationProps {
- page: number
- pageSize: number
- totalItems: number
- onPageChange: (page: number) => void
- onPageSizeChange: (pageSize: number) => void
+ page: number;
+ pageSize: number;
+ totalItems: number;
+ onPageChange: (page: number) => void;
+ onPageSizeChange: (pageSize: number) => void;
}
const CustomPagination = React.memo(function CustomPagination({
@@ -144,63 +143,59 @@ const CustomPagination = React.memo(function CustomPagination({
pageSize,
totalItems,
onPageChange,
- onPageSizeChange
+ onPageSizeChange,
}: CustomPaginationProps) {
- const [pageInput, setPageInput] = useState('')
- const totalPages = Math.ceil(totalItems / pageSize)
+ const [pageInput, setPageInput] = useState('');
+ const totalPages = Math.ceil(totalItems / pageSize);
- const theme = useTheme()
- const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+ const theme = useTheme();
+ const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const handlePageChange = useCallback(
(event: React.ChangeEvent, value: number) => {
- onPageChange(value)
+ onPageChange(value);
},
[onPageChange]
- )
+ );
const handlePageSizeChange = useCallback(
(event: any) => {
- onPageSizeChange(Number(event.target.value))
+ onPageSizeChange(Number(event.target.value));
},
[onPageSizeChange]
- )
+ );
const handlePageJump = () => {
- const newPage = parseInt(pageInput)
+ const newPage = parseInt(pageInput);
if (!isNaN(newPage) && newPage > 0 && newPage <= totalPages) {
- const searchParams = new URLSearchParams(window.location.search)
- searchParams.set('page', String(newPage))
- window.history.replaceState(null, '', `?${searchParams.toString()}`)
+ const searchParams = new URLSearchParams(window.location.search);
+ searchParams.set('page', String(newPage));
+ window.history.replaceState(null, '', `?${searchParams.toString()}`);
- onPageChange(newPage)
+ onPageChange(newPage);
}
- setPageInput('')
- }
+ setPageInput('');
+ };
useEffect(() => {
- const searchParams = new URLSearchParams(window.location.search)
- const urlPage = searchParams.get('page')
+ const searchParams = new URLSearchParams(window.location.search);
+ const urlPage = searchParams.get('page');
if (urlPage) {
- const parsedPage = parseInt(urlPage)
+ const parsedPage = parseInt(urlPage);
if (!isNaN(parsedPage) && parsedPage >= 1 && parsedPage <= totalPages) {
if (parsedPage !== page) {
- onPageChange(parsedPage)
+ onPageChange(parsedPage);
}
- setPageInput(String(parsedPage))
+ setPageInput(String(parsedPage));
}
}
- }, [onPageChange, page, totalPages])
+ }, [onPageChange, page, totalPages]);
if (isMobile) {
return (
-
onPageChange(page - 1)}
- disabled={page === 1}
- >
+ onPageChange(page - 1)} disabled={page === 1}>
@@ -215,11 +210,7 @@ const CustomPagination = React.memo(function CustomPagination({
-
+
{[10, 25, 50, 100].map((size) => (
- )
+ ),
}}
onKeyPress={(e) => e.key === 'Enter' && handlePageJump()}
/>
@@ -286,10 +271,10 @@ const CustomPagination = React.memo(function CustomPagination({
variant="contained"
onClick={handlePageJump}
sx={{
- backgroundColor: '#CF1FB1',
- '&:hover': { backgroundColor: '#A8188D' },
+ backgroundColor: 'var(--accent1)',
+ '&:hover': { backgroundColor: 'var(--accent2)' },
ml: 1,
- fontFamily: "'Sharp Sans', sans-serif"
+ fontFamily: 'var(--font-inter), sans-serif',
}}
>
Go
@@ -297,17 +282,13 @@ const CustomPagination = React.memo(function CustomPagination({
- )
+ );
}
return (
-
onPageChange(page - 1)}
- disabled={page === 1}
- >
-
+ onPageChange(page - 1)} disabled={page === 1}>
+
Previous
@@ -336,7 +317,7 @@ const CustomPagination = React.memo(function CustomPagination({
type="number"
inputProps={{
min: 1,
- max: totalPages
+ max: totalPages,
}}
InputProps={{
endAdornment: (
@@ -346,40 +327,34 @@ const CustomPagination = React.memo(function CustomPagination({
display: 'flex',
flexDirection: 'column',
gap: '0px',
- margin: '-4px -8px -4px 0'
+ margin: '-4px -8px -4px 0',
}}
>
- setPageInput(
- String(Math.min(Number(pageInput || 1) + 1, totalPages))
- )
- }
+ onClick={() => setPageInput(String(Math.min(Number(pageInput || 1) + 1, totalPages)))}
sx={{
- color: '#CF1FB1',
+ color: 'var(--accent1)',
padding: '4px 2px 0 2px',
- '&:hover': { backgroundColor: 'transparent' }
+ '&:hover': { backgroundColor: 'transparent' },
}}
>
- setPageInput(String(Math.max(Number(pageInput || 1) - 1, 1)))
- }
+ onClick={() => setPageInput(String(Math.max(Number(pageInput || 1) - 1, 1)))}
sx={{
- color: '#CF1FB1',
+ color: 'var(--accent1)',
padding: '0 2px 4px 2px',
- '&:hover': { backgroundColor: 'transparent' }
+ '&:hover': { backgroundColor: 'transparent' },
}}
>
+
+
+
+ );
+};
+
+export default WithdrawPage;
diff --git a/src/components/withdraw/withdraw.module.css b/src/components/withdraw/withdraw.module.css
new file mode 100644
index 00000000..691eabb1
--- /dev/null
+++ b/src/components/withdraw/withdraw.module.css
@@ -0,0 +1,43 @@
+.balance {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ padding: 12px 24px;
+
+ @media (min-width: 768px) {
+ align-items: center;
+ display: grid;
+ grid-template-columns: 1fr auto;
+ }
+
+ .values {
+ text-align: right;
+
+ .token {
+ color: var(--text-secondary);
+ font-size: 14px;
+ }
+
+ .amount {
+ font-size: 32px;
+ font-weight: 700;
+ }
+ }
+
+ .sm {
+ color: var(--text-secondary);
+ font-size: 16px;
+
+ .token {
+ font-size: 12px;
+ }
+
+ .amount {
+ font-size: 20px;
+ }
+ }
+}
+
+.nextButton {
+ align-self: center;
+}
diff --git a/src/components/withdraw/withdraw.tsx b/src/components/withdraw/withdraw.tsx
new file mode 100644
index 00000000..25009fc5
--- /dev/null
+++ b/src/components/withdraw/withdraw.tsx
@@ -0,0 +1,35 @@
+import Button from '@/components/button/button';
+import Card from '@/components/card/card';
+import Input from '@/components/input/input';
+import DownloadIcon from '@mui/icons-material/Download';
+import classNames from 'classnames';
+import styles from './withdraw.module.css';
+
+// TODO replace mock data
+
+const Withdraw = () => {
+ return (
+
+
+ User available funds in escrow
+
+ OCEAN
+
+ {99}
+
+ User available funds in wallet
+
+ OCEAN
+
+ {12345.6789}
+
+
+
+ } size="lg">
+ Withdraw
+
+
+ );
+};
+
+export default Withdraw;
diff --git a/src/config.ts b/src/config.ts
index 86ad8ef9..90e2111d 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,113 +1,133 @@
type Route = {
- path: string
- name: string
-}
+ path: string;
+ name: string;
+};
type Routes = {
- [key: string]: Route
-}
-
-type ApiRoute = {
- root: 'incentive' | 'analytics'
- path: string
-}
-
-type ApiRoutes = {
- [key: string]: ApiRoute
-}
+ [key: string]: Route;
+};
type SocialMedia = {
- [key: string]: string
-}
+ [key: string]: string;
+};
type Config = {
- backendUrl: string
- routes: Routes
- apiRoutes: ApiRoutes
- socialMedia: SocialMedia
+ backendUrl: string;
+ routes: Routes;
+ socialMedia: SocialMedia;
links: {
- website: string
- github: string
- }
+ website: string;
+ github: string;
+ };
queryParams: {
- [key: string]: string
- }
+ [key: string]: string;
+ };
cookies: {
- [key: string]: string
- }
-}
-
-const API_ROOTS = {
- incentive: 'https://incentive-backend.oceanprotocol.com',
- analytics: 'https://analytics.nodes.oceanprotocol.com'
-} as const
-
-const apiRoutes = {
- // Incentive API routes
- nodes: { root: 'incentive', path: '/nodes' },
- locations: { root: 'incentive', path: '/locations' },
- countryStats: { root: 'incentive', path: '/countryStats' },
- nodeSystemStats: { root: 'incentive', path: '/nodeSystemStats' },
- history: { root: 'incentive', path: '/history' },
- weekStats: { root: 'incentive', path: '/weekStats' },
-
- // Analytics API routes
- analyticsSummary: { root: 'analytics', path: '/summary' },
- analyticsAllSummary: { root: 'analytics', path: '/all-summary' },
- analyticsRewardsHistory: { root: 'analytics', path: '/rewards-history' }
-} as const
-
-type ApiRouteKeys = keyof typeof apiRoutes
+ [key: string]: string;
+ };
+};
const config: Config = {
- backendUrl:
- process.env.NEXT_PUBLIC_API_URL || 'https://incentive-backend.oceanprotocol.com',
+ backendUrl: process.env.NEXT_PUBLIC_API_URL || 'https://incentive-backend.oceanprotocol.com',
routes: {
home: {
path: '/',
- name: 'Home'
+ name: 'Home',
+ },
+ runJob: {
+ path: '/run-job/environments',
+ name: 'Run Job',
+ },
+ stats: {
+ path: '/stats',
+ name: 'Stats',
+ },
+ docs: {
+ path: '/docs',
+ name: 'Docs',
},
- nodes: {
- path: '/nodes',
- name: 'Nodes'
+ leaderboard: {
+ path: '/leaderboard',
+ name: 'Leaderboard',
},
- countries: {
- path: '/countries',
- name: 'Countries'
+ runNode: {
+ path: '/run-node/setup',
+ name: 'Run Node',
},
- history: {
- path: '/history',
- name: 'History'
- }
},
- apiRoutes,
socialMedia: {
medium: 'https://medium.com/oceanprotocol',
twitter: 'https://twitter.com/oceanprotocol',
discord: 'https://discord.gg/CjdsWngg47',
youtube: 'https://www.youtube.com/channel/UCH8TXwmWWAE9TZO0yTBHB3A',
- telegram: 'https://t.me/oceanprotocol'
+ telegram: 'https://t.me/oceanprotocol',
},
links: {
website: 'https://oceanprotocol.com/',
- github: 'https://github.com/oceanprotocol/ocean-node'
+ github: 'https://github.com/oceanprotocol/ocean-node',
},
queryParams: {
accessToken: 'access_token',
- status: 'status'
+ status: 'status',
},
cookies: {
- accessToken: 'access_token'
- }
-}
+ accessToken: 'access_token',
+ },
+};
+
+export default config;
+
+export const getRoutes = (): Routes => config.routes;
+export const getSocialMedia = (): SocialMedia => config.socialMedia;
+export const getLinks = () => config.links;
+
+const API_ROOTS = {
+ ens: 'https://ens-proxy.oceanprotocol.com/api',
+ incentive: 'https://incentive-backend.oceanprotocol.io',
+ incentive_old: 'https://incentive-backend.oceanprotocol.com',
+ analytics: 'https://analytics.nodes.oceanprotocol.io',
+} as const;
+
+const apiRoutes = {
+ // Incentive API routes
+ environments: { root: 'incentive', path: '/envs' },
+ nodes: { root: 'incentive', path: '/nodes' },
+ locations: { root: 'incentive', path: '/locations' },
+ countryStats: { root: 'incentive', path: '/countryStats' },
+ nodeSystemStats: { root: 'incentive_old', path: '/nodeSystemStats' },
+ history: { root: 'incentive', path: '/history' },
+ weekStats: { root: 'incentive', path: '/weekStats' },
+ banStatus: { root: 'incentive', path: '/nodes' },
+ nodeBenchmarkMinMaxLast: { root: 'incentive', path: '/nodes' },
+ benchmarkHistory: { root: 'incentive', path: '/nodes' },
+ nodeUnbanRequests: { root: 'incentive', path: '/nodes' },
+ owners: { root: 'incentive', path: '/owners' },
+ admin: { root: 'incentive', path: '/admin' },
+ jobsSuccessRate: { root: 'incentive', path: '/consumers' },
+ nodesStats: { root: 'incentive', path: '/owners' },
+
+ // Analytics API routes
+ analyticsSummary: { root: 'analytics', path: '/summary' },
+ analyticsAllSummary: { root: 'analytics', path: '/all-summary' },
+ analyticsRewardsHistory: { root: 'analytics', path: '/rewards-history' },
+ analyticsGlobalStats: { root: 'analytics', path: '/global-stats' },
+ gpuPopularity: { root: 'analytics', path: '/gpu-popularity' },
+ topNodesByRevenue: { root: 'analytics', path: '/nodes' },
+ topNodesByJobCount: { root: 'analytics', path: '/nodes' },
+ nodeStats: { root: 'analytics', path: '/nodes' },
+ consumerStats: { root: 'analytics', path: '/consumers' },
+ ownerStats: { root: 'analytics', path: '/owners' },
+
+ // ENS API routes
+ ensAddress: { root: 'ens', path: '/address' },
+ ensName: { root: 'ens', path: '/name' },
+ ensProfile: { root: 'ens', path: '/profile' },
+} as const;
-export default config
+type ApiRouteKeys = keyof typeof apiRoutes;
-export const getRoutes = (): Routes => config.routes
-export const getSocialMedia = (): SocialMedia => config.socialMedia
-export const getLinks = () => config.links
-export const getApiRoute = (key: ApiRouteKeys, param?: string | number): string => {
- const route = apiRoutes[key]
- const baseUrl = API_ROOTS[route.root]
- return `${baseUrl}${route.path}`
-}
+export const getApiRoute = (key: ApiRouteKeys): string => {
+ const route = apiRoutes[key];
+ const baseUrl = API_ROOTS[route.root];
+ return `${baseUrl}${route.path}`;
+};
diff --git a/src/constants/chains.ts b/src/constants/chains.ts
new file mode 100644
index 00000000..5eda7ec0
--- /dev/null
+++ b/src/constants/chains.ts
@@ -0,0 +1,4 @@
+export const BASE_CHAIN_ID = 8453;
+export const ETH_SEPOLIA_CHAIN_ID = 11155111;
+
+export const CHAIN_ID = process.env.NODE_ENV === 'production' ? BASE_CHAIN_ID : ETH_SEPOLIA_CHAIN_ID;
diff --git a/src/constants/tokens.ts b/src/constants/tokens.ts
new file mode 100644
index 00000000..1aa928c6
--- /dev/null
+++ b/src/constants/tokens.ts
@@ -0,0 +1,2 @@
+export const ETH_SEPOLIA_ADDRESS = '0xb16F35c0Ae2912430DAc15764477E179D9B9EbEa';
+export const USDC_TOKEN_ADDRESS = '0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238';
diff --git a/src/context/AdminProvider.tsx b/src/context/AdminProvider.tsx
deleted file mode 100644
index 641a48bb..00000000
--- a/src/context/AdminProvider.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-import {
- createContext,
- useContext,
- useState,
- ReactNode,
- FunctionComponent,
- Dispatch,
- SetStateAction,
- useEffect
-} from 'react'
-import { useAccount, useSignMessage } from 'wagmi'
-import { verifyMessage } from 'ethers'
-
-interface network {
- chainId: number
- network: string
-}
-
-interface AdminContextType {
- admin: boolean
- setAdmin: Dispatch>
- allAdmins: string[]
- setAllAdmins: Dispatch>
- expiryTimestamp: number | undefined
- setExpiryTimestamp: Dispatch>
- generateSignature: () => void
- signature: string | undefined
- setSignature: Dispatch>
- validTimestamp: boolean
- setValidTimestamp: Dispatch>
- networks: network[]
- setNetworks: Dispatch>
-}
-
-const AdminContext = createContext(undefined)
-
-export const AdminProvider: FunctionComponent<{ children: ReactNode }> = ({
- children
-}) => {
- const { address, isConnected } = useAccount()
- const { signMessage, data: signMessageData } = useSignMessage()
- const [admin, setAdmin] = useState(false)
- const [allAdmins, setAllAdmins] = useState([])
- const [expiryTimestamp, setExpiryTimestamp] = useState()
- const [signature, setSignature] = useState()
- const [validTimestamp, setValidTimestamp] = useState(true)
- const [networks, setNetworks] = useState([])
-
- // Ensure signature and expiry are cleared when the account is changed or disconnected
- useEffect(() => {
- if (!isConnected || !address) {
- setSignature(undefined)
- setExpiryTimestamp(undefined)
- }
- }, [address, isConnected])
-
- // Get expiryTimestamp and signature from localStorage
- useEffect(() => {
- const storedExpiry = localStorage.getItem('expiryTimestamp')
- const storedExpiryTimestamp = storedExpiry ? parseInt(storedExpiry, 10) : null
- if (storedExpiryTimestamp && storedExpiryTimestamp > Date.now()) {
- setExpiryTimestamp(storedExpiryTimestamp)
- const storedSignature = localStorage.getItem('signature')
- if (storedSignature) {
- setSignature(storedSignature)
- }
- }
- }, [address, isConnected])
-
- // Store signature and expiryTimestamp in localStorage
- useEffect(() => {
- if (expiryTimestamp && expiryTimestamp > Date.now()) {
- localStorage.setItem('expiryTimestamp', expiryTimestamp.toString())
- signature && localStorage.setItem('signature', signature)
- }
- }, [expiryTimestamp, signature, address, isConnected])
-
- useEffect(() => {
- if (signMessageData) {
- setSignature(signMessageData)
- }
- }, [signMessageData, address, isConnected])
-
- useEffect(() => {
- const interval = setInterval(() => {
- if (expiryTimestamp) {
- const now = Date.now()
- setValidTimestamp(now < expiryTimestamp)
- }
- }, 300000) // Check every 5 minutes
-
- return () => clearInterval(interval)
- }, [expiryTimestamp, address, isConnected])
-
- const generateSignature = () => {
- const newExpiryTimestamp = Date.now() + 12 * 60 * 60 * 1000 // 12 hours ahead in milliseconds
- signMessage({
- message: newExpiryTimestamp.toString()
- })
- setExpiryTimestamp(newExpiryTimestamp)
- }
-
- // Remove signature and expiryTimestamp from state if they are not from the currently connected account
- useEffect(() => {
- if (expiryTimestamp && signature) {
- const signerAddress = verifyMessage(
- expiryTimestamp.toString(),
- signature
- ).toLowerCase()
- if (signerAddress !== address?.toLowerCase()) {
- setExpiryTimestamp(undefined)
- setSignature(undefined)
- }
- }
- }, [address, expiryTimestamp, signature])
-
- const value: AdminContextType = {
- admin,
- setAdmin,
- allAdmins,
- setAllAdmins,
- expiryTimestamp,
- setExpiryTimestamp,
- generateSignature,
- signature,
- setSignature,
- validTimestamp,
- setValidTimestamp,
- networks,
- setNetworks
- }
-
- // Update admin status based on current address
- useEffect(() => {
- const isAdmin = allAdmins.some(
- (adminAddress) => address && adminAddress.toLowerCase() === address.toLowerCase()
- )
- setAdmin(isAdmin)
- }, [address, allAdmins, isConnected])
-
- return {children}
-}
-
-export const useAdminContext = () => {
- const context = useContext(AdminContext)
- if (context === undefined) {
- throw new Error('AdminContext must be used within an AdminProvider')
- }
- return context
-}
diff --git a/src/context/CountriesContext.tsx b/src/context/CountriesContext.tsx
deleted file mode 100644
index cf2b9782..00000000
--- a/src/context/CountriesContext.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import React, {
- createContext,
- useState,
- useEffect,
- useContext,
- ReactNode,
- useCallback
-} from 'react'
-import axios from 'axios'
-import { getApiRoute } from '@/config'
-import { CountryStatsType } from '@/shared/types/dataTypes'
-import { CountryStatsFilters } from '@/shared/types/filters'
-import { GridFilterModel } from '@mui/x-data-grid'
-
-interface CountriesContextType {
- data: CountryStatsType[]
- loading: boolean
- error: any
- currentPage: number
- pageSize: number
- totalItems: number
- searchTerm: string
- sortModel: Record
- filters: CountryStatsFilters
- setCurrentPage: (page: number) => void
- setPageSize: (size: number) => void
- setSearchTerm: (term: string) => void
- setSortModel: (model: Record) => void
- setFilters: (filters: CountryStatsFilters) => void
- setFilter: (filter: GridFilterModel) => void
-}
-
-const CountriesContext = createContext(undefined)
-
-interface CountriesProviderProps {
- children: ReactNode
-}
-
-export const CountriesProvider: React.FC = ({ children }) => {
- // State
- const [data, setData] = useState([])
- const [loading, setLoading] = useState(true)
- const [error, setError] = useState(null)
- const [currentPage, setCurrentPage] = useState(1)
- const [pageSize, setPageSize] = useState(100)
- const [totalItems, setTotalItems] = useState(0)
- const [searchTerm, setSearchTerm] = useState('')
- const [sortModel, setSortModel] = useState>({})
- const [filters, setFilters] = useState({})
-
- // Fetch data
- const fetchCountryStats = useCallback(async () => {
- try {
- const params: Record = {
- page: currentPage,
- pageSize: pageSize
- }
-
- if (searchTerm) {
- params['filters[country][value]'] = searchTerm
- params['filters[country][operator]'] = 'contains'
- }
-
- if (filters && Object.keys(filters).length > 0) {
- Object.entries(filters).forEach(([field, filterData]) => {
- const { value, operator } = filterData
- params[`filters[${field}][value]`] = value
- params[`filters[${field}][operator]`] = operator
- })
- }
-
- if (sortModel && Object.keys(sortModel).length > 0) {
- const [field, order] = Object.entries(sortModel)[0]
- const sortField = field === 'cityWithMostNodes' ? 'cityWithMostNodesCount' : field
- params[`sort[${sortField}]`] = order
- }
-
- const response = await axios.get(getApiRoute('countryStats'), { params })
-
- if (response.data && Array.isArray(response.data.countryStats)) {
- const processedStats = response.data.countryStats.map(
- (country: any, index: number) => ({
- id: country.country,
- index: (currentPage - 1) * pageSize + index + 1,
- country: country.country,
- totalNodes: country.totalNodes,
- citiesWithNodes: country.citiesWithNodes,
- cityWithMostNodes: country.cityWithMostNodes,
- cityWithMostNodesCount: country.cityWithMostNodesCount
- })
- )
- setData(processedStats)
- setTotalItems(response.data.pagination.totalItems)
- } else {
- console.error('Unexpected data structure:', response.data)
- setData([])
- setTotalItems(0)
- }
- } catch (err) {
- console.error('Error fetching country stats:', err)
- setError(err)
- setData([])
- setTotalItems(0)
- } finally {
- setLoading(false)
- }
- }, [currentPage, pageSize, searchTerm, filters, sortModel])
-
- // Effects
- useEffect(() => {
- fetchCountryStats()
- }, [fetchCountryStats])
-
- // Handlers
- const handleSetCurrentPage = (page: number) => {
- setCurrentPage(page)
- }
-
- const handleSetPageSize = (size: number) => {
- setPageSize(size)
- setCurrentPage(1)
- }
-
- const handleSetSearchTerm = (term: string) => {
- setSearchTerm(term)
- setCurrentPage(1)
- }
-
- const handleSetSortModel = (model: Record) => {
- setSortModel(model)
- setCurrentPage(1)
- }
-
- const handleSetFilters = (newFilters: CountryStatsFilters) => {
- setFilters(newFilters)
- setCurrentPage(1)
- }
-
- const handleSetFilter = (filter: GridFilterModel) => {
- // Implementation of setFilter
- }
-
- const value: CountriesContextType = {
- data,
- loading,
- error,
- currentPage,
- pageSize,
- totalItems,
- searchTerm,
- sortModel,
- filters,
- setCurrentPage: handleSetCurrentPage,
- setPageSize: handleSetPageSize,
- setSearchTerm: handleSetSearchTerm,
- setSortModel: handleSetSortModel,
- setFilters: handleSetFilters,
- setFilter: handleSetFilter
- }
-
- return {children}
-}
-
-export const useCountriesContext = () => {
- const context = useContext(CountriesContext)
- if (context === undefined) {
- throw new Error('useCountriesContext must be used within a CountriesProvider')
- }
- return context
-}
diff --git a/src/context/HistoryContext.tsx b/src/context/HistoryContext.tsx
deleted file mode 100644
index 92da5954..00000000
--- a/src/context/HistoryContext.tsx
+++ /dev/null
@@ -1,419 +0,0 @@
-import React, {
- createContext,
- useState,
- useEffect,
- useContext,
- ReactNode,
- useCallback,
- useMemo,
- PropsWithChildren
-} from 'react'
-import {
- getNodeHistory,
- getWeekStats,
- getAllHistoricalWeeklyPeriods,
- PeriodOption,
- RewardsData,
- getAllHistoricalRewards,
- getCurrentWeekStats
-} from '@/services/historyService'
-import { DateRange } from '@/components/PeriodSelect'
-import { NodeData } from '@/shared/types/RowDataType'
-import axios from 'axios'
-
-export interface WeekStatsSource {
- id: number
- week: number
- totalUptime: number
- lastRun: number
- round?: number
- timestamp?: number
-}
-
-export interface HistoryContextType {
- data: any[]
- loading: boolean
- error: any
- currentPage: number
- pageSize: number
- totalItems: number
- nodeId: string
- dateRange: DateRange
- isSearching: boolean
- setNodeId: (id: string) => void
- setDateRange: (range: DateRange) => void
- setCurrentPage: (page: number) => void
- setPageSize: (size: number) => void
- setIsSearching: (isSearching: boolean) => void
- clearHistory: () => void
- fetchHistoryData: () => Promise
- weekStats: WeekStatsSource | null
- loadingWeekStats: boolean
- errorWeekStats: any
- fetchWeekStats: () => Promise
- availablePeriods: PeriodOption[]
- periodsLoading: boolean
- getRewardsForPeriod: (periodId: string | number) => {
- averageReward: number
- totalDistributed: number
- nrEligibleNodes: number
- } | null
- rewardsData: RewardsData[]
- loadingRewards: boolean
- errorRewards: Error | null
- totalProgramDistribution: number
- currentRoundStats: any
- loadingCurrentRound: boolean
- errorCurrentRound: Error | null
- isInitialising: boolean,
- nodesData: NodeData
- loadingNodeData: boolean
- errorNodeData: Error | null
-}
-
-const HistoryContext = createContext(undefined)
-
-export const HistoryProvider: React.FC> = ({ children }) => {
- const [data, setData] = useState([])
- const [loading, setLoading] = useState(false)
- const [error, setError] = useState(null)
- const [currentPage, setCurrentPage] = useState(1)
- const [pageSize, setPageSize] = useState(10)
- const [totalItems, setTotalItems] = useState(0)
- const [nodeId, setNodeId] = useState('')
- const [isSearching, setIsSearching] = useState(false)
- const [dateRange, setDateRange] = useState({
- startDate: null,
- endDate: null
- })
-
- const [weekStats, setWeekStats] = useState(null)
- const [loadingWeekStats, setLoadingWeekStats] = useState(false)
- const [errorWeekStats, setErrorWeekStats] = useState(null)
-
- const [availablePeriods, setAvailablePeriods] = useState([])
- const [periodsLoading, setPeriodsLoading] = useState(true)
-
- const [rewardsData, setRewardsData] = useState([])
- const [loadingRewards, setLoadingRewards] = useState(false)
- const [errorRewards, setErrorRewards] = useState(null)
-
- const [nodesData, setNodesData] = useState({} as NodeData)
- const [loadingNodeData, setLoadingNodeData] = useState(false)
- const [errorNodeData, setErrorNodeData] = useState(null)
-
- const [currentRoundStats, setCurrentRoundStats] = useState(null)
- const [loadingCurrentRound, setLoadingCurrentRound] = useState(false)
- const [errorCurrentRound, setErrorCurrentRound] = useState(null)
- const [isInitialising, setIsInitialising] = useState(true)
-
- useEffect(() => {
- const fetchInitialData = async () => {
- setIsInitialising(true)
- try {
- const doFetchPeriods = async () => {
- setPeriodsLoading(true)
- try {
- const periods = await getAllHistoricalWeeklyPeriods()
- console.log(
- '[HistoryContext] Available periods fetched successfully:',
- periods
- )
- setAvailablePeriods(periods)
- if (periods.length > 0) {
- const mostRecentPeriod = periods[0]
- setDateRange({
- startDate: mostRecentPeriod.startDate,
- endDate: mostRecentPeriod.endDate
- })
- }
- } catch (err) {
- console.error('[HistoryContext] Error fetching available periods:', err)
- } finally {
- setPeriodsLoading(false)
- }
- }
-
- const doFetchRewardsData = async () => {
- setLoadingRewards(true)
- try {
- const data = await getAllHistoricalRewards()
- setRewardsData(data)
- setErrorRewards(null)
- } catch (error) {
- console.error('Error fetching rewards data:', error)
- setErrorRewards(error as Error)
- } finally {
- setLoadingRewards(false)
- }
- }
-
- const doFetchCurrentRound = async () => {
- setLoadingCurrentRound(true)
- try {
- const data = await getCurrentWeekStats()
- console.log(
- '[HistoryContext] Current round stats fetched successfully:',
- data
- )
- setCurrentRoundStats(data)
- setErrorCurrentRound(null)
- } catch (error) {
- console.error('Error fetching current round in initial:', error)
- setErrorCurrentRound(error as Error)
- } finally {
- setLoadingCurrentRound(false)
- }
- }
-
- const doFetchNodeData = async () => {
- if (!nodeId) return
-
- try {
- setLoadingNodeData(true)
-
- const data = await getNodeData(nodeId)
- console.log(
- '[HistoryContext] Node data fetched successfully:',
- data
- )
- if (!data) {
- setErrorNodeData(new Error('Node data is empty or undefined'))
- console.error(
- '[HistoryContext] Node data is empty or undefined for nodeId:',
- nodeId
- )
- } else {
- setNodesData(data)
- setErrorNodeData(null)
- }
- setLoadingNodeData(false)
- } catch (error) {
- console.error('Error fetching node data in initial:', error)
- setErrorNodeData(error as Error)
- }
- }
-
- await Promise.all([doFetchPeriods(), doFetchRewardsData(), doFetchCurrentRound(), doFetchNodeData()])
- } catch (error) {
- console.error(
- '[HistoryContext] Error during initial parallel fetches (Promise.all):',
- error
- )
- } finally {
- setIsInitialising(false)
- }
- }
- fetchInitialData()
- }, [nodeId])
-
- const fetchHistoryData = useCallback(async () => {
- if (!nodeId || !dateRange.startDate || !dateRange.endDate) {
- return
- }
-
- console.log(
- `[HistoryContext] Attempting fetchHistoryData for nodeId: ${nodeId}, page: ${currentPage}, size: ${pageSize}, range: ${dateRange.startDate?.format()} - ${dateRange.endDate?.format()}`
- )
-
- setLoading(true)
- setError(null)
- try {
- const response = await getNodeHistory(
- nodeId,
- currentPage,
- pageSize,
- dateRange.startDate,
- dateRange.endDate
- )
- console.log('[HistoryContext] Received history data:', response)
- setData(response.data || [])
- setTotalItems(response.pagination.totalCount || 0)
- } catch (error) {
- console.error('[HistoryContext] Error during fetchHistoryData:', error)
- setData([])
- setTotalItems(0)
- setError(error)
- } finally {
- setLoading(false)
- }
- }, [nodeId, currentPage, pageSize, dateRange])
-
- const fetchWeekStats = useCallback(async () => {
- if (!nodeId || !dateRange.endDate) {
- return
- }
-
- const targetDate = dateRange.endDate.unix()
-
- setLoadingWeekStats(true)
- setErrorWeekStats(null)
- setWeekStats(null)
- try {
- const stats = await getWeekStats(targetDate)
- setWeekStats(stats)
- } catch (err) {
- console.error('[HistoryContext] Error during fetchWeekStats:', err)
- setWeekStats(null)
- setErrorWeekStats(err)
- } finally {
- setLoadingWeekStats(false)
- }
- }, [nodeId, dateRange])
-
- useEffect(() => {
- if (isSearching && nodeId && dateRange.startDate && dateRange.endDate) {
- const fetchData = async () => {
- await fetchHistoryData()
- await fetchWeekStats()
- setIsSearching(false)
- }
-
- fetchData()
- } else if (isSearching && nodeId && (!dateRange.startDate || !dateRange.endDate)) {
- console.log(
- '[HistoryContext] Waiting for initial date range to be set after periods load.'
- )
- }
- }, [
- isSearching,
- nodeId,
- dateRange,
- currentPage,
- pageSize,
- fetchHistoryData,
- fetchWeekStats
- ])
-
- const clearHistory = useCallback(() => {
- setNodeId('')
- setIsSearching(false)
- setData([])
- setTotalItems(0)
- setCurrentPage(1)
- setError(null)
- setWeekStats(null)
- setErrorWeekStats(null)
- if (availablePeriods.length > 0) {
- const mostRecentPeriod = availablePeriods[0]
- setDateRange({
- startDate: mostRecentPeriod.startDate,
- endDate: mostRecentPeriod.endDate
- })
- } else {
- setDateRange({ startDate: null, endDate: null })
- }
- }, [availablePeriods])
-
- const handleSetDateRange = useCallback(
- (newRange: DateRange) => {
- console.log(
- `[HistoryContext] Setting new date range: ${newRange.startDate?.format('YYYY-MM-DD')} to ${newRange.endDate?.format('YYYY-MM-DD')}`
- )
-
- if (newRange.startDate && newRange.endDate) {
- setDateRange(newRange)
-
- if (nodeId && nodeId.trim() !== '') {
- setIsSearching(true)
- }
- } else {
- console.log('[HistoryContext] Ignoring invalid date range (missing dates)')
- }
- },
- [nodeId]
- )
-
- const getRewardsForPeriod = (
- periodId: string | number
- ): {
- averageReward: number
- totalDistributed: number
- nrEligibleNodes: number
- } | null => {
- if (!periodId || rewardsData.length === 0) return null
-
- const periodIdStr = periodId.toString()
- const periodRewards = rewardsData.find((reward) => reward.date === periodIdStr)
-
- if (!periodRewards) return null
-
- const averageReward = periodRewards.totalAmount / periodRewards.nrEligibleNodes
-
- return {
- averageReward,
- totalDistributed: periodRewards.totalAmount,
- nrEligibleNodes: periodRewards.nrEligibleNodes
- }
- }
-
- const totalProgramDistribution = useMemo(() => {
- if (!Array.isArray(rewardsData) || rewardsData.length === 0) return 0
- return rewardsData.reduce((sum, reward) => {
- return sum + (reward?.totalAmount || 0)
- }, 0)
- }, [rewardsData])
-
- const value: HistoryContextType = {
- data,
- loading,
- error,
- currentPage,
- pageSize,
- totalItems,
- nodeId,
- dateRange,
- isSearching,
- setNodeId,
- setDateRange: handleSetDateRange,
- setCurrentPage,
- setPageSize,
- setIsSearching,
- clearHistory,
- fetchHistoryData,
- weekStats,
- loadingWeekStats,
- errorWeekStats,
- fetchWeekStats,
- availablePeriods,
- periodsLoading,
- getRewardsForPeriod,
- rewardsData,
- loadingRewards,
- errorRewards,
- totalProgramDistribution,
- currentRoundStats,
- loadingCurrentRound,
- errorCurrentRound,
- isInitialising,
- nodesData,
- loadingNodeData,
- errorNodeData
- }
-
- return {children}
-}
-
-export const useHistoryContext = () => {
- const context = useContext(HistoryContext)
- if (context === undefined) {
- throw new Error('useHistoryContext must be used within a HistoryProvider')
- }
- return context
-}
-
-export const getNodeData = async (
- nodeId: string,
-): Promise => {
- try {
- let url = `https://incentive-backend.oceanprotocol.com/nodes?nodeId=${nodeId}`
-
- const response = await axios.get(url)
- console.log('[getNodeDetails] Response from node data API:', response)
- return response?.data?.nodes[0]?._source as NodeData
- } catch (error) {
- console.error('[getNodeDetails] Error fetching node details:', error)
- throw error
- }
-}
-
diff --git a/src/context/MapContext.tsx b/src/context/MapContext.tsx
deleted file mode 100644
index dd7b5517..00000000
--- a/src/context/MapContext.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, {
- createContext,
- useState,
- useEffect,
- useContext,
- ReactNode,
- useMemo
-} from 'react'
-import axios from 'axios'
-import { getApiRoute } from '@/config'
-import { LocationNode } from '../shared/types/locationNodeType'
-
-interface MapContextType {
- data: LocationNode[]
- loading: boolean
- error: any
- totalCountries: number
-}
-
-interface MapProviderProps {
- children: ReactNode
-}
-
-export const MapContext = createContext(undefined)
-
-export const MapProvider: React.FC = ({ children }) => {
- const [data, setData] = useState([])
- const [loading, setLoading] = useState(true)
- const [error, setError] = useState(null)
- const [totalCountries, setTotalCountries] = useState(0)
-
- const fetchUrl = useMemo(() => {
- return getApiRoute('locations')
- }, [])
-
- useEffect(() => {
- const fetchData = async () => {
- setLoading(true)
- try {
- const response = await axios.get(fetchUrl)
- const locationsFromAPI = response.data.locations
- const totalCountries = response.data.totalCountries
-
- const transformedNodes = locationsFromAPI.map((location: any) => ({
- city: location.location,
- lat: location.coordinates.lat,
- lon: location.coordinates.lon,
- country: location.country || location.location,
- count: location.count
- }))
-
- setData(transformedNodes)
- setTotalCountries(totalCountries)
- } catch (err) {
- console.error('Error fetching locations:', err)
- setError(err)
- } finally {
- setLoading(false)
- }
- }
-
- fetchData()
- }, [fetchUrl])
-
- return (
-
- {children}
-
- )
-}
-
-export const useMapContext = () => {
- const context = useContext(MapContext)
- if (context === undefined) {
- throw new Error('useMapContext must be used within a MapProvider')
- }
- return context
-}
diff --git a/src/context/NodesContext.tsx b/src/context/NodesContext.tsx
deleted file mode 100644
index fd1b3216..00000000
--- a/src/context/NodesContext.tsx
+++ /dev/null
@@ -1,448 +0,0 @@
-import React, {
- createContext,
- useState,
- useEffect,
- useContext,
- ReactNode,
- useMemo,
- useCallback
-} from 'react'
-import axios from 'axios'
-import { NodeData } from '@/shared/types/RowDataType'
-import { getApiRoute } from '@/config'
-import { SystemStats } from '@/shared/types/dataTypes'
-import { NodeFilters as OriginalNodeFilters } from '@/shared/types/filters'
-
-type NodeFilters = {
- [key: string]: {
- value: any
- operator: string
- }
-}
-import { GridFilterModel } from '@mui/x-data-grid'
-
-interface RewardHistoryItem {
- date: string
- background: { value: number }
- foreground: { value: number }
- weeklyAmount: number
-}
-
-interface AverageIncentiveDataItem {
- date: string
- foreground: { value: number }
- totalRewards: number
- totalNodes: number
-}
-
-interface NodesContextType {
- data: NodeData[]
- loading: boolean
- error: any
- currentPage: number
- pageSize: number
- totalItems: number
- searchTerm: string
- sortModel: Record
- filters: Record
- nextSearchAfter: any[] | null
- totalNodes: number | null
- totalEligibleNodes: number | null
- totalRewards: number | null
- systemStats: SystemStats
- totalUptime: number | null
- rewardsHistory: RewardHistoryItem[]
- loadingTotalNodes: boolean
- loadingRewardsHistory: boolean
- loadingTotalEligible: boolean
- loadingTotalRewards: boolean
- overallDashboardLoading: boolean
- averageIncentiveData: AverageIncentiveDataItem[]
- setCurrentPage: (page: number) => void
- setPageSize: (size: number) => void
- setSearchTerm: (term: string) => void
- setFilters: (filters: { [key: string]: any }) => void
- setSortModel: (model: { [key: string]: 'asc' | 'desc' }) => void
- setFilter: (filter: GridFilterModel) => void
- fetchRewardsHistory: () => Promise
-}
-
-const NodesContext = createContext(undefined)
-
-interface NodesProviderProps {
- children: ReactNode
-}
-
-export const NodesProvider: React.FC = ({ children }) => {
- const [data, setData] = useState([])
- const [loading, setLoading] = useState(true)
- const [error, setError] = useState(null)
- const [currentPage, setCurrentPage] = useState(1)
- const [pageSize, setPageSize] = useState(100)
- const [totalItems, setTotalItems] = useState(0)
- const [searchTerm, setSearchTerm] = useState('')
- const [sortModel, setSortModel] = useState>({})
- const [filters, setFilters] = useState>({})
- const [filter, setFilter] = useState({ items: [] })
- const [nextSearchAfter, setNextSearchAfter] = useState(null)
-
- const [totalNodes, setTotalNodes] = useState(null)
- const [totalEligibleNodes, setTotalEligibleNodes] = useState(null)
- const [totalRewards, setTotalRewards] = useState(null)
- const [systemStats, setSystemStats] = useState({
- cpuCounts: {},
- operatingSystems: {},
- cpuArchitectures: {}
- })
- const [totalUptime, setTotalUptime] = useState(null)
- const [rewardsHistory, setRewardsHistory] = useState([])
- const [loadingTotalNodes, setLoadingTotalNodes] = useState(false)
- const [loadingRewardsHistory, setLoadingRewardsHistory] = useState(false)
- const [loadingTotalEligible, setLoadingTotalEligible] = useState(false)
- const [loadingTotalRewards, setLoadingTotalRewards] = useState(false)
- const [metricsLoaded, setMetricsLoaded] = useState