feat: add UI2 accondion and Navbar

package.json

@@ -35,9 +35,10 @@
   "dependencies": {
     "@dcl/catalyst-api-specs": "^3.3.0",
     "@dcl/ui-env": "^1.4.0",
-    "decentraland-ui2": "^0.0.2",
+    "decentraland-ui2": "^0.7.2",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "uuid": "^11.0.3"
   },
   "devDependencies": {
     "@dcl/eslint-config": "^2.2.1",

src/App.tsx

@@ -1,8 +1,18 @@
+import {
+  CssBaseline,
+  Experimental_CssVarsProvider as CssVarsProvider,
+  lightTheme,
+} from "decentraland-ui2"
 import { Servers } from "./components/Servers/Servers"
 
 import "../old/style.css"
 const App = () => {
-  return <Servers />
+  return (
+    <CssVarsProvider theme={lightTheme}>
+      <CssBaseline />
+      <Servers />
+    </CssVarsProvider>
+  )
 }
 
 export { App }

src/components/ServerMonitor/ServerMonitor.tsx

@@ -21,13 +21,21 @@ const ServerMonitor = React.memo((props: ServerMonitorProps) => {
 
   useEffect(() => {
     const getNodeStatus = async () => {
-      getContentFailedDeployments()
+      if (
+        address !== "https://realm-provider.decentraland.org/main" &&
+        address !== "https://realm-provider-ea.decentraland.org/main"
+      ) {
+        getContentFailedDeployments()
+      }
 
       const res = await fetch(`${address}/about`)
       const about: About = await res.json()
 
       const usersInServer = about.comms?.usersCount ? about.comms.usersCount : 0
 
+      console.log(" > address > ", address)
+      console.log(" > usersInServer > ", usersInServer)
+
       setState((prev) => ({
         ...prev,
         about,
@@ -48,6 +56,7 @@ const ServerMonitor = React.memo((props: ServerMonitorProps) => {
     getNodeStatus()
   }, [])
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [statusModal, setStatusModal] = useState<
     | false
     | {
@@ -56,8 +65,6 @@ const ServerMonitor = React.memo((props: ServerMonitorProps) => {
       }
   >(false)
 
-  console.log(statusModal)
-
   const handleShowStatus = useCallback(
     async (
       server: string,

src/components/Servers/DAOMainnetServers/DAOMainnetServers.tsx

@@ -1,6 +1,13 @@
 import * as React from "react"
 import { useCallback, useState } from "react"
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore"
+import { Typography } from "decentraland-ui2"
 import { ServerMonitor } from "../../ServerMonitor/ServerMonitor"
+import {
+  ServersContainer,
+  ServersSummary,
+  ServersWrapper,
+} from "../Servers.styled"
 
 const DAOMainnetServersUrls = [
   "https://peer-ec1.decentraland.org",
@@ -20,28 +27,43 @@ const DAOMainnetServersUrls = [
 
 const DAOMainnetServers = React.memo(() => {
   const [totalProductiveUsers, setTotalProductiveUsers] = useState(0)
-  const sumProductiveUsers = useCallback((usersCount = 0) => {
-    setTotalProductiveUsers((prev) => prev + usersCount)
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [serversCounted, setServersCounted] = useState(new Set<string>())
+
+  const sumProductiveUsers = useCallback((server: string, usersCount = 0) => {
+    setServersCounted((prevServers) => {
+      if (!prevServers.has(server)) {
+        setTotalProductiveUsers((prev) => prev + usersCount)
+        return new Set(prevServers).add(server)
+      }
+      return prevServers
+    })
   }, [])
 
   return (
-    <div>
-      <div className="node-set">
-        {DAOMainnetServersUrls.map((server, key) => {
-          return (
-            <ServerMonitor
-              key={key}
-              address={server}
-              expectedEthNetwork="mainnet"
-              contributeUsers={(usersCount) => sumProductiveUsers(usersCount)}
-            />
-          )
-        })}
-      </div>
-      <div className="total-productive-users">
-        Total Users: {totalProductiveUsers}
-      </div>
-    </div>
+    <ServersContainer defaultExpanded>
+      <ServersSummary
+        expandIcon={<ExpandMoreIcon />}
+        aria-controls="DAOMainnetServers-content"
+        id="DAOMainnetServers-header"
+      >
+        <Typography variant="body1">
+          Total Users: {totalProductiveUsers}
+        </Typography>
+      </ServersSummary>
+      <ServersWrapper>
+        {DAOMainnetServersUrls.map((server, key) => (
+          <ServerMonitor
+            key={key}
+            address={server}
+            expectedEthNetwork="mainnet"
+            contributeUsers={(usersCount) =>
+              sumProductiveUsers(server, usersCount)
+            }
+          />
+        ))}
+      </ServersWrapper>
+    </ServersContainer>
   )
 })
 

src/components/Servers/ExtraServers/ExtraServers.tsx

@@ -1,7 +1,14 @@
 import * as React from "react"
 import { useCallback, useState } from "react"
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore"
+import { Typography } from "decentraland-ui2"
 import { ServerMonitor } from "../../ServerMonitor/ServerMonitor"
 import { WorldsServerMonitor } from "../../ServerMonitor/WorldsServerMonitor"
+import {
+  ServersContainer,
+  ServersSummary,
+  ServersWrapper,
+} from "../Servers.styled"
 
 const nonDAOMainnetServers = [
   "https://peer-testing.decentraland.org",
@@ -19,81 +26,83 @@ const zoneSepoliaServers = [
 const worldsSepoliaServers = ["https://worlds-content-server.decentraland.zone"]
 
 const ExtraServers = React.memo(() => {
-  const [totalSepoliaWorldsUsers, setTotalSepoliaWorldsUsers] = useState(0)
-  const [totalSepoliaDevUsers, setTotalSepoliaDevUsers] = useState(0)
   const [totalNonDAOMainnetUsers, setTotalNonDAOMainnetUsers] = useState(0)
-  // const [syncCheck, setSyncCheck] = useState(undefined)
-
-  const sumSepoliaWorldsUsers = useCallback((usersCount = 0) => {
-    setTotalSepoliaWorldsUsers((prev) => prev + usersCount)
-  }, [])
-
-  const sumNonDAOMainnetUsers = useCallback((usersCount = 0) => {
-    setTotalNonDAOMainnetUsers((prev) => prev + usersCount)
-  }, [])
+  const [totalSepoliaDevUsers, setTotalSepoliaDevUsers] = useState(0)
+  const [totalSepoliaWorldsUsers, setTotalSepoliaWorldsUsers] = useState(0)
+  const [serversCounted, setServersCounted] = useState(new Set<string>())
 
-  const sumSepoliaDevUsers = useCallback((usersCount = 0) => {
-    setTotalSepoliaDevUsers((prev) => prev + usersCount)
-  }, [])
+  const sumUsers = useCallback(
+    (
+      server: string,
+      usersCount: number,
+      setter: React.Dispatch<React.SetStateAction<number>>
+    ) => {
+      const validUsersCount = Number(usersCount) || 0 // Asegurarse de que usersCount sea un número
+      setServersCounted((prevServers) => {
+        if (!prevServers.has(server)) {
+          setter((prev) => prev + validUsersCount)
+          return new Set(prevServers).add(server)
+        }
+        return prevServers
+      })
+    },
+    []
+  )
 
   const currentUrl = window.location.href.toString()
+
   if (currentUrl.indexOf("includeDevServers") >= 0) {
     return (
-      <div>
-        <div className="node-set">
-          {nonDAOMainnetServers.map((server, key) => {
-            return (
-              <ServerMonitor
-                key={key}
-                address={server}
-                expectedEthNetwork="mainnet"
-                contributeUsers={(usersCount) =>
-                  sumNonDAOMainnetUsers(usersCount)
-                }
-              />
-            )
-          })}
-        </div>
-        <div className="total-productive-users">
-          Total Users: {totalNonDAOMainnetUsers}
-        </div>
-
-        <div className="node-set">
-          {zoneSepoliaServers.map((server, key) => {
-            return (
-              <ServerMonitor
-                key={key}
-                address={server}
-                expectedEthNetwork="sepolia"
-                contributeUsers={(usersCount) => sumSepoliaDevUsers(usersCount)}
-              />
-            )
-          })}
-        </div>
-        <div className="total-dev-users">
-          Total Users (Sepolia): {totalSepoliaDevUsers}
-        </div>
-
-        <div>
-          <div className="node-set">
-            {worldsSepoliaServers.map((server, key) => {
-              return (
-                <WorldsServerMonitor
-                  key={key}
-                  address={server}
-                  expectedEthNetwork="sepolia"
-                  contributeUsers={(usersCount) =>
-                    sumSepoliaWorldsUsers(usersCount)
-                  }
-                />
-              )
-            })}
-          </div>
-          <div className="total-dev-users">
-            Total Worlds Users: {totalSepoliaWorldsUsers}
-          </div>
-        </div>
-      </div>
+      <ServersContainer defaultExpanded>
+        <ServersSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="ExtraServers-content"
+          id="ExtraServers-header"
+        >
+          <Typography variant="body1">
+            Total Users:{" "}
+            {totalNonDAOMainnetUsers +
+              totalSepoliaDevUsers +
+              totalSepoliaWorldsUsers}
+          </Typography>
+        </ServersSummary>
+        <ServersWrapper>
+          {nonDAOMainnetServers.map((server, key) => (
+            <ServerMonitor
+              key={key}
+              address={server}
+              expectedEthNetwork="mainnet"
+              contributeUsers={(usersCount) =>
+                sumUsers(server, usersCount, setTotalNonDAOMainnetUsers)
+              }
+            />
+          ))}
+        </ServersWrapper>
+        <ServersWrapper>
+          {zoneSepoliaServers.map((server, key) => (
+            <ServerMonitor
+              key={key}
+              address={server}
+              expectedEthNetwork="sepolia"
+              contributeUsers={(usersCount) =>
+                sumUsers(server, usersCount, setTotalSepoliaDevUsers)
+              }
+            />
+          ))}
+        </ServersWrapper>
+        <ServersWrapper>
+          {worldsSepoliaServers.map((server, key) => (
+            <WorldsServerMonitor
+              key={key}
+              address={server}
+              expectedEthNetwork="sepolia"
+              contributeUsers={(usersCount) =>
+                sumUsers(server, usersCount, setTotalSepoliaWorldsUsers)
+              }
+            />
+          ))}
+        </ServersWrapper>
+      </ServersContainer>
     )
   } else {
     return <div />

src/components/Servers/Servers.styled.tsx

@@ -0,0 +1,30 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  styled,
+} from "decentraland-ui2"
+
+const MainContainer = styled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  padding: "20px",
+  margin: "80px auto",
+})
+
+const ServersContainer = styled(Accordion)({
+  width: "100%",
+})
+
+const ServersSummary = styled(AccordionSummary)({
+  backgroundColor: "#9ec1ff",
+})
+
+const ServersWrapper = styled(AccordionDetails)({
+  display: "flex",
+  flexWrap: "wrap",
+})
+
+export { MainContainer, ServersContainer, ServersSummary, ServersWrapper }

src/components/Servers/Servers.tsx

@@ -1,14 +1,19 @@
+import { Navbar } from "decentraland-ui2"
 import { DAOMainnetServers } from "./DAOMainnetServers/DAOMainnetServers"
 import { ExtraServers } from "./ExtraServers/ExtraServers"
 import { WorldMainnetServers } from "./WorldMainnetServers/WorldMainnetServers"
+import { MainContainer } from "./Servers.styled"
 
 const Servers = () => {
   return (
-    <div>
-      <DAOMainnetServers />
-      <WorldMainnetServers />
-      <ExtraServers />
-    </div>
+    <>
+      <Navbar activePage="" />
+      <MainContainer>
+        <DAOMainnetServers />
+        <WorldMainnetServers />
+        <ExtraServers />
+      </MainContainer>
+    </>
   )
 }