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. Some of these variables are deployment-specific, so they aren't included in the repository.

• 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; you can get the one we use for testing by making a post asking for it in the Discord.

• 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

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.

1. Clone lib and unchained repos
2. Go into lib and run yarn link - you only have to do this the first time to get things setup
3. Go into unchained, then cd packages/client and yarn link, then do the same in packages/parser - again, this only has to be done the initial time
4. If you're working in web and need to make changes in lib or unchained, run yarn link-packages in web to use local versions of them
5. yarn show-linked-packages will show what's currently linked
6. If you're done developing locally yarn unlink-packages to use published upstream versions

Now your web's chain-adapters have a symlink to your lib's

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.