Introduction()

The TokenD web-client is written on Vue v2

How to

Run the project

Install node.js (Go to official website for the help)
Install git (Go to git install instructions for the help)
Clone the repository: git clone https://github.com/tokend/client-scaffold.git
In project folder, execute: npm install
Configure your instance
To start project on local server in development mode, execute: npm run dev
Open http://localhost:8095 in browser.

To stop local server, press Ctrl + C in terminal.

If the remote repository was updated, you need to execute git pull command on your local machine to get the updates. To restart the project, repeat step 4 and 5 of this instruction.

Configure your instance

All the environment files are located in config directory. You have to edit one of them to change the hostnames of horizon, api and storage servers and network_passphrase

dev-local.env.js is used for the local built instances
prod.env.js is used for the instances built for production
default.env.js contains default configuration of the application and may be included and merged into other .env files

To run the application in local development mode run npm run dev
To build the application for production run npm run build.prod

Customize Crowdsale

Changes to the model

Navigate to /src/vue/app/saleCreation/. Your journey starts from SaleCreation.Index.vue.

To update the crowdsale model, you can modify the object passed to salesService.createSaleCreationRequest call. You cannot change anything but details property, otherwise back-end will reject your request.

Changes to views

Crowdsale is shown on following pages:

Crowdsale creation page (src/vue/app/saleCreation)
Crowdsale creation requests page (src/vue/app/requests/index/Requests.SaleCreation.vue)
Crowdsale list page (src/vue/app/sales)
Crowdsale details page(src/vue/app/sales/sale_details/Sales.Details.vue)

Also on admin panel:

Crowdsale list page (src/components/User/Sales/Sales.Index.vue)
Crowdsale details page(src/components/User/Sales/Sales.Show.vue)
Crowdsale requests page (src/components/User/Sales/SaleRequests)

Any changes to crowdsale model should be done alongside with changes to the views mentioned above. The most trickiest part is adding fields to crowdsale creation page.

In SaleCreation.Index.vue file you can see usage of md-steppers of Vue material framework in combination with so-called schemas. To modify set of fields on a step you can edit the appropriate .schema.js file located in /src/vue/app/saleCreation/specs/ directory.

Currently there are three steps:

General info
Image and short description
Video and long description

Schema defines the set of fields only. Actual component markup is taken from /src/vue/app/saleCreation/steps/ directory. Schema files contain references to the component used on each step.

How are schemas work with the components (SaleCreation.Index):

  <template v-else-if="view.mode === VIEW_MODES.edit">
    <md-steppers class="create-sale__steppers"
                  md-vertical
                  md-linear
                  :md-active-step.sync="activeStep">
      <md-step v-for="(step, i) in steps"
              :key="i"
              :id="step.name"
              :md-label="step.label"
              :md-done.sync="step.done"
      >
        <component :is="step.component"
                  :schema="step.schema"
                  :sale="sale"
                  @sale-update="handleSaleUpdate($event, { step, i })"
                  @sale-edit-end="handleSaleEditEnd"
        />
      </md-step>
    </md-steppers>
  </template>

Component applied with :is attribute in the <component>. Component from step.component will take :schema as the prop. Implementations of all used components are located in /src/vue/app/saleCreation/steps/.

All the other actions should be familiar to developers who had experience with Vue before.