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

CLI via NPM

npx xircus dust-template

Installed Dependencies

• TanStack Query

• Xircus SDK & Xircus React

• Xircus TON React

• Dust

• Dust Chakra

• Dust Chakra Component

The DUST Architecture

Name	Description
Dust	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	TBD
Dust Material	TBD
Dust Chakra Components	Contains UI components that can be integrated with any blocks. Contains the following blocks: Common Blocks

The DustProvider

React / Next

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 = {
   ...COMMON_DEFS,
   ...NAV_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 (
     <DustProvider
       sdk={sdk}
       app={app}
       router={router} 
       uiDefs={UI_DEFS}
       head={Head}> // optional for dynamic title
       <DustChakraProvider layouts={LAYOUTS}>
         <DustEditor>
           <DustEditorPublisher />
         </DustEditor>
       </DustChakraProvider>
     </DustProvider>     
    )
}

The DustComponent component

React / Next

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
    </DustComponent>
)

The Structure

Folders
components-*	Contains all bare components
blocks-*	Contains the UI blocks
layouts-*
presets-*
hooks
services	Contains non-hook api calls