Welcome to the code for Coordinape! If you're new to the project, check out our docs.

(experimental)

Contributing

Stack: React, Hasura, & Vercel serverless functions

• NodeJS v16
• Yarn
• Docker
• Vercel CLI

Quick Start

• yarn install
• yarn setup
  • init git submodules & hardhat dependencies
• cp .env.example .env
  • Set HARDHAT_OWNER_ADDRESS and LOCAL_SEED_ADDRESS to your local dev wallet
• yarn docker:start - Start Hasura and postgres
  • Clear the data stored in the docker volumes: yarn docker:clean
• yarn db-seed-fresh - Seed the db w/ dummy data
• yarn start
  • Runs React and the serverless functions in api/
• Go to http://localhost:3000 and start giving!

If you want to hack on end-to-end tests, or see why one might be failing, see our cypress README.

Running tests

For a one-off test run, run yarn test:ci. This starts test instances of Hasura, Postgres, and the web app, populates them with test data, and runs both Jest and Cypress tests against them.

If you want to run tests interactively as you develop:

1. Run yarn test:up. This will start the test instances.
2. In another terminal, run either yarn test for the Jest tests, or yarn cy:dev for the Cypress tests.
3. Just Ctrl-C the process in the first terminal when you're done.

Frontend

More detailed guidelines coming soon.

When writing new frontend components, please use Stitches instead of Material-UI. See:

• Intro video with the author of Stitches
• Theme file: stitches.config.ts
• src/ui, where we have a set of basic components
  • This folder is for simple HTML tags wrapped with styled; components with logic and/or state should still go in src/components, or in a subfolder named for the main component they belong to.

Key libraries

• Create React App
• Stitches
• ethers
• Luxon
• Sentry (error reporting)
• d3-force-3d
  • See forked canvas-color-tracker for brave compatibility
• Recoil - deprecated
• Material UI - deprecated

Hasura

Hasura creates a GraphQL API atop our postgres db. We use it to apply migrations and manage metadata. Perhaps the easiest way to get a feel is start the app and run yarn hasura console.

Working with the schema

• yarn hasura console to modify and explore the database
• yarn generate after schema changes to codegen Zeus & react-query libs
  • Requires yarn start to be running

Updating migrations / metadata

If you pull in any new changes to the schema, your local Hasura instance might start complaining about metadata inconsistency. In order to apply the new migrations / metadata to your local instance, run the following commands:

yarn hasura migrate apply
yarn hasura metadata apply

Previewing changes

Any changes you make in yarn hasura console will be automatically exported to your local hasura directory as migrations or metadata.

These will be applied to the production instance once the PR is merged. You can test them in preview apps by merging them to staging first.

Hardhat

Hardhat is used with typechain to generate TypeScript bindings for the smart contracts, which are in this repo as a git submodule at hardhat/contracts.

• Set ETHEREUM_RPC_URL in .env
  • From Infura project id: Infura & create new project
  • Needs to have access to archive data
• ./scripts/rebuild_hardhat.sh - Rebuild the generated code
• yarn test - Run tests
  • Make sure HARDHAT_FORK_BLOCK is set (13500000 is a good value) and ETHEREUM_RPC_URL points to an archive node.
  • These tests were written when we were just starting to integrate contract support, and have been superseded by the Jest tests in the main app.

Gitpod (experimental)

For an easy quick start, launch a Gitpod development version of the development environment.

Open Gitpod in "Open in VS Code on Desktop", then verify the ports 3000, 8080 and 4566 are being forwarded by VS Code in the "Ports" tab of VS Code. You should then be able to load the app at localhost:3000.

If you want to set a custom .env file for your personal settings and address, edit .env and then save it to your Gitpod profile with

gp env DOTENV="$(base64 .env | tr -d '\n')"

See .gitpod.yml for details on how Gitpod works.

Troubleshooting

If you have more questions, please create an issue or ask in our Discord channel #devs-all.