feat: continue with delegation details

package.json

@@ -19,6 +19,7 @@
     "@cosmjs/cosmwasm-stargate": "^0.31.3",
     "@cosmjs/proto-signing": "^0.32.2",
     "@cosmjs/stargate": "^0.32.2",
+    "@mui/base": "^5.0.0-beta.37",
     "bignumber.js": "^9.1.2",
     "cosmjs-types": "^0.9.0",
     "next": "14.1.0",

src/features/core/components/base.tsx

@@ -1,5 +1,8 @@
+import { ClickAwayListener } from "@mui/base/ClickAwayListener";
+import { Unstable_Popup as BasePopup } from "@mui/base/Unstable_Popup";
 import Link from "next/link";
-import type { PropsWithChildren } from "react";
+import type { FC, PropsWithChildren, ReactNode } from "react";
+import { useState } from "react";
 import { toast } from "react-toastify";
 
 import { clipboard } from "@/features/staking/lib/core/icons";
@@ -141,3 +144,63 @@ export const Button = ({ className, variant, ...props }: ButtonProps) => {
     />
   );
 };
+
+type FloatingDropdownProps = {
+  children: ReactNode;
+  className?: string;
+  id: string;
+  isOpen: boolean;
+  modalClass?: string;
+  offset?: number;
+  placement?: "bottom-end" | "bottom-start" | "bottom" | "right" | "top";
+  setIsOpen: (isOpen: boolean) => void;
+  Trigger: FC<{ id?: string }>;
+};
+
+// @TODO: Implement for settings
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const FloatingDropdown = ({
+  children,
+  className,
+  id,
+  isOpen,
+  modalClass,
+  offset,
+  placement,
+  setIsOpen,
+  Trigger,
+}: FloatingDropdownProps) => {
+  const [anchor, setAnchor] = useState<HTMLButtonElement | null>(null);
+
+  return (
+    <div className={[className].join(" ")}>
+      <button
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsOpen?.(!isOpen);
+        }}
+        ref={setAnchor}
+      >
+        <Trigger id={id} />
+      </button>
+      <ClickAwayListener
+        onClickAway={() => {
+          if (isOpen) {
+            setIsOpen?.(false);
+          }
+        }}
+      >
+        <BasePopup
+          anchor={anchor}
+          className={[modalClass].join(" ")}
+          offset={offset}
+          open={isOpen}
+          placement={placement}
+          withTransition
+        >
+          {children}
+        </BasePopup>
+      </ClickAwayListener>
+    </div>
+  );
+};