stackedq / web

ShapeShift Web

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

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)

Quick Start

On Linux and MacOS it works out of the box following the steps.
⚠️ On Windows you should use the Windows Subsystem for Linux (WSL).

• Clone the repo

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

  nvm use

• 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

• Copy sample.env to .env, and configure it according to the .env section below.

  cp sample.env .env

.env

The .env file contains environment variables that the program needs to function properly.

• REACT_APP_PORTIS_DAPP_ID

  Allows you to connect a Portis wallet. Without this the program will hang after choosing Portis and clicking the "Pair" button. Portis Dapp IDs aren't secret, but they are domain-specific.

• REACT_APP_ETHEREUM_NODE_URL

  Needed for certain Defi integrations such as Yearn; the app will malfunction when connecting a wallet without it.

  Any Ethereum node should do, but you can get your own node URL for testing by doing the following:

  1. Go to https://infura.io/dashboard

  2. Set up a free account

  3. Make a new project

     Your key should use "JSON-RPC over HTTPS" and look like this: https://mainnet.infura.io/v3/<your project id>

Commands

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

    yarn dev

Launches the test runner in the interactive watch mode.
See the section about running tests for more information. It also creates a html page you can interact with at the root level of the project in /coverage.

    yarn test

Starts Cypress E2E testing with GUI.

yarn test:cypress

Or run Cypress headless

test:cypress:headless

Builds the app for production to the build folder.
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.

    yarn build

Runs the component documentation.
Open http://localhost:6006 to view it in the browser.

    yarn storybook

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 not necessary.

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 script ./scripts/release.sh helps to automate the release process.

Create a release branch

yarn create-release v1.1.1 or ./scripts/release.sh release v1.1.1

This creates a releases/v1.1.1 branch based on origin/develop and pushes it to origin

Merge a release into main

yarn merge-release v1.1.1 or ./scripts/release.sh main v1.1.1

This does a checkout of origin/releases/v1.1.1 then merges that to main. After a confirmation prompt, it pushes that to origin/main.