aragon / aragon-react-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

43.0 12.0 30.0 1.83 MB

(Aragon 1) React boilerplate for Aragon applications

License: MIT License

HTML 1.60% JavaScript 88.38% Solidity 10.03%

boilerplate aragon-boilerplate aragon react

aragon-react-boilerplate's Introduction

Aragon Buidler Boilerplate

🕵️ Find more boilerplates using GitHub | ✨ Official boilerplates

▶️ To use this boilerplate, run npx create-aragon-app <app-name>

Buidler + React boilerplate for Aragon applications.

Running your app

To run the app in a browser with frontend and contract hot-reloading, simply run npm start.

Add code quality tools, like JS and contract linting. You may also want to check existing buidler plugins.
Develop your AragonApp contract
Develop your frontend
Publish!

What's in this boilerplate?

npm Scripts

postinstall: Runs after installing dependencies.
build-app: Installs front end project (app/) dependencies.
start Runs your app inside a DAO.
compile: Compiles the smart contracts.
test: Runs tests for the contracts.
publish:major: Releases a major version to aragonPM.
publish:minor: Releases a minor version to aragonPM.
publish:patch: Releases a patch version to aragonPM.

Hooks

These hooks are called by the Aragon Buidler plugin during the start task's lifecycle. Use them to perform custom tasks at certain entry points of the development build process, like deploying a token before a proxy is initialized, etc.

Link them to the main buidler configuration file (buidler.config.js) in the aragon.hooks property.

All hooks receive two parameters: 1) A params object that may contain other objects that pertain to the particular hook. 2) A "bre" or BuidlerRuntimeEnvironment object that contains environment objects like web3, Truffle artifacts, etc.

// Called before a dao is deployed.
preDao: async ({ log }, { web3, artifacts }) => {},

// Called after a dao is deployed.
postDao: async ({ dao, _experimentalAppInstaller, log }, { web3, artifacts }) => {},

// Called after the app's proxy is created, but before it's initialized.
preInit: async ({ proxy, _experimentalAppInstaller, log  }, { web3, artifacts }) => {},

// Called after the app's proxy is initialized.
postInit: async ({ proxy, _experimentalAppInstaller, log  }, { web3, artifacts }) => {},

// 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 ({ log }, { web3, artifacts }) => {
  return []
}

If you want an example of how to use these hooks, please see the plugin's own tests for an example project.

Structure

This boilerplate has the following structure:

root
├── app
├ ├── src
├ └── package.json
├── contracts
├ └── CounterApp.sol
├── test
├── arapp.json
├── manifest.json
├── buidler.config.js
└── package.json

app: Frontend folder. Completely encapsulated: has its own package.json and dependencies.
- src: Source files.
- package.json: Frontend npm configuration file.
contracts: Smart contracts folder.
- CounterApp.sol: AragonApp contract example.
test: Tests folder.
arapp.json: Aragon configuration file. Includes Aragon-specific metadata for your app.
manifest.json: Aragon configuration file. Includes web-specific configuration.
buidler.config.js: Buidler configuration file.
package.json: Main npm configuration file.

Libraries

@aragon/os: AragonApp smart contract interfaces.
@aragon/api: Aragon client application API.
@aragon/ui: Aragon UI components (in React).
@aragon/buidler-aragon: Aragon Buidler plugin.

aragon-react-boilerplate's People

Contributors

Stargazers

Watchers

aragon-react-boilerplate's Issues

Remove Publishing section from readme

Instead we should link to hack.aragon.org

Add front-end test pipeline

Add a way to run tests for the front-end, too. This is a bit of a hassle, since Truffle decided to roll their own version of Mocha with some things injected.

Add build pipeline

Add a build pipeline to transform React into something runnable in the browser.

Improve truffle.config file

As discussed in: aragon/aragon-cli#498

Connection error

Following the directions in the Readme, and with Metamask switch to rpc http://localhost:8545, the app loads up and displays Organization not found. Looking in the dev console, there is a connection error:

WebSocket connection to 'ws://localhost:7545/' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

Update to new dao-templates refactor

Related to: aragon/dao-templates#93

Use @aragon/client

When node-aragon is split into two, we should only depend on the client part, not the wrapper part.

/usr/bin/env: ‘node --no-deprecation’: No such file or directory

$ npm start

> [email protected] start /home/porton/t/aragon-react-boilerplate
> npm run start:ipfs


> [email protected] start:ipfs /home/porton/t/aragon-react-boilerplate
> aragon run --files dist

/usr/bin/env: ‘node --no-deprecation’: No such file or directory
/usr/bin/env: use -[v]S to pass options in shebang lines
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! [email protected] start:ipfs: `aragon run --files dist`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the [email protected] start:ipfs script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/porton/.npm/_logs/2019-12-22T20_23_49_509Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `npm run start:ipfs`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/porton/.npm/_logs/2019-12-22T20_23_49_518Z-debug.lo

App display a white page

Doing npm start or npm run start:app build the app without errors but display a white page.

Bump required @aragon/cli version to 4.0.0

When we release it.

Incorrect contract name in migration file

Looks like there is an incorrect contract name in ./migrations/2_deploy_contracts.js:1.

This is what it currently shows:

var App = artifacts.require('./App.sol')

But it should be this should be this:

var App = artifacts.require('./CounterApp.sol')

Folder structure

Discussion started in #38 (comment)

Also: aragon/aragon-app-dx#1

Consider versioning the boilerplates

Git tags should do the trick 🤔

Add LICENSE file

Add dependency on copyfiles package

Update arrap.json to environments default

It's been discuss to update the current arrap.json to have the same configuration as environments.default to prevent confusion

Add dependency on react package

Fix tests

Currently when running test we are using the script @aragon/test-helpers/ganache-cli.sh

The error displayed is:

Could not connect to your Ethereum client. Please check that your Ethereum client:
    - is running
    - is accepting RPC connections (i.e., "--rpc" option is used in geth)
    - is accessible over the network
    - is properly configured in your Truffle configuration file (truffle.js)

dist do not rebuild with start:app script

Add dependency on parcel package

React error when importing aragonUI components

Hi, importing several aragonUI components into App.js per the docs produces the following error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
    in App
    in AragonApi

Error on: Header, Box, Bar, ...
No error: Button, Table, ...

Steps to Reproduce

clone repo
npm install
npm run prepare
npm run start:app
npm run start:http
Add aragonUI component Box to App.js:

// App.js

import React from 'react'
import { Main, Button, Box } from '@aragon/ui'
...

function App() {
  return (
    <Main>
      <Box>Primary content</Box>
      ...
    </Main>
  )
}
...

Is there a step that's missing when importing components?

app: copy-files should be used with `-u 1`

Currently the sync-assets script copies the files over to dist/public/meta but what we actually want (a the paths in manifest.json are currently written) is dist/meta.

Add smart contracts security best practices reference

Mythril seems to be the standard for this but we could explore additional options

IPFS error: no link named "index.html"

Hi,

I have encountered a problem while trying to run the boilerplate.

I have followed the instructions in the readme, and the DAO starts properly, but the Counter interface does not load. Instead, the following error message is shown:

ipfs resolve -r /ipfs/QmbDVxipAuZaBjek9JTgcVExTvcnVx9KosEn9iMAwRcMdK/index.html: no link named "index.html" under QmbDVxipAuZaBjek9JTgcVExTvcnVx9KosEn9iMAwRcMdK

Transactions are ignored (Bug in aragonOS?!)

After I increment the counter it remains 42, as if I did nothing.

Yes, I cleared the application cache.

I checked, that the value of the variable in contract remains the same (does not change).

Bug report for the commit 3cfd17acae7869addcbe35c5208baafc724d3a92.

Add CONTRIBUTING file

Create a CONTRIBUTING.md file and contributor guidelines for this repo.

Upgrade dependencies and scripts

In particular, upgrade:

@aragon/cli
@aragon/ui and its copy script
@aragon/os
truffle
Add @aragon/react-helpers

Merge with aragon-react-kit-boilerplate

It doesn't really make sense for both of these boilerplates to exist, now that the CLI's kit functionality has been around for quite a while.

@0x6431346e @0xGabi What do you think about moving the kit implementation into this boilerplate and then archiving the other boilerplate?

Error running npm start

> aragon run

 ✔ Start a local Ethereum network
 ✔ Check IPFS
 ✔ Create DAO
 ✔ Initializing DAO permissions
 ❯ Publish APM package
   ✔ Deploy contract
   ↓ Automatically bump version [skipped]
     → Starting from initial version
   ✔ Determine contract address for version
   ✔ Building frontend
   ✔ Prepare files for publishing
   ✔ Generate application artifact
   ✖ Publish foo.aragonpm.test
     → Error: Repository foo.aragonpm.test does not exist and it's registry does not exist
   Install app
   Open DAO
 ✖ Error: Repository foo.aragonpm.test does not exist and it's registry does not exist

Ability to remove files from IPFS or stop propagating

Hi ,

If Is there a possibility to remove files from ipfs, after I made publishing + propagating?

aragon apm publish major "--environment" "staging"
npx aragon ipfs propagate <hash>

I noticed that the garbage collector didn't remove them, after 48 hrs.

Or maybe there is some way to update files using the same hash?
Thanks.

Parcel issues

I believe that parcel-bundler/parcel#1586 may be the cause of aragon/aragon-cli#149

Build Error

After I installed aragon-cli, ran npm install. Then npm run start:app to start the app & npm run start:aragon:http I get the following error

/home/0mkar/.aragon/wrapper-fcebf55d1af6c574a92587e2a1d3ac8c00804d16/src/index.html: Conflicting babel versions found in .babelrc. Make sure all of your plugins and presets depend on the same major version of babel.

    at inferBabelVersion (/home/0mkar/.aragon/wrapper-fcebf55d1af6c574a92587e2a1d3ac8c00804d16/node_modules/parcel-bundler/src/transforms/babel/babelrc.js:224:17)
    at getBabelVersion (/home/0mkar/.aragon/wrapper-fcebf55d1af6c574a92587e2a1d3ac8c00804d16/node_modules/parcel-bundler/src/transforms/babel/babelrc.js:173:24)
    at

npm start
...
Compiled 87 contracts successfully
backend  | Contracts compiled.
backend  | Started a ganache testnet instance with id 1590072386592.
backend  | Deploying Aragon bases (ENS, DAOFactory, and APM)...
backend  | ENS deployed: 0x5f6F7E8cc7346a11ca2dEf8f827b7a0b612c56a1
backend  | DAO factory deployed: 0x8EEaea23686c319133a7cC110b840d1591d9AeE0
backend  | APM deployed: 0xA53dE0b8e08b798f975D57f48384C177D410d170
backend  | Deploying DAO and app repository...
backend  | DAO deployed: 0x0D13999edC23D3475Ed3FE22a15Cc7828FeCD762
backend  | Creating app...
backend  | Proxy address: 0xA1A7d254552BEB05f15522EeD93B54441E61d1d9
backend  | Repo address: 0xAaFe10d42Afa9cAf22AEA3E853afD6EB279B6544
backend  | Proxy init params: 42
backend  | Implementation address: 0xbcE9e0203B700f9382C66405Dc5b4687E2e5F0A0
backend  | App version: 1,0,0
backend  | Initializing proxy...
An unexpected error occurred:

Error: Invalid number of parameters for "initialize". Got 1 expected 0!    at PromiEvent (/home/porton/Projects/courts/node_modules/@nomiclabs/truffle-contract/lib/promievent.js:13:30)
    at TruffleContract.initialize (/home/porton/Projects/courts/node_modules/@nomiclabs/truffle-contract/lib/execute.js:169:26)
    at Object.startBackend (/home/porton/Projects/courts/node_modules/@aragon/buidler-aragon/src/tasks/start/start-backend.ts:130:15)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at SimpleTaskDefinition.action (/home/porton/Projects/courts/node_modules/@aragon/buidler-aragon/src/tasks/start-task.ts:68:11)
    at Environment._runTaskDefinition (/home/porton/Projects/courts/node_modules/@nomiclabs/buidler/src/internal/core/runtime-environment.ts:196:14)
    at main (/home/porton/Projects/courts/node_modules/@nomiclabs/buidler/src/internal/cli/cli.ts:151:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @porton/[email protected] start: `buidler start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @porton/[email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/porton/.npm/_logs/2020-05-21T14_46_30_962Z-debug.log

Add gas reporter tool ⛽️

Some example could be: eth-gas-reporter