Beam Smart Contract UI

Open source EVM Smart Contract Tool

Try now:  xtools-at.github.io/smartcontract-ui

Table of contents

---

• Try now
• Features
• Usage
  • Config ABI
  • Import from deployed contract
  • Select network
  • Specify contract's address
  • Setting function & arguments to call
  • URL params
• Setup and customize
• Build and publish
• License

---

Try now

Live version of frontend available at xtools-at.github.io/smartcontract-ui

Features

• Discover millions deployed Smart Contracts across over 600 blockchains.
• Easy to read and write Smart Contract's data with a friendly UI.
• Sign your request in many ways: with Browser using Metamask Wallet, Binance Wallet, or with TrustWallet's WalletConnect protocol, Coinbase's WalletLink protocol, or importing your wallet from key.
• Offline-First: You can use it anywhere, even without a network connection.

Usage

To interact with a Smart Contract, you'd need to know:

• What interfaces (ABI) did the contract expose
• The contract was deployed on which blockchain (network)
• Which function and its arguments you'd like to call

Config ABI

To config the interface (ABI), you could paste the entire ABI's JSON into the SmartContract ABI text field, or simply put the URL of the ABI's JSON, or you can can also upload the ABI's JSON from your computer. It can also read the Truffle's build artifact JSON file.

Import from deployed contract

If you don't have the contract's ABI, you could also import it from the deployed contract.

The tool can fetch ABIs of verified contracts from Etherscan & Co (incl. Avalanche, Polygon, BSC and Fantom) and Sourcify.dev (all chains).

Select network

Next thing to configure is the blockchain network where the contract was deployed. There are more than 600 chains supported.

Specify contract's address

After selecting the network, you could specify the address of the contract.

Tip: You can also use the camera to scan the contract's address on a QR code.

Setting function & arguments to call

In the final step, you can choose which function you want to call, and specify its arguments.

Tip: You can also choose how to sign the call (MetaMask, WalletConnect, ...) by selecting your preferred wallet.

URL params

You can set all the above using url params and access any setup with a deeplink:

Param	Description	Example
json	Url to load ABI from, use encodeURIComponent for complex urls	/uniswapV2Router.json, /weth.json, /erc20.json, /erc721.json, /erc1155.json, https://example.com/abi.json
address	Contract address	0xD51BFa777609213A653a2CD067c9A0132a2D316A
network	Chain ID of blockchain network	4337, 13337, 1
func	Contract method name	deposit, transfer
args	Arguments of function call, must match input name in ABI	args.id=1, args.to=0x0000000000000000000000000000000000000B0b, args.amount=0.1e18
eth	Amount of native token to transfer	0.1e18

Examples

• Check WBEAM <> USDC price on BeamSwap: ?json=/uniswapV2Router.json&address=0x965B104e250648d01d4B3b72BaC751Cde809D29E&func=getAmountsIn&network=4337&args.amountOut=1e18&args.path=0x76BF5E7d2Bcb06b1444C0a2742780051D8D0E304,0xD51BFa777609213A653a2CD067c9A0132a2D316A
• Wrap 0.1 BEAM into WBEAM: ?json=/weth.json&address=0xD51BFa777609213A653a2CD067c9A0132a2D316A&func=deposit&eth=0.1e18&network=4337
• Transfer 100 USDC: ?json=/erc20.json&address=0x76BF5E7d2Bcb06b1444C0a2742780051D8D0E304&func=transfer&args.amount=100e6&network=4337

Setup and customize

Setup

• install node.js >= 16 and yarn
• run yarn to install dependencies
• run yarn dev to start locally

Update

Running yarn update executes the following:

• yarn chainlist:update to update chain list sources
• yarn explorer to update block explorer list (this may take ~3-5min)
• yarn chainlist to build final chain list

Customize

• update config/app.js and public/manifest.json
• update images in public/**
• add new template ABIs as json file to public
• update example links in components/SourceBrowser

Build and publish

via Github Actions & Pages:

• push to main to trigger a build in Github Actions
• the build process pushes the build artifact to main-build
• setup Github Pages to serve a static site from main-build

In case of build issues, delete all Github Actions caches and the main-build branch, then re-run the job "Deploy to Pages".

License

This project is licensed under the GNU General Public License v3.0 - see the COPYING file for details.