For isolated previews, theme switching, and sandbox editing, open the ContractCall playground on holydocs.com .

When to use

Use this component when blockchain context, addresses, chains, token math, or wallet onboarding must stay precise and scannable.

Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

Read Call

Document a view call without interactive execution.

READ balanceOf
mdx
<ContractCall address="0x1234567890abcdef1234567890abcdef12345678" function="balanceOf" chain="ethereum" abi='[{"inputs":[{"name":"account","type":"address"}],"name":"balanceOf","outputs":[{"name":"","type":"uint256"}],"stateMutability":"view","type":"function"}]'/>

Interactive Write

Flag real transactions clearly when the component can trigger wallet confirmation.

WRITE mint

⚠️ Warning: This sends a real transaction on-chain. Review carefully before confirming.

mdx
<ContractCall address="0x1234567890abcdef1234567890abcdef12345678" function="mint" chain="base" abi='[{"inputs":[{"name":"to","type":"address"},{"name":"quantity","type":"uint256"}],"name":"mint","outputs":[],"stateMutability":"nonpayable","type":"function"}]' interactive requiresWallet/>

Props

PropTypeDefaultDescription
addressstring--Contract address to target.
functionstring--Function name to show and execute.
chainstringethereumChain key used for wallet and explorer context.
abistring--Optional ABI JSON string used to build input controls.
interactivebooleanfalseTurns on inline inputs and execution controls.
requiresWalletbooleanfalseMarks the call as a write interaction that requires wallet confirmation.

Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

mdx
<ContractCall address="0x1234567890abcdef1234567890abcdef12345678" function="balanceOf" chain="ethereum" abi='[{"inputs":[{"name":"account","type":"address"}],"name":"balanceOf","outputs":[{"name":"","type":"uint256"}],"stateMutability":"view","type":"function"}]'/>

Tips

  • Be explicit about whether the call is read-only, interactive, testnet-only, or a real transaction that can move value.
  • Assume readers are one copy action away from using the value in production. Precision matters more than flair on web3 surfaces.
  • Always make the target chain explicit when a component can imply a wallet, explorer, or transaction context.
Address

Readable wallet or contract address with truncation, copy-to-clipboard, and optional block-explorer deep link.

Learn More
ChainBadge

Compact chain indicator for network-specific instructions, examples, and warnings.

Learn More
RequestExample

Pin request code examples in the right-side panel alongside API endpoint documentation.

Learn More

More

Ask a question... ⌘I