@avail-project/widgets 0.0.1

package/dist/nexus-widget/components/pay-using-selector.d.ts

@@ -0,0 +1,9 @@
+export interface PayUsingSelectorProps {
+    disabled?: boolean;
+    hasSources?: boolean;
+    label?: string;
+    onClick?: () => void;
+    sublabel?: string;
+}
+export declare function PayUsingSelector({ label, sublabel, onClick, disabled, hasSources, }: PayUsingSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=pay-using-selector.d.ts.map

package/dist/nexus-widget/components/pay-using-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pay-using-selector.d.ts","sourceRoot":"","sources":["../../../.build-src/nexus-widget/components/pay-using-selector.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,KAAqB,EACrB,QAA0C,EAC1C,OAAO,EACP,QAAgB,EAChB,UAAkB,GACnB,EAAE,qBAAqB,2CA+FvB"}

package/dist/nexus-widget/components/pay-using-selector.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// biome-ignore-all lint: NexusWidget registry component from shadcn registry.
+import { Pencil, Settings } from "lucide-react";
+import React from "react";
+import { nexusWidgetTheme } from "../theme";
+export function PayUsingSelector({ label = "Paying with", sublabel = "Auto-selected based on amount", onClick, disabled = false, hasSources = false, }) {
+    const isInteractiveRow = !hasSources;
+    const content = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-x-2.5", children: [_jsx("div", { className: "flex items-center justify-center w-7 h-7 rounded-full shrink-0", style: {
+                            background: "var(--background-tertiary, var(--background-tertiary, #F0F0EF))",
+                        }, children: _jsx(Settings, { className: "w-3.5 h-3.5 text-gray-500" }) }), _jsxs("div", { className: "flex flex-col gap-y-0.5 text-left", children: [_jsx("span", { style: {
+                                    fontFamily: "var(--font-geist-sans), sans-serif",
+                                    fontWeight: 500,
+                                    fontSize: "13px",
+                                    color: "var(--foreground-primary, var(--foreground-primary, #161615))",
+                                }, children: label }), _jsx("span", { style: {
+                                    fontFamily: "var(--font-geist-sans), sans-serif",
+                                    fontSize: "11px",
+                                    color: "var(--foreground-muted, var(--foreground-muted, #848483))",
+                                }, children: sublabel })] })] }), !isInteractiveRow && (_jsxs("button", { className: "flex items-center gap-x-1 px-2 py-1 rounded hover:bg-black/5 transition-colors disabled:opacity-40 disabled:cursor-not-allowed", disabled: disabled, onClick: (e) => {
+                    e.stopPropagation();
+                    onClick?.();
+                }, style: {
+                    fontFamily: "var(--font-geist-sans), sans-serif",
+                    fontSize: "13px",
+                    fontWeight: 500,
+                    color: "var(--interactive-button-primary-background, var(--foreground-brand))",
+                }, children: [_jsx(Pencil, { className: "w-3 h-3" }), "Edit"] }))] }));
+    return (_jsx("div", { className: "w-full", children: isInteractiveRow ? (_jsx("button", { className: "w-full flex items-center justify-between px-3 py-2.5 disabled:opacity-50 disabled:cursor-not-allowed transition-all hover:bg-black/5", disabled: disabled, onClick: onClick, style: {
+                background: "var(--background-secondary, #F5F5F4)",
+                borderRadius: "10px",
+                border: "1px solid var(--border-default, var(--border-default, #E8E8E7))",
+            }, children: content })) : (_jsx("div", { className: "w-full flex items-center justify-between px-3 py-2.5", style: {
+                background: "var(--background-secondary, #F5F5F4)",
+                borderRadius: "10px",
+                border: "1px solid var(--border-default, var(--border-default, #E8E8E7))",
+            }, children: content })) }));
+}

package/dist/nexus-widget/components/pay-with-sources.d.ts

@@ -0,0 +1,11 @@
+import { type SwapTokenOption } from "./swap-asset-selector";
+export declare function PayWithSources({ fromTokens, onOpenSourcePicker, routeStatus, routeMessage, showAutoBadge, isSourcePickerDisabled, reserveSourceRows, }: {
+    fromTokens: SwapTokenOption[];
+    onOpenSourcePicker: () => void;
+    routeStatus?: "loading" | "insufficient";
+    routeMessage?: string;
+    showAutoBadge?: boolean;
+    isSourcePickerDisabled?: boolean;
+    reserveSourceRows?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=pay-with-sources.d.ts.map

package/dist/nexus-widget/components/pay-with-sources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pay-with-sources.d.ts","sourceRoot":"","sources":["../../../.build-src/nexus-widget/components/pay-with-sources.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAqJ7D,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,YAAY,EACZ,aAAoB,EACpB,sBAA8B,EAC9B,iBAAyB,GAC1B,EAAE;IACD,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,2CA6TA"}

package/dist/nexus-widget/components/pay-with-sources.js

@@ -0,0 +1,266 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// biome-ignore-all lint: NexusWidget registry component from shadcn registry.
+import Decimal from "decimal.js";
+import { AlertCircle, ChevronDown, Loader2 } from "lucide-react";
+import React, { useRef, useState } from "react";
+import {} from "./swap-asset-selector";
+const uiFont = '"Geist", system-ui, sans-serif';
+const primary = "#161615";
+const muted = "#848483";
+const border = "#E8E8E7";
+const brand = "var(--foreground-brand)";
+const parseDecimal = (value) => {
+    if (value === null || value === undefined || value === "")
+        return undefined;
+    if (Decimal.isDecimal(value))
+        return value;
+    const cleaned = String(value).replace(/[^0-9.-]/g, "");
+    if (!cleaned || cleaned === "-" || cleaned === "." || cleaned === "-.") {
+        return undefined;
+    }
+    try {
+        const parsed = new Decimal(cleaned);
+        return parsed.isFinite() ? parsed : undefined;
+    }
+    catch {
+        return undefined;
+    }
+};
+const formatToken = (value) => {
+    const amount = parseDecimal(value) ?? new Decimal(0);
+    return amount.toDecimalPlaces(8).toFixed();
+};
+const formatUsd = (value) => {
+    const amount = parseDecimal(value) ?? new Decimal(0);
+    if (amount.gt(0) && amount.lt(0.01))
+        return "<$0.01";
+    return `$${amount.toDecimalPlaces(2).toFixed()}`;
+};
+function TokenLogo({ src, label, size = 30, fontSize = 12, style, }) {
+    const [failed, setFailed] = useState(!src);
+    React.useEffect(() => {
+        setFailed(!src);
+    }, [src]);
+    if (!failed && src) {
+        return (_jsx("img", { alt: label || "", onError: () => setFailed(true), src: src, style: {
+                backgroundColor: "#FFFFFE",
+                borderRadius: "999px",
+                height: size,
+                objectFit: "cover",
+                width: size,
+                ...style,
+            } }));
+    }
+    return (_jsx("div", { style: {
+            alignItems: "center",
+            backgroundColor: "#E8F0FF",
+            borderRadius: "999px",
+            color: brand,
+            display: "flex",
+            fontFamily: uiFont,
+            fontSize,
+            fontWeight: 700,
+            height: size,
+            justifyContent: "center",
+            width: size,
+            ...style,
+        }, children: (label || "?").slice(0, 1).toUpperCase() }));
+}
+function SourceLogoPair({ token }) {
+    return (_jsxs("div", { style: { flexShrink: 0, height: 40, position: "relative", width: 40 }, children: [_jsx(TokenLogo, { label: token.symbol, size: 40, src: token.logo }), token.chainLogo && (_jsx(TokenLogo, { label: token.chainName, size: 16, src: token.chainLogo, style: {
+                    bottom: -1,
+                    outline: "1.5px solid #FFFFFE",
+                    position: "absolute",
+                    right: -1,
+                } }))] }));
+}
+function SkeletonRow() {
+    return (_jsxs("div", { style: {
+            alignItems: "center",
+            display: "flex",
+            justifyContent: "space-between",
+        }, children: [_jsx("div", { className: "animate-pulse", style: {
+                    background: "linear-gradient(90deg, #F0F0EF 0%, #F7F7F6 48%, #F0F0EF 100%)",
+                    backgroundSize: "200% 100%",
+                    borderRadius: "6px",
+                    height: "32px",
+                    width: "128px",
+                } }), _jsx("div", { className: "animate-pulse", style: {
+                    background: "linear-gradient(90deg, #F0F0EF 0%, #F7F7F6 48%, #F0F0EF 100%)",
+                    backgroundSize: "200% 100%",
+                    borderRadius: "999px",
+                    height: "32px",
+                    width: "108px",
+                } })] }));
+}
+export function PayWithSources({ fromTokens, onOpenSourcePicker, routeStatus, routeMessage, showAutoBadge = true, isSourcePickerDisabled = false, reserveSourceRows = false, }) {
+    const scrollRef = useRef(null);
+    const isRouteLoading = routeStatus === "loading";
+    const shouldShowSourceSummary = !isRouteLoading && fromTokens.length > 0;
+    const shouldScroll = shouldShowSourceSummary && fromTokens.length > 3;
+    const autoBadge = (_jsx("span", { style: {
+            border: `1px solid ${brand}`,
+            borderRadius: "999px",
+            color: brand,
+            fontFamily: uiFont,
+            fontSize: "9px",
+            fontWeight: 600,
+            letterSpacing: "0.04em",
+            lineHeight: "14px",
+            padding: "1px 5px",
+        }, children: "AUTO" }));
+    return (_jsxs("div", { style: {
+            backgroundColor: "#FFFFFE",
+            border: `1px solid ${border}`,
+            borderRadius: "14px",
+            boxShadow: "#1616150A 0px 1px 2px",
+            boxSizing: "border-box",
+            display: "flex",
+            flexDirection: "column",
+            gap: "14px",
+            padding: "16px",
+        }, children: [_jsxs("div", { style: {
+                    alignItems: "center",
+                    display: "flex",
+                    justifyContent: "space-between",
+                }, children: [_jsxs("div", { style: {
+                            alignItems: "center",
+                            color: muted,
+                            display: "flex",
+                            fontFamily: uiFont,
+                            fontSize: "12px",
+                            fontWeight: 500,
+                            gap: "6px",
+                            letterSpacing: "0.08em",
+                            lineHeight: "20px",
+                            textTransform: "uppercase",
+                        }, children: [_jsxs("span", { children: ["Pay With", shouldShowSourceSummary ? ` · ${fromTokens.length} assets` : ""] }), showAutoBadge ? autoBadge : null] }), shouldShowSourceSummary && (_jsx("button", { disabled: isSourcePickerDisabled, onClick: onOpenSourcePicker, style: {
+                            backgroundColor: isSourcePickerDisabled ? "#F4F4F3" : "#E8F0FF",
+                            border: "none",
+                            borderRadius: "4px",
+                            color: isSourcePickerDisabled ? "#A8A8A6" : brand,
+                            cursor: isSourcePickerDisabled ? "not-allowed" : "pointer",
+                            fontFamily: uiFont,
+                            fontSize: "12px",
+                            fontWeight: 500,
+                            lineHeight: "20px",
+                            opacity: isSourcePickerDisabled ? 0.75 : 1,
+                            padding: "8px 12px",
+                        }, type: "button", children: "Edit tokens" }))] }), isRouteLoading ? (_jsxs(_Fragment, { children: [_jsx(SkeletonRow, {}), _jsxs("div", { style: {
+                            alignItems: "center",
+                            color: brand,
+                            display: "flex",
+                            fontFamily: uiFont,
+                            fontSize: "14px",
+                            gap: "6px",
+                            lineHeight: "20px",
+                        }, children: [_jsx(Loader2, { className: "animate-spin", style: { height: 14, width: 14 } }), "Calculating best route..."] })] })) : shouldShowSourceSummary ? (_jsxs("div", { style: { position: "relative" }, children: [_jsx("div", { ref: scrollRef, style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: shouldShowSourceSummary ? "14px" : undefined,
+                            maxHeight: shouldScroll ? "220px" : undefined,
+                            minHeight: reserveSourceRows && !shouldScroll ? "162px" : undefined,
+                            overflowY: shouldScroll ? "auto" : undefined,
+                            paddingRight: shouldScroll ? "8px" : 0,
+                        }, children: fromTokens.map((token, index) => (_jsxs("div", { style: {
+                                alignItems: "center",
+                                display: "flex",
+                                gap: "14px",
+                                justifyContent: "space-between",
+                                minHeight: "44px",
+                            }, children: [_jsxs("div", { style: {
+                                        alignItems: "center",
+                                        borderTop: index === 0 ? "none" : "1px solid #F0F0EF",
+                                        display: "flex",
+                                        gap: "14px",
+                                        minWidth: 0,
+                                    }, children: [_jsxs("div", { style: {
+                                                alignItems: "center",
+                                                display: "flex",
+                                                gap: "10px",
+                                                minWidth: 0,
+                                            }, children: [_jsx(SourceLogoPair, { token: token }), _jsxs("div", { style: {
+                                                        display: "flex",
+                                                        flexDirection: "column",
+                                                        gap: "3px",
+                                                        minWidth: 0,
+                                                    }, children: [_jsx("span", { style: {
+                                                                color: primary,
+                                                                fontFamily: uiFont,
+                                                                fontSize: "14px",
+                                                                fontWeight: 600,
+                                                            }, children: token.symbol }), _jsx("span", { style: {
+                                                                color: muted,
+                                                                fontFamily: uiFont,
+                                                                fontSize: "12px",
+                                                                overflow: "hidden",
+                                                                textOverflow: "ellipsis",
+                                                                whiteSpace: "nowrap",
+                                                            }, children: token.isUnified
+                                                                ? "Unified balance"
+                                                                : `on ${token.chainName || "Unknown chain"}` })] })] }), _jsxs("div", { style: {
+                                                display: "flex",
+                                                flexDirection: "column",
+                                                gap: "3px",
+                                                textAlign: "right",
+                                            }, children: [_jsxs("span", { style: {
+                                                        color: primary,
+                                                        fontFamily: uiFont,
+                                                        fontSize: "16px",
+                                                        fontWeight: 500,
+                                                        lineHeight: "24px",
+                                                    }, children: [formatToken(token.userAmount || token.balance), " ", token.symbol] }), _jsx("span", { style: {
+                                                        color: muted,
+                                                        fontFamily: uiFont,
+                                                        fontSize: "14px",
+                                                        lineHeight: "20px",
+                                                        overflow: "hidden",
+                                                        textOverflow: "ellipsis",
+                                                        whiteSpace: "nowrap",
+                                                    }, children: formatUsd(token.userAmountUsd || token.balanceInFiat) })] })] }, `${token.contractAddress}-${token.chainId ?? "unified"}-${index}`), _jsxs("div", { style: {
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        gap: "3px",
+                                        textAlign: "right",
+                                    }, children: [_jsxs("span", { style: {
+                                                color: primary,
+                                                fontFamily: uiFont,
+                                                fontSize: "16px",
+                                                fontWeight: 500,
+                                                lineHeight: "20px",
+                                            }, children: [formatToken(token.userAmount || token.balance), " ", token.symbol] }), _jsx("span", { style: {
+                                                color: muted,
+                                                fontFamily: uiFont,
+                                                fontSize: "14px",
+                                                lineHeight: "20px",
+                                            }, children: formatUsd(token.userAmountUsd || token.balanceInFiat) })] })] }, `${token.contractAddress}-${token.chainId ?? "unified"}-${index}`))) }), shouldScroll && (_jsx("button", { "aria-label": "Scroll payment sources", onClick: () => scrollRef.current?.scrollBy({ behavior: "smooth", top: 64 }), style: {
+                            alignItems: "center",
+                            background: "#FFFFFE",
+                            border: `1px solid ${border}`,
+                            borderRadius: "999px",
+                            bottom: "4px",
+                            boxShadow: "0 2px 8px rgba(22,22,21,0.08)",
+                            cursor: "pointer",
+                            display: "flex",
+                            height: "22px",
+                            justifyContent: "center",
+                            left: "50%",
+                            padding: 0,
+                            position: "absolute",
+                            transform: "translateX(-50%)",
+                            width: "22px",
+                        }, type: "button", children: _jsx(ChevronDown, { style: { color: muted, height: 14, width: 14 } }) }))] })) : (_jsx("div", { style: {
+                    color: primary,
+                    fontFamily: uiFont,
+                    fontSize: "14px",
+                    lineHeight: "20px",
+                }, children: "Sources will be auto selected" })), routeStatus === "insufficient" && routeMessage && (_jsxs("div", { style: {
+                    alignItems: "center",
+                    color: "#D32F2F",
+                    display: "flex",
+                    fontFamily: uiFont,
+                    fontSize: "14px",
+                    gap: "8px",
+                    lineHeight: "20px",
+                }, children: [_jsx(AlertCircle, { style: { flexShrink: 0, height: 15, width: 15 } }), routeMessage] }))] }));
+}

package/dist/nexus-widget/components/receive-asset-selector.d.ts

@@ -0,0 +1,28 @@
+import { type SwapTokenOption } from "./swap-asset-selector";
+interface ReceiveAssetSelectorProps {
+    allowedChainIds?: number[];
+    allowedPairs?: {
+        chain: number;
+        token: string;
+    }[];
+    additionalTokens?: SwapTokenOption[];
+    onBack: () => void;
+    onSelect: (token: SwapTokenOption) => void;
+}
+type RawReceiveToken = {
+    address?: string;
+    decimals?: number;
+    logoURI?: string;
+    name?: string;
+    priceUSD?: number | string;
+    symbol?: string;
+};
+type RawReceiveTokensData = {
+    stableSymbols: string[];
+    tokens: Record<string, RawReceiveToken[]>;
+};
+export declare const getCachedReceiveTokenMatch: (token?: SwapTokenOption | null) => SwapTokenOption | null;
+export declare const preloadReceiveTokens: () => Promise<RawReceiveTokensData> | null;
+export declare function ReceiveAssetSelector({ allowedChainIds, allowedPairs, additionalTokens, onSelect, onBack, }: ReceiveAssetSelectorProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=receive-asset-selector.d.ts.map

package/dist/nexus-widget/components/receive-asset-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"receive-asset-selector.d.ts","sourceRoot":"","sources":["../../../.build-src/nexus-widget/components/receive-asset-selector.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAIL,KAAK,eAAe,EAErB,MAAM,uBAAuB,CAAC;AAE/B,UAAU,yBAAyB;IACjC,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE;QACb,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,gBAAgB,CAAC,EAAE,eAAe,EAAE,CAAC;IACrC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAC5C;AA4HD,KAAK,eAAe,GAAG;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,CAAC,CAAC;CAC3C,CAAC;AAyDF,eAAO,MAAM,0BAA0B,GACrC,QAAQ,eAAe,GAAG,IAAI,KAC7B,eAAe,GAAG,IA0BpB,CAAC;AAEF,eAAO,MAAM,oBAAoB,4CAiIhC,CAAC;AAYF,wBAAgB,oBAAoB,CAAC,EACnC,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,QAAQ,EACR,MAAM,GACP,EAAE,yBAAyB,2CAq5C3B"}