KQ-645 · WALLET/CONNECT

Wallet Connect

The handshake drawn as two nodes closing the distance: asking narrows the rail they are pinned to on glide, so they approach without either owning a pixel measurement, while the wallet node breathes on a slow reversing tween. Approval draws the link across on glide and lands a tick in a disc at the join on flick; refusal snaps them apart on snap while the link falls away on the exit ease. One real button carries the whole flow — Connect, Cancel, Disconnect, Try again — and a status line says the state in words.

KQ-645 · WALLET/CONNECT

Connect a walletidle

Handshake idle

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/wallet-connect

Props

status / defaultStatus: "idle" | "pending" | "connected" | "rejected"; default "idle"; Controlled or initial state of the handshake.
onStatusChange: (status: WalletConnectStatus) => void; default —; Fires from the press that changed the state.
appName: string; default —; Who is asking. Its node draws the initials.
walletName: string; default —; Who is being asked. Its node draws a wallet.
address: string; default —; Shown abbreviated under the stage once connected, and spoken in full.
onRequest: () => void; default —; Fires from the connect press, before the host has answered.
onCancel: () => void; default —; Fires from the cancel press while pending.
onDisconnect: () => void; default —; Fires from the disconnect press while connected.
label: React.ReactNode; default "Connect a wallet"; Visible heading for the card.

Prop	Type	Default	Description
status / defaultStatus	"idle" \| "pending" \| "connected" \| "rejected"	"idle"	Controlled or initial state of the handshake.
onStatusChange	(status: WalletConnectStatus) => void	—	Fires from the press that changed the state.
appName	string	—	Who is asking. Its node draws the initials.
walletName	string	—	Who is being asked. Its node draws a wallet.
address	string	—	Shown abbreviated under the stage once connected, and spoken in full.
onRequest	() => void	—	Fires from the connect press, before the host has answered.
onCancel	() => void	—	Fires from the cancel press while pending.
onDisconnect	() => void	—	Fires from the disconnect press while connected.
label	React.ReactNode	"Connect a wallet"	Visible heading for the card.