@scaffold-hbar-ui/debug-contracts

Debug contracts component.

Installation

Note: This package requires @scaffold-hbar-ui/components and @scaffold-hbar-ui/hooks as peer dependencies.

npm install @scaffold-hbar-ui/components @scaffold-hbar-ui/hooks @scaffold-hbar-ui/debug-contracts
# or
yarn add @scaffold-hbar-ui/components @scaffold-hbar-ui/hooks @scaffold-hbar-ui/debug-contracts
# or
pnpm add @scaffold-hbar-ui/components @scaffold-hbar-ui/hooks @scaffold-hbar-ui/debug-contracts

Props

• contracts (required): An object containing deployed contracts organized by chain ID, where each contract includes address and ABI
• chainId (required): The chain ID to use for debugging contracts (number)
• blockExplorerAddressLink (optional): The block explorer link for the contract address

Usage

import { Contract } from "@scaffold-hbar-ui/debug-contracts";
import "@scaffold-hbar-ui/debug-contracts/styles.css";
import { sepolia } from "viem/chains";

// Define your deployed contracts
const deployedContracts = {
  address: "0xBf6D6faFE5B0C009E5447A27A94E093F490Dd0FC",
  abi: [
    // ... your contract ABI
  ],
} as const;

function App() {
  return (
    <Contract
      contracts={deployedContracts}
      chainId={sepolia.id}
    />
  );
}

IntegerInput (with ×1e8 / ×1e18 multiplier)

An integer input with optional decimal multiplier buttons for 8 and 18 decimals (e.g. tinybars/HBAR and wei/ETH). Useful for contract read/write forms where amounts are entered in human-readable units then scaled to the chain’s smallest unit.

• ×1e8 – multiplies the current value by 10^8 (e.g. 1 → 100000000). Use for 8-decimal tokens (Hedera tinybars, etc.).
• ×1e18 – multiplies the current value by 10^18 (e.g. 1 → 1000000000000000000). Use for 18-decimal wei-style amounts.

The input normalizes integer values so that applying one multiplier then the other uses only the last clicked factor (no double-scaling).

Props

• value (required): Current string value (integer or scaled).
• onChange (required): (value: string) => void.
• name?, placeholder?, disabled?: Same as other inputs.
• variant?: Integer type for validation (default IntegerVariant.UINT256).

Example

import { IntegerInput } from "@scaffold-hbar-ui/debug-contracts";
import "@scaffold-hbar-ui/debug-contracts/styles.css";

function AmountForm() {
  const [value, setValue] = useState("");

  return (
    <IntegerInput
      value={value}
      onChange={setValue}
      placeholder="0"
    />
  );
}

The suffix shows ×1e8 and ×1e18 buttons; users type a base number (e.g. 1) then click a multiplier to fill the field with the scaled integer.

DecimalMultiplierButtons (standalone)

If you only need the multiplier controls without the full integer input:

import { DecimalMultiplierButtons } from "@scaffold-hbar-ui/debug-contracts";

<DecimalMultiplierButtons
  value={value}
  onChange={setValue}
  disabled={false}
/>;

• value: Current string value.
• onChange: (value: string) => void.
• disabled?: Disables the ×1e8 / ×1e18 buttons.