UI design

ui/client/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

ui/client/package.json

@@ -10,31 +10,44 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
     "@fontsource/roboto": "^5.1.0",
-    "@mui/icons-material": "^6.1.2",
-    "@mui/material": "^6.1.2",
-    "@mui/x-charts": "^7.20.0",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "@tanstack/react-query": "^5.59.16",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "i18next": "^23.15.2",
+    "lucide-react": "^0.453.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.2",
-    "react-json-pretty": "^2.2.0",
-    "react-router-dom": "^6.26.2"
+    "react-router-dom": "^6.26.2",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",
     "@tanstack/eslint-plugin-query": "^5.59.7",
+    "@types/node": "^22.7.9",
     "@types/react": "^18.3.10",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.2",
+    "autoprefixer": "^10.4.20",
     "eslint": "^9.11.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.7.0",
     "vite": "^5.4.8"

ui/client/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

ui/client/src/App.tsx

@@ -14,107 +14,61 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Box, CssBaseline } from "@mui/material";
-import { createTheme, PaletteMode, ThemeProvider } from "@mui/material/styles";
 import {
   MutationCache,
   QueryCache,
   QueryClient,
   QueryClientProvider,
 } from "@tanstack/react-query";
-import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
-import { Header } from "./components/Header";
+import {
+  createBrowserRouter,
+  Navigate,
+  RouterProvider,
+} from "react-router-dom";
+import { Config } from "./config";
 import { ApplicationContextProvider } from "./contexts/ApplicationContext";
-import { darkThemeOptions, lightThemeOptions } from "./themes/default";
-import { Indexer } from "./views/indexer";
-import { Registries } from "./views/Registries";
-import { Submissions } from "./views/Submissions";
-import { useEffect, useMemo, useState } from "react";
-import { constants } from "./components/config";
+import { ThemeContextProvider } from "./contexts/ThemeContext";
+import { AppLinks } from "./navigation/AppLinks";
+import AppRoot from "./navigation/AppRoot";
+import { IndexersRoute } from "./pages/Indexers/Routes";
+import { QueryBuilderRoute } from "./pages/Queries/Routes";
+import { RegistriesRoute } from "./pages/Registries/Routes";
+import { SubmissionsRoute } from "./pages/Submissions/Routes";
 
 const queryClient = new QueryClient({
   queryCache: new QueryCache({}),
   mutationCache: new MutationCache({}),
 });
 
 function App() {
-
-  const [systemTheme, setSystemTheme] = useState(
-    window.matchMedia &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? 'dark'
-      : 'light'
-  );
-
-  const [storedTheme, setStoredTheme] = useState<PaletteMode>();
-
-  useEffect(() => {
-    window
-      .matchMedia('(prefers-color-scheme: dark)')
-      .addEventListener('change', (event) => {
-        setSystemTheme(event.matches ? 'dark' : 'light');
-      });
-  }, []);
-
-
-  const theme = useMemo(() => {
-    const modeFromStorage = localStorage.getItem(constants.COLOR_MODE_STORAGE_KEY);
-    if (modeFromStorage === null) {
-      // If color mode not previously set
-      return createTheme(
-        systemTheme === 'dark' ? darkThemeOptions : lightThemeOptions
-      );
-    } else {
-      // Create color mode based on local storage
-      return createTheme(
-        modeFromStorage === 'dark' ? darkThemeOptions : lightThemeOptions
-      );
-    }
-  }, [systemTheme, storedTheme]);
-
-  const colorMode = useMemo(
-    () => ({
-      toggleColorMode: () => {
-        const currentMode =
-          localStorage.getItem(constants.COLOR_MODE_STORAGE_KEY) ?? systemTheme;
-        const newMode = currentMode === 'light' ? 'dark' : 'light';
-        localStorage.setItem(constants.COLOR_MODE_STORAGE_KEY, newMode);
-        setStoredTheme(newMode);
-      },
-    }),
-    []
-  );
+  const router = createBrowserRouter([
+    {
+      path: "/",
+      element: <AppRoot />,
+      children: [
+        IndexersRoute,
+        RegistriesRoute,
+        SubmissionsRoute,
+        QueryBuilderRoute,
+        {
+          path: "*",
+          element: <Navigate to={AppLinks.Indexers} />,
+        },
+      ],
+    },
+  ]);
 
   return (
     <>
       <QueryClientProvider client={queryClient}>
-        <ApplicationContextProvider colorMode={colorMode}>
-          <ThemeProvider theme={theme}>
-            <CssBaseline />
-            <Box
-              sx={{
-                position: "fixed",
-                height: "100vh",
-                width: "100vw",
-                zIndex: -1,
-                backgroundImage: 'url("paladin-icon-light.svg")',
-                backgroundRepeat: "no-repeat",
-                backgroundSize: "88vh",
-                backgroundPosition: "center bottom",
-                backgroundAttachment: "fixed",
-              }}
-            />
-            <BrowserRouter>
-              <Header />
-              <Routes>
-                <Route path="/indexer" element={<Indexer />} />
-                <Route path="/submissions" element={<Submissions />} />\
-                <Route path="/registry" element={<Registries />} />
-                <Route path="*" element={<Navigate to="/indexer" replace />} />
-              </Routes>
-            </BrowserRouter>
-          </ThemeProvider>
-        </ApplicationContextProvider>
+        <ThemeContextProvider
+          defaultTheme="light"
+          storageKey={Config.COLOR_MODE_STORAGE_KEY}
+        >
+          <ApplicationContextProvider>
+            <RouterProvider {...{ router }} />
+          </ApplicationContextProvider>
+        </ThemeContextProvider>
       </QueryClientProvider>
     </>
   );

ui/client/src/components/Accordions/RegistryDetails.tsx

@@ -0,0 +1,73 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { IRegistryEntryWithProperties } from "@/interfaces/registry";
+import { useTranslation } from "react-i18next";
+import { ScrollArea } from "../ui/scroll-area";
+
+type Props = {
+  registryEntry: IRegistryEntryWithProperties;
+  mode: "details" | "properties";
+};
+
+export function RegistryDetails({ registryEntry, mode }: Props) {
+  const { t } = useTranslation();
+
+  const formatProperty = (value: string) => {
+    try {
+      const parsed = JSON.stringify(value, null, 2);
+      return parsed;
+    } catch {
+      return value;
+    }
+  };
+
+  if (
+    mode === "properties" &&
+    Object.keys(registryEntry.properties).length === 0
+  ) {
+    return <></>;
+  }
+
+  return (
+    <div className="border p-4 pt-0 rounded">
+      {mode === "properties" && (
+        <Accordion type="single" collapsible>
+          {Object.keys(registryEntry.properties)
+            .filter((property) => property !== "$owner")
+            .map((property) => {
+              return (
+                <AccordionItem key={property} value={property}>
+                  <AccordionTrigger>
+                    {t("property")}: {property}
+                  </AccordionTrigger>
+                  <AccordionContent className="whitespace-pre-wrap break-words text-xs">
+                    {formatProperty(registryEntry.properties[property])}
+                  </AccordionContent>
+                </AccordionItem>
+              );
+            })}
+        </Accordion>
+      )}
+      {mode === "details" && (
+        <Accordion
+          type="single"
+          collapsible
+          defaultValue={"fullRegistryDetails"}
+        >
+          <AccordionItem value={"fullRegistryDetails"}>
+            <AccordionTrigger>{t("fullRegistryDetails")}</AccordionTrigger>
+            <AccordionContent className="whitespace-pre-wrap break-words text-[10px] leading-tight relative -mr-4">
+              <ScrollArea className=" h-[300px] w-full pr-4">
+                {JSON.stringify(registryEntry, null, 2)}
+              </ScrollArea>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      )}
+    </div>
+  );
+}

ui/client/src/components/Accordions/SubmissionDetails.tsx

@@ -0,0 +1,69 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { IPaladinTransaction } from "@/interfaces/transactions";
+import { useTranslation } from "react-i18next";
+import { ScrollArea } from "../ui/scroll-area";
+
+type Props = {
+  paladinTransaction: IPaladinTransaction;
+  mode: "details" | "properties";
+};
+
+export function SubmissionDetails({ paladinTransaction, mode }: Props) {
+  const { t } = useTranslation();
+
+  const formatProperty = (value: string) => {
+    try {
+      const parsed = JSON.stringify(value, null, 2);
+      return parsed;
+    } catch {
+      return value;
+    }
+  };
+
+  if (
+    mode === "properties" &&
+    Object.keys(paladinTransaction.data).length === 0
+  ) {
+    return <></>;
+  }
+
+  return (
+    <div className="border p-4 pt-0 rounded">
+      {mode === "properties" && (
+        <Accordion type="single" collapsible>
+          {Object.keys(paladinTransaction.data)
+            .filter((property) => property !== "$owner")
+            .map((property) => {
+              return (
+                <AccordionItem key={property} value={property}>
+                  <AccordionTrigger>
+                    {t("property")}: {property}
+                  </AccordionTrigger>
+                  <AccordionContent className="whitespace-pre-wrap break-words text-xs">
+                    {formatProperty(paladinTransaction.data[property])}
+                  </AccordionContent>
+                </AccordionItem>
+              );
+            })}
+        </Accordion>
+      )}
+      {mode === "details" && (
+        <Accordion type="single" collapsible defaultValue={"fullTxDetails"}>
+          <AccordionItem value={"fullTxDetails"}>
+            <AccordionTrigger>{t("fullTransactionDetails")}</AccordionTrigger>
+            <AccordionContent className="whitespace-pre-wrap break-words text-[10px] leading-tight relative -mr-4">
+              <ScrollArea className=" h-[300px] w-full pr-4">
+                {JSON.stringify(paladinTransaction, null, 2)}
+              </ScrollArea>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      )}
+    </div>
+  );
+}