Skip to content

Latest commit

 

History

History
51 lines (35 loc) · 2.76 KB

README.md

File metadata and controls

51 lines (35 loc) · 2.76 KB

Tokensuite Frontend Template for dApps

Quality Gate Status

Please use yarn as a package manager.

Tokensuite Frontend Guideline

Naming conventions

  • Each file and folder should be named as kebab case.
  • Under each folder there should be a root file called index
  • Enums should be written with uppercase letters and words in enums should be separated with an underscore such as: PROCESS_TYPE.
  • Interfaces which are not component props should have I letter in the beginning. E.g. IProcess[].
  • Types should have letter T in the beginning. E.g. TStatus
  • When defining Props for component it should have the following convention: ComponentNameProps.
  • Every scss module under dedicated component should have the parent folders name. E.g. button/index.tsx styles file should be named as button.module.scss.

Folder structure

  • Beside next.js default folder structure in our app there is 2 main folders: types and src.
  • types folder should mimic src and every single type or enum should go under dedicated folder for that type.
  • Since we follow atomic design system under components there are 2 main folders called: templates and ui. Under ui there are atoms, molecules and organisms.
  • Modals and Forms should have their own dedicated folder under organisms/modals and organisms/forms.

Styling Rules

  • When organising a theme first colors should be defined under src/styles/variables/_colors.scss
  • Then it should be added as a variable to src/styles/variables/_themes.scss
  • All the colors in the app should be used with color function as an example: color(primary-color). primary-color is derived from src/variables/_theme.scss.
  • To understand how to write variables and mixins or placeholder please checkout saas-frontend.

How to send request

  • Since we use graphql on backend we have a npm command callded codegen:graphql in package.json to generate hooks for fetching data.
  • Under the hood we are using graphql-request and react-query.
  • Note that, client is a parameter of every request hook which we can get from src/store/graphql-client.

Store

  • To manage global data we are using zustand.
  • For each global state a new store is created unlike typical flux architecture.
  • Store should be only used for global data.

Modal usage

  • Modals are using global store.
  • Every modal should be defined under components/organisms/ui/modals.
  • When creating new modal all required types should be added to modal store.
  • Please follow example modal.