@avail-project/widgets 0.0.1

package/dist/swaps/components/transaction-progress.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import {} from "../../common";
+import { StepFlow } from "./step-flow";
+const STEP_TYPES = {
+    INTENT_VERIFICATION: ["CREATE_PERMIT_FOR_SOURCE_SWAP"],
+    SOURCE_STEP_TYPES: [
+        "CREATE_PERMIT_EOA_TO_EPHEMERAL",
+        "CREATE_PERMIT_FOR_SOURCE_SWAP",
+        "EOA_EXECUTE_CALL",
+        "SOURCE_SWAP_BATCH_TX",
+        "SOURCE_SWAP_HASH",
+    ],
+    SOURCE_TRANSACTION: ["SOURCE_SWAP_HASH", "SOURCE_SWAP_BATCH_TX"],
+    DESTINATION_STEP_TYPES: [
+        "DESTINATION_SWAP_BATCH_TX",
+        "DESTINATION_SWAP_HASH",
+        "SWAP_COMPLETE",
+    ],
+    TRANSACTION_COMPLETE: ["SWAP_COMPLETE"],
+};
+const TransactionProgress = ({ steps, explorerUrls, sourceSymbol, destinationSymbol, sourceLogos, destinationLogos, hasMultipleSources, sources, isTransferMode, depositOpportunityName, }) => {
+    const { effectiveSteps, currentIndex, allCompleted } = useMemo(() => {
+        const completedTypes = new Set(steps?.filter((s) => s?.completed).map((s) => s?.step?.type));
+        // Consider only steps that were actually emitted by the SDK (ignore pre-seeded placeholders)
+        const eventfulTypes = new Set(steps
+            ?.filter((s) => {
+            const st = s?.step ?? {};
+            return ("explorerURL" in st || "chain" in st || "completed" in st // present when event args were merged into step
+            );
+        })
+            .map((s) => s?.step?.type));
+        const hasAny = (types) => types.some((t) => completedTypes.has(t));
+        const sawAny = (types) => types.some((t) => eventfulTypes.has(t));
+        // Mark overall completion ONLY when the SDK reports SWAP_COMPLETE
+        const baseDone = hasAny(STEP_TYPES.TRANSACTION_COMPLETE);
+        // Collected on sources requires destination relayer to pick it up or full completion
+        const collectedOnSources = hasAny(STEP_TYPES.DESTINATION_STEP_TYPES) || baseDone;
+        // Filled on destination requires full on-chain swap completion
+        const filledOnDestination = baseDone;
+        const intentVerified = hasAny(["DETERMINING_SWAP", "SWAP_START"]) ||
+            sawAny(STEP_TYPES.SOURCE_STEP_TYPES) ||
+            sawAny(STEP_TYPES.DESTINATION_STEP_TYPES) ||
+            collectedOnSources ||
+            filledOnDestination;
+        const displaySteps = [
+            { id: "intent", label: "Intent verified", completed: intentVerified },
+            {
+                id: "collected",
+                label: "Collected on sources",
+                completed: collectedOnSources,
+                explorerUrl: explorerUrls.sourceExplorerUrl,
+            },
+            {
+                id: "filled",
+                label: "Filled on destination",
+                completed: filledOnDestination,
+                explorerUrl: explorerUrls.destinationExplorerUrl,
+            },
+        ];
+        if (isTransferMode) {
+            displaySteps.push({
+                id: "transfer",
+                label: "Sent to recipient",
+                completed: baseDone,
+                explorerUrl: explorerUrls.destinationExplorerUrl,
+            });
+        }
+        if (depositOpportunityName) {
+            displaySteps.push({
+                id: "deposit",
+                label: `Deposit on ${depositOpportunityName}`,
+                completed: baseDone, // swapAndExecute handles execution automatically
+                failed: false, // You could parse failed state from SDK here if needed, but keeping simple for now
+                explorerUrl: explorerUrls.destinationExplorerUrl, // Use destination Tx hash for deposit trace
+            });
+        }
+        const done = baseDone;
+        const current = displaySteps.findIndex((st) => !st.completed && !st.failed);
+        return {
+            effectiveSteps: displaySteps,
+            currentIndex: current,
+            allCompleted: done,
+        };
+    }, [
+        steps,
+        isTransferMode,
+        depositOpportunityName,
+        explorerUrls.sourceExplorerUrl,
+        explorerUrls.destinationExplorerUrl,
+    ]);
+    return (_jsx("div", { className: "w-full flex flex-col items-start", children: _jsx(StepFlow, { steps: effectiveSteps, currentIndex: currentIndex, totalSteps: effectiveSteps.length, sourceLogos: sourceLogos, sourceSymbol: sourceSymbol, destinationLogos: destinationLogos, destinationSymbol: destinationSymbol, explorerUrls: explorerUrls, allCompleted: allCompleted, hasMultipleSources: hasMultipleSources, sources: sources }) }));
+};
+export default TransactionProgress;

package/dist/ui/button.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };
+//# sourceMappingURL=button.d.ts.map

package/dist/ui/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../.build-src/ui/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,cAAc;;;8EA+BnB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,OAAO,EACP,IAAI,EACJ,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAC/B,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,2CAUF;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/ui/button.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+const buttonVariants = cva("inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+            destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9",
+            "icon-sm": "size-8",
+            "icon-lg": "size-10",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Button({ className, variant, size, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
+}
+export { Button, buttonVariants };

package/dist/ui/dialog.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, dismissible, onInteractOutside, onEscapeKeyDown, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+    dismissible?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/ui/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../.build-src/ui/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAKzD,iBAAS,MAAM,CAAC,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAEnD;AAED,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAEtD;AAED,iBAAS,YAAY,CAAC,EACpB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,2CAErD;AAED,iBAAS,WAAW,CAAC,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CAWtD;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,eAAsB,EACtB,WAAkB,EAClB,iBAAiB,EACjB,eAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,2CAqCA;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQzE;AAED,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWzE;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQpD;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,WAAW,CAAC,2CAQ1D;AAED,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAA"}

package/dist/ui/dialog.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { cn } from "../lib/utils";
+function Dialog({ ...props }) {
+    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+    return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className), ...props }));
+}
+function DialogContent({ className, children, showCloseButton = true, dismissible = true, onInteractOutside, onEscapeKeyDown, ...props }) {
+    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className), onInteractOutside: (event) => {
+                    if (!dismissible) {
+                        event.preventDefault();
+                    }
+                    onInteractOutside?.(event);
+                }, onEscapeKeyDown: (event) => {
+                    if (!dismissible) {
+                        event.preventDefault();
+                    }
+                    onEscapeKeyDown?.(event);
+                }, ...props, children: [children, showCloseButton && dismissible && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2 text-center sm:text-left", className), ...props }));
+}
+function DialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-footer", className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className), ...props }));
+}
+function DialogTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn("text-lg leading-none font-semibold", className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn("text-muted-foreground text-sm", className), ...props }));
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@avail-project/widgets",
+  "version": "0.0.1",
+  "description": "Compiled Avail widgets for React applications.",
+  "author": "decocereus <amartya@availproject.org>",
+  "contributors": [
+    "decocereus <amartya@availproject.org>",
+    "shrinathprabhu <shrinathprabhu.123@gmail.com>"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/availproject/widgets.git",
+    "directory": "packages/widgets"
+  },
+  "license": "UNLICENSED",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "node ../../scripts/build-widgets-package.mjs",
+    "prepare": "pnpm build"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@avail-project/nexus-core": "2.0.0",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "decimal.js": "^10.6.0",
+    "lucide-react": "^0.487.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.3.0 || >=19.0.0",
+    "react-dom": ">=18.3.0 || >=19.0.0",
+    "viem": "^2.38.3",
+    "wagmi": "^2.17.4"
+  },
+  "devDependencies": {
+    "@types/react": "19.1.2",
+    "@types/react-dom": "19.1.2",
+    "typescript": "^5.9.2"
+  }
+}