Ribbon Frontend
This repo hosts the source code that runs 3 of Ribbon Finance's webapps, the landing page and the v1 webapp.
Getting Started
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.
Setting up your environment
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
Running the webapp
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!
Running the treasury app
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:
- cd
shared - cd
webapp - 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.
Packages
shared: holds all constants, common React components.landing: holds the Ribbon landing page.webapp: holds the v1 Ribbon webapp.
Available Scripts
In the individual package directories, you can run:
yarn start
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 build
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.
Local development network
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.
Contributing
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.
License
The primary license for ribbon-frontend is the Business Source License 1.1 (BUSL-1.1), see LICENSE.