feat: signing modal (#294)

Author: jeremy-babylonlabs

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

@@ -0,0 +1,35 @@
+import { Dialog, type DialogProps, MobileDialog } from "./";
+import { useIsMobile } from "@/hooks";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * ResponsiveDialog - Automatically switches between Desktop and Mobile dialogs
+ * based on viewport size.
+ * 
+ * @param props - All standard Dialog props are supported
+ * @param breakpoint - Optional custom breakpoint (default: 640px for sm:)
+ * 
+ * @example
+ * ```tsx
+ * <ResponsiveDialog open={isOpen} onClose={handleClose}>
+ *   <DialogHeader title="My Modal" />
+ *   <DialogBody>Content here</DialogBody>
+ * </ResponsiveDialog>
+ * ```
+ */
+export function ResponsiveDialog({ 
+  className, 
+  breakpoint = 640,
+  ...restProps 
+}: DialogProps & { breakpoint?: number }) {
+  const isMobile = useIsMobile(breakpoint);
+  const DialogComponent = isMobile ? MobileDialog : Dialog;
+
+  return (
+    <DialogComponent
+      {...restProps}
+      className={twMerge("w-[41.25rem] max-w-full", className)}
+    />
+  );
+}
+

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

@@ -2,6 +2,7 @@ import "./index.css";
 
 export * from "./Dialog";
 export * from "./MobileDialog";
+export * from "./ResponsiveDialog";
 export * from "./components/DialogHeader";
 export * from "./components/DialogBody";
 export * from "./components/DialogFooter";

packages/babylon-core-ui/src/components/Step/Step.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Step } from "./Step";
+
+const meta: Meta<typeof Step> = {
+  title: "Components/Step",
+  component: Step,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    step: {
+      control: { type: "number", min: 1, max: 10 },
+      description: "Step number",
+    },
+    currentStep: {
+      control: { type: "number", min: 1, max: 10 },
+      description: "Currently active step number",
+    },
+    children: {
+      control: "text",
+      description: "Step label/description",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * A completed step shows a checkmark icon
+ */
+export const Completed: Story = {
+  args: {
+    step: 1,
+    currentStep: 3,
+    children: "This step is complete",
+  },
+};
+
+/**
+ * The active step shows a spinner animation
+ */
+export const Active: Story = {
+  args: {
+    step: 2,
+    currentStep: 2,
+    children: "This step is currently active",
+  },
+};
+
+/**
+ * A pending step shows the step number
+ */
+export const Pending: Story = {
+  args: {
+    step: 3,
+    currentStep: 1,
+    children: "This step is pending",
+  },
+};
+
+/**
+ * Example of a 3-step process
+ */
+export const MultiStepProcess: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[500px]">
+      <Step step={1} currentStep={2}>
+        Sign Transaction
+      </Step>
+      <Step step={2} currentStep={2}>
+        Broadcast to Network
+      </Step>
+      <Step step={3} currentStep={2}>
+        Confirm on Chain
+      </Step>
+    </div>
+  ),
+};
+
+/**
+ * All steps completed
+ */
+export const AllCompleted: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[500px]">
+      <Step step={1} currentStep={4}>
+        Sign Transaction
+      </Step>
+      <Step step={2} currentStep={4}>
+        Broadcast to Network
+      </Step>
+      <Step step={3} currentStep={4}>
+        Confirm on Chain
+      </Step>
+    </div>
+  ),
+};
+

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

@@ -0,0 +1,94 @@
+import { Loader } from "@/components/Loader";
+import { Text } from "@/components/Text";
+import { type ReactNode } from "react";
+import { IoCheckmarkSharp } from "react-icons/io5";
+import { twMerge } from "tailwind-merge";
+
+export interface StepProps {
+  /** Step number (1, 2, 3, etc.) */
+  step: number;
+  /** Currently active step number */
+  currentStep: number;
+  /** Step label/description */
+  children: ReactNode;
+  /** Optional custom className */
+  className?: string;
+}
+
+/**
+ * renderIcon - Returns appropriate icon based on step state
+ * - Complete (past): Green checkmark
+ * - Active (current): Orange spinner
+ * - Pending (future): Gray number badge
+ */
+const renderIcon = (step: number, currentStep: number) => {
+  // Complete: checkmark icon with green background
+  if (currentStep > step) {
+    return (
+      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary-light">
+        <IoCheckmarkSharp size={24} className="text-accent-contrast" />
+      </div>
+    );
+  }
+
+  // Active: spinner with orange background
+  if (currentStep === step) {
+    return (
+      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-secondary-main">
+        <Loader size={24} className="text-accent-contrast" />
+      </div>
+    );
+  }
+
+  // Pending: number badge with gray background
+  return (
+    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-secondary-main">
+      <Text variant="body1" className="text-accent-contrast">
+        {step}
+      </Text>
+    </div>
+  );
+};
+
+/**
+ * Step Component - Displays a single step in a multi-step process
+ * 
+ * Shows different visual states based on progress:
+ * - **Pending** (future): Number badge, reduced opacity
+ * - **Active** (current): Spinner animation, full opacity
+ * - **Complete** (past): Checkmark, full opacity
+ * 
+ * @example
+ * ```tsx
+ * <Step step={1} currentStep={2}>
+ *   Complete Step
+ * </Step>
+ * 
+ * <Step step={2} currentStep={2}>
+ *   Active Step (spinner)
+ * </Step>
+ * 
+ * <Step step={3} currentStep={2}>
+ *   Pending Step
+ * </Step>
+ * ```
+ */
+export function Step({ step, currentStep, children, className }: StepProps) {
+  const isActive = step === currentStep;
+
+  return (
+    <div
+      className={twMerge(
+        "flex w-full flex-row items-center gap-3 self-stretch rounded border border-secondary-strokeLight bg-surface p-4",
+        !isActive && "opacity-25",
+        className
+      )}
+    >
+      {renderIcon(step, currentStep)}
+      <Text variant="body1" className="text-accent-primary">
+        Step {step}: {children}
+      </Text>
+    </div>
+  );
+}
+

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

@@ -0,0 +1,2 @@
+export * from "./Step";
+

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

@@ -27,6 +27,7 @@ export * from "./components/Copy";
 export * from "./components/Icons";
 export * from "./components/Warning";
 export * from "./components/Hint";
+export * from "./components/Step";
 
 export * from "./elements/FinalityProviderLogo";
 export * from "./elements/FinalityProviderItem";

routes/vault/src/assets/mascot-smile-expression.png

@@ -33,14 +33,15 @@ function ResponsiveDialog({ className, ...restProps }: ResponsiveDialogProps) {
 interface BorrowModalProps {
   open: boolean;
   onClose: () => void;
+  onBorrow?: (amount: number) => void;
   collateral: {
     amount: string;
     symbol: string;
     icon?: string | ReactNode;
   };
 }
 
-export function BorrowModal({ open, onClose, collateral }: BorrowModalProps) {
+export function BorrowModal({ open, onClose, onBorrow, collateral }: BorrowModalProps) {
   const collateralBTC = useMemo(
     () => parseFloat(collateral.amount || "0"),
     [collateral.amount]
@@ -90,8 +91,14 @@ export function BorrowModal({ open, onClose, collateral }: BorrowModalProps) {
   const handleBorrowClick = async () => {
     setTouched(true);
     if (validation.isValid && borrowAmountNum > 0) {
-      await handleBorrow(borrowAmountNum, collateralBTC);
-      onClose();
+      // Call parent callback to trigger sign modal flow
+      if (onBorrow) {
+        onBorrow(borrowAmountNum);
+      } else {
+        // Fallback: if no onBorrow callback, use old flow
+        await handleBorrow(borrowAmountNum, collateralBTC);
+        onClose();
+      }
     }
   };