added help page, glossary, and various guides

frontend/package.json

@@ -14,6 +14,7 @@
     "@bitcoinerlab/secp256k1": "^1.2.0",
     "@heroicons/react": "^2.0.18",
     "@hookform/resolvers": "^3.9.1",
+    "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-checkbox": "^1.1.3",
     "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.4",

frontend/src/App.tsx

@@ -1,16 +1,18 @@
-import { SnackbarProvider } from 'notistack';
-import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
-import 'reflect-metadata';
-import Layout from './components/layout/Layout';
-import { ErrorHandlerProvider } from './contexts/ErrorHandlerContext';
-import { WalletProvider } from './contexts/WalletContext/WalletContext';
-import ArbiterDashboard from './pages/ArbiterDashboard/ArbiterDashboard';
-import ArbiterList from './pages/ArbiterList/ArbiterList';
-import CompensationList from './pages/CompensationList/CompensationList';
-import DAppList from './pages/DAppList/DAppList';
-import RegisterArbiter from './pages/RegisterArbiter/RegisterArbiter';
-import RegisterDApp from './pages/RegisterDApp/RegisterDApp';
-import TransactionList from './pages/TransactionList/TransactionList';
+import { SnackbarProvider } from "notistack";
+import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
+import "reflect-metadata";
+import Layout from "./components/layout/Layout";
+import { ErrorHandlerProvider } from "./contexts/ErrorHandlerContext";
+import { WalletProvider } from "./contexts/WalletContext/WalletContext";
+import ArbiterDashboard from "./pages/ArbiterDashboard/ArbiterDashboard";
+import ArbiterList from "./pages/ArbiterList/ArbiterList";
+import CompensationList from "./pages/CompensationList/CompensationList";
+import DAppList from "./pages/DAppList/DAppList";
+import HelpPage from "./pages/HelpPage/HelpPage";
+import GlossaryPage from "./pages/GlossaryPage/GlossaryPage";
+import RegisterArbiter from "./pages/RegisterArbiter/RegisterArbiter";
+import RegisterDApp from "./pages/RegisterDApp/RegisterDApp";
+import TransactionList from "./pages/TransactionList/TransactionList";
 
 function App() {
   return (
@@ -29,12 +31,17 @@ function App() {
                 <Route path="/" element={<ArbiterList />} />
                 <Route path="/arbiters" element={<ArbiterList />} />
                 <Route path="/dashboard" element={<ArbiterDashboard />} />
-                <Route path="/transactions/:transactionId" element={<TransactionList />} />
+                <Route
+                  path="/transactions/:transactionId"
+                  element={<TransactionList />}
+                />
                 <Route path="/transactions" element={<TransactionList />} />
                 <Route path="/compensations" element={<CompensationList />} />
                 <Route path="/dapps" element={<DAppList />} />
                 <Route path="/register-dapp" element={<RegisterDApp />} />
                 <Route path="/register-arbiter" element={<RegisterArbiter />} />
+                <Route path="/help" element={<HelpPage />} />
+                <Route path="/glossary" element={<GlossaryPage />} />
               </Routes>
             </Layout>
           </Router>

frontend/src/components/layout/Navbar.tsx

@@ -1,13 +1,13 @@
-import { useEVMContext } from '@/contexts/EVMContext/EVMContext';
-import { useWalletContext } from '@/contexts/WalletContext/WalletContext';
-import { useActiveEVMChainConfig } from '@/services/chains/hooks/useActiveEVMChainConfig';
-import { cn } from '@/utils/shadcn';
-import { Bars3Icon, WalletIcon, XMarkIcon } from '@heroicons/react/24/outline';
-import { FC, useCallback, useMemo, useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { ChildTooltip } from '../base/ChildTooltip';
-import { Button } from '../ui/button';
-import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { useEVMContext } from "@/contexts/EVMContext/EVMContext";
+import { useWalletContext } from "@/contexts/WalletContext/WalletContext";
+import { useActiveEVMChainConfig } from "@/services/chains/hooks/useActiveEVMChainConfig";
+import { cn } from "@/utils/shadcn";
+import { Bars3Icon, WalletIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { FC, useCallback, useMemo, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { ChildTooltip } from "../base/ChildTooltip";
+import { Button } from "../ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 
 export const Navbar: FC = () => {
   const location = useLocation();
@@ -16,14 +16,14 @@ export const Navbar: FC = () => {
 
   const navigation = useMemo(() => {
     const nav = [
-      { name: 'Arbiters', href: '/' },
-      { name: 'Transactions', href: '/transactions' },
-      { name: 'Compensations', href: '/compensations' },
-      { name: 'DApps', href: '/dapps' },
+      { name: "Arbiters", href: "/" },
+      { name: "Transactions", href: "/transactions" },
+      { name: "Compensations", href: "/compensations" },
+      { name: "DApps", href: "/dapps" },
+      { name: "Help", href: "/help" },
     ];
 
-    if (evmAccount)
-      nav.push({ name: 'My dashboard', href: '/dashboard' });
+    if (evmAccount) nav.push({ name: "My dashboard", href: "/dashboard" });
     return nav;
   }, [evmAccount]);
 
@@ -36,8 +36,14 @@ export const Navbar: FC = () => {
               <span className="text-xl font-bold text-gray-800">
                 Arbiter Portal
               </span>
-              <div className='absolute -bottom-1 text-sm text-primary cursor-help font-bold left-0' style={{ bottom: "0rem" }}>
-                <ChildTooltip title="Beta version" tooltip="This is a beta version. Most functions are limited and usable coin amounts are capped.">
+              <div
+                className="absolute -bottom-1 text-sm text-primary cursor-help font-bold left-0"
+                style={{ bottom: "0rem" }}
+              >
+                <ChildTooltip
+                  title="Beta version"
+                  tooltip="This is a beta version. Most functions are limited and usable coin amounts are capped."
+                >
                   BETA
                 </ChildTooltip>
               </div>
@@ -50,9 +56,9 @@ export const Navbar: FC = () => {
                   to={item.href}
                   className={cn(
                     item.href === location.pathname
-                      ? 'border-primary text-gray-900'
-                      : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
-                    'inline-flex items-center border-b-2 px-1 pt-1 font-normal'
+                      ? "border-primary text-gray-900"
+                      : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+                    "inline-flex items-center border-b-2 px-1 pt-1 font-normal"
                   )}
                 >
                   {item.name}
@@ -69,8 +75,12 @@ export const Navbar: FC = () => {
               <div className="ml-2 flex items-center sm:hidden">
                 {/* Icon button to toggle mobile menu */}
                 <Button variant="ghost">
-                  {open && <XMarkIcon className="block h-6 w-6" aria-hidden="true" />}
-                  {!open && <Bars3Icon className="block h-6 w-6" aria-hidden="true" />}
+                  {open && (
+                    <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
+                  )}
+                  {!open && (
+                    <Bars3Icon className="block h-6 w-6" aria-hidden="true" />
+                  )}
                 </Button>
               </div>
             </PopoverTrigger>
@@ -84,9 +94,9 @@ export const Navbar: FC = () => {
                     onClick={() => setOpen(false)}
                     className={cn(
                       item.href === location.pathname
-                        ? 'border-primary text-primary bg-primary/10'
-                        : 'border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700',
-                      'block border-l-4 py-2 pl-2'
+                        ? "border-primary text-primary bg-primary/10"
+                        : "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700",
+                      "block border-l-4 py-2 pl-2"
                     )}
                   >
                     {item.name}
@@ -103,8 +113,8 @@ export const Navbar: FC = () => {
         </div>
       </div>
     </>
-  )
-}
+  );
+};
 
 const Wallet: FC = () => {
   const { evmAccount } = useWalletContext();
@@ -118,27 +128,31 @@ const Wallet: FC = () => {
     disconnect();
   }, [disconnect]);
 
-  return (<>
-    {
-      evmAccount &&
-      <Popover onOpenChange={setOpen} open={open}>
-        <PopoverTrigger className='flex flex-row gap-2 items-center'>
-          <span className="text-sm text-gray-500 bg-gray-100 px-4 py-2 rounded-lg cursor-pointer">
-            {evmAccount.slice(0, 6)}...{evmAccount.slice(-4)}
-          </span>
-          <Button onClick={handleDisconnect} className='sm:hidden'>Disconnect</Button>
-        </PopoverTrigger>
-        <PopoverContent className='w-auto hidden sm:block'>
-          <Button onClick={handleDisconnect}>Disconnect from: {activeChain?.name}</Button>
-        </PopoverContent>
-      </Popover>
-    }
-    {
-      !evmAccount &&
-      <Button onClick={connect}>
-        <WalletIcon className="h-5 w-5 mr-2" />
-        Connect Wallet
-      </Button>
-    }
-  </>)
-}
+  return (
+    <>
+      {evmAccount && (
+        <Popover onOpenChange={setOpen} open={open}>
+          <PopoverTrigger className="flex flex-row gap-2 items-center">
+            <span className="text-sm text-gray-500 bg-gray-100 px-4 py-2 rounded-lg cursor-pointer">
+              {evmAccount.slice(0, 6)}...{evmAccount.slice(-4)}
+            </span>
+            <Button onClick={handleDisconnect} className="sm:hidden">
+              Disconnect
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto hidden sm:block">
+            <Button onClick={handleDisconnect}>
+              Disconnect from: {activeChain?.name}
+            </Button>
+          </PopoverContent>
+        </Popover>
+      )}
+      {!evmAccount && (
+        <Button onClick={connect}>
+          <WalletIcon className="h-5 w-5 mr-2" />
+          Connect Wallet
+        </Button>
+      )}
+    </>
+  );
+};

frontend/src/components/ui/accordion.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import { cn } from "@/utils/shadcn";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };