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

package/dist/esm/hooks/useAnimationConfig.js

@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react";
+const ANIMATION_TIME = 2000;
+export function useAnimationConfig(data) {
+    const [showAnimation, setShowAnimation] = useState(false);
+    const [prevData, setPrevData] = useState();
+    useEffect(() => {
+        if (prevData !== undefined && prevData !== data) {
+            setShowAnimation(true);
+            setTimeout(() => setShowAnimation(false), ANIMATION_TIME);
+        }
+        setPrevData(data);
+    }, [data, prevData]);
+    return {
+        showAnimation,
+    };
+}

package/dist/esm/hooks/useCopyToClipboard.js

@@ -0,0 +1,17 @@
+import { useState } from "react";
+export const useCopyToClipboard = () => {
+    const [isCopiedToClipboard, setIsCopiedToClipboard] = useState(false);
+    const copyToClipboard = async (text) => {
+        try {
+            await navigator.clipboard.writeText(text);
+            setIsCopiedToClipboard(true);
+            setTimeout(() => {
+                setIsCopiedToClipboard(false);
+            }, 800);
+        }
+        catch (err) {
+            console.error("Failed to copy text:", err);
+        }
+    };
+    return { copyToClipboard, isCopiedToClipboard };
+};

package/dist/esm/hooks/useTransactor.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useConfig, useWalletClient } from "wagmi";
+import { getPublicClient } from "wagmi/actions";
+import { getParsedError } from "../utils/getParsedError";
+import { notification } from "../utils/notification";
+import { getBlockExplorerTxLink } from "../utils/networks";
+/**
+ * Custom notification content for TXs.
+ */
+const TxnNotification = ({ message, blockExplorerLink }) => {
+    return (_jsxs("div", { className: `flex flex-col ml-1 cursor-default`, children: [_jsx("p", { className: "my-0", children: message }), blockExplorerLink && blockExplorerLink.length > 0 ? (_jsx("a", { href: blockExplorerLink, target: "_blank", rel: "noreferrer", className: "block link-dc", children: "check out transaction" })) : null] }));
+};
+/**
+ * Runs Transaction passed in to returned function showing UI feedback.
+ * @param _walletClient - Optional wallet client to use. If not provided, will use the one from useWalletClient.
+ * @returns function that takes in transaction function as callback, shows UI feedback for transaction and returns a promise of the transaction hash
+ */
+export const useTransactor = (_walletClient) => {
+    let walletClient = _walletClient;
+    const { data } = useWalletClient();
+    const wagmiConfig = useConfig();
+    if (walletClient === undefined && data) {
+        walletClient = data;
+    }
+    const result = async (tx, options) => {
+        if (!walletClient) {
+            notification.error("Cannot access account");
+            console.error("⚡️ ~ file: useTransactor.tsx ~ error");
+            return;
+        }
+        let notificationId = null;
+        let transactionHash = undefined;
+        let transactionReceipt;
+        let blockExplorerTxURL = "";
+        try {
+            const network = await walletClient.getChainId();
+            // Get full transaction from public client
+            const publicClient = getPublicClient(wagmiConfig);
+            if (!publicClient)
+                throw new Error("Unable to access public client");
+            notificationId = notification.loading(_jsx(TxnNotification, { message: "Awaiting for user confirmation" }));
+            if (typeof tx === "function") {
+                // Tx is already prepared by the caller
+                const result = await tx();
+                transactionHash = result;
+            }
+            else if (tx != null) {
+                transactionHash = await walletClient.sendTransaction(tx);
+            }
+            else {
+                throw new Error("Incorrect transaction passed to transactor");
+            }
+            notification.remove(notificationId);
+            blockExplorerTxURL = network ? getBlockExplorerTxLink(network, transactionHash) : "";
+            notificationId = notification.loading(_jsx(TxnNotification, { message: "Waiting for transaction to complete.", blockExplorerLink: blockExplorerTxURL }));
+            transactionReceipt = await publicClient.waitForTransactionReceipt({
+                hash: transactionHash,
+                confirmations: options?.blockConfirmations,
+            });
+            notification.remove(notificationId);
+            if (transactionReceipt.status === "reverted")
+                throw new Error("Transaction reverted");
+            notification.success(_jsx(TxnNotification, { message: "Transaction completed successfully!", blockExplorerLink: blockExplorerTxURL }), {
+                icon: "🎉",
+            });
+            if (options?.onBlockConfirmation)
+                options.onBlockConfirmation(transactionReceipt);
+        }
+        catch (error) {
+            if (notificationId) {
+                notification.remove(notificationId);
+            }
+            console.error("⚡️ ~ file: useTransactor.ts ~ error", error);
+            const message = getParsedError(error);
+            // if receipt was reverted, show notification with block explorer link and return error
+            if (transactionReceipt?.status === "reverted") {
+                notification.error(_jsx(TxnNotification, { message: message, blockExplorerLink: blockExplorerTxURL }));
+                throw error;
+            }
+            notification.error(message);
+            throw error;
+        }
+        return transactionHash;
+    };
+    return result;
+};

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export { Contract } from "./Contract";
+export { useContractConfig, ContractConfigProvider } from "./contexts/ContractConfigContext";
+export { Bytes32Input, BytesInput, DecimalMultiplierButtons, IntegerInput, } from "./components/inputs/index";
+export { IntegerVariant } from "./utils/inputs";

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/utils/common.js

@@ -0,0 +1,42 @@
+import { hardhat, polygon, polygonMumbai, optimismSepolia, optimism, arbitrum, fantom, arbitrumSepolia, fantomTestnet, scrollSepolia, celo, celoAlfajores, sepolia, } from "viem/chains";
+export const NETWORKS_EXTRA_DATA = {
+    [hardhat.id]: {
+        color: "#b8af0c",
+    },
+    [sepolia.id]: {
+        color: "#87ff65",
+    },
+    [polygon.id]: {
+        color: "#2bbdf7",
+    },
+    [polygonMumbai.id]: {
+        color: "#92D9FA",
+    },
+    [optimismSepolia.id]: {
+        color: "#f01a37",
+    },
+    [optimism.id]: {
+        color: "#f01a37",
+    },
+    [arbitrumSepolia.id]: {
+        color: "#28a0f0",
+    },
+    [arbitrum.id]: {
+        color: "#28a0f0",
+    },
+    [fantom.id]: {
+        color: "#1969ff",
+    },
+    [fantomTestnet.id]: {
+        color: "#1969ff",
+    },
+    [scrollSepolia.id]: {
+        color: "#fbebd4",
+    },
+    [celo.id]: {
+        color: "#FCFF52",
+    },
+    [celoAlfajores.id]: {
+        color: "#476520",
+    },
+};

package/dist/esm/utils/contracts.js

@@ -0,0 +1,186 @@
+import { getAddress } from "viem";
+import { simulateContract } from "wagmi/actions";
+import { chainIdToHederaNetwork, getEvmAddressFromHederaAccountId, HEDERA_CHAIN_IDS } from "@scaffold-hbar-ui/hooks";
+import { getParsedError } from "./getParsedError";
+import { notification } from "./notification";
+/**
+ * Generates a key based on function metadata
+ */
+const getFunctionInputKey = (functionName, input, inputIndex) => {
+    const name = input?.name || `input_${inputIndex}_`;
+    return functionName + "_" + name + "_" + input.internalType + "_" + input.type;
+};
+const isJsonString = (str) => {
+    try {
+        JSON.parse(str);
+        return true;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    }
+    catch (e) {
+        return false;
+    }
+};
+const isBigInt = (str) => {
+    if (str.trim().length === 0 || str.startsWith("0"))
+        return false;
+    try {
+        BigInt(str);
+        return true;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    }
+    catch (e) {
+        return false;
+    }
+};
+// Recursive function to deeply parse JSON strings, correctly handling nested arrays and encoded JSON strings
+const deepParseValues = (value) => {
+    if (typeof value === "string") {
+        // first try with bigInt because we losse precision with JSON.parse
+        if (isBigInt(value)) {
+            return BigInt(value);
+        }
+        if (isJsonString(value)) {
+            const parsed = JSON.parse(value);
+            return deepParseValues(parsed);
+        }
+        // It's a string but not a JSON string, return as is
+        return value;
+    }
+    else if (Array.isArray(value)) {
+        // If it's an array, recursively parse each element
+        return value.map((element) => deepParseValues(element));
+    }
+    else if (typeof value === "object" && value !== null) {
+        // If it's an object, recursively parse each value
+        return Object.entries(value).reduce((acc, [key, val]) => {
+            acc[key] = deepParseValues(val);
+            return acc;
+        }, {});
+    }
+    // Handle boolean values represented as strings
+    if (value === "true" || value === "1" || value === "0x1" || value === "0x01" || value === "0x0001") {
+        return true;
+    }
+    else if (value === "false" || value === "0" || value === "0x0" || value === "0x00" || value === "0x0000") {
+        return false;
+    }
+    return value;
+};
+/**
+ * parses form input with array support
+ */
+const getParsedContractFunctionArgs = (form) => {
+    return Object.keys(form).map((key) => {
+        const valueOfArg = form[key];
+        // Attempt to deeply parse JSON strings
+        return deepParseValues(valueOfArg);
+    });
+};
+const getInitialFormState = (abiFunction) => {
+    const initialForm = {};
+    if (!abiFunction.inputs)
+        return initialForm;
+    abiFunction.inputs.forEach((input, inputIndex) => {
+        const key = getFunctionInputKey(abiFunction.name, input, inputIndex);
+        initialForm[key] = "";
+    });
+    return initialForm;
+};
+const getInitialTupleFormState = (abiTupleParameter) => {
+    const initialForm = {};
+    if (abiTupleParameter.components.length === 0)
+        return initialForm;
+    abiTupleParameter.components.forEach((component, componentIndex) => {
+        const key = getFunctionInputKey(abiTupleParameter.name || "tuple", component, componentIndex);
+        initialForm[key] = "";
+    });
+    return initialForm;
+};
+const getInitialTupleArrayFormState = (abiTupleParameter) => {
+    const initialForm = {};
+    if (abiTupleParameter.components.length === 0)
+        return initialForm;
+    abiTupleParameter.components.forEach((component, componentIndex) => {
+        const key = getFunctionInputKey("0_" + abiTupleParameter.name || "tuple", component, componentIndex);
+        initialForm[key] = "";
+    });
+    return initialForm;
+};
+const adjustInput = (input) => {
+    if (input.type.startsWith("tuple[")) {
+        const depth = (input.type.match(/\[\]/g) || []).length;
+        return {
+            ...input,
+            components: transformComponents(input.components, depth, {
+                internalType: input.internalType || "struct",
+                name: input.name,
+            }),
+        };
+    }
+    else if (input.components) {
+        return {
+            ...input,
+            components: input.components.map((value) => adjustInput(value)),
+        };
+    }
+    return input;
+};
+const transformComponents = (components, depth, parentComponentData) => {
+    // Base case: if depth is 1 or no components, return the original components
+    if (depth === 1 || !components) {
+        return [...components];
+    }
+    // Recursive case: wrap components in an additional tuple layer
+    const wrappedComponents = {
+        internalType: `${parentComponentData.internalType || "struct"}`.replace(/\[\]/g, "") + "[]".repeat(depth - 1),
+        name: `${parentComponentData.name || "tuple"}`,
+        type: `tuple${"[]".repeat(depth - 1)}`,
+        components: transformComponents(components, depth - 1, parentComponentData),
+    };
+    return [wrappedComponents];
+};
+const transformAbiFunction = (abiFunction) => {
+    return {
+        ...abiFunction,
+        inputs: abiFunction.inputs.map((value) => adjustInput(value)),
+    };
+};
+const NATIVE_ACCOUNT_ID_REGEX = /^\d+\.\d+\.\d+$/;
+/**
+ * For Hedera chains: replaces top-level `address` form fields that look like `0.0.n`
+ * with the checksummed EVM alias so ABI encoding / simulate / read succeed.
+ */
+export async function resolveHederaNativeAccountIdsInForm(form, abiFunction, chainId) {
+    if (!HEDERA_CHAIN_IDS.has(chainId)) {
+        return form;
+    }
+    const network = chainIdToHederaNetwork(chainId);
+    const transformedFunction = transformAbiFunction(abiFunction);
+    const resolved = { ...form };
+    for (let inputIndex = 0; inputIndex < transformedFunction.inputs.length; inputIndex++) {
+        const input = transformedFunction.inputs[inputIndex];
+        if (input.type !== "address")
+            continue;
+        const key = getFunctionInputKey(abiFunction.name, input, inputIndex);
+        const raw = String(resolved[key] ?? "").trim();
+        if (!NATIVE_ACCOUNT_ID_REGEX.test(raw))
+            continue;
+        const evm = await getEvmAddressFromHederaAccountId(raw, network);
+        if (evm === null) {
+            throw new Error(`Account ${raw} has no EVM alias on this network.`);
+        }
+        resolved[key] = getAddress(evm);
+    }
+    return resolved;
+}
+export { getFunctionInputKey, getInitialFormState, getParsedContractFunctionArgs, getInitialTupleFormState, getInitialTupleArrayFormState, transformAbiFunction, };
+export const simulateContractWriteAndNotifyError = async ({ wagmiConfig, writeContractParams: params, }) => {
+    try {
+        await simulateContract(wagmiConfig, params);
+    }
+    catch (error) {
+        const parsedError = getParsedError(error);
+        notification.error(parsedError);
+        throw error;
+    }
+};

package/dist/esm/utils/getParsedError.js

@@ -0,0 +1,25 @@
+import { BaseError as BaseViemError, ContractFunctionRevertedError } from "viem";
+/**
+ * Parses an viem/wagmi error to get a displayable string
+ * @param e - error object
+ * @returns parsed error string
+ */
+export const getParsedError = (error) => {
+    const parsedError = error?.walk ? error.walk() : error;
+    if (parsedError instanceof BaseViemError) {
+        if (parsedError.details) {
+            return parsedError.details;
+        }
+        if (parsedError.shortMessage) {
+            if (parsedError instanceof ContractFunctionRevertedError &&
+                parsedError.data &&
+                parsedError.data.errorName !== "Error") {
+                const customErrorArgs = parsedError.data.args?.toString() ?? "";
+                return `${parsedError.shortMessage.replace(/reverted\.$/, "reverted with the following reason:")}\n${parsedError.data.errorName}(${customErrorArgs})`;
+            }
+            return parsedError.shortMessage;
+        }
+        return parsedError.message ?? parsedError.name ?? "An unknown error occurred";
+    }
+    return parsedError?.message ?? "An unknown error occurred";
+};

package/dist/esm/utils/inputs.js

@@ -0,0 +1,100 @@
+export var IntegerVariant;
+(function (IntegerVariant) {
+    IntegerVariant["UINT8"] = "uint8";
+    IntegerVariant["UINT16"] = "uint16";
+    IntegerVariant["UINT24"] = "uint24";
+    IntegerVariant["UINT32"] = "uint32";
+    IntegerVariant["UINT40"] = "uint40";
+    IntegerVariant["UINT48"] = "uint48";
+    IntegerVariant["UINT56"] = "uint56";
+    IntegerVariant["UINT64"] = "uint64";
+    IntegerVariant["UINT72"] = "uint72";
+    IntegerVariant["UINT80"] = "uint80";
+    IntegerVariant["UINT88"] = "uint88";
+    IntegerVariant["UINT96"] = "uint96";
+    IntegerVariant["UINT104"] = "uint104";
+    IntegerVariant["UINT112"] = "uint112";
+    IntegerVariant["UINT120"] = "uint120";
+    IntegerVariant["UINT128"] = "uint128";
+    IntegerVariant["UINT136"] = "uint136";
+    IntegerVariant["UINT144"] = "uint144";
+    IntegerVariant["UINT152"] = "uint152";
+    IntegerVariant["UINT160"] = "uint160";
+    IntegerVariant["UINT168"] = "uint168";
+    IntegerVariant["UINT176"] = "uint176";
+    IntegerVariant["UINT184"] = "uint184";
+    IntegerVariant["UINT192"] = "uint192";
+    IntegerVariant["UINT200"] = "uint200";
+    IntegerVariant["UINT208"] = "uint208";
+    IntegerVariant["UINT216"] = "uint216";
+    IntegerVariant["UINT224"] = "uint224";
+    IntegerVariant["UINT232"] = "uint232";
+    IntegerVariant["UINT240"] = "uint240";
+    IntegerVariant["UINT248"] = "uint248";
+    IntegerVariant["UINT256"] = "uint256";
+    IntegerVariant["INT8"] = "int8";
+    IntegerVariant["INT16"] = "int16";
+    IntegerVariant["INT24"] = "int24";
+    IntegerVariant["INT32"] = "int32";
+    IntegerVariant["INT40"] = "int40";
+    IntegerVariant["INT48"] = "int48";
+    IntegerVariant["INT56"] = "int56";
+    IntegerVariant["INT64"] = "int64";
+    IntegerVariant["INT72"] = "int72";
+    IntegerVariant["INT80"] = "int80";
+    IntegerVariant["INT88"] = "int88";
+    IntegerVariant["INT96"] = "int96";
+    IntegerVariant["INT104"] = "int104";
+    IntegerVariant["INT112"] = "int112";
+    IntegerVariant["INT120"] = "int120";
+    IntegerVariant["INT128"] = "int128";
+    IntegerVariant["INT136"] = "int136";
+    IntegerVariant["INT144"] = "int144";
+    IntegerVariant["INT152"] = "int152";
+    IntegerVariant["INT160"] = "int160";
+    IntegerVariant["INT168"] = "int168";
+    IntegerVariant["INT176"] = "int176";
+    IntegerVariant["INT184"] = "int184";
+    IntegerVariant["INT192"] = "int192";
+    IntegerVariant["INT200"] = "int200";
+    IntegerVariant["INT208"] = "int208";
+    IntegerVariant["INT216"] = "int216";
+    IntegerVariant["INT224"] = "int224";
+    IntegerVariant["INT232"] = "int232";
+    IntegerVariant["INT240"] = "int240";
+    IntegerVariant["INT248"] = "int248";
+    IntegerVariant["INT256"] = "int256";
+})(IntegerVariant || (IntegerVariant = {}));
+export const SIGNED_NUMBER_REGEX = /^-?\d+\.?\d*$/;
+export const UNSIGNED_NUMBER_REGEX = /^\.?\d+\.?\d*$/;
+export const isValidInteger = (dataType, value) => {
+    const isSigned = dataType.startsWith("i");
+    const bitcount = Number(dataType.substring(isSigned ? 3 : 4));
+    let valueAsBigInt;
+    try {
+        valueAsBigInt = BigInt(value);
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    }
+    catch (e) {
+        // console.error(e);
+    }
+    if (typeof valueAsBigInt !== "bigint") {
+        if (!value || typeof value !== "string") {
+            return true;
+        }
+        return isSigned ? SIGNED_NUMBER_REGEX.test(value) || value === "-" : UNSIGNED_NUMBER_REGEX.test(value);
+    }
+    else if (!isSigned && valueAsBigInt < 0) {
+        return false;
+    }
+    const hexString = valueAsBigInt.toString(16);
+    const significantHexDigits = hexString.match(/.*x0*(.*)$/)?.[1] ?? "";
+    if (significantHexDigits.length * 4 > bitcount ||
+        (isSigned && significantHexDigits.length * 4 === bitcount && parseInt(significantHexDigits.slice(-1)?.[0], 16) < 8)) {
+        return false;
+    }
+    return true;
+};
+// Treat any dot-separated string as a potential ENS name
+const ensRegex = /.+\..+/;
+export const isENS = (address = "") => ensRegex.test(address);

package/dist/esm/utils/networks.js

@@ -0,0 +1,46 @@
+import * as chains from "viem/chains";
+/**
+ * Gives the block explorer transaction URL, returns empty string if the network is a local chain
+ */
+export function getBlockExplorerTxLink(chainId, txnHash) {
+    const chainNames = Object.keys(chains);
+    const targetChainArr = chainNames.filter((chainName) => {
+        const wagmiChain = chains[chainName];
+        return wagmiChain.id === chainId;
+    });
+    if (targetChainArr.length === 0) {
+        return "";
+    }
+    const targetChain = targetChainArr[0];
+    const blockExplorerTxURL = chains[targetChain]?.blockExplorers?.default?.url;
+    if (!blockExplorerTxURL) {
+        return "";
+    }
+    return `${blockExplorerTxURL}/tx/${txnHash}`;
+}
+function hashscanBaseUrlForChainId(chainId) {
+    if (chainId === chains.hedera.id)
+        return "https://hashscan.io/mainnet";
+    if (chainId === chains.hederaTestnet.id)
+        return "https://hashscan.io/testnet";
+    return "https://hashscan.io/testnet";
+}
+function isHederaChainId(chainId) {
+    return chainId === chains.hedera.id || chainId === chains.hederaTestnet.id;
+}
+/**
+ * Gives the block explorer URL for a given address.
+ * Hedera chains use HashScan with `/account/`; EVM explorers use `/address/`.
+ * If no explorer is configured on the chain, falls back to HashScan (mainnet / testnet by id, else testnet).
+ */
+export function getBlockExplorerAddressLink(network, address) {
+    const blockExplorerBaseURL = network.blockExplorers?.default?.url;
+    if (network.id === chains.hardhat.id) {
+        return `/blockexplorer/address/${address}`;
+    }
+    if (!blockExplorerBaseURL) {
+        return `${hashscanBaseUrlForChainId(network.id)}/account/${address}`;
+    }
+    const pathSegment = isHederaChainId(network.id) ? "account" : "address";
+    return `${blockExplorerBaseURL}/${pathSegment}/${address}`;
+}

package/dist/esm/utils/notification.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toast } from "react-hot-toast";
+import { XMarkIcon } from "@heroicons/react/20/solid";
+import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, InformationCircleIcon, } from "@heroicons/react/24/solid";
+const ENUM_STATUSES = {
+    success: _jsx(CheckCircleIcon, { className: "w-7 text-success" }),
+    loading: _jsx("span", { className: "w-4 loading-dc loading-dc-spinner" }),
+    error: _jsx(ExclamationCircleIcon, { className: "w-7 text-error" }),
+    info: _jsx(InformationCircleIcon, { className: "w-7 text-sui-primary" }),
+    warning: _jsx(ExclamationTriangleIcon, { className: "w-7 text-warning" }),
+};
+const DEFAULT_DURATION = 3000;
+const DEFAULT_POSITION = "top-center";
+/**
+ * Custom Notification
+ */
+const Notification = ({ content, status, duration = DEFAULT_DURATION, icon, position = DEFAULT_POSITION, }) => {
+    return toast.custom((t) => (_jsxs("div", { className: `flex flex-row items-start justify-between max-w-sm rounded-xl shadow-center shadow-sui-primary bg-sui-primary-neutral p-4 transform-gpu relative transition-all duration-500 ease-in-out space-x-2
+        ${position.substring(0, 3) == "top"
+            ? `hover:translate-y-1 ${t.visible ? "top-0" : "-top-96"}`
+            : `hover:-translate-y-1 ${t.visible ? "bottom-0" : "-bottom-96"}`}`, children: [_jsx("div", { className: "self-center", children: icon ? icon : ENUM_STATUSES[status] }), _jsx("div", { className: `overflow-x-hidden break-words whitespace-pre-line ${icon ? "mt-1" : ""}`, children: content }), _jsx("div", { className: `cursor-pointer text-lg ${icon ? "mt-1" : ""}`, onClick: () => toast.dismiss(t.id), children: _jsx(XMarkIcon, { className: "w-6 cursor-pointer", onClick: () => toast.remove(t.id) }) })] })), {
+        duration: status === "loading" ? Infinity : duration,
+        position,
+    });
+};
+export const notification = {
+    success: (content, options) => {
+        return Notification({ content, status: "success", ...options });
+    },
+    info: (content, options) => {
+        return Notification({ content, status: "info", ...options });
+    },
+    warning: (content, options) => {
+        return Notification({ content, status: "warning", ...options });
+    },
+    error: (content, options) => {
+        return Notification({ content, status: "error", ...options });
+    },
+    loading: (content, options) => {
+        return Notification({ content, status: "loading", ...options });
+    },
+    remove: (toastId) => {
+        toast.remove(toastId);
+    },
+};

package/dist/esm/utils/utilsDisplay.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { formatEther, formatUnits, isAddress, isHex } from "viem";
+import { Address } from "@scaffold-hbar-ui/components";
+import { Tooltip } from "../components/Tooltip";
+import { useContractConfig } from "../contexts/ContractConfigContext";
+// To be used in JSON.stringify when a field might be bigint
+// https://wagmi.sh/react/faq#bigint-serialization
+export const replacer = (_key, value) => (typeof value === "bigint" ? value.toString() : value);
+const AddressWithConfig = ({ address, size }) => {
+    const { chain, blockExplorerAddressLink } = useContractConfig();
+    return (_jsx(Address, { address: address, size: size, chain: chain, blockExplorerAddressLink: blockExplorerAddressLink }));
+};
+export const displayTxResult = (displayContent, fontSize = "base") => {
+    if (displayContent == null) {
+        return "";
+    }
+    if (typeof displayContent === "bigint") {
+        return _jsx(NumberDisplay, { value: displayContent });
+    }
+    if (typeof displayContent === "string") {
+        if (isAddress(displayContent)) {
+            return (_jsx(AddressWithConfig, { address: displayContent, size: fontSize }));
+        }
+        if (isHex(displayContent)) {
+            return displayContent; // don't add quotes
+        }
+        return displayContent; // plain string (e.g. ERC20 name/symbol)
+    }
+    if (Array.isArray(displayContent)) {
+        return (_jsx(ArrayDisplay, { values: displayContent, size: fontSize }));
+    }
+    if (typeof displayContent === "object") {
+        return (_jsx(StructDisplay, { struct: displayContent, size: fontSize }));
+    }
+    return JSON.stringify(displayContent, replacer, 2);
+};
+const NumberDisplay = ({ value }) => {
+    const [mode, setMode] = useState("raw");
+    const asNumber = Number(value);
+    if (asNumber <= Number.MAX_SAFE_INTEGER && asNumber >= Number.MIN_SAFE_INTEGER) {
+        return String(value);
+    }
+    const displayText = mode === "raw" ? value.toString() : mode === "e8" ? formatUnits(value, 8) : formatEther(value);
+    const segments = [
+        { mode: "raw", label: "Raw", tooltip: "Raw Format" },
+        { mode: "e8", label: "8", tooltip: "8 Decimals" },
+        { mode: "e18", label: "18", tooltip: "18 Decimals" },
+    ];
+    return (_jsxs("div", { className: "flex min-w-0 flex-col gap-1.5 font-sans", children: [_jsx("div", { className: "min-w-0 w-full overflow-x-auto overscroll-x-contain py-0.5 [scrollbar-width:thin]", children: _jsx("span", { className: "inline-block whitespace-nowrap tabular-nums text-sui-primary-content", children: displayText }) }), _jsxs("div", { className: "flex min-w-0 flex-wrap items-center justify-between gap-x-2 gap-y-1", children: [_jsx("span", { className: "shrink-0 text-[10px] font-medium uppercase tracking-wide text-sui-primary-content/40", children: "Format" }), _jsx("div", { className: "inline-flex shrink-0 gap-1", role: "group", "aria-label": "Number format", children: segments.map(({ mode: m, label, tooltip }) => {
+                            const active = mode === m;
+                            return (_jsx(Tooltip, { content: tooltip, position: "bottom", children: _jsx("button", { type: "button", className: [
+                                        "min-w-[2.75rem] rounded-md px-2 py-1 text-[11px] font-medium transition-colors",
+                                        active
+                                            ? "bg-sui-primary/40 text-sui-primary-content"
+                                            : "cursor-pointer bg-sui-primary-content/[0.06] text-sui-primary-content/60 hover:bg-sui-primary-content/[0.12] hover:text-sui-primary-content",
+                                    ].join(" "), "aria-pressed": active, onClick: () => setMode(m), children: label }) }, m));
+                        }) })] })] }));
+};
+export const ObjectFieldDisplay = ({ name, value, size, leftPad = true, }) => {
+    return (_jsxs("div", { className: `flex min-w-0 flex-row items-baseline ${leftPad ? "ml-4" : ""}`, children: [_jsxs("span", { className: "shrink-0 text-sui-primary-content/60 mr-2", children: [name, ":"] }), _jsx("span", { className: "min-w-0 flex-1 text-sui-primary-content", children: displayTxResult(value, size) })] }));
+};
+const ArrayDisplay = ({ values, size }) => {
+    return (_jsxs("div", { className: "flex flex-col gap-y-1", children: [values.length ? "array" : "[]", values.map((v, i) => (_jsx(ObjectFieldDisplay, { name: `[${i}]`, value: v, size: size }, i)))] }));
+};
+const StructDisplay = ({ struct, size }) => {
+    return (_jsxs("div", { className: "flex flex-col gap-y-1", children: ["struct", Object.entries(struct).map(([k, v]) => (_jsx(ObjectFieldDisplay, { name: k, value: v, size: size }, k)))] }));
+};

package/dist/types/Contract.d.ts

@@ -0,0 +1,12 @@
+import { Abi, type Address as AddressType } from "viem";
+export type ContractProps = {
+    contractName: string;
+    contract: {
+        address: AddressType;
+        abi: Abi;
+    };
+    chainId: number;
+    blockExplorerAddressLink?: string;
+};
+export declare const Contract: React.FC<ContractProps>;
+//# sourceMappingURL=Contract.d.ts.map

package/dist/types/Contract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Contract.d.ts","sourceRoot":"","sources":["../../src/Contract.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAgB,KAAK,OAAO,IAAI,WAAW,EAAE,MAAM,MAAM,CAAC;AAStE,MAAM,MAAM,aAAa,GAAG;IAC1B,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE;QACR,OAAO,EAAE,WAAW,CAAC;QACrB,GAAG,EAAE,GAAG,CAAC;KACV,CAAC;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwF5C,CAAC"}