Welcome to the Chia GUI repo!
Chia GUI is written in TypeScript and uses Electron/React.
This monorepo consists of the following packages:
Package name | Description |
---|---|
api | JS/TS library to access the Chia Blockchain RPC |
api-react | React library that wraps api in hooks |
core | Common React components and hooks |
gui | The actual GUI package. It uses our packages like api-react and core under the hood |
icons | Chia specific icons |
wallets | Common React components and hooks. Do not use this in you project. Will be merged to core package soon |
sh install-gui.sh
as instructed in the previous step. This will clone the chia-blockchain-gui under chia-blockchain repo.npm run dev:gui
When developing, please:
When disabling an eslint rule, please provide a reason after two dashes (--), example:
// eslint-disable-next-line react-hooks/exhaustive-deps -- Some dependencies intentionally left out
To install an NPM package, please navigate to the root directory of this repo.
lodash
for all packages: npx lerna add lodash
lodash
for single package: npx lerna add lodash --scope=@chia-network/icons
--dev
After adding a new NPM package, please pin down the package version. This is done to lower the possibility of supply chain attacks.
react/no-array-index-key
Only use index
as a key
when all of the following conditions are met:
In all other cases, you have to figure out what unique string you will use as a key
, or create a dedicated ID
.
import/no-extraneous-dependencies
Packages that are used only in development should not be present on the production build. You have 3 options:
.eslintrc.json
file.dev.
in the extension. Example: file.ts
-> file.dev.ts
if (process.env.NODE_ENV === 'development') {
// eslint-disable-next-line global-require -- We cannot use import since it should be only loaded in development
const package = require('package');
}
yourName/what-is-the-code-about
. This helps when cleaning up old branches.Separate subject from body with a blank line
A single subject line is usually sufficient, but if you need to include additional details, add an empty line after the subject and enter the detailed message. Example:
Capitalized, short (70 chars or less) summary
More detailed explanatory text, if necessary. Wrap it to about 72 characters or so. In some contexts, the first line is treated as the subject of an email and the rest of the text as the body. The blank line separating the summary from the body is critical (unless you omit the body entirely); tools like rebase can get confused if you run the two together.
Commit subject line should always be able to complete the following sentence:
If applied, this commit will your subject line here
Fixed bug with Y -> Fix bug in the contact form
Adding new field of X -> Add new field - "discount code", in the order form
More fixes for broken stuff -> Fix broken responsive layout
Do not edit files directly in the repo, but instead please head over to our Crowdin project and add/edit translations there.
npm install
in the root directory does not install packages correctly (Or other Lerna issues)
Please run npx lerna clean -y && rm -rf node_modules && npm install && npx lerna bootstrap
npm run dev:gui
fails to start the app without providing a reason
chia-blockchain
directory (one level up). ./activate
cd chia-blockchain-gui
npm run dev:gui
to start the app.Why does my component keep rerendering?
We have why-did-you-render installed.
You will see the reasons in the electron console after adding this to your functional component:
YourComponent.whyDidYouRender = {
logOnDifferentValues: true,
}
View -> Developer -> Developer tools
.verbose
events. These are the events emitted from the debug
package.export CHIA_ROOT=~/.chia/simulator/main
export CHIA_SIMULATOR_ROOT=~/.chia/simulator
export CHIA_KEYS_ROOT=~/.chia_keys_simulator
. ./activate
chia start simulator
cd chia-blockchain-gui/packages/gui
npm run dev:skipLocales
chia dev sim farm
as many times you want to farm some coins.Please check out the wiki and FAQ for information on this project.