App.js: Aragon app root component.
index.js: Aragon app entry point.
script.js: Aragon app background script.
CounterApp.sol: Aragon app contract.
buidler-hooks.js: Buidler script hook.
auth()modifier that the
AragonAppinterface gives you and add an initialize function to your contract; we use
initValueas the starting value of the counter. Integrate this code in
@noticestatements alongside a human-readable description for the function. In our example, we use the input
stepto describe what is doing our function at runtime.
Decrementevents, and builds a state, for this example, the current value of our counter. Add the below code to
storemethod takes in a reducer function with the signature
(state, event) => state, where
stateis whatever you want it to be (in this example it is an integer), and
eventis a Web3 event. The reducer function must always return a state, even if it is the same state as before. Returning undefined will reset the reduced state to its initial null state. Also note that the initial state is always null, not undefined, because of JSONRPC limitations.
storeshould be used as the main "event loop" in an application's background script (running inside a WebWorker). Listens for events, passes them through reducer, caches the resulting state, and re-emits that state for easy chaining. Optionally takes a configuration object comprised of an init function, to re-initialize cached state, and an externals array for subscribing to external contract events. See below for more details.
useAragonApiReact Hook that observes the state that our background script builds for us and returns the data needed to interact with the app contract. Add this code to
AragonApito connect the app. It is generally a good idea to do it near the top level of your React tree. It should only be declared once. It has an optional reducer prop, which lets you process the state coming from the background script. If not provided, the state is passed as-is.
useAragonApi()is a React Hook that returns the data needed to interact with the app contract. As with any React Hook, please ensure that you follow the Rules of Hooks. It returns an object containing the following entries:
appState: Is the app state, after having passed the background script
statethrough the reducer prop of AragonApi.
api: This is the current AragonApp instance. Use it to call methods on the contract.
arapp.jsondefines the smart contract and aragonPM-specific things like the roles in your app or different environments.
arapp.jsonso that it knows about the roles we defined previously and use the development environment. Add this code to
manifest.jsondefines end-user specific things like the human-readable name of your app, icons, and a small description of your app. It also (optionally) defines background scripts, of which we have one.
getInitParamhook. Must return an array with the proxy's init parameters.
CounterAppinitialize function. Add tis code to
ganache-core, so it's a full testrpc instance) and prints 10 accounts.
parcelbecause it has zero-config, but you can use your favorite bundler.
Do you have a question? Leave your comments here at our Discourse forum 👇