Merge pull request #108 from MeshJS/add-wallet-flow-and-glass-morphism

Add wallet flow and glass morphism

Author: QSchlegel

package-lock.json

@@ -62,7 +62,7 @@ export default function Button({
           : undefined
       }
     >
-      {loading && <Loader className="h-4 w-4 animate-spin" />}
+      {loading && <Loader className="h-4 w-4 animate-spin mr-2" />}
       {children}
       {hold &&
         holding &&

src/components/common/button.tsx

@@ -15,13 +15,18 @@ import { getServerSession } from "next-auth";
 import MenuWallets from "@/components/common/overall-layout/menus/wallets";
 import MenuWallet from "@/components/common/overall-layout/menus/multisig-wallet";
 import WalletDropDown from "@/components/common/overall-layout/wallet-drop-down";
-import UserDropDown from "@/components/common/overall-layout/user-drop-down";
-import DialogReport from "@/components/common/overall-layout/dialog-report";
-import WalletDataLoader from "@/components/common/overall-layout/wallet-data-loader";
+import {
+  WalletDataLoaderWrapper,
+  DialogReportWrapper,
+  UserDropDownWrapper,
+} from "@/components/common/overall-layout/mobile-wrappers";
+import LogoutWrapper from "@/components/common/overall-layout/mobile-wrappers/logout-wrapper";
 import { PageHomepage } from "@/components/pages/homepage";
 import Logo from "@/components/common/overall-layout/logo";
 import ConnectWallet from "@/components/common/cardano-objects/connect-wallet";
 import Loading from "@/components/common/overall-layout/loading";
+import { MobileNavigation } from "@/components/ui/mobile-navigation";
+import { MobileActionsMenu } from "@/components/ui/mobile-actions-menu";
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -90,19 +95,19 @@ export default function RootLayout({
   const isLoggedIn = !!user;
 
   return (
-    <div className="grid h-screen w-full overflow-hidden md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
+    <div className="grid h-screen w-screen overflow-hidden md:grid-cols-[240px_1fr] lg:grid-cols-[260px_1fr]">
       {isLoading && <Loading />}
 
       {/* Sidebar for larger screens */}
-      <aside className="hidden border-r bg-muted/40 md:block">
-        <div className="flex h-full max-h-screen flex-col gap-2">
-          <header className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
-            <Link href="/" className="flex items-center gap-2 font-semibold">
+      <aside className="hidden border-r border-gray-200/30 dark:border-white/[0.03] bg-muted/40 md:block">
+        <div className="flex h-full max-h-screen flex-col">
+          <header className="flex h-14 items-center border-b border-gray-200/30 dark:border-white/[0.03] px-4 lg:h-16 lg:px-6" id="logo-header" data-header="sidebar">
+            <Link href="/" className="flex items-center gap-3">
               <Logo />
-              <span>Multi-Sig Platform</span>
+              <span className="font-medium text-sm md:text-base lg:text-lg tracking-[-0.01em] select-none">Multi-Sig Platform</span>
             </Link>
           </header>
-          <nav className="flex-1">
+          <nav className="flex-1 pt-2">
             <MenuWallets />
             {isWalletPath && <MenuWallet />}
           </nav>
@@ -112,11 +117,21 @@ export default function RootLayout({
 
       {/* Main content area */}
       <div className="flex h-screen flex-col">
-        <header className="pointer-events-auto relative z-10 border-b bg-muted/40 px-4 lg:px-6">
-          <div className="flex h-14 items-center gap-4 lg:h-[60px]">
-            {/* Wallet selection + breadcrumb row */}
+        <header className="pointer-events-auto relative z-10 border-b border-gray-200/30 dark:border-white/[0.03] bg-muted/40 px-4 lg:px-6" data-header="main">
+          <div className="flex h-14 items-center gap-4 lg:h-16">
+            {/* Mobile menu button */}
+            <MobileNavigation isWalletPath={isWalletPath} />
+            
+            {/* Wallet selection on mobile - centered */}
+            {isLoggedIn && (
+              <div className="flex-1 flex justify-center md:hidden">
+                <WalletDropDown />
+              </div>
+            )}
+            
+            {/* Wallet selection + breadcrumb row on desktop */}
             {isLoggedIn && (
-              <div className="border-t border-border">
+              <div className="hidden md:block">
                 <div className="mx-1 w-full py-2">
                   <nav className="flex items-center">
                     <WalletDropDown />
@@ -159,16 +174,27 @@ export default function RootLayout({
                 <ConnectWallet />
               ) : (
                 <>
-                  <WalletDataLoader />
-                  <DialogReport />
-                  <UserDropDown />
+                  {/* Desktop buttons */}
+                  <div className="hidden md:flex items-center space-x-2">
+                    <WalletDataLoaderWrapper mode="button" />
+                    <DialogReportWrapper mode="button" />
+                    <UserDropDownWrapper mode="button" />
+                  </div>
+                  {/* Mobile actions menu */}
+                  <MobileActionsMenu>
+                    <WalletDataLoaderWrapper mode="menu-item" />
+                    <DialogReportWrapper mode="menu-item" />
+                    <UserDropDownWrapper mode="menu-item" />
+                    <div className="h-px bg-border -mx-2 my-1" />
+                    <LogoutWrapper mode="menu-item" />
+                  </MobileActionsMenu>
                 </>
               )}
             </div>
           </div>
         </header>
 
-        <main className="relative flex flex-1 flex-col gap-4 overflow-y-auto p-4 md:p-8">
+        <main className="relative flex flex-1 flex-col gap-4 overflow-y-auto overflow-x-hidden p-4 md:p-8">
           {pageIsPublic || userAddress ? children : <PageHomepage />}
         </main>
       </div>

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

@@ -5,7 +5,7 @@ export default function Logo() {
       enableBackground="new 0 0 300 200"
       viewBox="0 0 300 200"
       xmlns="http://www.w3.org/2000/svg"
-      fill="white"
+      fill="currentColor"
     >
       <path d="m289 127-45-60-45-60c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-37 49.3c-2 2.7-6 2.7-8 0l-37-49.3c-.9-1.3-2.4-2-4-2s-3.1.7-4 2l-45 60-45 60c-1.3 1.8-1.3 4.2 0 6l45 60c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l37-49.3c2-2.7 6-2.7 8 0l37 49.3c.9 1.3 2.4 2 4 2s3.1-.7 4-2l45-60c1.3-1.8 1.3-4.2 0-6zm-90-103.3 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-90 0 32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0l-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0zm-53 152.6-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0zm90 0-32.5-43.3c-1.3-1.8-1.3-4.2 0-6l32.5-43.3c2-2.7 6-2.7 8 0l32.5 43.3c1.3 1.8 1.3 4.2 0 6l-32.5 43.3c-2 2.7-6 2.7-8 0z" />
     </svg>

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

@@ -12,7 +12,7 @@ export default function MenuLink({
   return (
     <Link
       href={href}
-      className={`flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary ${className && className}`}
+      className={`flex items-center gap-3 rounded-md px-3 py-2 text-muted-foreground transition-all duration-200 hover:bg-gray-100/50 dark:hover:bg-white/5 hover:text-foreground ${className && className === "text-white" ? "!bg-gray-900 dark:!bg-white/10 !text-white dark:!text-white !font-medium" : className}`}
     >
       {children}
     </Link>

src/components/common/overall-layout/menus/menu-link.tsx

@@ -9,35 +9,38 @@ export default function MenuWallets() {
   const baseUrl = `/wallets/${router.query.wallet as string | undefined}/`;
 
   return (
-    <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
-      <br />
+    <nav className="grid items-start px-2 text-sm font-medium lg:px-4 space-y-1">
       <MenuLink
         href={`/`}
-        className={router.pathname == "/" ? "text-white" : ""}
+        className={
+          router.pathname == "/" || 
+          router.pathname.startsWith("/wallets") && !router.pathname.startsWith("/wallets/[wallet]")
+            ? "text-white" 
+            : ""
+        }
       >
-        <House className="h-6 w-6" />
+        <House className="h-5 w-5" />
         <div className="flex items-center gap-2">Home</div>
       </MenuLink>
 
       <MenuLink
         href={`/features`}
         className={router.pathname == "/features" ? "text-white" : ""}
       >
-        <Sparkle className="h-6 w-6" />
+        <Sparkle className="h-5 w-5" />
         <div className="flex items-center gap-2">Features</div>
       </MenuLink>
 
       <MenuLink
         href={`/api-docs`}
         className={router.pathname == "/api-docs" ? "text-white" : ""}
       >
-        <FolderCode className="h-6 w-6" />
+        <FolderCode className="h-5 w-5" />
         <div className="flex items-center gap-2">API Docs</div>
       </MenuLink>
-      <br />
 
       {wallets && (
-        <div className="my-1">
+        <div className="mt-6 pt-4 border-t border-gray-200/30 dark:border-white/[0.03]">
           <MenuLink
             href={`${baseUrl}`}
             className={
@@ -62,7 +65,7 @@ export default function MenuWallets() {
         }
         className={router.pathname.includes("governance") ? "text-white" : ""}
       >
-        <Landmark className="h-6 w-6" />
+        <Landmark className="h-5 w-5" />
         Governance
       </MenuLink>
     </nav>

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

@@ -0,0 +1,170 @@
+import axios from "axios";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { MessageSquare } from "lucide-react";
+import { useState } from "react";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useToast } from "@/hooks/use-toast";
+
+interface DialogReportWrapperProps {
+  mode: "button" | "menu-item";
+  onAction?: () => void;
+}
+
+export default function DialogReportWrapper({ 
+  mode, 
+  onAction 
+}: DialogReportWrapperProps) {
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [sent, setSent] = useState(false);
+  const [type, setType] = useState<"bug" | "enhancement">("bug");
+  const [open, setOpen] = useState(false);
+  const { toast } = useToast();
+  const [loading, setLoading] = useState<boolean>(false);
+
+  async function handleReport() {
+    setLoading(true);
+    await axios.post("/api/github/create-issue", { title, body, type });
+    setSent(true);
+    toast({
+      title: "Ticket created",
+      description: "Your report has been submitted.",
+      duration: 5000,
+    });
+    setLoading(false);
+    resetForm();
+    setOpen(false);
+    
+    // Call the optional callback after action completes
+    if (onAction) {
+      onAction();
+    }
+  }
+
+  function resetForm() {
+    setSent(false);
+    setTitle("");
+    setBody("");
+    setType("bug");
+  }
+
+  function handleOpenChange(newOpen: boolean) {
+    setOpen(newOpen);
+    if (newOpen) {
+      resetForm();
+    }
+  }
+
+  const dialogContent = (
+    <DialogContent className="sm:max-w-[425px]">
+      <DialogHeader>
+        <DialogTitle>Create a ticket</DialogTitle>
+        <DialogDescription>
+          Submit a ticket to report a problem or feature request.
+        </DialogDescription>
+      </DialogHeader>
+
+      {sent ? (
+        <p>Your report has been submitted.</p>
+      ) : (
+        <>
+          <div className="grid gap-4 py-4">
+            <div className="grid w-full max-w-sm items-center gap-1.5">
+              <Label>Title</Label>
+              <Input
+                placeholder="Title"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+              />
+            </div>
+            <div className="grid w-full gap-1.5">
+              <Label>What do you want to report?</Label>
+              <Textarea
+                placeholder="I am having trouble with... something isn't working... improvements or additions..."
+                rows={6}
+                value={body}
+                onChange={(e) => setBody(e.target.value)}
+              />
+            </div>
+
+            <div className="grid w-full gap-1.5">
+              <Label>Type</Label>
+              <Select
+                value={type}
+                onValueChange={(value) =>
+                  setType(value as "bug" | "enhancement")
+                }
+                defaultValue={"atLeast"}
+              >
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Select report type" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="bug">Bug</SelectItem>
+                    <SelectItem value="enhancement">Enhancement</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              className="px-3 py-2"
+              onClick={() => handleReport()}
+              disabled={loading}
+            >
+              Create Ticket
+            </Button>
+          </DialogFooter>
+        </>
+      )}
+    </DialogContent>
+  );
+
+  if (mode === "button") {
+    return (
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        <DialogTrigger asChild>
+          <Button variant="secondary" size="icon" className="rounded-full">
+            <MessageSquare className="h-5 w-5" />
+            <span className="sr-only">Report</span>
+          </Button>
+        </DialogTrigger>
+        {dialogContent}
+      </Dialog>
+    );
+  }
+
+  // Menu item mode
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogTrigger asChild>
+        <div className="flex items-center gap-2 cursor-pointer">
+          <MessageSquare className="h-4 w-4" />
+          <span>Report Issue</span>
+        </div>
+      </DialogTrigger>
+      {dialogContent}
+    </Dialog>
+  );
+}

src/components/common/overall-layout/mobile-wrappers/dialog-report-wrapper.tsx

@@ -0,0 +1,3 @@
+export { default as WalletDataLoaderWrapper } from './wallet-data-loader-wrapper';
+export { default as DialogReportWrapper } from './dialog-report-wrapper';
+export { default as UserDropDownWrapper } from './user-dropdown-wrapper';