@levelk/futarchy-app

Futarchy App

App for futarchy

Setup

1. npm install

2. npm run compile

Run

1. npm run start:app: builds the frontend to dist/

2. npm run devchain: starts a local aragon devchain

3. npm run start:aragon:

• deploys contract dependencies
• publishes the futarchy app
• creates a new futarchy DAO instance
• starts the aragon app

Scripts

Seeding data

Seeding scripts in scripts/seed_data can be used to seed the UI with decisions and market trades.

To run the scripts, first run through the "Run" instructions above. Make sure all processes have succeeded and are running. Then:

1. Copy the DAO address from the URL of the app. This can be found in the npm run start:aragon output:

Open DAO [completed]
 ℹ You are now ready to open your app in Aragon.

 ℹ This is the configuration for your development deployment:
    Ethereum Node: ws://localhost:8545
    ENS registry: 0x5f6f7e8cc7346a11ca2def8f827b7a0b612c56a1
    APM registry: aragonpm.eth
    DAO address: 0x5b48408a77645bd31e5eBaa460E84B588eaae1d4

    Opening http://localhost:3000/#/0x5b48408a77645bd31e5eBaa460E84B588eaae1d4 to view your DAO

1. Run npm run seed <DAO_ADDRESS>. Replace <DAO_ADDRESS> with your copied address

When these succeed, you will see 3 decisions in the UI. If you click on the first decision, you will see a series of trades.

To run a specific seed file, use npm run seed <DAO_ADDRESS> [DATA_FILE_ID]. The file ID can be found in the file name scripts/data/data_<DATA_FILE_ID>.json. If no ID is specified, the seed script defaults to running with the scripts/data/data_0.json file.

npm run devchain:reset

Starts the devchain with --reset, which deletes existing ganache snapshots

**NOTE: aragon caches event data using indexdb. You need to clear your browser cache after the devchain is reset

Debug Mode

Run npm run start:app:debug (instead of npm run start:app) to log all activity in the client. This will log info about all Aragon smart contract events, calls, and transactions.

Sandbox Setup (for Component UI development)

Use this to develop components without having to depend on the "backend" smart contract environment:

1. First, npm install

2. Run npm run start:app to build the frontend to the dist dir and watch for changes.

3. Run npm run start:sandbox to serve the frontend at http://localhost:8080

4. Modify ./app/components/DecisionListEmptyState.js to add the component you're working on. This is the default view, so you should see changes here when you refresh the browser.

If something breaks, just restart the npm run start:app and npm run start:sandbox processes.

Mocking Component State

All components in futarchy-app are "stateless functional" components. This means they expect some state as input, and render UI based on this state. You can use hardcoded state to test these components. Here's an example:

// ./app/components/DecisionListEmptyState.js

import React from 'react'
// import ShowPanelButtonContainer from '../containers/ShowPanelButtonContainer'
import DecisionSummary from './DecisionSummary'

const mockDecision = {
  id: 123456,
  question: 'question will show up?'
}

const DecisionListEmptyState = () => (
  <DecisionSummary decision={mockDecision} />
  // <div>
  //   Nothing here yet...
  //   <br /> <br />

  //   <ShowPanelButtonContainer panelName="createDecisionMarket">
  //     New Decision
  //   </ShowPanelButtonContainer>
  // </div>
)

export default DecisionListEmptyState

This should display the DecisionSummary component with the state that we provided in mockDecision.

Styling

We're using react styled-components, which allow you to add CSS within the component .js files. See ./app/components/AppHeader.js for a good example of this.

Publishing

Before publishing, make sure a local IPFS instance is running: npm run ipfs

npm run deploy:staging:prepare:

Deploys these dependency contracts to staging (rinkeby). Allocates balances for the MiniMeToken to the accounts in accounts.rinkeby.json.

Deployed contract addresses and token allocation amounts will be stored in deploy.rinkeby.json.

npm run deploy:staging:publish:major:

Publishes a new "major" version of the Futarchy app to staging (rinkeby).

npm run deploy:staging:publish:minor:

Publishes a new "minor" version of the Futarchy app to staging (rinkeby).

IPFS Propagation

The contents of the dist directory need to be propagated to IPFS in order for the web app to load on Aragon. To ensure that content is propagated:

• Make sure IPFS is running: npm run ipfs
• Run npm run versions:staging. Copy the IPFS hash of the version you want to propagate
• Run npm run ipfs:propagate <ipfs_hash> which will attempt to propagate all contents of this repo
• Run npm run ipfs:propagate:dist <ipfs_hash> to propagate the dist directory contents

To manually send to another node, an archive file of IPFS content can be generated by running npm run ipfs:archive:<environment> <version> <ipfs_hash>

Deploying a Futarchy DAO

Before deploying, make sure a local IPFS instance is running: npm run ipfs

deploy:staging:newFutarchyDAO

Deploys a new DAO on staging (rinkeby), installs on instance of the futarchy app futarchy.open.aragonpm.eth, and sets permissions for the deployer account.