import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import { useWatch } from "react-hook-form";
import { ConnectTooltip, ConnectTooltipProvider, } from "@powerhousedao/design-system/connect";
import { RWATableTextInput } from "./text-input.js";
import { getIsTransaction } from "../../services/viem.js";
export const TransactionReference = forwardRef(function TransactionReference(props, ref) {
    const { control, disabled } = props;
    const value = useWatch({ control, name: "txRef" });
    const maxLength = 46;
    const shouldShortenValue = typeof value === "string" && value.length >= maxLength;
    const maybeShortenedValue = shouldShortenValue
        ? `${value.slice(0, maxLength)}...`
        : value;
    const isTransaction = getIsTransaction(value);
    const tooltipContent = (_jsxs("div", { children: [_jsx("p", { children: value }), isTransaction ? (_jsx("p", { className: "mt-2 text-center", children: _jsx("a", { className: "text-blue-900 underline", href: `https://etherscan.io/tx/${value}`, children: "View on Etherscan" }) })) : null] }));
    if (disabled)
        return (_jsx(ConnectTooltipProvider, { children: _jsx(ConnectTooltip, { content: tooltipContent, children: _jsx("span", { children: maybeShortenedValue }) }) }));
    return _jsx(RWATableTextInput, { ...props, ref: ref });
});
//# sourceMappingURL=transaction-reference.js.map