DevStation / Marketplace / QIE Wallet Kit

QIE Wallet Kit

Wallet components for preact + htm apps on QIE Mainnet: a connect button, a switch-network guard, address chips and live balance badges.

UI kit OfficialWallets

Drop-in wallet UI for apps on QIE Mainnet, built with preact and htm like DevStation's App Builder apps. useWallet keeps the account and chain current. ConnectButton connects, or shows the address once connected. NetworkGuard shows a one-click switch until the wallet is on QIE Mainnet, adding the network if the wallet lacks it. AddressChip gives a short address with copy and explorer link, and BalanceBadge a live QIE or ERC-20 balance. It works in published apps through window.ethereum and inside DevStation's preview through its wallet bridge. Styles are prefixed ds- and themeable with CSS variables.

walletconnectnetworkpreact

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 wallet-kit.js, wallet-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 { useWallet, ConnectButton, NetworkGuard, BalanceBadge } from "./wallet-kit.js";
2 
3const wallet = useWallet();
4html`<${ConnectButton} wallet=${wallet} />
5<${NetworkGuard} wallet=${wallet}>
6  <${BalanceBadge} address=${wallet.account} />
7</${NetworkGuard}>`;

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