Merge pull request #560 from shawakash/token_ui

feat: adds /token page structure

apps/web/src/app/token/[id]/authority/page.tsx

@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <div>
+      <h1>Page</h1>
+    </div>
+  );
+}

apps/web/src/app/token/[id]/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <>Fuck You</>;
+}

apps/web/src/app/token/[id]/statements/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <>Fuck You</>;
+}

apps/web/src/app/token/[id]/transfer/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <>Fuck You too</>;
+}

apps/web/src/app/token/[id]/update/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <>Fuck You</>;
+}

apps/web/src/app/token/all/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <>Fuck You</>;
+}

apps/web/src/app/token/components/token-layout.tsx

@@ -0,0 +1,224 @@
+"use client";
+
+import { userData } from "@/src/app/friendship/friends/data";
+import React, { useEffect, useState } from "react";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/src/components/ui/resizable";
+import { cn } from "@/src/lib/utils";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/src/components/ui/breadcrumb";
+
+import { LinksProps, Sidenav } from "@/src/components/sidebar";
+import { TooltipProvider } from "@/src/components/ui/tooltip";
+import { Separator } from "@/src/components/ui/separator";
+import { TokenType } from "@paybox/common";
+import { usePathname, useRouter } from "next/navigation";
+import { useRecoilValue, useSetRecoilState } from "recoil";
+import { clientAtom, tokensAtom } from "@paybox/recoil";
+import { toast } from "sonner";
+import { ScrollArea } from "@/src/components/ui/scroll-area";
+import { TokensSwitcher } from "./token-switcher";
+import { clientNavLinks } from "../../account/components/navLinks";
+import { tokenCommonLinks, tokenNavLinks } from "./token-nav-links";
+
+interface TokenLayoutProps {
+  defaultLayout: number[] | undefined;
+  defaultCollapsed?: boolean;
+  navCollapsedSize: number;
+  children: React.ReactNode;
+  tokens: TokenType[];
+}
+
+export function TokensLayout({
+  defaultLayout = [100, 480],
+  defaultCollapsed = true,
+  navCollapsedSize,
+  children,
+  tokens,
+}: TokenLayoutProps) {
+  const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);
+  const [selectedUser, setSelectedUser] = React.useState(userData[0]);
+  const [isMobile, setIsMobile] = useState(false);
+
+  const [selectedToken, setSelectedToken] = React.useState<string>();
+
+  let setTokens = useSetRecoilState(tokensAtom);
+
+  const client = useRecoilValue(clientAtom);
+
+  const path = usePathname();
+  const router = useRouter();
+  console.log("path", path.split("/").at(-1));
+  const [selectedTab, setSelectedTab] = React.useState<string>();
+
+  useEffect(() => {
+    const checkScreenWidth = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    checkScreenWidth();
+    if (tokens.length === 0) {
+      toast.info("No token found, please create one");
+      return router.push("/token/create");
+    }
+    window.addEventListener("resize", checkScreenWidth);
+
+    // loadAccounts()
+    setTokens(tokens);
+
+    return () => {
+      window.removeEventListener("resize", checkScreenWidth);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (tokens.length === 0) {
+      toast.info("No token found, please create one");
+      return router.push("/token/create");
+    }
+    setTokens(tokens);
+  }, [tokens]);
+
+  useEffect(() => {
+    setSelectedTab(path.split("/").at(-1));
+  }, [path]);
+
+  return (
+    <TooltipProvider delayDuration={0}>
+      <ResizablePanelGroup
+        direction="horizontal"
+        onLayout={(sizes: number[]) => {
+          document.cookie = `react-resizable-panels:layout=${JSON.stringify(
+            sizes,
+          )}`;
+        }}
+        className="h-full max-h-[800px] items-stretch"
+      ></ResizablePanelGroup>
+      <ResizablePanelGroup
+        direction="horizontal"
+        onLayout={(sizes: number[]) => {
+          document.cookie = `react-resizable-panels:layout=${JSON.stringify(
+            sizes,
+          )}`;
+        }}
+        className="min-h-fit w-screen rounded-lg border"
+      >
+        <ResizablePanel
+          defaultSize={defaultLayout[0]}
+          collapsedSize={navCollapsedSize}
+          collapsible={true}
+          minSize={isMobile ? 0 : 14}
+          maxSize={isMobile ? 14 : 25}
+          onCollapse={() => {
+            setIsCollapsed(true);
+            document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(
+              true,
+            )}`;
+          }}
+          onExpand={() => {
+            setIsCollapsed(false);
+            document.cookie = `react-resizable-panels:collapsed=${JSON.stringify(
+              false,
+            )}`;
+          }}
+          className={cn(
+            isCollapsed &&
+              " min-w-[50px] md:min-w-[70px] transition-all duration-300 ease-in-out",
+            "flex flex-col h-[93vh]",
+          )}
+        >
+          <div
+            className={cn(
+              "flex h-[52px] items-center justify-center",
+              isCollapsed ? "h-[52px]" : "px-4",
+            )}
+          >
+            <TokensSwitcher
+              isCollapsed={isCollapsed}
+              selectedToken={selectedToken || ""}
+              setSelectedToken={setSelectedToken}
+            />
+          </div>
+          <Separator />
+          <Sidenav
+            isCollapsed={isCollapsed}
+            links={tokenNavLinks(selectedToken || "") as LinksProps[]}
+            selectedTab={selectedTab}
+            setSelectedTab={setSelectedTab}
+          />
+          <Separator />
+          <Sidenav
+            isCollapsed={isCollapsed}
+            links={tokenCommonLinks as LinksProps[]}
+            selectedTab={selectedTab}
+            setSelectedTab={setSelectedTab}
+          />
+          <div className="flex-grow" />
+          <Sidenav
+            isCollapsed={isCollapsed}
+            links={clientNavLinks(client?.firstname)}
+            selectedTab={selectedTab}
+            setSelectedTab={setSelectedTab}
+          />
+        </ResizablePanel>
+        <ResizableHandle withHandle />
+        <ResizablePanel
+          defaultSize={defaultLayout[1]}
+          minSize={30}
+          className="dark:bg-primary-foreground"
+        >
+          <ScrollArea className="h-full rounded-md border">
+            <div className="h-[93.5vh] p-4">
+              <div className="">
+                <Breadcrumb>
+                  <BreadcrumbList key={"list"}>
+                    <BreadcrumbItem key={"home"}>
+                      <BreadcrumbLink href={`/`}>Home</BreadcrumbLink>
+                    </BreadcrumbItem>
+                    {path.split("/").map((item, index) => {
+                      let link = path
+                        .split("/")
+                        .slice(0, index + 1)
+                        .join("/");
+                      if (index + 1 === path.split("/").length) {
+                        return (
+                          <BreadcrumbItem key={link}>
+                            <BreadcrumbPage>
+                              {item.charAt(0).toLocaleUpperCase()}
+                              {item.slice(1)}
+                            </BreadcrumbPage>
+                          </BreadcrumbItem>
+                        );
+                      }
+                      return (
+                        <>
+                          <BreadcrumbItem key={link}>
+                            <BreadcrumbLink href={link}>
+                              {item.charAt(0).toLocaleUpperCase()}
+                              {item.slice(1)}
+                            </BreadcrumbLink>
+                          </BreadcrumbItem>
+                          <BreadcrumbSeparator />
+                        </>
+                      );
+                    })}
+                  </BreadcrumbList>
+                </Breadcrumb>
+              </div>
+              <div>{children}</div>
+            </div>
+          </ScrollArea>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </TooltipProvider>
+  );
+}

apps/web/src/app/token/components/token-nav-links.tsx

@@ -0,0 +1,118 @@
+import {
+  Archive,
+  ArchiveX,
+  Inbox,
+  Send,
+  Trash2,
+  File,
+  Wallet,
+  LayoutDashboard,
+  Lock,
+  VenetianMask,
+  Bitcoin,
+  PencilLine,
+  FilePlus,
+  FilePlus2Icon,
+  GanttChart,
+  Settings,
+  UserRound,
+  UserRoundCog,
+  BookA,
+} from "lucide-react";
+import { LinksProps } from "../../../components/sidebar";
+
+export const tokenCommonLinks = [
+  {
+    id: "all",
+    title: "Manage Tokens",
+    label: "",
+    icon: GanttChart,
+    variant: "ghost",
+    link: "/token/all",
+  },
+  {
+    id: "create",
+    title: "Create Tokens",
+    label: "128",
+    icon: FilePlus2Icon,
+    variant: "ghost",
+    link: "/token/create",
+  },
+  {
+    id: "mint",
+    title: "Mint Tokens",
+    label: "9",
+    icon: FilePlus,
+    variant: "ghost",
+    link: "/token/mint",
+  },
+];
+
+export const tokenNavLinks = (id: string) => {
+  return [
+    {
+      id: "dashboard",
+      title: "Dashboard",
+      label: "128",
+      icon: LayoutDashboard,
+      variant: "ghost",
+      link: `/token/${id}/#`,
+    },
+    {
+      id: "statements",
+      title: "Statements",
+      label: "9",
+      icon: Bitcoin,
+      variant: "ghost",
+      link: `/token/${id}/statements`,
+    },
+    {
+      id: "privatekey",
+      title: "Private-Key",
+      label: "",
+      icon: Lock,
+      variant: "ghost",
+      link: `/token/${id}/privatekey`,
+    },
+    {
+      id: "transfer",
+      title: "Transfer",
+      label: "",
+      icon: Send,
+      variant: "ghost",
+      link: `/token/${id}/transfer`,
+    },
+    {
+      id: "authority",
+      title: "Authority",
+      label: "",
+      icon: Lock,
+      variant: "ghost",
+      link: `/token/${id}/authority`,
+    },
+    // {
+    //   id: "burn",
+    //   title: "Burn",
+    //   label: "",
+    //   icon: ArchiveX,
+    //   variant: "ghost",
+    //   link: `/token/${id}/burn`,
+    // },
+    // {
+    //   id: "freeze",
+    //   title: "Freeze",
+    //   label: "",
+    //   icon: VenetianMask,
+    //   variant: "ghost",
+    //   link: `/token/${id}/freeze`,
+    // },
+    {
+      id: "update",
+      title: "Update",
+      label: "",
+      icon: PencilLine,
+      variant: "ghost",
+      link: `/token/${id}/update`,
+    },
+  ];
+};