Reactive Ethereum dapp UI suite
Note: This monorepo is aligned with our
@drizzlescoped package release of 1.5.0. If you are looking for our old drizzle repo, it has been moved here.
@drizzle/store:- is the state manager of Drizzle. It handles the boilerplate for web3 connection as synchronizing Smart Contract state and events.
@drizzle/react-plugin:- defines the Drizzle Provider for a React project.
@drizzle/react-components:- is a collection of primitive web controls that transforms Smart Contract data types to their appropriate html controls. It's the fastest way to visualize Contract data on a browser with React!
@drizzle/vue-plugin:- a Vue adaptor and collection of html controls that will get your Vue dapp up and running quickly!
Thanks for taking the time to help out and improve
The following is a set of guidelines for
drizzlecontributions and may change over time. Feel free to suggest improvements to this document in a pull request!
All contributions are welcome!
If you run into an issue, the first step is to reach out in our community Gitter channel, in case others have run into the problem or know how to help.
To report a problem or to suggest a new feature, open a GitHub Issue. This will alert us of the problem so we can prioritize a fix.
For code contributions, for either new features or bug fixes, see Development.
If you're looking to make a substantial change, you may want to reach out first to give us a heads up.
In order to develop
drizzle, you'll need:
First clone this repository and install NPM dependencies:
$ git clone [email protected]:trufflesuite/drizzle.git $ cd drizzle $ yarn
If all is good, navigate (
cd) to the package of interest and follow the README document there.
Community contributions to
drizzlerequire that you first fork the repository. After your modifications, push changes to your fork(s) and submit a pull request upstream to
See GitHub documentation about Collaborating with issues and pull requests for more information.
:exclamation: Note:drizzledevelopment uses a long-liveddevelopbranch for new (non-hotfix) development. Pull Requests should be opened againstdevelopin all repositories.
drizzleprojects adhere to Gitflow, a Git workflow designed around a strict branching model to more easily track feature development vs. releases. For more information on Gitflow, check out Atlassian's helpful guide.
We can separate our branches into long-lived and purposeful branches. We have two long-lived branches:
master, checkout for hotfix development; in sync with the latest
release(synced after the release has gone out publicly).
develop, checkout for feature development; latest unstable releases and work targeting the next major or minor release.
All development is done on branches with a
prefix/titlestyle naming convention. These are later merged into
developand finally a
releasebranch before final release. These are the two prefixes we use:
feature/, for new feature development; later merged with
fix/, for hotfix development; later merged with
For example, a fix for a contract fetching error might look like:
Use a branch for your modifications, tracking it on your fork:
$ git checkout -b feature/sweet-feature // or "fix/" prefix if a hotfix $ git push -u ChocolateLover feature/sweet-feature
Then, make changes and commit as usual.
Start and wait for Ganache to initialize.
$ yarn ganache
You'll know when the console shows the following:
test-truffle-contracts: Listening on 127.0.0.1:9545
Open up another terminal and deploy the contracts to Ganache:
$ yarn ganache:deploy
Deployment is done when the following is logged to the console:
test-truffle-contracts: Summary test-truffle-contracts: ======= test-truffle-contracts: > Total deployments: 4 test-truffle-contracts: > Final cost: ... ETH
Start the front end test apps:
Now you'll have 3 apps to interact with.
Because these libraries are dependencies to your front end project, you'll want to be run your project against the local changes you're working on. Use
First navigate to the package you want to work on. For example, if you're working on the vue-plugin.
$ cd packages/vue-plugin $ yarn link # sym-link package to yarn's global scope $ yarn prepare # build your changes
Now that the package has been linked, yarn will be able to resolve it when you specify it as a dependency.
Navigate to your front end project:
$ yarn link @drizzle/vue-plugin # use your local vue-plugin
clean: Clean all non-root workspaces
clean:all: All workspaces including root and removes yarn.lock
Running the Test UIs:
ganache: Launch a Ganache instance
ganache:deploy: Deploy some test contracts to an existing Ganache instance
serve:ui: Launch the test UIs that work with the two Ganache commands above
Webpack bundle size report:
webpack-reports: Creates a report of the bundle size
test: Run all tests
test:store: Run only tests for
test:store:verbose: Run only tests for
@drizzle/storepassing verbose flag
test:vue: Run only tests for
Join the chat in our community Spectrum channel. If anything about this process is unclear, or for helpful feedback of any kind, we'd love to hear from you!
Thanks again for all your support, encouragement, and effort!
drizzlewould not be possible without contributors like you. :bow: