feat: add squids table

.eslintrc.cjs

@@ -1,3 +1,8 @@
 module.exports = {
   extends: ["@dcl/eslint-config/ui"],
+  rules: {
+    "import/group-exports": "off",
+    "import/no-default-export": "off",
+    "react/prop-types": "off",
+  },
 }

.gitignore

@@ -23,3 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 *.tsbuildinfo
+
+.env

index.html

@@ -7,9 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet" />
   <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
-  <link rel="manifest" href="/manifest.json" />
   <meta name="theme-color" content="#000000" />
-  <title>Decentraland</title>
+  <title>Decentraland Squid Management</title>
   <meta name="description" content="Here should go a description of the dApp" />
   <meta property="og:title" content="Decentraland">
   <meta property="og:description" content="Here should go a description of the dApp" />

package.json

@@ -35,7 +35,11 @@
   },
   "dependencies": {
     "@dcl/ui-env": "^1.4.0",
-    "decentraland-ui2": "^0.0.2",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^6.1.7",
+    "@mui/material": "^6.1.7",
+    "decentraland-ui2": "^0.6.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -63,7 +67,8 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3",
     "typescript-eslint": "^7.15.0",
-    "vite": "^5.3.1"
+    "vite": "^5.3.1",
+    "vite-plugin-svgr": "^4.3.0"
   },
   "overrides": {
     "@types/node": "20.8.3"

src/App.tsx

@@ -1,12 +1,69 @@
-import { Box, Typography } from "decentraland-ui2"
+import { useState } from "react"
+import { ThemeProvider, dark } from "decentraland-ui2/dist/theme"
+import {
+  Box,
+  CircularProgress,
+  CssBaseline,
+  Toolbar,
+  Typography,
+} from "@mui/material"
+import Sidebar from "./components/Sidebar"
+import SquidsTable from "./components/SquidsTable"
+import TopBar from "./components/TopBar"
+import { useSquids } from "./hooks/useSquids"
+
+const drawerWidth = 240
 
 const App = () => {
+  const { squids, loading, error } = useSquids()
+  const [mobileOpen, setMobileOpen] = useState(false)
+
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen)
+  }
+
   return (
-    <Box>
-      <Typography variant="h4">
-        This is a Decentraland dApps template
-      </Typography>
-    </Box>
+    <ThemeProvider theme={dark}>
+      <Box sx={{ display: "flex", height: "100vh" }}>
+        <CssBaseline />
+        <TopBar
+          handleDrawerToggle={handleDrawerToggle}
+          drawerWidth={drawerWidth}
+        />
+        <Sidebar
+          drawerWidth={drawerWidth}
+          mobileOpen={mobileOpen}
+          handleDrawerToggle={handleDrawerToggle}
+        />
+        <Box
+          component="main"
+          sx={{
+            flexGrow: 1,
+            p: 3,
+            width: { sm: `calc(100% - ${drawerWidth}px)` },
+          }}
+        >
+          <Toolbar />
+          <Typography variant="h5" gutterBottom sx={{ paddingBottom: 2 }}>
+            Squids
+          </Typography>
+          {loading && (
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                height: "100%",
+              }}
+            >
+              <CircularProgress />
+            </Box>
+          )}
+          {error && <Typography color="error">{error}</Typography>}
+          {!loading && !error && <SquidsTable squids={squids} />}
+        </Box>
+      </Box>
+    </ThemeProvider>
   )
 }
 

src/components/Sidebar.tsx

@@ -0,0 +1,80 @@
+import {
+  Box,
+  Divider,
+  Drawer,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  Toolbar,
+} from "@mui/material"
+import SquidLogo from "../squid.svg?react"
+
+interface SidebarProps {
+  drawerWidth: number
+  mobileOpen: boolean
+  handleDrawerToggle: () => void
+}
+
+const Sidebar: React.FC<SidebarProps> = ({
+  drawerWidth,
+  mobileOpen,
+  handleDrawerToggle,
+}) => {
+  const drawer = (
+    <div>
+      <Toolbar />
+      <Divider />
+      <List>
+        <ListItemButton selected>
+          <ListItemIcon>
+            <SquidLogo width={24} height={24} fill="white" />
+          </ListItemIcon>
+          <ListItemText
+            primary="Squids"
+            sx={{ fontWeight: 600, fontSize: "0.875rem" }}
+          />
+        </ListItemButton>
+      </List>
+    </div>
+  )
+
+  return (
+    <Box
+      component="nav"
+      sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
+      aria-label="squid management options"
+    >
+      <Drawer
+        variant="temporary"
+        open={mobileOpen}
+        onClose={handleDrawerToggle}
+        ModalProps={{ keepMounted: true }}
+        sx={{
+          display: { xs: "block", sm: "none" },
+          "& .MuiDrawer-paper": {
+            boxSizing: "border-box",
+            width: drawerWidth,
+          },
+        }}
+      >
+        {drawer}
+      </Drawer>
+      <Drawer
+        variant="permanent"
+        sx={{
+          display: { xs: "none", sm: "block" },
+          "& .MuiDrawer-paper": {
+            boxSizing: "border-box",
+            width: drawerWidth,
+          },
+        }}
+        open
+      >
+        {drawer}
+      </Drawer>
+    </Box>
+  )
+}
+
+export default Sidebar