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 :
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.
- 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.
- 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.
- 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 Use semantic commit messages to make it easier to understand the changes made in each commit.
Teh CAW Protocol is composed of several smart contracts, each one has a specific role in the ecosystem. Explore the contracts here
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
- 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.
import PageWrapper, { Layout } from 'src/components/wrappers/Page';
MyPage.getLayout = function getLayout(page: React.ReactElement) {
return <Layout variant="logoOnly">{page}</Layout>;
};