feat(packages): wallet menu component (#46)

* feat(packages): wallet menu component, icon components and util components

Author: jeremy-babylonlabs

packages/babylon-core-ui/src/components/Button/WalletDisconnectButton.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from "react";
+import { Button, type ButtonProps } from "./Button";
+import { twJoin } from "tailwind-merge";
+
+export interface WalletDisconnectButtonProps extends Omit<ButtonProps, "color" | "variant"> {
+  className?: string;
+}
+
+export const WalletDisconnectButton = forwardRef<HTMLButtonElement, WalletDisconnectButtonProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Button
+        {...props}
+        ref={ref}
+        variant="contained"
+        className={twJoin(
+          "!bg-error-main text-white font-medium !text-sm hover:!bg-error-main/90 transition-colors",
+          className
+        )}
+      />
+    );
+  }
+);
+
+WalletDisconnectButton.displayName = "WalletDisconnectButton"; 

packages/babylon-core-ui/src/components/Button/index.tsx

@@ -1,2 +1,3 @@
 export * from "./Button";
 export * from "./IconButton";
+export * from "./WalletDisconnectButton";

packages/babylon-core-ui/src/components/Copy/Copy.tsx

@@ -0,0 +1,91 @@
+import React, { useId } from 'react';
+import { useCopy, UseCopyOptions } from '../../hooks/useCopy';
+import { twMerge } from 'tailwind-merge';
+
+export interface CopyProps {
+  children: React.ReactNode;
+  value: string;
+  showIcon?: boolean;
+  className?: string;
+  onCopy?: (value: string) => void;
+  // External control props
+  isCopied?: boolean;
+  copiedText?: string;
+  // useCopy hook options
+  timeout?: number;
+}
+
+export const Copy: React.FC<CopyProps> = ({
+  children,
+  value,
+  className,
+  onCopy,
+  isCopied: externalIsCopied,
+  copiedText: externalCopiedText,
+  timeout = 2000,
+}) => {
+  const uniqueId = useId();
+
+  const hookOptions: UseCopyOptions = {
+    copiedText: externalCopiedText,
+    timeout,
+  };
+
+  const {
+    isCopied: hookIsCopied,
+    copiedText: hookCopiedText,
+    copyToClipboard,
+  } = useCopy(hookOptions);
+
+  const isExternallyControlled = externalIsCopied !== undefined;
+  const isCopied = isExternallyControlled
+    ? externalIsCopied
+    : hookIsCopied(uniqueId);
+  const copiedText = isExternallyControlled
+    ? externalCopiedText || 'Copied ✓'
+    : hookCopiedText(uniqueId);
+
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+
+    if (isExternallyControlled && onCopy) {
+      onCopy(value);
+    } else {
+      copyToClipboard(uniqueId, value);
+    }
+  };
+
+  return (
+    <div
+      className={twMerge(
+        'inline-flex items-center cursor-pointer hover:opacity-100 transition-opacity duration-200',
+        className,
+      )}
+      onClick={handleClick}
+    >
+      <div className='relative'>
+        {/* Original children */}
+        <div
+          className={twMerge(
+            'transition-opacity duration-300 ease-in-out',
+            isCopied && 'opacity-0',
+          )}
+        >
+          {children}
+        </div>
+
+        {/* Copied text overlay */}
+        {isCopied && (
+          <div
+            className={twMerge(
+              'absolute inset-0 flex items-center transition-opacity duration-300 ease-in-out text-green-600',
+              'opacity-100',
+            )}
+          >
+            {copiedText}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

packages/babylon-core-ui/src/components/Copy/index.ts

@@ -0,0 +1 @@
+export { Copy } from './Copy';

packages/babylon-core-ui/src/components/Dialog/MobileDialog.tsx

@@ -4,6 +4,7 @@ import { twJoin } from "tailwind-merge";
 import { Portal } from "@/components/Portal";
 import { useModalManager } from "@/hooks/useModalManager";
 import { Backdrop } from "./components/Backdrop";
+import { CloseIcon } from "@/components/Icons";
 
 export interface MobileDialogProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   open?: boolean;
@@ -18,12 +19,23 @@ export const MobileDialog = ({ children, open = false, className, onClose, ...re
       <div
         {...restProps}
         className={twJoin(
-          "bbn-dialog-mobile",
+          "bbn-dialog-mobile relative",
           open ? "animate-mobile-modal-in" : "animate-mobile-modal-out",
           className,
         )}
         onAnimationEnd={unmount}
       >
+        {/* Close button */}
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="absolute top-4 left-4 z-10 p-1.5 rounded-full bg-surface-tertiary hover:bg-surface-quaternary transition-colors"
+            aria-label="Close"
+          >
+            <CloseIcon size={14} variant="accent-primary" />
+          </button>
+        )}
+        
         {children}
       </div>
 

packages/babylon-core-ui/src/components/Dialog/index.css

@@ -22,6 +22,6 @@
   }
 
   &-mobile {
-    @apply bg-surface border-secondary-strokeLight fixed inset-x-0 bottom-0 z-50 flex max-h-full flex-col rounded-t-3xl border px-4 pb-4 pt-6;
+    @apply bg-surface border-secondary-strokeLight fixed inset-x-0 bottom-0 z-50 flex max-h-full flex-col rounded-t-3xl border px-4 pb-4 pt-12;
   }
 }

packages/babylon-core-ui/src/components/DisplayHash/DisplayHash.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Text } from '../Text';
+import { trim } from '../../utils/trim';
+import { twJoin } from 'tailwind-merge';
+
+interface DisplayHashProps {
+  value: string;
+  symbols?: number;
+  size?: React.ComponentProps<typeof Text>['variant'];
+  className?: string;
+}
+
+export const DisplayHash: React.FC<DisplayHashProps> = ({
+  value,
+  symbols = 8,
+  size = 'body2',
+  className,
+}) => {
+  if (!value) {
+    return null;
+  }
+
+  return (
+    <Text variant={size} className={twJoin('text-accent-primary', className)}>
+      <span>{trim(value, symbols) ?? value}</span>
+    </Text>
+  );
+};

packages/babylon-core-ui/src/components/DisplayHash/index.ts

@@ -0,0 +1 @@
+export { DisplayHash } from './DisplayHash';

packages/babylon-core-ui/src/components/Icons/ThemedIcon.tsx

@@ -0,0 +1,59 @@
+import { twJoin } from "tailwind-merge";
+
+interface ThemedIconProps {
+  children: React.ReactNode;
+  className?: string;
+  size?: number;
+  variant?: "default" | "primary" | "secondary" | "error" | "success" | "accent-primary" | "accent-secondary";
+  background?: boolean;
+  rounded?: boolean;
+}
+
+export const ThemedIcon = ({
+  children,
+  className = "",
+  size = 40,
+  variant = "default",
+  background = false,
+  rounded = false,
+}: ThemedIconProps) => {
+  const variants = {
+    default: "text-accent-secondary",
+    primary: "text-primary-light",
+    secondary: "text-accent-secondary",
+    error: "text-error-main",
+    success: "text-success-main",
+    "accent-primary": "text-accent-primary",
+    "accent-secondary": "text-accent-secondary",
+  };
+
+  const backgroundStyles = {
+    default: "bg-accent-secondary/10",
+    primary: "bg-primary-light/10 dark:bg-[#47484A]",
+    secondary: "bg-accent-secondary/10",
+    error: "bg-error-main/10",
+    success: "bg-success-main/10",
+    "accent-primary": "bg-accent-primary/10",
+    "accent-secondary": "bg-accent-secondary/10",
+  };
+
+  return (
+    <div
+      className={twJoin(
+        "flex items-center justify-center",
+        background && backgroundStyles[variant],
+        rounded && "rounded-full",
+        background
+          ? "[&_svg]:w-4 [&_svg]:h-4"
+          : "[&_svg]:w-full [&_svg]:h-full",
+        "[&_svg_path]:fill-current",
+        background && "dark:[&_svg_path]:fill-white",
+        variants[variant],
+        className,
+      )}
+      style={{ width: size, height: size }}
+    >
+      {children}
+    </div>
+  );
+};

packages/babylon-core-ui/src/components/Icons/common/CloseIcon.tsx

@@ -0,0 +1,26 @@
+import { IconProps, iconColorVariants } from "../index";
+import { twJoin } from "tailwind-merge";
+
+export const CloseIcon = ({ 
+  className = "", 
+  size = 14, 
+  variant = "default",
+  color
+}: IconProps) => {
+  const colorClass = color || iconColorVariants[variant];
+  
+  return (
+    <svg
+      style={{ width: size, height: size }}
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={twJoin("transition-opacity duration-200", colorClass, className)}
+    >
+      <path
+        d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};