ShapeShift DAO Web Interface

This project was bootstrapped with Create React App.

ShapeShift's OSS 2nd generation Web application. (Under Development)

Table Of Contents

• Helpful Docs
• Resources
• Dependencies
• Developer Onboarding
• Commands
• Linking local dependencies
• Debugging

Helpful Docs

• Architecture
• File Structure
• Folder Structure
• Globally Shared Code
• State Management
• Styles
• Testing
• Conventional Commits

Resources

• shapeshift

Dependencies

• hdwallet
• lib
• unchained
• nvm (optional; must be installed manually)

Debugging

• Rerenders

Quick Start

If you are using Linux and MacOS it works out of the box following these steps:

1. Clone the repo

2. (optional) Make sure you're using the right Node.js version.

nvm use

3. Install Dependencies:

# This is short for `yarn install`; be sure to use `yarn install --frozen-lockfile` instead if you're setting up a CI pipeline or trying to duplicate a historical build.
yarn

4. Run yarn env dev to generate a .env file

⚠️ On Windows, Windows Subsystem for Linux (WSL) is required but WE DO NOT SUPPORT THIS ENVIRONMENT, SO USE IT AT YOUR OWN RISK.

If you do use WSL, make sure to store your clone of the repo on the WSL filesystem in order to avoid issues with line endings and to enjoy better performance.

Please do NOT ask our Engineering team for further help with WSL.

Commands

To run the app in the development mode:

yarn dev

It opens http://localhost:3000 to view it in the browser and the page will reload if you make edits.

You will also see any lint errors in the console.

To launch the test runner in interactive watch mode:

yarn test

See the section about running tests for more information.

It also creates an HTML page you can interact with at the root level of the project in /coverage.

To start Cypress E2E testing with GUI:

yarn test:cypress

or, to start it in headless mode:

yarn test:cypress:headless

To build the app for production in the /build folder at the root level of the project:

yarn build

It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

Your app is ready to be deployed!

See the section about deployment for more information.

To run the component documentation:

yarn storybook

It opens http://localhost:6006 to view it in the browser.

Linking

If you're developing locally in this web repository, and need to make changes affecting packages in lib or unchained (backend), use the following steps to link packages locally for developing. If your changes only touch web these steps are unnecessary.

Initial, one-off setup:

1. Clone the lib repo, cd into it, and run yarn build
2. From lib, run yarn link
3. Clone unchained, cd into it, and run yarn build
4. From unchained, cd packages/client and yarn link, then do the same from packages/parser

When working in web, and using local changes in lib or unchained:

1. Run yarn link-packages in web to use local versions of lib and unchained - now your web's chain-adapters have a symlink to your lib's.
2. yarn show-linked-packages will show what's currently linked
3. Once you're done developing locally, run yarn unlink-packages to use published upstream versions

Developer Onboarding

1. Create a pull request on GitHub. (You can do this at https://github.com/<username>/<fork name>/pull/new/<branch name>.)
2. Ensure you've followed the guidelines in CONTRIBUTING.md; in particular, make sure that the title of your PR conforms to the Conventional Commits format.
3. Post a link to your new pull request in #engineering-prs in the Discord
4. (optional) Return to the develop branch to get ready to start another task.

Releases

The command yarn release helps to automate the release process.

Run the command and follow the prompts.