┏━━━┓━━━━━━━━━━━━━┏┓━━━━━━━━━━━━━━━━━━━
┃┏━┓┃━━━━━━━━━━━━━┃┃━━━━━━━━━━━━━━━━━━━
┃┃━┗┛┏━━┓┏━━┓┏━┓┏━┛┃┏┓┏━┓━┏━━┓━┏━━┓┏━━┓
┃┃━┏┓┃┏┓┃┃┏┓┃┃┏┛┃┏┓┃┣┫┃┏┓┓┗━┓┃━┃┏┓┃┃┏┓┃
┃┗━┛┃┃┗┛┃┃┗┛┃┃┃━┃┗┛┃┃┃┃┃┃┃┃┗┛┗┓┃┗┛┃┃┃━┫
┗━━━┛┗━━┛┗━━┛┗┛━┗━━┛┗┛┗┛┗┛┗━━━┛┃┏━┛┗━━┛
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┃┃━━━━━━
React Frontend + GraphQL API   ┃┃
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┗┛━━━━━━
                __------__
              /~          ~\
             |    //^\\//^\|
           /~~\  ||  o| |o|:~\
          | |6   ||___|_|_||:|
           \__.  /      o  \/'
            |   (       O   )
   /~~~~\    `\  \         /
  | |~~\ |     )  ~------~`\
 /' |  | |   /     ____ /~~~)\
(_/'   | | |     /'    |    ( |
       | | |     \    /   __)/ \
       \  \ \      \/    /' \   `\
         \  \|\        /   | |\___|
           \ |  \____/     | |
           /^~>  \        _/ <
          |  |         \       \
          |  | \        \        \
          -^-\  \       |        )
               `\_______/^\______/

Getting started

Stack: React, Hasura graphql server & vercel serverless functions

Prerequisites

• NodeJS v14
• Hasura cli version >= 2.1.1
• Yarn
• Docker
• Vercel CLI

Coordinape is being rebuilt

• Laravel → Hasura & Vercel serverless functions
• Material UI → Stitches + React-Query & Zeus

Quick Start

• yarn install
• yarn setup
  • init git submodules & link hardhat
• cp .env.example .env
  • Set HARDHAT_OWNER_ADDRESS and LOCAL_SEED_ADDRESS to your local dev wallet
• yarn docker:start - Start laravel legacy backend, Hasura and postgres
  • Clear the data stored in the docker volumes: yarn docker:clean
  • First time laravel is slow.
• yarn db-seed-fresh - Seed the db w/ dummy data
• vercel dev
  • If you're creating a new Vercel project, use these custom settings:
    • Build Command: ./scripts/link-hardhat.sh && yarn build
    • Development Command: craco start
  • Runs React and the serverless functions in api/
• Goto: http://localhost:3000 and start giving!

Storybook

• yarn storybook

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 the vercel dev serverless functions to be running

Pulled in new migrations / metadata that don't exist in your local instance?

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 migrations apply
yarn hasura metadata apply

Alternatively, you can just run yarn docker:stop && yarn docker:start and Hasura will apply the migrations/metadata automatically.

Hardhat

• Set ETHEREUM_RPC_URL in .env
  • From Infura project id: Infura & create new project
• yarn hardhat:dev

Additionally

• ./scripts/setup.sh - link the react app generated code
• ./scripts/rebuild-hardhat.sh - Rebuild the generated code
• yarn hardhat:test - Run tests
  • make sure HARDHAT_FORK_BLOCK is set (13500000 is a good value) and ETHEREUM_RPC_URL points to an archive node

Hasura

Hasura automagically 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.

Changes to the schema are previewed in PRs with vercel

Any changes you make in the Console will be reflected in your local hasura directory as migrations or metadata. In the feature branch a clone of the staging database will be created with the changes.

These will be applied to the staging/production instance once merged via PR.

Thin Client

Inspired by the 3factor app. We are building thin client with business logic using serverless functions and postgres constraints.

• Actions
• Mutations
• Triggers
• Cron jobs
• Constraints

Server logic in typescript, configured with hasura, deployed by vercel.

React App

Bootstrapped with Create React App.

Key libraries

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

State Management w/ Recoil

Moving towards Zeus+React-Query

Recoil defines a consistent data graph that will suspend the app when useRecoilState(rIdentifier) has an unresolved promise. See their video and documentation.

The basic distinction is between atoms and selectors. selectors will be rerun when any of their dependencies change and with each run the dependency list can change, unlike with hooks. atomFamily and selectorFamily allow parameterization.

Recoil in this app

• Recoil identifiers are Global
• Prefer to minimize atoms and selectors now
• Most data consolidated into profile & circle state
  • useSelectedCircle & useMyProfile
• Advanced Recoil concepts:
  • useRecoilCallback
  • effects_UNSTABLE

API requests

• Types are currently manually matched to our server
  • e.g. api.epoch.d.ts and post params: api.d.ts
• const useRecoilLoadCatch()
  • standard wrapper that can trigger loading and error message
• App data loaded in useApiBase
  • fetchManifest fetchCircle fetchProfile

Forms

@exrhizo developed a in house form lib inspired by React Hook Form with the intention of easy customization. Perhaps too clever.

• Forms are configured with a Zod Parser
• See AdminUserForm for a simple use
• Doesn't have first class support of array fields

Useful tricks

Setup docker, git, hasura completions.

Docker

• Install VS Code's docker extension
• docker ps - see the running containers
• docker logs coordinape_graphql-engine_1 | jq -C | less -r
  • jq parses the hasura log output as colorized json
• docker exec -it app bash - Create a shell in the container

Troubleshooting

• Cannot start service app: error while creating mount source path Try restarting Docker Desktop

• TypeError: Cannot read properties of undefined (reading 'replace') You need to configure a local .env file with some private variables. Ask someone for these.

• error: no template named 'remove_cv_t' in namespace 'std'; did you mean 'remove_cv' Probably related to node-sass versions. Node v16 only works with node-sass 6.0.1 or newer. sass/node-sass#3077

• Laravel in Docker always restarting (Windows) When log says start.sh : not found Change the line ending of Laravel/services/start.sh from CRLF to LF.

Credits

ascii art above: image - font