This repo hosts the source code that runs 3 of Ribbon Finance's webapps, the landing page and the v1 webapp.

To begin, check your node version. Use node v14.18.1.

node -v 

Install the node dependencies:

yarn install 

The frontend repo is a monorepo. Each package in the monorepo is a Yarn workspace. Structuring the repo as a monorepo allows us to share components across multiple webapps.

The webapp uses environment variables to talk to the blockchain. Copy paste these variables and create a new file webapp/.env.

You will need to have access to a node to fill up REACT_APP_MAINNET_URI and REACT_APP_TESTNET_URI, we recommend either Infura or Alchemy.

# Used to track which branch is used to deploy the app. 'staging' uses mainnet for URLs REACT_APP_VERCEL_GIT_COMMIT_REF=staging REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID=your_analytics_id REACT_APP_MAINNET_URI=https://mainnet.infura.io/v3/d43d838246464b5690f8b10337b446d7 REACT_APP_TESTNET_URI=https://kovan.infura.io/v3/d43d838246464b5690f8b10337b446d7 REACT_APP_SUBGRAPHQL_URL=https://api.thegraph.com/subgraphs/name/kenchangh/ribbon-finance REACT_APP_SUBGRAPHQL_REARN_URL=https://api.studio.thegraph.com/query/30834/ribbonearnvault/v0.0.2 REACT_APP_KOVAN_SUBGRAPHQL_URL=https://api.thegraph.com/subgraphs/name/kenchangh/ribbon-finance-kovan REACT_APP_AIRTABLE_API_KEY=keymgnfgwnQHmH4pl REACT_APP_AIRTABLE_BASE_ID=app5c70grFW2INfkN REACT_APP_AVAX_URI=https://api.avax.network/ext/bc/C/rpc REACT_APP_FUJI_URI=https://api.avax-test.network/ext/bc/C/rpc REACT_APP_AVAX_SUBGRAPHQL_URL=https://api.thegraph.com/subgraph/name/kenchangh/ribbon-avax REACT_APP_SOLANA_TESTNET_URI=https://api.devnet.solana.com REACT_APP_SOLANA_MAINNET_URI=https://api.mainnet-beta.solana.com 

In order to switch between the development environment and a production environment, we can change the REACT_APP_VERCEL_GIT_COMMIT_REF env var.

REACT_APP_VERCEL_GIT_COMMIT_REF=staging # used to see mainnet data REACT_APP_VERCEL_GIT_COMMIT_REF=development # used to see testnet (kovan) data 

To run the webapp, you need to open two terminals, one in shared and another in webapp. We start with running yarn start in shared.

cd shared/ yarn start 

Now, in the webapp directory, we can start the build server.

cd webapp/ yarn start 

The webapp should automatically open at http://localhost:3000. Happy building! 🛠👷‍♀️👷‍♂️

To run the treasury app, you need to set the following environment variable

REACT_APP_VAULT_COLLECTION=treasury 

To start building, begin with opening 3 terminal windows:

1. cd shared
2. cd webapp
3. cd treasury

We start with running yarn start in shared.

cd shared/ yarn start 

Continue with running yarn lib in webapp.

cd webapp/ yarn lib 

Now, in the treasury directory, we can start the build server.

cd treasury/ yarn start 

The treasury should automatically open at http://localhost:3000.

• shared: holds all constants, common React components.
• landing: holds the Ribbon landing page.
• webapp: holds the v1 Ribbon webapp.

In the individual package directories, you can run:

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.

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.

Make sure you select Kovan testnet in Metamask for localhost development. You can get Kovan testnet Eth from: https://faucet.paradigm.xyz Kovan testnet was selected because Opyn had their contracts deployed there.

Feel free to open issues and PRs that help improve Ribbon's frontend. Ribbon's frontend uses the React + Typescript + hooks stack, so experience using these technologies is highly appreciated when making pull requests.

The primary license for ribbon-frontend is the Business Source License 1.1 (BUSL-1.1), see LICENSE.