ux-gov

package.json

@@ -21,6 +21,7 @@
     "@hookform/resolvers": "^3.9.0",
     "@jinglescode/nostr-chat-plugin": "^0.0.11",
     "@meshsdk/core": "^1.8.5",
+    "@meshsdk/core-csl": "^1.9.0-beta.1",
     "@meshsdk/react": "^1.8.5",
     "@octokit/core": "^6.1.2",
     "@prisma/client": "^5.14.0",

src/components/common/cardano-objects/get-tx-builder.ts

@@ -1,11 +1,13 @@
 import { MeshTxBuilder } from "@meshsdk/core";
 import { getProvider } from "./get-provider";
+import { CSLSerializer } from "@meshsdk/core-csl";
 
 export function getTxBuilder(network: number) {
   const blockchainProvider = getProvider(network);
   const txBuilder = new MeshTxBuilder({
     fetcher: blockchainProvider,
     evaluator: blockchainProvider,
+    serializer: new CSLSerializer(),
     verbose: true,
   });
   if (network === 1) {

src/components/common/cardano-objects/jsonLdParser.ts

@@ -0,0 +1,6 @@
+export function extractJsonLdValue(value: any, fallback: string = "N/A"): string {
+  if (!value) return fallback;
+  if (typeof value === "string") return value;
+  if (typeof value === "object" && "@value" in value) return value["@value"];
+  return fallback;
+}

src/components/common/overall-layout/layout.tsx

@@ -27,7 +27,6 @@ import {
 import Logo from "./logo";
 import { useNostrChat } from "@jinglescode/nostr-chat-plugin";
 import { publicRoutes } from "@/data/public-routes";
-import MenuHomepage from "./menus/homepage-links";
 import Loading from "./loading";
 import { PopupAlert } from "../popup-alert";
 import DialogReport from "./dialog-report";
@@ -103,8 +102,8 @@ export default function RootLayout({
     load();
   }, [user, isLoading]);
 
-  const isLoggedIn = user !== undefined && user !== null;
-  const isHomePath = router.asPath == "/";
+  //const isLoggedIn = user !== undefined && user !== null;
+  //const isHomePath = router.asPath == "/"||"/features";
   const isWalletPath = router.pathname.includes("/wallets/[wallet]");
   const walletPageRoute = router.pathname.split("/wallets/[wallet]/")[1];
   const walletPageNames = walletPageRoute && walletPageRoute.split("/");
@@ -127,14 +126,12 @@ export default function RootLayout({
             </Button> */}
           </div>
           <div className="flex-1">
-            {isLoggedIn ? (
+            {
               <>
-                {isHomePath && <MenuWallets />}
+                <MenuWallets />
                 {isWalletPath && <MenuWallet />}
               </>
-            ) : (
-              <MenuHomepage />
-            )}
+            }
             {/* <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
               {wallets &&
                 wallets.map((wallet) => (

src/components/common/overall-layout/menus/wallet.tsx

@@ -2,25 +2,20 @@ import { ArrowLeft, Info, List, Scale, Wallet } from "lucide-react";
 import { useRouter } from "next/router";
 import MenuLink from "./menu-link";
 import usePendingTransactions from "@/hooks/usePendingTransactions";
+import useUserWallets from "@/hooks/useUserWallets";
 import { Badge } from "@/components/ui/badge";
 import { ChatBubbleIcon } from "@radix-ui/react-icons";
 
 export default function MenuWallet() {
   const router = useRouter();
   const baseUrl = `/wallets/${router.query.wallet as string | undefined}/`;
-
+  const { wallets } = useUserWallets();
   const { transactions } = usePendingTransactions();
-
+  if(!wallets)return;
   return (
     <nav className="grid h-full items-start px-2 text-sm font-medium lg:px-4">
       <div className="grid items-start">
-        <MenuLink
-          href={`${baseUrl}`}
-          className={router.pathname == "/wallets/[wallet]" ? "text-white" : ""}
-        >
-          <Wallet className="h-4 w-4" />
-          <div className="flex items-center gap-2">Summary</div>
-        </MenuLink>
+        <p>{wallets.filter((wallet) => wallet.id === router.query.wallet).map((wallet) => wallet.name)}</p>
 
         <MenuLink
           href={`${baseUrl}transactions`}
@@ -40,17 +35,6 @@ export default function MenuWallet() {
             )}
           </div>
         </MenuLink>
-        <MenuLink
-          href={`${baseUrl}governance`}
-          className={
-            router.pathname == "/wallets/[wallet]/governance"
-              ? "text-white"
-              : ""
-          }
-        >
-          <Scale className="h-4 w-4" />
-          Governance
-        </MenuLink>
         <MenuLink
           href={`${baseUrl}chat`}
           className={

src/components/common/overall-layout/menus/wallets.tsx

@@ -3,16 +3,51 @@ import usePendingTransactions from "@/hooks/usePendingTransactions";
 import useUser from "@/hooks/useUser";
 import useUserWallets from "@/hooks/useUserWallets";
 import { Wallet } from "@prisma/client";
-import { Plus, Wallet2 } from "lucide-react";
+import { Plus, Wallet2, House, Sparkle, Scale } from "lucide-react";
 import MenuLink from "./menu-link";
+import { useRouter } from "next/router";
 
 export default function MenuWallets() {
   const { user } = useUser();
   const { wallets } = useUserWallets();
   const isLoggedIn = user !== undefined && user !== null;
+  const router = useRouter();
+  const baseUrl = `/wallets/${router.query.wallet as string | undefined}/`;
 
   return (
     <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
+      <MenuLink
+        href={`/`}
+        className={router.pathname == "/" ? "text-white" : ""}
+      >
+        <House className="h-4 w-4" />
+        <div className="flex items-center gap-2">Home</div>
+      </MenuLink>
+      <MenuLink
+        href={
+          router.pathname.startsWith("/wallets/[wallet]")
+            ? `${baseUrl}governance`
+            : "/governance"
+        }
+        className={
+          router.pathname.includes('governance') ? "text-white" : ""
+        }
+      >
+        <Scale className="h-4 w-4" />
+        Governance
+      </MenuLink>
+      <MenuLink
+        href={`/features`}
+        className={router.pathname == "/features" ? "text-white" : ""}
+      >
+        <Sparkle className="h-4 w-4" />
+        <div className="flex items-center gap-2">Features</div>
+      </MenuLink>
+
+      <br />
+
+      {isLoggedIn && (<p>Multi-Sig Wallets:</p>)}
+
       {wallets &&
         wallets
           .sort((a, b) =>
@@ -29,21 +64,32 @@ export default function MenuWallets() {
           New Wallet
         </MenuLink>
       )}
+
+      <br />
     </nav>
   );
-}
 
-function WalletNavLink({ wallet }: { wallet: Wallet }) {
-  const { transactions } = usePendingTransactions({ walletId: wallet.id });
-  return (
-    <MenuLink href={`/wallets/${wallet.id}`}>
-      <Wallet2 className="h-4 w-4" />
-      {wallet.name}{wallet.isArchived && " (Archived)"}
-      {transactions && transactions.length > 0 && (
-        <Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
-          {transactions.length}
-        </Badge>
-      )}
-    </MenuLink>
-  );
+  function WalletNavLink({ wallet }: { wallet: Wallet }) {
+    const { transactions } = usePendingTransactions({ walletId: wallet.id });
+    return (
+      <MenuLink
+        href={`/wallets/${wallet.id}`}
+        className={
+          router.pathname.startsWith("/wallets/[wallet]") &&
+          router.query.wallet == wallet.id
+            ? "text-white hover:text-gray-500"
+            : ""
+        }
+      >
+        <Wallet2 className="h-4 w-4" />
+        {wallet.name}
+        {wallet.isArchived && " (Archived)"}
+        {transactions && transactions.length > 0 && (
+          <Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+            {transactions.length}
+          </Badge>
+        )}
+      </MenuLink>
+    );
+  }
 }

src/components/common/overall-layout/pagination.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { ChevronLeft, ChevronRight, ArrowUp, ArrowDown } from "lucide-react";
+
+interface PaginationProps {
+  currentPage: number;
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>; // ✅ Explicitly defined
+  pageSize: number;
+  setPageSize: (size: number) => void;
+  order: "asc" | "desc";
+  setOrder: (order: "asc" | "desc") => void;
+  defaultPageSize?: number;
+  maxPageSize?: number;
+  stepSize?: number;
+  onLastPage: boolean;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  setCurrentPage,
+  pageSize,
+  setPageSize,
+  order,
+  setOrder,
+  defaultPageSize = 25,
+  maxPageSize = 100,
+  stepSize = 25,
+  onLastPage,
+}) => {
+  return (
+    <div className="flex w-full items-center justify-between rounded-md border-x border-gray-400 p-4 shadow-md">
+      {/* Sorting Toggle */}
+      <Button
+        onClick={() => setOrder(order === "asc" ? "desc" : "asc")}
+        className="flex items-center gap-2 bg-gray-800 hover:bg-gray-700"
+      >
+        {order === "asc" ? (
+          <ArrowUp className="h-5 w-5" />
+        ) : (
+          <ArrowDown className="h-5 w-5" />
+        )}
+        {order === "asc" ? "Ascending" : "Descending"}
+      </Button>
+
+      {/* Page Size Selector */}
+      <select
+        className="rounded border bg-gray-900 p-2 text-white"
+        value={pageSize}
+        onChange={(e) => {
+          setPageSize(Number(e.target.value));
+          setCurrentPage(1); // Reset to first page when page size changes
+        }}
+      >
+        {Array.from(
+          { length: maxPageSize / stepSize },
+          (_, i) => (i + 1) * stepSize,
+        )
+          .filter((size) => size <= maxPageSize)
+          .map((size) => (
+            <option key={size} value={size}>
+              {size} per page
+            </option>
+          ))}
+      </select>
+
+      {/* Pagination Controls */}
+      <div className="flex items-center gap-4">
+        <Button
+          onClick={() => setCurrentPage((prev: number) => Math.max(prev - 1, 1))} // ✅ Explicitly typed
+          disabled={currentPage === 1}
+          className={`flex items-center gap-2 ${
+            currentPage === 1 ? "cursor-not-allowed opacity-50" : ""
+          }`}
+        >
+          <ChevronLeft className="h-5 w-5" /> Previous
+        </Button>
+
+        <span className="text-white">Page {currentPage}</span>
+
+        <Button
+          onClick={() => setCurrentPage((prev: number) => prev + 1)} // ✅ Explicitly typed
+          disabled={onLastPage}
+          className={`flex items-center gap-2 ${
+            onLastPage ? "cursor-not-allowed opacity-50" : ""
+          }`}
+        >
+          Next <ChevronRight className="h-5 w-5" />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;