master staging

Giveth v2

🚀 Quick start

Giveth-2 is a reimagined version of the "Giveth donation application". Users can create projects with a focus on 'for-good' philanthropic causes and receive donations via the Ethereum Blockchain. Donations can be made via ETH or ERC-20 tokens on both Mainnet and xDai Network.

The projects aims to simplify the application's options to enable new users without blockchain experience a frictionless experience.

If you want to contribute, pls say hello to us in chat - https://giveth.io/join

This guide will document the steps to set up and run Giveth.io locally for the purposes of development. The setup process was documented using Ubuntu 20.04 LTS.

You'll need a couple prerequisites to get started.

Redis
Postgres
Bash CLI
Gatsby CLI
Configure NodeJS
- For Linux
- For Windows
Your Favourite Code Editor (VScode for linting presets)

Install impact-graph from GitHub

In order to develop locally you need to clone the backend server as well. We are using https://github.com/topiahq/impact-graph for this.

via the CLI:

git clone git@github.com:topiahq/impact-graph.git
cd impact-graph
npm i
cp .env.example .env

Create a Database and User in Postgres using psql

Follow this tutorial on PSQL to setup your username and create the database. https://medium.com/coding-blocks/creating-user-database-and-adding-access-on-postgresql-8bfcd2f4a91e)

TL;DR

sudo -u postgres psql
postgres=# create database <databaseName>;
postgres=# create user <userName> with encrypted password '<passwordHere>';
postgres=# grant all privileges on database <databaseName> to <userName>;

Clone and Install the Frontend

Head on over to https://github.com/Giveth/giveth-2 and clone the repo.

via the CLI:

git clone git@github.com:Giveth/giveth-2.git
cd giveth-2
npm i

Get the Environment Variables

In order to run the local build for Giveth.io you'll need to ask for the environment variables. Head on over to our Contributors Discord say Hi and get in touch with one of the developers.

Launch the Development Server and Environment

Make sure the backend server is running; the impact-graph from step 1.

To take advantage of linting presets, please use VSCODE:

Select File -> Open Workspace
Navigate into the giveth-2 directory
Open the workspace file giveth2-full-stack.code-workspace
Install recommended extensions (Prettier and StandardJS plugins)

Then fire up the local development server.

gatsby develop

Start Editing!

Open up the giveth2 repo on your code editor.

Giveth.io is now running locally at http://localhost:8000!

You can also expiremnt with querying your data via GraphQL - you'll find it at this link here - http://localhost:8000/___graphql Learn more about using this tool in the Gatsby tutorial.

Save your changes and the browser will update in real time!

Contributor Guide

Like, star and fork the repo if you want to help with visibility
Have a look at the issue board and choose something to work on
Before starting any work, please at least say "Hi" on the giveth2-dev/Giveth2 construction office channel (see chat links here: https://giveth.io/join)
Even better, after introducing yourself pls join the next DEV Call (usually Sunday 17:30 CEST, but watch announcements in the discord channel)
Please ask somebody
If you found the project via a Gitcoin bounty, please make sure to check the issue every few days until completion (Gitcoin requires some proof of life checks)
Please start a new branch on your fork named with the feature/fix you want to attempt and make a pull request when you are confident everything is ready to publish

Gitflow

master only for PR's and noncritical hotfixes like typo's after merging - deploys to https://v2.giveth.io

New features should be pushed to a new branch named $featurename (No develop or release branches currently, but at least develop will be added in the future to have a proper staging environment)

Styling

Styling should be done in cooperation with senior contributors so a minimum of new styles is introduced locally. As a rule of thumb: all styles that are used more than once or are not very specific to one component should be added in the Theme UI definitionsrc/gatsby-plugin-theme-ui/index.js whenever possible and additionally to a gatsby page we use to collect all defined styles src/pages/viewstyles.js to quickly check consistency. Please refer to some examples in the code to see how we deal with styles. Local overrides and extensions should be done via sx prop or emotionJS.

Code conventions

as mentioned above contributor code should be linted with StandardJS
React components for into the folder /src/components and component filenames should be written in Camel case.

Testing

We use Cypress to handle end-to-end testing. Basic testing can be handled in Netlify but not the tests that required a wallet connected to the DApp. For the latter, you'll need a local setup.

Commands to run tests:

All tests: npx cy:open
Basic end-to-end tests: npx cy:e2e
Web3 tests: npx cy:web3

The setup for web3 testing is the following:

Create a cypress.env.json as the cypress.env.example.json
Paste your local Giveth Token that you can find in your localStorage by going to your Giveth's DApp (inspect -> console -> Type localStorage in the console). Take the following variable: giveth_user_local_token
Run the following command to instanciate a HTTP Web3 Provider: ganache-cli -p 8545

Now you can run tests that require a wallet!

If you face some issues verify the Giveth token step and the ganache cli is launched. Then re-run the npx cy:open command.

Giveth/giveth-gatsby