DevStation / Marketplace / QIE Transaction Kit

QIE Transaction Kit

Send, follow and report transactions on QIE Mainnet: a transaction button with live status, receipt checks that catch reverts, toasts and explorer links.

UI kit OfficialTransactions

Transaction UI that tells people what really happened. sendTransaction connects if needed, moves the wallet to QIE Mainnet and sends. waitForSuccess resolves only when the receipt says success, so a mined but reverted transaction is reported as the failure it is. useTransaction tracks signing, pending, success and failed. TxButton runs the whole flow with a status line, TxStatus shows where it got to, Toaster and toast give notifications, and ExplorerLink links the QIE explorer. Wallet rejections return to idle quietly. Built with preact, htm and viem.

transactionsreceiptstoastspreact

Getting started

1
See it working
Press Clone into my apps to open the kit's demo in the App Builder, where every component previews against QIE Mainnet.
2
Copy the kit into your app
Copy tx-kit.js, tx-kit.css, wallet.js and contract.js into your app folder. An App Builder app already has wallet.js and contract.js: keep yours, and check contract.js has the exports named in the kit's README.

Import the components

Link the kit's stylesheet in index.html, then import what you need.

bash

1import { TxButton, Toaster } from "./tx-kit.js";
2 
3const claim = { to: CONTRACT, data: encodeFunctionData({ abi, functionName: "claim" }), gas: 200000n };
4html`<${TxButton} tx=${claim} label="Claim" /><${Toaster} />`;

4
Theme it
Every class is prefixed ds-. Set --ds-brand, --ds-text, --ds-surface and the other --ds- variables on :root to match your app.

What you get