Getting Started

In order to use the

Generating boilerplate and install dependencies

To setup your first app template layout, you need to have NodeJS installed including access to npx command line

npx xircus dust-template

Installed Dependencies

  • TanStack Query

  • Xircus SDK & Xircus React

  • Xircus TON React

  • Dust

  • Dust Chakra

  • Dust Chakra Component

The DUST Architecture



The block editor provider, fully integrated with Xircus React & SDK. Contains pre-built functions for reusability DustProvider - loads all necessary data to compose the page and blocks

Dust Chakra

The chakra UI provider for Dust. DustEditor - in-app editing controls (optional) DustChakraProvider - manages the chakra UI and layouts that is built on Chakra components

Dust Radix


Dust Material


Dust Chakra Components

Contains UI components that can be integrated with any blocks. Contains the following blocks: Common Blocks

The DustProvider

import { setupSDK, tonClient } from "@xircus-web3/ton-react"
import { DustProvider } from "@xircus-web3/dust"
import { DustChakraProvider, DustEditor } from "@xircus-web3/dust-chakra"
import { COMMON_DEFS, NAV_DEFS, DustEditorPublisher } from "@xircus-web3/dust-chakra-ton"

// Prepares the app to load the Xircus TON SDK
const sdk = setupSDK("ton", { ton: tonClient })

// Contains the UI defaults when adding blocks to page
const UI_DEFS = {

// contains your 
const LAYOUTS = {
   MemeLayout: <GramLayout headers={{}} footers={{}} sections={{}} />

// your app metadata, extracted from contract or Xircus GraphQL Providers
const app = {} 

export default function DustApp({ router }) {
  return (
       head={Head}> // optional for dynamic title
       <DustChakraProvider layouts={LAYOUTS}>
           <DustEditorPublisher />

The DustComponent component

import { DustComponent } from "@xircus-web3/dust-chakra-component"

export const WalletManagerDefs = {
    name: 'WalletManager', // Name of the component
    label: 'Wallet Manager', // Display name of the component in editor 
    image: 'IPFS_HASH' // hash of the ipfs or leave as blank
    theme: {
        wrap: {}        
    data: {
        title: {}

// Fields displays the right editing controls, check EditableFields
const fields = {
    title: 'String'

// The label of the controls (optional)
const labels = {
    title: 'Title'

export const WalletManager = props => (
    <DustComponent props={props} fields={fields} labels={labels}>
        // Your component goes here

The Structure



Contains all bare components


Contains the UI blocks





Contains non-hook api calls

Last updated