search

bancorprotocol / carbon-app

https://app.carbondefi.xyz
MIT License
23 stars 14 forks source link

readme

Carbon Webapp

CarbonDeFi | Contracts | CarbonDeFi SDK | FastLane | Blog | Documentation

CarbonDeFi webapp

Carbon DeFi is an advanced onchain trading protocol enabling automated limit orders, efficiently adjustable with custom price ranges, grid trading like recurring orders, works like a DEX trading bot.

Setup

Requirements

To run the app locally, you need the following:

For E2E testing you need a Tenderly account and API Key.

Run locally

  1. Copy the .env.sample file to .env and fill in the values.

  2. In the project directory, you can install all dependencies by running:

yarn install
  1. Run the app in development mode by running the following:
yarn start

Open http://localhost:3000 to view it in the browser.

Test

Unit tests

To launch the test runner, run the following command:

yarn test

E2E tests

To run the E2E tests, you must have a Tenderly API key to create and delete forks. You can set it in the .env file. Please refer to the E2E readme for more information.

Build

Running the following, will build the app for production:

yarn build

It will build the for production to the build folder.\ It correctly bundles the App 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!

Debug

The '/debug' route is available to debug the app (ex: localhost:3000/debug). It can be accessed by pressing the Debug main menu option which is shown when the app is ran locally. From the debug page you can access the following features:

{
  "base": "ETH",
  "quote": "DAI",
  "buy": {
    "min": "1500",
    "max": "1700",
    "budget": "10"
  },
  "sell": {
    "min": "2000",
    "max": "2200",
    "budget": "1000"
  },
  "value": "10",
  "spread": "5"
}

where spread (fee tier in the UI) is in percentage, and value is the number of strategies to create.

Customization

Change Network

  1. Create a new folder under src/config with the name of the network (ex: "polygon")
  2. Copy paste the files from src/config/ethereum into your folder
  3. Update the common.ts, production.ts & development.ts files with your config, pointing to the CarbonDeFi contracts in that network
  4. Update the src/config/index.ts files to import your files index.ts

As an example on adding Polygon network:

import ethereumDev from './ethereum/development';
import ethereumProd from './ethereum/production';
// Import polygon config
import polygonDev from './polygon/development';
import polygonProd from './polygon/production';

const configs = {
  ethereum: {
    development: ethereumDev,
    production: ethereumProd,
  },
  // add polygon here
  polygon: {
    development: polygonDev,
    production: polygonProd,
  },
};
  1. Update the .env file to use the required network (ex: "polygon") and set your RPC url if you wish to use a custom one not defined under the common.ts file.
# Use polygon network
VITE_NETWORK=polygon
# Use any RPC URL to your network
VITE_CHAIN_RPC_URL=https://eth-mainnet.alchemyapi.io/v2/<API_KEY>

Contracts with version < 5

In case the network is using a version of CarbonController older than 5 then there's no support for extended range for trade by source, and it is recommended to set VITE_LEGACY_TRADE_BY_SOURCE_RANGE to true in .env to avoid possible reverts.

Common configuration

The file common.ts with type AppConfig contains important configuration for the app and network. It includes the following:

Add pairsToExchangeMapping

The file pairsToExchangeMapping.ts contains the mapping of pair symbols to exchange symbol to be used in the TradingView chart.

Change Colors

The theme is defined in the tailwind.config.ts file. You can update these colors:

oklch: colors are using oklch function to keep contrast no matter the color used. For browser support reason we decided to used the library culari to transform oklch into rgb instead of the native css method.

To get the oklch value of an hex color you can use this webapp: https://oklch.com

Background

Background shades are calculated based on hue and chroma. In tailwind.config.ts you can specify hue and chroma of the background.

Foreground

All other colors are defined with l,c,h values (see https://oklch.com), and the computed palettes will look like that:

[color]: {
  light: lighten(value, 20%),
  DEFAULT: value,
  dark: darken(value, 50%),
}

You can change the % of the lighten & darken function with the lightDark function.

Change font

The application uses two fonts :

You can change the font by changing the files under :

Use the same naming as the current files.

Change font weight & format

If you want to change the weight & format of the fonts you'll need to update the src/fonts.css file.

Use only one font

If you want to use only one font, the easiest is to update tailwind.config.ts. Under theme.fontFamily change the name of the font.

For example, if you want to only use Carbon Text:

fontFamily: {
  text: ['Carbon-Text', 'sans-serif'],
  title: ['Carbon-Text', 'sans-serif'], // change to Carbon Text here
},

You can also remove the unused @font-face from the src/fonts.css file.

License

The license used is the MIT License. You can find it here.