Skip to content

Welcome To Agoric's UI Component Library

You'll find a collection of ready-to-use or pre-coded user interface elements that help accelerate your Agoric Dapp-building. These pre-designed elements include wallet connect buttons, chain selector, node selector, amount input, smart wallet provisioning and leap elements. Utilization of these building blocks ensures best practices in design and accessibility.

Installation and Setup

See Introduction to Agoric UI Kit for installation and setup how-to.

Once complete you'll need to run this yarn command:

yarn add @agoric/react-components

UI Components List

These React UI components can be immediately used to streamline your Agoric Dapp UI

  • Connect Wallet
  • Wallet Provisioning
  • Amount Input
  • Chain Selector
  • Node Selector
  • Leap Elements

Connect Wallet

Screenshot: Connect Wallet

Screenshot: Wallet Address

Screenshot: Select Wallet

Customizable Parameters

ClassNamestringCSS class name for the underlying <button> element

Smart Wallet Provisioning

Screenshot: Wallet provision

See AgoricProviderLite component -> provisionNoticeContent prop:

Customizable Parameters

provisionNoticeContentundefined(fee?: bigint) => JSX.Element

Amount Input

Screenshot: Amount Input

Customizable Parameters

decimalPlacenumberThe number of decimal places used for displaying the denominated value
onChangeundefined(value: bigint) => void

Chain Selector

Screenshot: Chain Selector

Screenshot: Chain Selector 2

Customizable Parameters

networkConfigsNetworkConfig[]The list of Agoric network configs to choose from.
labelChangeChainCombobox[‘label’]See ChangeChainCombobox
sizeChangeChainCombobox[‘size’]See ChangeChainCombobox
appearanceChangeChainCombobox[‘appearance’]See ChangeChainCombobox
maxHeightChangeChainCombobox[‘maxHeight’]See ChangeChainCombobox

Node Selector

Screenshot: node selector

Customizable Parameters

onClose() => voidTriggered when the user tries to close the modal

Leap Elements

Screenshot: node selector