MY ACTIONS

Final Project for the Developers Program by Consensys Academy by Nestor Bonilla

My Actions is an activism dashboard DApp of the different actions do people after receive any opportunity (i.e. grants, scholarships, events attendance, etc.) to give back to their community. This allows people to put their actions in a decentralized blockchain their actions, bein sure that will be inmutable.

Prerequisites

To engage with MY ACTIONS you will need the following :

NodeJS (https://nodejs.org/en/)

npm install nodejs
Ganache(https://www.trufflesuite.com/ganache)

npm install ganache-cli -g
Truffle([https://www.trufflesuite.com/truffle] (https://www.trufflesuite.com/truffle))

npm install truffle
Metamask (Chrome Extension) 🦊

Metamask is a chrome extension that helps you interact with web pages that want access to a (your) Ethereum wallet.

Configuring Truffle

Truffle is a development environment, testing framework and asset pipeline for Ethereum, aiming to make life as an Ethereum developer easier.

The project folder will contain a truffle-config.js file which is the configuration file, located at the root of the project directory.

module.exports = {
  networks: {
    development: {
      host: "localhost",
      port: 7545,
      network_id: "*" // Match any network id
    }
  }
};

The default configuration ships with configuration for a single development network, running on 127.0.0.1:7545. There are many other configuration options, you can find more details on the official website:(https://www.trufflesuite.com/docs/truffle/reference/configuration).

Configuring Ganache

Ganache is a virtual blockchain which sets up 10 default Ethereum addresses, complete with private keys, and pre-loads them with 100 simulated Ether each. Ganache comes in two flavors: CLI and UI. I recommend UI for visibility, and simplicity

Ganache will default to a certain Port and IP address. We'll be using 7545. To change these settings, click the ⚙️ icon situated at the top right of the Ganache GUI window, under server.

Note: Double check the RPC Address, Port and Network ID matching with the truffle-config.js file in the root directory.

⚠️ Caution: There may be a nonce sync issue thus you may need to reset the account if you run the ÐApp multiple time across different browser sessions. To do this click the MetaMask extension Icon ( 🦊) > click on the colourful avatar > go to settings (⚙️) > click Advanced > finally, Reset Accounts. Also refresh the page so that these changes have been updated.

Configuring MetaMask 🦊

If you're entirely new to MetaMask I recommend quickly reading this introduction.

Having configured your Truffle & Ganache settings correctly, you'll need to add a new network by clicking Custom RPC, entering the correct RPC SERVER URL, and optionally, the network name.

Note: You can find the RPC SERVER URL just above your mnemonic key, it should read HTTP://127.0.0.1:7545.

As mentioned above Ganache sets up 10 default Ethereum addresses, including their private keys with pre-loaded test Ether. You can import your Ganache generated accounts (assuming it's pointing at the correct network) by logging out of MetaMask and selecting Import using account seed phrase where you'll paste your mnemonic provided by Ganache.

Deployment

Assuming you have set up all of the above correctly, with a test-net in the back running on port 8545, we can continue and deploy our main contract.

Use truffle to migrate the main contract ActionStorage.sol. This can be done by running the following commands in the root directory of the project:

$ truffle migrate

Then we change into the client directory by executing cd app and install the neccessary modules by executing the following command:

$ npm install

Having successfully installed everything within the client directory, we execute npm start to boot up the front-end locally.

Unit Tests

To test with truffle you can execute the following command:

$ truffle test

There are a total of 2 tests, and in the time of writing, all pass. These tests can be found within the test folder under actionStorage.js.

MY ACTIONS functionality

Create Opportunity - Each action should have a specific opportunity right? Well, because of that, first the activist will have to either search on the available opportunities on the platform, or create a new one being as specific as possible about each one.

Create Loan - Allows the activist to create an action by providing an opportunity id, description of the action, date of when the action was done, and a possible resource (i.e. a photo of the action), through a resource hash (the resource use IPFS through Infura to be stored in a decentralized way).

DAPP Interface

The user interface was developed using Truffle drizze with its new feature Drizzle Hooks, which allow us through functional components make a more understandable code management of state all through the project.

A specific consideration this project proposes is the interaction between the blockchain and the ux withouth the need of a third party database.

A final consideration this project propose is a workflow to interact with the blockchain through different pages managed by react-routher-dom.

Godtide / my-actions