# 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

{% tabs %}
{% tab title="CLI via NPM" %}
npx xircus dust-template
{% endtab %}
{% endtabs %}

Installed Dependencies

* TanStack Query
* Xircus SDK & Xircus React
* Xircus TON React
* Dust
* Dust Chakra
* Dust Chakra Component

## The DUST Architecture

<table><thead><tr><th width="248">Name</th><th>Description</th></tr></thead><tbody><tr><td>Dust</td><td>The block editor provider, fully integrated with Xircus React &#x26; SDK. Contains pre-built functions for reusability<br><br><strong>DustProvider</strong> - loads all necessary data to compose the page and blocks</td></tr><tr><td>Dust Chakra</td><td>The chakra UI provider for Dust. <br><br><strong>DustEditor</strong> - in-app editing controls (optional)<br><strong>DustChakraProvider</strong> - manages the chakra UI and layouts that is built on Chakra components</td></tr><tr><td>Dust Radix</td><td>TBD</td></tr><tr><td>Dust Material</td><td>TBD</td></tr><tr><td>Dust Chakra Components</td><td>Contains UI components that can be integrated with any blocks. <br><br>Contains the following blocks:<br>Common Blocks</td></tr></tbody></table>

## The DustProvider

{% tabs %}
{% tab title="React / Next" %}

```jsx
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>     
    )
}
```

{% endtab %}
{% endtabs %}

## The DustComponent component

{% tabs %}
{% tab title="React / Next" %}

```jsx
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>
)
```

{% endtab %}
{% endtabs %}

## The Structure

<table><thead><tr><th width="160">Folders</th><th width="293"></th><th></th></tr></thead><tbody><tr><td>components-*</td><td>Contains all bare components</td><td></td></tr><tr><td>blocks-*</td><td>Contains the UI blocks</td><td></td></tr><tr><td>layouts-*</td><td></td><td></td></tr><tr><td>presets-*</td><td></td><td></td></tr><tr><td>hooks</td><td></td><td></td></tr><tr><td>services</td><td>Contains non-hook api calls</td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>