chia-blockchain-gui
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 |
Development
- This repo (chia-blockchain-gui) must be under chia-blockchain repo. Please follow the installation steps for the chia-blockchain. Make sure to install from source code (git clone...).
- Run the
sh install-gui.sh
as instructed in the previous step. This will clone the chia-blockchain-gui under chia-blockchain repo. - Run
npm run dev:gui
When developing, please:
-
Only edit the code with the Vscode editor.
-
Always have chia-blockchain-gui opened as a root folder in the Vscode and not chia-blockchain, or chia-blockchain-gui/packages/... Failing to do so will result in incorrect auto linting and auto formatting which would not go trough the CI quality checks.
-
When you open the repo in the vscode, click on "Install recommended plugins" pop-up.
-
To develop in testnet, please follow these steps.
-
Please write tests for your code
-
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
Installing NPM packages
To install an NPM package, please navigate to the root directory of this repo.
- To install
lodash
for all packages:npx lerna add lodash
- To install
lodash
for single package:npx lerna add lodash --scope=@chia-network/icons
- To install as a dev dependency, add
--dev
After adding a new NPM package, please pin down the package version. This is done to lower the possibility of supply chain attacks.
Common eslint issues
-
react/no-array-index-key
Only use
index
as akey
when all of the following conditions are met:- the list and items are static / hardcoded.
- the list is never reordered or filtered.
In all other cases, you have to figure out what unique string you will use as an
key
, or create a dedicatedID
. -
import/no-extraneous-dependencies
Packages that are used only in development should not be present on the production build. You have 3 options:
- If its a whole directory, add it to the
.eslintrc.json
file - If its a single file, rename it by adding
.dev.
in the extension. Example:file.ts
->file.dev.ts
- If its a file that is run on the production, use this:
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'); }
- If its a whole directory, add it to the
Git workflow
- Git branch from "main"
- For Chia employees: prefix your branch with your name, like this:
yourName/what-is-the-code-about
. This helps when cleaning up old branches. - All commits must be signed.
Git commit messages
-
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 formAdding new field of X-> Add new field - "discount code", in the order formMore fixes for broken stuff-> Fix broken responsive layout
Localization
Do not edit files directly in the repo, but instead please head over to our Crowdin project and add/edit translations there.
Troubleshooting
-
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- In your command line, please go to the
chia-blockchain
directory (one level up) - Run
. ./activate
- Run
cd chia-blockchain-gui
- Run
npm run dev:gui
to start the app. - If still does not work, please open you process manager and kill all Chia / Python related processes.
- In your command line, please go to the
-
Why is my component keeps 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, }
Debugging
- In the Chia Electron app, click
View -> Developer -> Developer tools
. - In the console tab of the developer tools, change the default console events to include
verbose
events. These are the events emitted from thedebug
package.
Simulator / SimNet
- Please follow the Install and configure the simulator. Do this step only once.
- In the chia-blockchain directory, run this to setup the ENV variables. Use these instead the ones mentioned in the above guide.
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
- You should see your simulator wallets. You should not see your testNet / mainNet wallets.
Chia FAQ/WIKI
Please check out the wiki and FAQ for information on this project.