OpenQ

The long term vision for Octobay is to become a decentralized ecosystem for funding, governance, promotion and gamified recruitment on top of GitHub and potentially other open source collaboration platforms.

• Demo
• Docs
• Contracts
• Chainlink Adapters
• Subgraph
• API Server

Run locally

git clone https://github.com/Octobay/app octobay-app && cd octobay-app && yarn

The following environment variables need to be set:

export API_URL=https://octobay.uber.space
export GITHUB_CLIENT_ID=5fbd39c6916b7efb63cc
export OCTOBAY_ADDRESS=0xEC1dA9EeE346A67C121E4fce746C64b4e31b61A4
export CHAIN_ID=42

Now run yarn app:dev, open http://localhost:3000 and connect your MetaMask to Kovan.

API

The API_URL configured in .env, is called in components and the Vuex store to fetch data from the Subgraph and GitHub (issues, deposits, token information, etc.) and to authenticate a GitHub user. If you need to work on the endpoints run the API server locally.

Octobay Adapters

Some API calls are the same for the frontend API and our chainlink adapters and potentially interesting for use in other places. They live in their own repository and are published as an NPM package.

Design

The general design guideline is:

"Everything you need. Nothing you don't."

The app aims to expose all its content and features even to browsers without web3 support and without being connected to a wallet or GitHub. Browsing the content should be without barriers. Buttons are replaced with "connect" buttons whereever needed.

Nuxt/Vue

The app is build with Nuxt.js on top of Vue.js (v2). As part of a future update we will migrate to Vue.js v3. Some basic experience with these frameworks (or similar ones like React) is required to get comfortable with the app's codebase quickly.

Web3

The web3 plugin injects web3.js into the app for web3 enabled browsers and web3.utils for all browsers. It starts listeners for account and chain changes, to trigger necessary state updates, and adds a global mixin to make our contracts accessible in the app's components.

(!) Currently only MetaMask is supported. Other wallet integrations will be outsourced to the community as bounties.

Contracts

The address of the main Octobay contract needs to to be set in .env. The most recent development deployment address is set in .env.sample.

From the main contract the other "module" contracts are derived. Their addresses are exposed as public properties of the Octobay contract and indexed as part of a config object in our Subgraph.

• Governor: Manages governance departments and creates new governance tokens for projects.
• Governance Token Template: Deployed for each governance department by the Governor.
• Governance Permission NFT: Manages NFTs representing permissions for a governance department (token).
• Address Storage: Stores verified Ethereum addresses of GitHub users.
• Oracle Storage: Stores addresses and job information of our oracle network.
• Deposit Storage: Holds and manages funds related to bounties and users.

(!) The app mostly just writes to these contracts. It reads data from the Octobay Subgraph (Explorer).

The main contract, the Governor and the Governance NFT contract are initialized on demand, as computed component properties.

computed: {
  ...mapGetters(['config']),
  octobay() {
    return new app.$web3.eth.Contract(
      require('./../contract-abi/Octobay.json').abi,
      process.env.OCTOBAY_ADDRESS
    )
  },
  octobayGovernor() { ...

In every component, they are available as this.octobay, this.octobayGovernor and this.octobayGovNFT. Since there are multiple instances of Octobay governance tokens, this.octobayGovToken is a function that takes the address of the deployed token contract to initializes the web3.eth.Contract.

methods: {
  octobayGovToken(address) {
    return new app.$web3.eth.Contract(
      require('./../contract-abi/OctobayGovToken.json').abi,
      address
    )
  },
},

Page Load

The default layout (used for / and /gov) uses the load middleware to connect to GitHub, load MetaMask account information and populate the initial state with some API calls.

GitHub Authentication

The /auth/github page is the redirect page for our OAuth app and takes an auth code and exchanges it for an access token via our API, stores it in the browser's local storage and redirects to /, where the load middleware loads the profile information of the GitHub user.

Deeplinks

The state can also be prepopulated by certain deeplinks. Currently the send form can be prefilled with the following links:

• /#/u/<username>
• /#/u/<username>/<amount>
• /#/i/<username>/<repository>/<issue number>
• /#/i/<username>/<repository>/<issue number>/<amount>

The values are fetched from the location hash in the deeplinks middleware used in the default layout for / and /gov.