81 lines
4.1 KiB
Markdown
81 lines
4.1 KiB
Markdown
# Contribution guidelines
|
|
|
|
First of all, thanks a million for being here.
|
|
|
|
It is not our intention to discourage you from contributing; however, as the project grows in code and contributors, it is essential to maintain order and consistency. Taking that into account, we have decided to follow some well-known guides we are sure many devs know.
|
|
|
|
Please take a look at each section :
|
|
* [Semantic Commit Messages](COMMITS.md)
|
|
* [Translations](TRANSLATIONS.md)
|
|
* [React Components](REACT.md)
|
|
* [Javascript](JS.md)
|
|
|
|
|
|
Don't forget to setup your IDE with `eslint`
|
|
|
|
Please add any other guidelines you think are essential or even improve the ones we have.
|
|
|
|
## Project structure
|
|
- **assets** Usually contains images and icons on SVG/tsx format.
|
|
- **components** Contains generic and reusable components used inside the application.
|
|
- **config** Contains all the config files and ABIs.
|
|
- **context** Global context for the application.
|
|
- **hooks** Contains generic hooks.
|
|
- **layouts** Since different pages have different layouts, we use this folder to store them.
|
|
- **locales** Everything to do with translations, either json or js files.
|
|
- **routes** Avoid hard-code routing. Please add it to the path and import it when required.
|
|
- **pages** Contains page components for next.js, files in this directory are treated as API routes
|
|
- **theme** Contains all the theme related files.
|
|
- **sections** Building blocks for each page, they are composed of components.
|
|
- **types** Define types, models, interfaces, DTOs, etc.
|
|
- **utils** Contains generic utilities functions.
|
|
|
|
## Naming conventions
|
|
- **Components** Use PascalCase for components and its filenames.
|
|
- **Hooks** Use camelCase for hooks and their filenames.
|
|
- **Files** Use camelCase for filenames.
|
|
- **Variables** Use camelCase for variables.
|
|
- **Constants** Use UPPERCASE for constants
|
|
- **Types** Use PascalCase for types and interfaces.
|
|
|
|
## Code style
|
|
- **Indentation** Use 2 spaces for indentation.
|
|
- **Quotes** Use single quotes for strings.
|
|
- **Trailing commas** Trailing commas are required for multiline statements and function calls.
|
|
- **Semicolons** Semicolons are required.
|
|
- **Line length** Keep lines under col 150
|
|
- **Curly braces** Use curly braces for all control statements except for single-line statements.
|
|
- **Spacing** Use spaces around operators and after commas, semicolons, and colons.
|
|
- **Comments** Use JSDoc style comments for functions, methods, and classes, please install `Better Comments` extension for VSCode to help you with this.
|
|
|
|
## Commit messages
|
|
- **Commit messages** Use [semantic commit messages](COMMITS.md) to make it easier to understand the changes made in each commit.
|
|
|
|
|
|
## Contracts
|
|
Teh CAW Protocol is composed of several smart contracts, each one has a specific role in the ecosystem.
|
|
Explore the contracts [here](https://github.com/cawdevelopment/CawUsernames)
|
|
|
|
## Useful hooks
|
|
Some hooks are used to interact with CAW-Protocol. They are located in `hooks/contracts/` folder. Please use them to read and write data from/to the blockchain.
|
|
- **useCawNameMinterContract** `Mintable CAW` Cost of name, validate and mint a name
|
|
- **useCawNamesContract** `CAW NAME ` NFT contract, get account usernames, username uri, balance, actions, etc.
|
|
- **useMintableCAWContract** Mint mCAW to mint a username, burn CAW to release a username, approve and transfer mCAW.
|
|
- **useAccountBalance** Get primary account balance so as to use the platform (CAW, mCAW, ETH)
|
|
- **useETHBalance** Get ETH balance of the connected account
|
|
- **useAppConfigurations** Site settings, such as api keys, contract addresses, etc. usually set in the .env file
|
|
|
|
## Layouts
|
|
- **DashboardLayout** Main layout for the application, it contains the header, sidebar, footer, and the main content.
|
|
- **LandingLayout** Layout for the landing page, information about the project, etc.
|
|
- **LogoOnlyLayout** Header only layout, used for the login, register, auth pages, etc.
|
|
|
|
When creating a new page, please use the corresponding layout.
|
|
```tsx
|
|
import PageWrapper, { Layout } from 'src/components/wrappers/Page';
|
|
|
|
MyPage.getLayout = function getLayout(page: React.ReactElement) {
|
|
return <Layout variant="logoOnly">{page}</Layout>;
|
|
};
|
|
```
|