Feature: Updated delegation process & more

apps/mesh-cloud/src/components/layouts/header/index.tsx

@@ -1,11 +1,16 @@
+import { Logo, SidanLogo } from "@/components/layouts/logo";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
+import { MessagePopup } from "@/components/ui/popup";
 import { useValidateStaking } from "@/hooks/useValidateStaking";
 import { CardanoWallet } from "@meshsdk/react";
 import { CheckCircledIcon, CrossCircledIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
 import Nav from "./nav";
 
 export default function Header() {
+  const [popup, setPopup] = useState<"" | "staking" | "drep">("");
+
   const {
     rewardAddress,
     isStaked,
@@ -17,6 +22,39 @@ export default function Header() {
   return (
     <header className="sticky top-0 z-50 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
       <Nav />
+      {popup == "staking" && (
+        <MessagePopup
+          title={"Please delegate your stake to SIDAN Lab pool to continue"}
+          onAction1={() => {
+            stakeToPool();
+            setPopup("");
+          }}
+          action1Text={"Stake"}
+          action1Icon={<SidanLogo size={28} />}
+          onClose={() => setPopup("")}
+        />
+      )}
+
+      {popup == "drep" && (
+        <MessagePopup
+          title={
+            "Please delegate your votes to MeshJS or SIDAN Lab DRep to continue"
+          }
+          onAction1={() => {
+            delegateDRep("mesh");
+            setPopup("");
+          }}
+          action1Text={"Mesh"}
+          action1Icon={<Logo fill={"black"} size={28} />}
+          onAction2={() => {
+            delegateDRep("sidan");
+            setPopup("");
+          }}
+          action2Text={"SIDAN"}
+          action2Icon={<SidanLogo size={28} />}
+          onClose={() => setPopup("")}
+        />
+      )}
       <div className="flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4">
         <form className="ml-auto flex-1 sm:flex-initial">
           <div className="relative flex items-center gap-4">
@@ -31,13 +69,13 @@ export default function Header() {
               <>
                 {isStaked ? (
                   <Label className="flex items-center gap-2">
-                    <CheckCircledIcon className="h-6 w-6" />
+                    {isStaked && <SidanLogo size={24} />}
                     <p>Staked</p>
                   </Label>
                 ) : (
                   <Button
                     type="button"
-                    onClick={stakeToPool}
+                    onClick={() => setPopup("staking")}
                     variant={"ghost"}
                     className="flex items-center gap-2"
                   >
@@ -48,13 +86,17 @@ export default function Header() {
 
                 {isDRepDelegated ? (
                   <Label className="flex items-center gap-2">
-                    <CheckCircledIcon className="h-6 w-6" />
+                    {isDRepDelegated == "mesh" ? (
+                      <Logo fill={"black"} size={24} />
+                    ) : (
+                      <SidanLogo size={24} />
+                    )}
                     Delegated
                   </Label>
                 ) : (
                   <Button
                     type="button"
-                    onClick={delegateDRep}
+                    onClick={() => setPopup("drep")}
                     variant={"ghost"}
                     className="flex items-center gap-2"
                   >

apps/mesh-cloud/src/components/layouts/header/nav.tsx

@@ -1,3 +1,4 @@
+import { Logo } from "@/components/layouts/logo";
 import { NAV } from "@/data/nav";
 import Link from "next/link";
 
@@ -24,19 +25,6 @@ export default function Nav() {
   );
 }
 
-function Logo() {
-  return (
-    <svg
-      className="h-10 w-10"
-      enableBackground="new 0 0 300 200"
-      viewBox="0 0 300 200"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="white"
-    >
-      <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>
-  );
-}
 // if selected
 {
   /* <Link

apps/mesh-cloud/src/components/layouts/logo.tsx

@@ -0,0 +1,31 @@
+export function Logo({
+  fill = "white",
+  size = 40,
+}: {
+  fill?: string;
+  size?: number;
+}) {
+  return (
+    <svg
+      enableBackground="new 0 0 300 200"
+      viewBox="0 0 300 200"
+      xmlns="http://www.w3.org/2000/svg"
+      fill={fill}
+      width={size}
+      height={size}
+    >
+      <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>
+  );
+}
+
+export function SidanLogo({ size = 40 }: { size?: number }) {
+  return (
+    <img
+      src="/logo-sidan/sidan.png"
+      alt="Sidan Logo"
+      width={size}
+      height={size}
+    />
+  );
+}

apps/mesh-cloud/src/components/ui/overlay.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+import * as React from "react";
+
+export const Overlay = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "fixed left-0 top-0 z-[50] flex h-screen w-screen items-center justify-center bg-transparent backdrop-blur-sm",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+));
+
+export interface OverlayInteractiveProps {
+  onClick?: () => void;
+}
+
+export const OverlayInteractive = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, onClick }, ref) => (
+  <div
+    ref={ref}
+    onClick={onClick}
+    className={cn("absolute left-0 top-0 z-[-1] h-full w-full", className)}
+  />
+));

apps/mesh-cloud/src/components/ui/popup.tsx

@@ -0,0 +1,66 @@
+import { Logo } from "@/components/layouts/logo";
+import { Button } from "@/components/ui/button";
+import { Overlay, OverlayInteractive } from "@/components/ui/overlay";
+import { Cross1Icon } from "@radix-ui/react-icons";
+
+export interface MessagePopupProps {
+  title: string;
+  content?: string;
+  onClose: () => void;
+  onAction1?: () => void;
+  action1Icon?: React.ReactNode;
+  action1Text?: string;
+  onAction2?: () => void;
+  action2Icon?: React.ReactNode;
+  action2Text?: string;
+}
+
+export const MessagePopup = ({
+  title,
+  content,
+  onClose,
+  onAction1,
+  action1Icon,
+  action1Text = "Confirm",
+  onAction2,
+  action2Icon,
+  action2Text,
+}: MessagePopupProps) => {
+  if (!onAction1) {
+    onAction1 = () => onClose();
+  }
+
+  return (
+    <Overlay>
+      <OverlayInteractive />
+      <div className="text-navigation-1 border-gradient-primary relative flex flex-col gap-8 rounded-sm border-[2px] bg-accent px-12 py-6">
+        <div className="flex w-full items-center justify-between gap-2">
+          <Logo />
+
+          <button className="btn h-6 w-6" onClick={onClose}>
+            <Cross1Icon width={24} height={24} />
+          </button>
+        </div>
+
+        <div className="flex flex-col gap-6">
+          <div className="text-title-1 text-center">{title}</div>
+          <div className="text-body-2 text-center">{content}</div>
+        </div>
+        <div className="flex justify-center gap-4">
+          {onAction1 && action1Text && (
+            <Button onClick={onAction1} className="flex gap-1">
+              {action1Icon}
+              {action1Text}
+            </Button>
+          )}
+          {onAction2 && action2Text && (
+            <Button onClick={onAction2} className="flex gap-1">
+              {action2Icon}
+              {action2Text}
+            </Button>
+          )}
+        </div>
+      </div>
+    </Overlay>
+  );
+};