Merge pull request #10 from decentraland/feat/add-dev-labels

feat: add logic to show dev/prod title and chain names

src/App.tsx

@@ -1,14 +1,17 @@
 import { useCallback, useState } from "react"
+import { Env } from "@dcl/ui-env"
 import { ThemeProvider, dark } from "decentraland-ui2/dist/theme"
 import { Alert, Box, Snackbar, Toolbar, Typography } from "@mui/material"
 import Sidebar from "./components/Sidebar"
 import SquidsTable from "./components/SquidsTable"
 import TopBar from "./components/TopBar"
+import { config } from "./config"
 import { useSquids } from "./hooks/useSquids"
 
 const drawerWidth = 240
 
 const App = () => {
+  const isDev = config.is(Env.DEVELOPMENT)
   const [snackbar, setSnackbar] = useState<{
     open: boolean
     message: string
@@ -60,7 +63,7 @@ const App = () => {
         >
           <Toolbar />
           <Typography variant="h5" gutterBottom sx={{ paddingBottom: 2 }}>
-            Squids
+            {isDev ? "Dev" : "Prod"} Squids
           </Typography>
           {loading && <Typography>Loading...</Typography>}
           {error && <Typography color="error">{error}</Typography>}

src/components/SquidsTable.tsx

@@ -1,5 +1,6 @@
 import { Fragment, useRef, useState } from "react"
 import { Network } from "@dcl/schemas"
+import { Env } from "@dcl/ui-env"
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"
 import MoreVertIcon from "@mui/icons-material/MoreVert"
@@ -20,6 +21,7 @@ import {
   TableRow,
   Typography,
 } from "decentraland-ui2"
+import { config } from "../config"
 import { Squid, SquidMetrics } from "../types"
 import { getGraphQLEndpoint } from "../utils"
 
@@ -33,7 +35,10 @@ const parseProjectName = (name: string): string =>
   name.split("-squid-server-")[0]
 
 const renameNetwork = (network: Network): string => {
-  return network === Network.MATIC ? "POLYGON" : network
+  const isDev = config.is(Env.DEVELOPMENT)
+  return network === Network.MATIC
+    ? `POLYGON ${isDev ? "AMOY" : ""}`
+    : `${network} ${isDev ? "SEPOLIA" : ""}`
 }
 
 const renderStatusBadge = (status: string, color: string): JSX.Element => (
@@ -346,7 +351,10 @@ const SquidsTable: React.FC<SquidsTableProps> = ({
         </MenuItem>
         <MenuItem
           onClick={() => !!selectedSquid && handleStop(selectedSquid.name)}
-          disabled={!selectedSquid?.metrics}
+          disabled={
+            !selectedSquid?.metrics ||
+            selectedSquid?.schema_name === selectedSquid?.project_active_schema
+          }
         >
           Stop
         </MenuItem>