diadem-dapp-boilerplate

Boilerplate for decentralized applications based on Diadem protocol

Develop (non-sandboxed version)

1 - git clone [email protected]:DiademNetwork/diadem-dapp-boilerplate.git 2 - cd diadem-dapp-boilerplate 3 - yarn install 4 - Create a .development.env file (see .env.example for ex) 5 - yarn start

Develop (sandboxed version)

Sometimes (for example when working on design), you would prefer running in a sandboxed environment. In the sandbox environment, external calls are mocked, and responses stubbed, so you dom't have to worry about another service being down or broken to work on application.

To start sandboxed app, after repository is cloned and dependencies installed:

1 - yarn start:sandbox 2 - Go to http://localhost:9000

You will notice a sandbox settings button appearing on left of screen in application. You can use it to switch mocks/stubs behaviour (For ex is user already registered?)

Available scripts

• cypress:open: open cypress
• start : start a development version on localhost:9000, in watch mode
• start:sandbox : start a sandboxed development version on localhost:9000, in watch mode
• start:sandbox:server : start a fake server api version on localhost:3001, in watch mode
• build: build a development version in dist folder. Use NODE_ENV for desired env build
• storybook. Run storybook on port 6006
• lint : run eslint for you project
• test: run jest tests and create a coverage directory (you can then open file /coverage/lcov-report/index.html to see nice coverage report)
• test:cypress run cypress test. start:sandbox should have been started before running this command.

Testing

UNIT tests:

• yarn test for JS files
• yarn storybook + check components for components ACCEPTANCE tests:
• yarn start:sandbox + yarn test:cypress

Please always check tests before asking for a Pull Request Review.

Configurables

Networks

You can configure application to use any network supported. Networks supported are in src/configurables/network/

TO CHANGE network, you need to edit src/configurables/network/index.js to use the network you want before building application

TO ADD a network, you need to create a new folder for it in src/configurables/network/. Your logic will need to export an object like:

{
  components: {
    LoginButton: React component
  },
  urls: {
    hashtag: String (url),
    website: String (url)
  },
  inputs: {
    link: {
      maxCaracters: Number,
      placeholder: String,
      isValid: Function taking ({previousLink) as parameter
    }
  },
  name: String,
  dataPaths: {
    userName: Array
    userAccessToken: Array
    userPictureUrl: Array
    userID: Array
  },
  texts: {
    linkHelp: String
  }
}

Facebook

You can configure application to use one social network you want.

Configured social networks:

• facebook

TIPS: to use facebook in development mode, you will need to: 1 - If it's the first time you develop on application add 127.0.0.1 local.diadem.network in your /etc/hosts file 2 - Go to https://local.diadem.network:9000 Indeed, facebook force using https