@scaffold-hbar-ui/debug-contracts 1.0.0 → 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 buidler-labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/esm/Contract.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Address, Balance } from "@scaffold-hbar-ui/components";
+import { useMemo, useReducer } from "react";
+import { extractChain } from "viem";
+import { ContractVariables } from "./components/ContractVariables";
+import { ContractReadMethods } from "./components/ContractReadMethods";
+import { ContractWriteMethods } from "./components/ContractWriteMethods";
+import { Toaster } from "react-hot-toast";
+import * as chains from "viem/chains";
+import { ContractConfigProvider } from "./contexts/ContractConfigContext";
+import { NETWORKS_EXTRA_DATA } from "./utils/common";
+export const Contract = ({ contractName, contract, chainId, blockExplorerAddressLink }) => {
+    const [refreshDisplayVariables, triggerRefreshDisplayVariables] = useReducer((value) => !value, false);
+    const chain = extractChain({
+        chains: Object.values(chains),
+        id: chainId,
+    });
+    const balanceStyle = useMemo(() => ({
+        fontSize: "0.75rem",
+    }), []);
+    return (_jsxs(ContractConfigProvider, { config: { blockExplorerAddressLink, chain, chainId }, children: [_jsx("div", { className: "w-full max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 my-0 font-sans", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-10", children: [_jsxs("div", { className: "lg:col-span-1 flex flex-col min-w-0", children: [_jsx("div", { className: "bg-sui-base-100 border-sui-primary-subtle border shadow-md shadow-sui-primary-subtle rounded-3xl px-6 lg:px-8 mb-6 space-y-1 py-4", children: _jsx("div", { className: "flex", children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "font-bold", children: contractName }), _jsx(Address, { address: contract.address, size: "base", chain: chain, blockExplorerAddressLink: blockExplorerAddressLink }), _jsxs("div", { className: "flex gap-1 items-center mt-1", children: [_jsx("span", { className: "font-bold text-sm", children: "Balance:" }), contract.address && (_jsx(Balance, { address: contract.address, style: balanceStyle }))] }), _jsxs("p", { className: "my-0 text-sm", children: [_jsx("span", { className: "font-bold", children: "Network" }), ":", " ", _jsx("span", { style: { color: NETWORKS_EXTRA_DATA[chainId]?.color }, children: chain.id === 31_337 ? "Localhost" : chain.name })] })] }) }) }), _jsx("div", { className: "bg-sui-primary-subtle rounded-3xl px-6 lg:px-8 py-4 shadow-lg shadow-sui-primary-subtle overflow-y-auto", children: _jsx(ContractVariables, { refreshDisplayVariables: refreshDisplayVariables, contract: contract }) })] }), _jsxs("div", { className: "lg:col-span-2 flex flex-col gap-6 min-w-0", children: [_jsx("div", { className: "z-10", children: _jsxs("div", { className: "bg-sui-base-100 rounded-3xl shadow-md shadow-sui-primary-subtle border border-sui-primary-subtle flex flex-col mt-10 relative", children: [_jsx("div", { className: "h-[5rem] w-[5.5rem] bg-sui-primary-subtle absolute self-start rounded-[22px] -top-[38px] -left-[1px] -z-10 py-[0.65rem] shadow-lg shadow-sui-primary-subtle", children: _jsx("div", { className: "flex items-center justify-center space-x-2", children: _jsx("p", { className: "my-0 text-sm", children: "Read" }) }) }), _jsx("div", { className: "p-5 divide-y divide-sui-primary-subtle", children: _jsx(ContractReadMethods, { contract: contract }) })] }) }), _jsx("div", { className: "z-10", children: _jsxs("div", { className: "bg-sui-base-100 rounded-3xl shadow-md shadow-sui-primary-subtle border border-sui-primary-subtle flex flex-col mt-10 relative", children: [_jsx("div", { className: "h-[5rem] w-[5.5rem] bg-sui-primary-subtle absolute self-start rounded-[22px] -top-[38px] -left-[1px] -z-10 py-[0.65rem] shadow-lg shadow-sui-primary-subtle", children: _jsx("div", { className: "flex items-center justify-center space-x-2", children: _jsx("p", { className: "my-0 text-sm", children: "Write" }) }) }), _jsx("div", { className: "p-5 divide-y divide-sui-primary-subtle", children: _jsx(ContractWriteMethods, { contract: contract, onChange: triggerRefreshDisplayVariables }) })] }) })] })] }) }), _jsx(Toaster, {})] }));
+};

package/dist/esm/components/Collapsible.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+export const Collapsible = ({ title, children, className = "" }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleOpen = () => {
+        setIsOpen(!isOpen);
+    };
+    return (_jsxs("div", { className: `border-2 border-sui-primary-subtle rounded-2xl ${className}`, children: [_jsxs("button", { type: "button", onClick: toggleOpen, className: `w-full flex items-center justify-between p-3 text-left bg-sui-primary-neutral hover:brightness-90 transition-colors rounded-t-[14px] focus:outline-none border-sui-primary-subtle focus:ring-2 focus:ring-sui-primary ${isOpen ? "rounded-b-none" : "rounded-b-[14px]"}`, children: [_jsx("span", { className: "text-sui-primary-content/50 text-sm", children: title }), _jsx("svg", { className: `w-4 h-4 transition-transform duration-200 ${isOpen ? "rotate-90" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })] }), isOpen && _jsx("div", { className: "p-4 border-t border-sui-primary-subtle/80", children: children })] }));
+};

package/dist/esm/components/ContractInput.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { BaseInput, HederaAddressInput } from "@scaffold-hbar-ui/components";
+import { Bytes32Input } from "./inputs/Bytes32Input";
+import { BytesInput } from "./inputs/BytesInput";
+import { IntegerInput } from "./inputs/IntegerInput";
+import { Tuple } from "./Tuple";
+import { TupleArray } from "./TupleArray";
+import { useContractConfig } from "../contexts/ContractConfigContext";
+/** Hedera chain IDs – use HederaAddressInput (0x or 0.0.x) on these. Includes local fork (31337). */
+const HEDERA_CHAIN_IDS = new Set([295, 296, 31337]);
+/**
+ * Generic Input component to handle input's based on their function param type
+ */
+export const ContractInput = ({ setForm, form, stateObjectKey, paramType }) => {
+    const { chainId } = useContractConfig();
+    const onAddressChange = useCallback((value) => {
+        setForm((prev) => ({ ...prev, [stateObjectKey]: value }));
+    }, [setForm, stateObjectKey]);
+    const inputProps = {
+        name: stateObjectKey,
+        value: form?.[stateObjectKey],
+        placeholder: paramType.name ? `${paramType.type} ${paramType.name}` : paramType.type,
+        onChange: onAddressChange,
+    };
+    const renderInput = () => {
+        switch (paramType.type) {
+            case "address":
+                if (HEDERA_CHAIN_IDS.has(chainId)) {
+                    return (_jsx(HederaAddressInput, { name: inputProps.name, value: String(inputProps.value ?? ""), placeholder: inputProps.placeholder, onChange: onAddressChange, chainId: chainId }));
+                }
+                return (_jsx(BaseInput, { name: inputProps.name, value: String(inputProps.value ?? ""), placeholder: inputProps.placeholder, onChange: onAddressChange }));
+            case "bytes32":
+                return _jsx(Bytes32Input, { ...inputProps });
+            case "bytes":
+                return _jsx(BytesInput, { ...inputProps });
+            case "string":
+                return _jsx(BaseInput, { ...inputProps });
+            case "tuple":
+                return (_jsx(Tuple, { setParentForm: setForm, parentForm: form, abiTupleParameter: paramType, parentStateObjectKey: stateObjectKey }));
+            default:
+                // Handling 'int' types and 'tuple[]' types
+                if (paramType.type.includes("int") && !paramType.type.includes("[")) {
+                    return (_jsx(IntegerInput, { ...inputProps, variant: paramType.type }));
+                }
+                else if (paramType.type.startsWith("tuple[")) {
+                    return (_jsx(TupleArray, { setParentForm: setForm, parentForm: form, abiTupleParameter: paramType, parentStateObjectKey: stateObjectKey }));
+                }
+                else {
+                    return _jsx(BaseInput, { ...inputProps });
+                }
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [_jsxs("div", { className: "flex items-center ml-2", children: [paramType.name && _jsx("span", { className: "text-xs font-medium mr-2 leading-none", children: paramType.name }), _jsx("span", { className: "block text-xs font-extralight leading-none", children: paramType.type })] }), renderInput()] }));
+};

package/dist/esm/components/ContractReadMethods.js

@@ -0,0 +1,23 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { ReadOnlyFunctionForm } from "./ReadOnlyFunctionForm";
+export const ContractReadMethods = ({ contract, }) => {
+    if (!contract) {
+        return null;
+    }
+    const functionsToDisplay = (contract.abi || []).filter((part) => part.type === "function")
+        .filter((fn) => {
+        const isQueryableWithParams = (fn.stateMutability === "view" || fn.stateMutability === "pure") && fn.inputs.length > 0;
+        return isQueryableWithParams;
+    })
+        .map((fn) => {
+        return {
+            fn,
+            inheritedFrom: contract?.inheritedFunctions?.[fn.name],
+        };
+    })
+        .sort((a, b) => (b.inheritedFrom ? b.inheritedFrom.localeCompare(a.inheritedFrom) : 1));
+    if (!functionsToDisplay.length) {
+        return _jsx(_Fragment, { children: "No read methods" });
+    }
+    return (_jsx(_Fragment, { children: functionsToDisplay.map(({ fn, inheritedFrom }) => (_jsx(ReadOnlyFunctionForm, { abi: contract.abi, contractAddress: contract.address, abiFunction: fn, inheritedFrom: inheritedFrom }, fn.name))) }));
+};

package/dist/esm/components/ContractVariables.js

@@ -0,0 +1,23 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { DisplayVariable } from "./DisplayVariable";
+export const ContractVariables = ({ refreshDisplayVariables, contract, }) => {
+    if (!contract) {
+        return null;
+    }
+    const functionsToDisplay = contract.abi.filter((part) => part.type === "function")
+        .filter((fn) => {
+        const isQueryableWithNoParams = (fn.stateMutability === "view" || fn.stateMutability === "pure") && fn.inputs.length === 0;
+        return isQueryableWithNoParams;
+    })
+        .map((fn) => {
+        return {
+            fn,
+            inheritedFrom: contract?.inheritedFunctions?.[fn.name],
+        };
+    })
+        .sort((a, b) => (b.inheritedFrom ? b.inheritedFrom.localeCompare(a.inheritedFrom) : 1));
+    if (!functionsToDisplay.length) {
+        return _jsx(_Fragment, { children: "No contract variables" });
+    }
+    return (_jsx(_Fragment, { children: functionsToDisplay.map(({ fn, inheritedFrom }) => (_jsx(DisplayVariable, { abi: contract.abi, abiFunction: fn, contractAddress: contract.address, refreshDisplayVariables: refreshDisplayVariables, inheritedFrom: inheritedFrom }, fn.name))) }));
+};

package/dist/esm/components/ContractWriteMethods.js

@@ -0,0 +1,23 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { WriteOnlyFunctionForm } from "./WriteOnlyFunctionForm";
+export const ContractWriteMethods = ({ onChange, contract, }) => {
+    if (!contract) {
+        return null;
+    }
+    const functionsToDisplay = contract.abi.filter((part) => part.type === "function")
+        .filter((fn) => {
+        const isWriteableFunction = fn.stateMutability !== "view" && fn.stateMutability !== "pure";
+        return isWriteableFunction;
+    })
+        .map((fn) => {
+        return {
+            fn,
+            inheritedFrom: contract?.inheritedFunctions?.[fn.name],
+        };
+    })
+        .sort((a, b) => (b.inheritedFrom ? b.inheritedFrom.localeCompare(a.inheritedFrom) : 1));
+    if (!functionsToDisplay.length) {
+        return _jsx(_Fragment, { children: "No write methods" });
+    }
+    return (_jsx(_Fragment, { children: functionsToDisplay.map(({ fn, inheritedFrom }, idx) => (_jsx(WriteOnlyFunctionForm, { abi: contract.abi, abiFunction: fn, onChange: onChange, contractAddress: contract.address, inheritedFrom: inheritedFrom }, `${fn.name}-${idx}}`))) }));
+};

package/dist/esm/components/DisplayVariable.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReadContract } from "wagmi";
+import { useAnimationConfig } from "../hooks/useAnimationConfig";
+import { useEffect } from "react";
+import { getParsedError } from "../utils/getParsedError";
+import { ArrowPathIcon } from "@heroicons/react/24/outline";
+import { InheritanceTooltip } from "./InheritanceTooltip";
+import { displayTxResult } from "../utils/utilsDisplay";
+import { notification } from "../utils/notification";
+import { useContractConfig } from "../contexts/ContractConfigContext";
+export const DisplayVariable = ({ contractAddress, abiFunction, refreshDisplayVariables, abi, inheritedFrom, }) => {
+    const { chainId } = useContractConfig();
+    const { data: result, isFetching, refetch, error, } = useReadContract({
+        address: contractAddress,
+        functionName: abiFunction.name,
+        abi: abi,
+        chainId: chainId,
+        query: {
+            retry: false,
+        },
+    });
+    const { showAnimation } = useAnimationConfig(result);
+    useEffect(() => {
+        refetch();
+    }, [refetch, refreshDisplayVariables]);
+    useEffect(() => {
+        if (error) {
+            const parsedError = getParsedError(error);
+            console.log("The parsedError is:", parsedError);
+            notification.error(parsedError);
+        }
+    }, [error]);
+    return (_jsxs("div", { className: "space-y-1 pb-2", children: [_jsxs("div", { className: "flex items-center", children: [_jsx("h3", { className: "font-medium text-lg mb-0 break-all", children: abiFunction.name }), _jsx("button", { className: "p-1 text-sui-primary-content/60 hover:text-sui-primary-content dark:hover:bg-sui-primary-neutral hover:bg-sui-primary transition-colors duration-200 cursor-pointer ml-1 rounded-full", onClick: async () => await refetch(), children: isFetching ? (_jsx("div", { className: "w-3 h-3 border border-sui-primary-subtle border-t-transparent rounded-full animate-spin" })) : (_jsx(ArrowPathIcon, { className: "h-3 w-3 cursor-pointer", "aria-hidden": "true" })) }), _jsx(InheritanceTooltip, { inheritedFrom: inheritedFrom })] }), _jsx("div", { className: "text-sui-primary-content/80 flex flex-col items-start", children: _jsx("div", { children: _jsx("div", { className: `block transition ${showAnimation ? "bg-[#e2d563] rounded-xs animate-pulse-fast" : "bg-transparent"}`, children: displayTxResult(result, "base") }) }) })] }));
+};

package/dist/esm/components/InheritanceTooltip.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { InformationCircleIcon } from "@heroicons/react/20/solid";
+import { Tooltip } from "./Tooltip";
+export const InheritanceTooltip = ({ inheritedFrom }) => (_jsx(_Fragment, { children: inheritedFrom && (_jsx(Tooltip, { content: `Inherited from: ${inheritedFrom}`, position: "top", className: "px-2", children: _jsx(InformationCircleIcon, { className: "h-4 w-4 text-sui-primary cursor-help", "aria-hidden": "true" }) })) }));

package/dist/esm/components/ReadOnlyFunctionForm.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { InheritanceTooltip } from "./InheritanceTooltip";
+import { useConfig } from "wagmi";
+import { readContract } from "wagmi/actions";
+import { getFunctionInputKey, getInitialFormState, getParsedContractFunctionArgs, resolveHederaNativeAccountIdsInForm, transformAbiFunction, } from "../utils/contracts";
+import { displayTxResult } from "../utils/utilsDisplay";
+import { getParsedError } from "../utils/getParsedError";
+import { ContractInput } from "./ContractInput";
+import { notification } from "../utils/notification";
+import { useContractConfig } from "../contexts/ContractConfigContext";
+export const ReadOnlyFunctionForm = ({ contractAddress, abiFunction, inheritedFrom, abi, }) => {
+    const { chainId } = useContractConfig();
+    const config = useConfig();
+    const [form, setForm] = useState(() => getInitialFormState(abiFunction));
+    const [result, setResult] = useState();
+    const [isFetching, setIsFetching] = useState(false);
+    const transformedFunction = transformAbiFunction(abiFunction);
+    const inputElements = transformedFunction.inputs.map((input, inputIndex) => {
+        const key = getFunctionInputKey(abiFunction.name, input, inputIndex);
+        return (_jsx(ContractInput, { setForm: setForm, form: form, stateObjectKey: key, paramType: input }, key));
+    });
+    const handleRead = async () => {
+        setIsFetching(true);
+        try {
+            const resolvedForm = await resolveHederaNativeAccountIdsInForm(form, abiFunction, chainId);
+            const args = getParsedContractFunctionArgs(resolvedForm);
+            const data = await readContract(config, {
+                address: contractAddress,
+                abi,
+                functionName: abiFunction.name,
+                args,
+                chainId,
+            });
+            setResult(data);
+        }
+        catch (error) {
+            const parsedError = getParsedError(error);
+            console.log("The parsedError is:", parsedError);
+            notification.error(parsedError);
+        }
+        finally {
+            setIsFetching(false);
+        }
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-3 py-5 first:pt-0 last:pb-1", children: [_jsxs("div", { className: "font-medium my-0 break-words", children: [abiFunction.name, _jsx(InheritanceTooltip, { inheritedFrom: inheritedFrom })] }), inputElements, _jsxs("div", { className: "flex flex-col md:flex-row justify-between gap-2 flex-wrap", children: [_jsx("div", { className: "grow w-full md:max-w-[80%]", children: result !== null && result !== undefined && (_jsxs("div", { className: "bg-sui-primary-subtle rounded-3xl text-sm px-4 py-1.5 break-words overflow-auto", children: [_jsx("p", { className: "font-bold m-0 mb-1", children: "Result:" }), _jsx("pre", { className: "whitespace-pre-wrap break-words", children: displayTxResult(result, "sm") })] })) }), _jsxs("button", { className: "btn-dc btn-dc-secondary btn-sm self-end md:self-start", onClick: handleRead, disabled: isFetching, children: [isFetching && _jsx("span", { className: "loading-dc loading-dc-spinner loading-xs" }), "Read \uD83D\uDCE1"] })] })] }));
+};

package/dist/esm/components/Tooltip.js

@@ -0,0 +1,37 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getPositionClasses = (position) => {
+    switch (position) {
+        case "top":
+            return "bottom-full left-1/2 transform -translate-x-1/2 mb-2";
+        case "bottom":
+            return "top-full left-1/2 transform -translate-x-1/2 mt-2";
+        case "left":
+            return "right-full top-1/2 transform -translate-y-1/2 mr-2";
+        case "right":
+            return "left-full top-1/2 transform -translate-y-1/2 ml-2";
+        default:
+            return "bottom-full left-1/2 transform -translate-x-1/2 mb-2";
+    }
+};
+const getArrowClasses = (position) => {
+    switch (position) {
+        case "top":
+            return "absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-sui-primary";
+        case "bottom":
+            return "absolute bottom-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-b-sui-primary";
+        case "left":
+            return "absolute left-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-l-sui-primary";
+        case "right":
+            return "absolute right-full top-1/2 transform -translate-y-1/2 border-4 border-transparent border-r-sui-primary";
+        default:
+            return "absolute top-full left-1/2 transform -translate-x-1/2 border-4 border-transparent border-t-sui-primary";
+    }
+};
+export const Tooltip = ({ children, content, position = "top", show = true, className = "", contentClassName = "", }) => {
+    if (!show || !content) {
+        return _jsx(_Fragment, { children: children });
+    }
+    const positionClasses = getPositionClasses(position);
+    const arrowClasses = getArrowClasses(position);
+    return (_jsxs("div", { className: `relative group inline-block ${className}`, children: [children, _jsxs("div", { className: `absolute ${positionClasses} px-2 py-1 text-sm rounded-md whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-10 bg-sui-primary text-sui-primary-content ${contentClassName}`, children: [content, _jsx("div", { className: arrowClasses })] })] }));
+};

package/dist/esm/components/Tuple.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ContractInput } from "./ContractInput";
+import { Collapsible } from "./Collapsible";
+import { getFunctionInputKey, getInitialTupleFormState } from "../utils/contracts";
+import { replacer } from "../utils/utilsDisplay";
+export const Tuple = ({ abiTupleParameter, setParentForm, parentStateObjectKey }) => {
+    const [form, setForm] = useState(() => getInitialTupleFormState(abiTupleParameter));
+    useEffect(() => {
+        const values = Object.values(form);
+        const argsStruct = {};
+        abiTupleParameter.components.forEach((component, componentIndex) => {
+            argsStruct[component.name || `input_${componentIndex}_`] = values[componentIndex];
+        });
+        setParentForm((parentForm) => ({ ...parentForm, [parentStateObjectKey]: JSON.stringify(argsStruct, replacer) }));
+    }, [JSON.stringify(form, replacer)]);
+    return (_jsx(Collapsible, { title: abiTupleParameter.internalType || "tuple", children: _jsx("div", { className: "flex flex-col space-y-4 border-l-2 border-sui-primary-subtle/80 pl-4 ml-3", children: abiTupleParameter?.components?.map((param, index) => {
+                const key = getFunctionInputKey(abiTupleParameter.name || "tuple", param, index);
+                return (_jsx(ContractInput, { setForm: setForm, form: form, stateObjectKey: key, paramType: param }, key));
+            }) }) }));
+};

package/dist/esm/components/TupleArray.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ContractInput } from "./ContractInput";
+import { Collapsible } from "./Collapsible";
+import { getFunctionInputKey, getInitialTupleArrayFormState } from "../utils/contracts";
+import { replacer } from "../utils/utilsDisplay";
+export const TupleArray = ({ abiTupleParameter, setParentForm, parentStateObjectKey }) => {
+    const [form, setForm] = useState(() => getInitialTupleArrayFormState(abiTupleParameter));
+    const [additionalInputs, setAdditionalInputs] = useState([
+        abiTupleParameter.components,
+    ]);
+    const depth = (abiTupleParameter.type.match(/\[\]/g) || []).length;
+    useEffect(() => {
+        // Extract and group fields based on index prefix
+        const groupedFields = Object.keys(form).reduce((acc, key) => {
+            const [indexPrefix, ...restArray] = key.split("_");
+            const componentName = restArray.join("_");
+            if (!acc[indexPrefix]) {
+                acc[indexPrefix] = {};
+            }
+            acc[indexPrefix][componentName] = form[key];
+            return acc;
+        }, {});
+        let argsArray = [];
+        Object.keys(groupedFields).forEach((key) => {
+            const currentKeyValues = Object.values(groupedFields[key]);
+            const argsStruct = {};
+            abiTupleParameter.components.forEach((component, componentIndex) => {
+                argsStruct[component.name || `input_${componentIndex}_`] = currentKeyValues[componentIndex];
+            });
+            argsArray.push(argsStruct);
+        });
+        if (depth > 1) {
+            argsArray = argsArray.map((args) => {
+                return args[abiTupleParameter.components[0].name || "tuple"];
+            });
+        }
+        setParentForm((parentForm) => {
+            return { ...parentForm, [parentStateObjectKey]: JSON.stringify(argsArray, replacer) };
+        });
+    }, [JSON.stringify(form, replacer)]);
+    const addInput = () => {
+        setAdditionalInputs((previousValue) => {
+            const newAdditionalInputs = [...previousValue, abiTupleParameter.components];
+            // Add the new inputs to the form
+            setForm((form) => {
+                const newForm = { ...form };
+                abiTupleParameter.components.forEach((component, componentIndex) => {
+                    const key = getFunctionInputKey(`${newAdditionalInputs.length - 1}_${abiTupleParameter.name || "tuple"}`, component, componentIndex);
+                    newForm[key] = "";
+                });
+                return newForm;
+            });
+            return newAdditionalInputs;
+        });
+    };
+    const removeInput = () => {
+        // Remove the last inputs from the form
+        setForm((form) => {
+            const newForm = { ...form };
+            abiTupleParameter.components.forEach((component, componentIndex) => {
+                const key = getFunctionInputKey(`${additionalInputs.length - 1}_${abiTupleParameter.name || "tuple"}`, component, componentIndex);
+                delete newForm[key];
+            });
+            return newForm;
+        });
+        setAdditionalInputs((inputs) => inputs.slice(0, -1));
+    };
+    return (_jsx(Collapsible, { title: abiTupleParameter.internalType || "tuple-array", children: _jsxs("div", { className: "ml-3 flex flex-col space-y-2 border-l-2 border-sui-primary-subtle/70 pl-4", children: [additionalInputs.map((additionalInput, additionalIndex) => (_jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "inline-block bg-sui-primary-subtle text-sui-primary-content text-xs px-2 py-1 rounded", children: depth > 1 ? `${additionalIndex}` : `tuple[${additionalIndex}]` }), _jsx("div", { className: "space-y-4", children: additionalInput.map((param, index) => {
+                                const key = getFunctionInputKey(`${additionalIndex}_${abiTupleParameter.name || "tuple"}`, param, index);
+                                return (_jsx(ContractInput, { setForm: setForm, form: form, stateObjectKey: key, paramType: param }, key));
+                            }) })] }, additionalIndex))), _jsxs("div", { className: "flex space-x-2", children: [_jsx("button", { className: "btn-dc btn-dc-secondary min-h-9 min-w-9", onClick: addInput, children: "+" }), additionalInputs.length > 0 && (_jsx("button", { className: "btn-dc btn-dc-secondary min-h-9 min-w-9", onClick: removeInput, children: "-" }))] })] }) }));
+};

package/dist/esm/components/TxReceipt.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { CheckCircleIcon, DocumentDuplicateIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
+import { useCopyToClipboard } from "../hooks/useCopyToClipboard";
+import { ObjectFieldDisplay, replacer } from "../utils/utilsDisplay";
+export const TxReceipt = ({ txResult }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const { copyToClipboard: copyTxResultToClipboard, isCopiedToClipboard: isTxResultCopiedToClipboard } = useCopyToClipboard();
+    const toggleExpanded = () => {
+        setIsExpanded(!isExpanded);
+    };
+    return (_jsxs("div", { className: `text-sm bg-sui-primary-subtle ${isExpanded ? "rounded-t-3xl" : "rounded-3xl"} min-h-0 py-0`, children: [_jsxs("div", { className: "flex items-center", children: [_jsx("div", { className: "mt-1 pl-2 flex-shrink-0", children: isTxResultCopiedToClipboard ? (_jsx(CheckCircleIcon, { className: "ml-1.5 text-xl font-normal text-sui-primary-content h-5 w-5 cursor-pointer", "aria-hidden": "true" })) : (_jsx(DocumentDuplicateIcon, { className: "ml-1.5 text-xl font-normal h-5 w-5 cursor-pointer", "aria-hidden": "true", onClick: () => copyTxResultToClipboard(JSON.stringify(txResult, replacer, 2)) })) }), _jsxs("div", { className: "flex-1 flex items-center justify-between cursor-pointer py-1.5 pl-1 pr-4", onClick: toggleExpanded, children: [_jsx("strong", { className: "text-sm", children: "Transaction Receipt" }), _jsx(ChevronDownIcon, { className: `h-4 w-4 transition-transform duration-200 flex-shrink-0 ${isExpanded ? "rotate-180" : ""}` })] })] }), _jsx("div", { className: `overflow-auto transition-all duration-300 ease-in-out rounded-b-3xl ${isExpanded ? "max-h-96 opacity-100" : "max-h-0 opacity-0"}`, children: _jsx("div", { className: "overflow-auto bg-sui-primary-subtle rounded-b-3xl border-t border-gray-300/20", children: _jsx("pre", { className: "text-xs p-4 whitespace-pre-wrap break-words rounded-b-3xl", children: Object.entries(txResult).map(([k, v]) => (_jsx(ObjectFieldDisplay, { name: k, value: v, size: "xs", leftPad: false }, k))) }) }) })] }));
+};

package/dist/esm/components/WriteOnlyFunctionForm.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { InheritanceTooltip } from "./InheritanceTooltip";
+import { useAccount, useConfig, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
+import { getFunctionInputKey, getInitialFormState, getParsedContractFunctionArgs, resolveHederaNativeAccountIdsInForm, simulateContractWriteAndNotifyError, transformAbiFunction, } from "../utils/contracts";
+import { useTransactor } from "../hooks/useTransactor";
+import { ContractInput } from "./ContractInput";
+import { IntegerInput } from "./inputs/IntegerInput";
+import { TxReceipt } from "./TxReceipt";
+import { Tooltip } from "./Tooltip";
+import { useContractConfig } from "../contexts/ContractConfigContext";
+export const WriteOnlyFunctionForm = ({ abi, abiFunction, onChange, contractAddress, inheritedFrom, }) => {
+    const { chainId } = useContractConfig();
+    const [form, setForm] = useState(() => getInitialFormState(abiFunction));
+    const [txValue, setTxValue] = useState("");
+    const { chain } = useAccount();
+    const writeTxn = useTransactor();
+    const writeDisabled = !chain || chain?.id !== chainId;
+    const { data: result, isPending, writeContractAsync } = useWriteContract();
+    const wagmiConfig = useConfig();
+    const handleWrite = async () => {
+        if (writeContractAsync) {
+            try {
+                setDisplayedTxResult(undefined);
+                const resolvedForm = await resolveHederaNativeAccountIdsInForm(form, abiFunction, chainId);
+                const writeContractObj = {
+                    address: contractAddress,
+                    functionName: abiFunction.name,
+                    abi: abi,
+                    args: getParsedContractFunctionArgs(resolvedForm),
+                    value: BigInt(txValue),
+                };
+                await simulateContractWriteAndNotifyError({ wagmiConfig, writeContractParams: writeContractObj });
+                const makeWriteWithParams = () => writeContractAsync(writeContractObj);
+                await writeTxn(makeWriteWithParams);
+                onChange();
+            }
+            catch (e) {
+                console.error("⚡️ ~ file: WriteOnlyFunctionForm.tsx:handleWrite ~ error", e);
+            }
+        }
+    };
+    const [displayedTxResult, setDisplayedTxResult] = useState();
+    const { data: txResult } = useWaitForTransactionReceipt({
+        hash: result,
+    });
+    useEffect(() => {
+        setDisplayedTxResult(txResult);
+    }, [txResult]);
+    // TODO use `useMemo` to optimize also update in ReadOnlyFunctionForm
+    const transformedFunction = transformAbiFunction(abiFunction);
+    const inputs = transformedFunction.inputs.map((input, inputIndex) => {
+        const key = getFunctionInputKey(abiFunction.name, input, inputIndex);
+        return (_jsx(ContractInput, { setForm: setForm, form: form, stateObjectKey: key, paramType: input }, key));
+    });
+    const zeroInputs = inputs.length === 0 && abiFunction.stateMutability !== "payable";
+    return (_jsxs("div", { className: "py-5 space-y-3 first:pt-0 last:pb-1", children: [_jsxs("div", { className: `flex gap-3 ${zeroInputs ? "flex-row justify-between items-center" : "flex-col"}`, children: [_jsxs("div", { className: "font-medium my-0 break-words", children: [abiFunction.name, _jsx(InheritanceTooltip, { inheritedFrom: inheritedFrom })] }), inputs, abiFunction.stateMutability === "payable" ? (_jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [_jsxs("div", { className: "flex items-center ml-2", children: [_jsx("span", { className: "text-xs font-medium mr-2 leading-none", children: "payable value" }), _jsx("span", { className: "block text-xs font-extralight leading-none", children: "wei" })] }), _jsx(IntegerInput, { value: txValue, onChange: setTxValue, placeholder: "value (wei)" })] })) : null, _jsxs("div", { className: "flex justify-between gap-2 min-w-0", children: [!zeroInputs && (_jsx("div", { className: "flex-1 min-w-0 max-w-11/12 overflow-auto", children: displayedTxResult ? _jsx(TxReceipt, { txResult: displayedTxResult }) : null })), _jsx("div", { className: "flex flex-shrink-0 self-start", children: _jsx(Tooltip, { content: "Wallet not connected or in the wrong network", position: "bottom", show: writeDisabled, children: _jsxs("button", { className: "btn-dc btn-dc-secondary btn-sm", disabled: writeDisabled || isPending, onClick: handleWrite, children: [isPending && _jsx("span", { className: "loading-dc loading-dc-spinner mr-1" }), "Send \uD83D\uDCB8"] }) }) })] })] }), zeroInputs && txResult ? (_jsx("div", { className: "w-full min-w-0 overflow-auto", children: _jsx(TxReceipt, { txResult: txResult }) })) : null] }));
+};

package/dist/esm/components/inputs/Bytes32Input.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { hexToString, isHex, stringToHex } from "viem";
+import { BaseInput } from "@scaffold-hbar-ui/components";
+export const Bytes32Input = ({ value, onChange, name, placeholder, disabled }) => {
+    const convertStringToBytes32 = useCallback(() => {
+        if (!value) {
+            return;
+        }
+        onChange(isHex(value) ? hexToString(value, { size: 32 }) : stringToHex(value, { size: 32 }));
+    }, [onChange, value]);
+    return (_jsx(BaseInput, { name: name, value: value, placeholder: placeholder, onChange: onChange, disabled: disabled, suffix: _jsx("button", { className: "self-center cursor-pointer text-xl font-semibold px-4 text-sui-accent", onClick: convertStringToBytes32, type: "button", children: "#" }) }));
+};

package/dist/esm/components/inputs/BytesInput.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { bytesToString, isHex, toBytes, toHex } from "viem";
+import { BaseInput } from "@scaffold-hbar-ui/components";
+export const BytesInput = ({ value, onChange, name, placeholder, disabled }) => {
+    const convertStringToBytes = useCallback(() => {
+        onChange(isHex(value) ? bytesToString(toBytes(value)) : toHex(toBytes(value)));
+    }, [onChange, value]);
+    return (_jsx(BaseInput, { name: name, value: value, placeholder: placeholder, onChange: onChange, disabled: disabled, suffix: _jsx("button", { className: "self-center cursor-pointer font-semibold px-4 text-sui-accent", onClick: convertStringToBytes, type: "button", children: "#" }) }));
+};

package/dist/esm/components/inputs/DecimalMultiplierButtons.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { parseEther } from "viem";
+import { Tooltip } from "../Tooltip";
+/**
+ * Returns the "base" value by stripping trailing zeros from integers.
+ * So clicking ×1e8 then ×1e18 (or vice versa) applies only the last clicked factor.
+ * e.g. "1000000000000000000" → "1", "100000000" → "1". Values with decimals are unchanged.
+ */
+function normalizeToBase(value) {
+    const trimmed = value.trim();
+    if (!trimmed || trimmed === "0")
+        return trimmed;
+    if (trimmed.includes("."))
+        return trimmed;
+    try {
+        const big = BigInt(trimmed);
+        if (big === 0n)
+            return "0";
+        const s = big.toString();
+        const withoutTrailing = s.replace(/0+$/, "");
+        if (withoutTrailing === s)
+            return s;
+        const trailingCount = s.length - withoutTrailing.length;
+        return (big / BigInt(10 ** trailingCount)).toString();
+    }
+    catch {
+        return trimmed;
+    }
+}
+/** Multiplies a decimal string by 1e8 (Hedera 8 decimals) without float precision loss */
+function multiplyValueBy1e8(value) {
+    const parts = value.trim().split(".");
+    const intPart = parts[0] || "0";
+    const fracPart = (parts[1] || "").padEnd(8, "0").slice(0, 8);
+    const result = BigInt(intPart) * BigInt(10 ** 8) + BigInt(fracPart || "0");
+    return result.toString();
+}
+export const DecimalMultiplierButtons = ({ value, onChange, disabled = false }) => {
+    const multiplyBy1e18 = useCallback(() => {
+        if (!value)
+            return;
+        const base = normalizeToBase(value);
+        onChange(parseEther(base).toString());
+    }, [onChange, value]);
+    const multiplyBy1e8 = useCallback(() => {
+        if (!value)
+            return;
+        const base = normalizeToBase(value);
+        onChange(multiplyValueBy1e8(base));
+    }, [onChange, value]);
+    const buttonClass = [
+        "h-full rounded px-2 py-0.5 text-xs font-medium transition-colors",
+        "text-sui-base-content/55 hover:text-sui-base-content hover:bg-sui-primary-subtle",
+        disabled ? "cursor-not-allowed opacity-40" : "cursor-pointer",
+    ].join(" ");
+    return (_jsxs("div", { className: "flex items-center gap-0", children: [_jsx(Tooltip, { content: "Multiply by 1e8 (tinybars)", position: "top", children: _jsx("button", { className: buttonClass, onClick: multiplyBy1e8, disabled: disabled, type: "button", children: "\u00D71e8" }) }), _jsx("span", { className: "text-sui-base-content/40 text-xs px-0.5 select-none", "aria-hidden": true, children: "|" }), _jsx(Tooltip, { content: "Multiply by 1e18 (wei)", position: "top", children: _jsx("button", { className: buttonClass, onClick: multiplyBy1e18, disabled: disabled, type: "button", children: "\u00D71e18" }) })] }));
+};

package/dist/esm/components/inputs/IntegerInput.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { IntegerVariant, isValidInteger } from "../../utils/inputs";
+import { BaseInput } from "@scaffold-hbar-ui/components";
+import { DecimalMultiplierButtons } from "./DecimalMultiplierButtons";
+export const IntegerInput = ({ value, onChange, name, placeholder, disabled, variant = IntegerVariant.UINT256, }) => {
+    const [inputError, setInputError] = useState(false);
+    useEffect(() => {
+        if (isValidInteger(variant, value)) {
+            setInputError(false);
+        }
+        else {
+            setInputError(true);
+        }
+    }, [value, variant]);
+    return (_jsx(BaseInput, { name: name, value: value, placeholder: placeholder, error: inputError, onChange: onChange, disabled: disabled, suffix: !inputError && (_jsx(DecimalMultiplierButtons, { value: value, onChange: onChange, disabled: disabled })) }));
+};

package/dist/esm/components/inputs/index.js

@@ -0,0 +1,4 @@
+export { Bytes32Input } from "./Bytes32Input";
+export { BytesInput } from "./BytesInput";
+export { DecimalMultiplierButtons } from "./DecimalMultiplierButtons";
+export { IntegerInput } from "./IntegerInput";

package/dist/esm/contexts/ContractConfigContext.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const ContractConfigContext = createContext(undefined);
+export const ContractConfigProvider = ({ children, config }) => {
+    return _jsx(ContractConfigContext.Provider, { value: config, children: children });
+};
+export const useContractConfig = () => {
+    const context = useContext(ContractConfigContext);
+    if (context === undefined) {
+        throw new Error("useContractConfig must be used within a ContractConfigProvider");
+    }
+    return context;
+};