Scaffold UI: React components and hooks for Hedera dApps

# Core packages (most projects need both)
npm install @scaffold-hbar-ui/components @scaffold-hbar-ui/hooks

# Optional: Contract debugging UI
npm install @scaffold-hbar-ui/debug-contracts

npm install react viem wagmi @tanstack/react-query

import "@scaffold-hbar-ui/components/styles.css";

// If using debug-contracts
import "@scaffold-hbar-ui/debug-contracts/styles.css";

import { Address } from "@scaffold-hbar-ui/components";
import { hederaTestnet } from "viem/chains";

<Address
  address="0x1234567890123456789012345678901234567890"
  chain={hederaTestnet}
/>

import { Balance } from "@scaffold-hbar-ui/components";
import { hederaTestnet } from "viem/chains";

<Balance
  address="0x1234567890123456789012345678901234567890"
  chain={hederaTestnet}
/>

import { HbarInput } from "@scaffold-hbar-ui/components";

const [amount, setAmount] = useState("");

<HbarInput
  value={amount}
  onChange={setAmount}
  placeholder="0.0"
/>

import { HederaAddressInput } from "@scaffold-hbar-ui/components";
import { hederaTestnet } from "viem/chains";

const [address, setAddress] = useState("");

<HederaAddressInput
  value={address}
  onChange={setAddress}
  chainId={hederaTestnet.id}
  placeholder="0.0.12345 or 0x..."
/>

import { useAddress } from "@scaffold-hbar-ui/hooks";
import { hederaTestnet } from "viem/chains";

function AddressDisplay({ address }) {
  const {
    checkSumAddress,
    shortAddress,
    blockExplorerAddressLink,
    blockieUrl,
    isValidAddress,
  } = useAddress({ address, chain: hederaTestnet });

  return (
    <div>
      <img src={blockieUrl} alt="" width={24} height={24} />
      <span>{shortAddress}</span>
      <a href={blockExplorerAddressLink} target="_blank">
        View on HashScan
      </a>
    </div>
  );
}

import { useHederaAccountId } from "@scaffold-hbar-ui/hooks";
import { hederaTestnet } from "viem/chains";

function AccountInfo({ evmAddress }) {
  const { accountId, isLoading, status } = useHederaAccountId(
    evmAddress,
    hederaTestnet.id
  );

  if (isLoading) return <span>Loading...</span>;

  return <span>Account: {accountId}</span>;
}

import { useHederaEvmAddress } from "@scaffold-hbar-ui/hooks";
import { hederaTestnet } from "viem/chains";

function EvmAddressDisplay({ accountId }) {
  const { evmAddress, isLoading } = useHederaEvmAddress(
    accountId,
    hederaTestnet.id
  );

  return <span>EVM: {evmAddress}</span>;
}

import { useHederaAddressInput } from "@scaffold-hbar-ui/hooks";

const {
  evmAddress,      // Resolved EVM address (checksummed)
  accountIdFromEvm, // Resolved account ID (if input was EVM)
  error,           // Validation error message
  warning,         // Warning message
  isResolving,     // Loading state
} = useHederaAddressInput({
  value: inputValue,
  chainId: 296, // Hedera Testnet
  debounceDelay: 400,
});

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

const deployedContract = {
  address: "0xYourContractAddress",
  abi: [/* your ABI */],
};

<Contract
  contracts={deployedContract}
  chainId={hederaTestnet.id}
/>

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

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

<IntegerInput
  value={value}
  onChange={setValue}
  placeholder="Enter amount"
/>

# Start HTTP server
PORT=3100 node ./dist/esm/bin/scaffold-hbar-ui-mcp.js --http

# With authentication
SCAFFOLD_HBAR_UI_MCP_KEY=your-secret PORT=3100 node ./dist/esm/bin/scaffold-hbar-ui-mcp.js --http

{
  "mcpServers": {
    "scaffold-hbar-ui": {
      "url": "http://localhost:3100/mcp"
    }
  }
}

npx @modelcontextprotocol/inspector npx @scaffold-hbar-ui/mcp-server