Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Complete tutorial #2

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<title>Aragon App</title>
</head>
<body>
<div id="root"></div>
<script src="src/index.js"></script>
</body>
</html>
@@ -0,0 +1,69 @@
import React from "react";
import { useAragonApi } from "@aragon/api-react";
import {
Box,
Button,
GU,
Header,
IconMinus,
IconPlus,
Main,
SyncIndicator,
Text,
textStyle
} from "@aragon/ui";

function App() {
const { api, appState } = useAragonApi();
const { count, isSyncing } = appState;
const step = 2;

return (
<Main>
{isSyncing && <SyncIndicator />}
<Header
primary="Counter"
secondary={
<Text
css={`
${textStyle("title2")}
`}
>
{count}
</Text>
}
/>
<Box
css={`
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: ${50 * GU}px;
${textStyle("title3")};
`}
>
Count: {count}
<div>
<Button
display="icon"
icon={<IconMinus />}
label="Decrement"
onClick={() => api.decrement(step).toPromise()}
/>
<Button
display="icon"
icon={<IconPlus />}
label="Increment"
onClick={() => api.increment(step).toPromise()}
css={`
margin-left: ${2 * GU}px;
`}
/>
</div>
</Box>
</Main>
);
}

export default App;
@@ -0,0 +1,18 @@
import React from "react";
import ReactDOM from "react-dom";
import { AragonApi } from "@aragon/api-react";
import App from "./App";

const reducer = state => {
if (state === null) {
return { count: 0, isSyncing: true };
}
return state;
};

ReactDOM.render(
<AragonApi reducer={reducer}>
<App />
</AragonApi>,
document.getElementById("root")
);
@@ -0,0 +1,52 @@
import "core-js/stable";
import "regenerator-runtime/runtime";
import Aragon, { events } from "@aragon/api";

const app = new Aragon();

app.store(
async (state, { event }) => {
const nextState = {
...state
};

try {
switch (event) {
case "Increment":
return { ...nextState, count: await getValue() };
case "Decrement":
return { ...nextState, count: await getValue() };
case events.SYNC_STATUS_SYNCING:
return { ...nextState, isSyncing: true };
case events.SYNC_STATUS_SYNCED:
return { ...nextState, isSyncing: false };
default:
return state;
}
} catch (err) {
console.log(err);
}
},
{
init: initializeState()
}
);

/***********************
* Event Handlers *
***********************/

function initializeState() {
return async cachedState => {
return {
...cachedState,
count: await getValue()
};
};
}

async function getValue() {
// Get current value from the contract by calling the public getter
// app.call() returns a single-emission observable that we can immediately turn into a promise
return parseInt(await app.call("value").toPromise(), 10);
}
@@ -0,0 +1,21 @@
{
"roles": [
{
"name": "Increment the counter",
"id": "INCREMENT_ROLE",
"params": []
},
{
"name": "Decrement the counter",
"id": "DECREMENT_ROLE",
"params": []
}
],
"environments": {
"default": {
"network": "rpc",
"appName": "foo.aragonpm.eth"
}
},
"path": "contracts/CounterApp.sol"
}
@@ -0,0 +1,43 @@
pragma solidity ^0.4.24;

import "@aragon/os/contracts/lib/math/SafeMath.sol";
import "@aragon/os/contracts/apps/AragonApp.sol";


contract CounterApp is AragonApp {
using SafeMath for uint256;

/// Events
event Increment(address indexed entity, uint256 step);
event Decrement(address indexed entity, uint256 step);

/// State
uint256 public value;

bytes32 constant public INCREMENT_ROLE = keccak256("INCREMENT_ROLE");
bytes32 constant public DECREMENT_ROLE = keccak256("DECREMENT_ROLE");

function initialize(uint256 _initValue) public onlyInit {
value = _initValue;

initialized();
}

/**
* @notice Increment the counter by `step`
* @param step Amount to increment by
*/
function increment(uint256 step) auth(INCREMENT_ROLE) external {
value = value.add(step);
emit Increment(msg.sender, step);
}

/**
* @notice Decrement the counter by `step`
* @param step Amount to decrement by
*/
function decrement(uint256 step) auth(DECREMENT_ROLE) external {
value = value.sub(step);
emit Decrement(msg.sender, step);
}
}
@@ -0,0 +1,6 @@
{
"name": "Counter",
"description": "My first Aragon app",
"script": "/script.js",
"start_url": "/index.html"
}
@@ -27,7 +27,7 @@ module.exports = {
// Called when the start task needs to know the app proxy's init parameters.
// Must return an array with the proxy's init parameters.
getInitParams: async ({}, { web3, artifacts }) => {
return [];
return [15];
},

// Called after the app's proxy is updated with a new implementation.