Skip to main content

Tribute UI

⚡️ TributeDAO Framework provides you a set of modular and extensible smart contracts to launch your DAO with minimal costs.

Requirements#

Install the project#

Use the command line tool to clone the Github repository and install all the project dependencies.

First, make sure you are in the root of tribute-tutorial folder.

Then clone and access the tribute-ui Github repo:

git clone https://github.com/openlawteam/tribute-ui.git && cd tribute-ui

Configure the environment#

After you cloned the Tribute UI repo, let's set up the environment variables in the root of tribute-ui folder, and deploy the subgraph.

touch .env

Then add the following environment variables:

tip

You can find the REACT_APP_DAO_REGISTRY_CONTRACT_ADDRESS and REACT_APP_MULTICALL_CONTRACT_ADDRESS values in the tribute-contracts/logs/rinkeby-deploy.log.

# It can be the same value you used for the Tribute DAO deployment.REACT_APP_INFURA_PROJECT_ID_DEV=...
# The address of the DaoRegistry smart contract deployed to the Rinkeby network.REACT_APP_DAO_REGISTRY_CONTRACT_ADDRESS=...
# The address of the Multicall smart contract deployed to the Rinkeby network.REACT_APP_MULTICALL_CONTRACT_ADDRESS=...
# The url of snaphot-hub running locally in a container.REACT_APP_SNAPSHOT_HUB_API_URL=http://localhost:8081
# The unique name registered in Snapshot Hub under which proposals, votes, etc. will be stored.REACT_APP_SNAPSHOT_SPACE=tribute
# The url of the subgraph running locally in a container.REACT_APP_GRAPH_API_URL=https://api.thegraph.com/subgraphs/name/<GITHUB_USERNAME>/tribute-dao-tutorial
# Make sure it is set to development modeREACT_APP_ENVIRONMENT=development
caution

Please do not change the REACT_APP_SNAPSHOT_SPACE, keep it as is, so it will work with the snapshot-hub service.

Open the Rinkeby deployment logs, scroll to the end of the file and you should see an output like this:

************************DaoRegistry: 0x...Multicall: 0x......************************

These are the address of the contracts you have deployed to Rinkeby. Just copy the address of DaoRegistry and Multicall, set them to REACT_APP_DAO_REGISTRY_CONTRACT_ADDRESS and REACT_APP_MULTICALL_CONTRACT_ADDRESS respectivelly.

Then set your Github username to <GITHUB_USERNAME> in REACT_APP_GRAPH_API_URL, that will indicate where your subgraph needs to be created.

Deploy the Subgraph#

caution

You need to checkout branch v1.1.0 of tribute-contracts to make it work with the tribute-ui.

Go to the tribute-tutorial/tribute-contracts directory and check out the the tag v1.1.0 which is the version that contains the subgraph that works with TributeUI:

cd ../tribute-contracts

Then checkout the correct branch v1.1.0, install the project dependencies:

git checkout tags/v1.1.0 -b branch-v1.1.0 && npm ci

Access the subgraph folder in tribute-contracts:

cd subgraph

Then open the config file: subgraph/config/subgraph-config.json, remove all the entries and add your subgraph config:

[  {    "network": "rinkeby",    "daoFactoryAddress": "0x...",    "daoFactoryStartBlock": ...,    "GITHUB_USERNAME": "<YOUR_GITHUB_USERNAME>",    "SUBGRAPH_NAME": "tribute-dao-tutorial"  }]

In the rinkeby deployment logs at tribute-contracts/logs/rinkeby-deploy.log search by DaoFactory and copy the contract address and block number, set the values to daoFactoryAddress and daoFactoryStartBlock respectively.

Finally, set your Github username to GITHUB_USERNAME, it must be the same Github account that you used to connect to thegraph.com.

caution

The SUBGRAPH_NAME should be lowercase and any spaces should be hyphenated, it needs to match the subgraph slug you picked when you created the subgraph in thegraph.com. If you're not sure, go to the Subgraph Legacy Explorer, navigate to your subgraph, and look for "subgraph slug." or once you click on your subgraph, copy the slug from the browser URL. You should see something like: https://thegraph.com/legacy-explorer/subgraph/[your-github-user]/[slug].

From the tribute-tutorial/tribute-contracts/subgraph folder, install the dependencies using Node v14.x:

npm ci

Create the .env file under the subgraph folder:

touch .env

Add the subgraph API access token:

# The Graph API Access Token that will be used to deploy the Subgraph.# Copy the Access Token from: https://thegraph.com/legacy-explorer/dashboardGRAPH_ACCESS_TOKEN=

Start the Subgraph deployment:

npx ts-node subgraph-deployer.ts

At the end of the process you should see an output like this:

✔ Upload subgraph to IPFS
Build completed: ...
Deployed to https://thegraph.com/explorer/subgraph/<your-github-username>/tribute-dao-tutorial
Subgraph endpoints:Queries (HTTP):     https://api.thegraph.com/subgraphs/name/<your-github-username>/tribute-dao-tutorialSubscriptions (WS): wss://api.thegraph.com/subgraphs/name/<your-github-username>/tribute-dao-tutorial
👏 ### Done.🎉 ### 1 Deployment(s) Successful!

Launch the Snapshot Hub ERC712 service#

Use the command line tool to clone the Github repository and launch the docker container. This can be done in any directory, but to keep it consistent let's checkout the project from the tribute-tutorial folder.

Clone and access the snapshot-hub Github repo:

git clone https://github.com/openlawteam/snapshot-hub.git && cd snapshot-hub

Checkout the correct branch and create the .env.local file:

git fetch origin erc-712 && git checkout erc-712 && touch .env.local

Copy the following content to the new .env.local file:

# The port number to start the service.PORT=8080# The type of the ethereum network.NETWORK=testnet# The flag to indicate if the snapshot-hub should use IPFS to store data.USE_IPFS=false# The 64 digits private key of the hd wallet that will be used to sign messages.# Feel free to generate a new random 64 digit hexadecimal number for this.RELAYER_PK=0x..# The allow list of domain that will be using the service.ALLOWED_DOMAINS=http://localhost:3000# The Alchemy API URL and access token to talk to Rinkeby ethereum network.ALCHEMY_API_URL=https://eth-rinkeby.alchemyapi.io/v2/<ACCESS_TOKEN>

Add your Alchemy API access token to ALCHEMY_API_URL in .env.local

Next add a 64 digit hexadecimal number to RELAYER_PK in .env.local. A hexadecimal creator can be found here: https://numbergenerator.org/random-64-digit-hex-codes-generator

From the snapshot-hub root folder install the dependencies:

npm ci

Finally, start the snapshot-hub erc712 service:

docker-compose up

You should see this in the terminal:

image

Running the Tribute UI dApp#

Alright, we are almost done. Now we will set up the Tribute UI dApp, so you can interact with your DAO that was deployed to Rinkeby.

You already deployed the Subgraph, and prepared the Snapshot Hub service, now let's start use the command line to start the dApp.

From the tribute-ui root folder, execute:

npm ci

Start the dApp:

npm start

You should see this in your terminal: image

Interacting with the DAO#

Open your browser and access http://localhost:3001.

You should see the Tribute UI onboarding page:

Join Tribute DAO

tip

Connect to TributeUI using the same MetaMask account you used to deploy the DAO to Rinkeby, since that address is considered the owner of the DAO you will have access to all features, and will hold 1 unit token.

Connected:

Connected

Access the Governance page and hit new proposal to create a proposal for vote, e.g:

Governance

👏 Well Done!!!

🎉 You have launched your DAO using Tribute DAO Framework and now you can interact with it using the TributeUI dApp!

info

It was a lengthy tutorial, but we are constantly working to improve the deployment and configuration process.

Problems?#

Ask for help on Discord or on GitHub Discussions.