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
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
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 SDKconstsdk=setupSDK("ton", { ton: tonClient })// Contains the UI defaults when adding blocks to pageconstUI_DEFS= {...COMMON_DEFS,...NAV_DEFS,}// contains your constLAYOUTS= { MemeLayout: <GramLayoutheaders={{}} footers={{}} sections={{}} />}// your app metadata, extracted from contract or Xircus GraphQL Providersconstapp= {} exportdefaultfunctionDustApp({ router }) {return ( <DustProvidersdk={sdk}app={app}router={router} uiDefs={UI_DEFS}head={Head}> // optional for dynamic title <DustChakraProviderlayouts={LAYOUTS}> <DustEditor> <DustEditorPublisher /> </DustEditor> </DustChakraProvider> </DustProvider> )}
The DustComponent component
import { DustComponent } from"@xircus-web3/dust-chakra-component"exportconstWalletManagerDefs= { 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 EditableFieldsconstfields= { title:'String'}// The label of the controls (optional)constlabels= { title:'Title'}exportconstWalletManager= props => ( <DustComponentprops={props} fields={fields} labels={labels}> // Your component goes here </DustComponent>)