![Carbon Webapp](./public/carbon.jpg)
CarbonDeFi | Contracts | CarbonDeFi SDK | FastLane | Blog | Documentation
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.
To run the app locally, you need the following:
- Node.js 20+
- Yarn
- RPC Node Provider API Key (Alchemy, Infura, etc)
For E2E testing you need a Tenderly account and API Key.
-
Copy the
.env.sample
file to.env
and fill in the values. -
In the project directory, you can install all dependencies by running:
yarn install
- Run the app in development mode by running the following:
yarn start
Open http://localhost:3000 to view it in the browser.
To launch the test runner, run the following command:
yarn test
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.
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!
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:
- Set Imposter Account: Allows to set any account in the active network to impersonate.
- Set Tenderly RPC: Allows to set the RPC URL from a Tenderly fork, as well as setting custom addresses for the carbonController contract and the carbonVoucher contract. Leaving
Unchecked Signer
checked is recommended as it avoids the need to populate all details of the transaction before returning it, and avoids transaction errors when using the app. - Tenderly Faucet: After setting the Tenderly RPC and Tenderly Account, the faucet can be used to add tokens to the impersonated wallet.
- Transfer Strategy NFT allows to transfer the NFT that represents the strategy with ID
Strategy ID
to theRecipient
wallet. The active wallet must be the owner of the NFT to be able to transfer it. - Notifications: allows to test
loading
,success
,failure
andtransaction
rejected notifications. - Set E2E flag: allows to set the E2E flag to true or false - used when running e2e tests.
- Create Strategy: Allows to easily create multiple strategies - useful for debugging and used in E2E tests. A strategy template must follow the form:
{
"base": "ETH",
"quote": "DAI",
"buy": {
"min": "1500",
"max": "1700",
"budget": "10"
},
"sell": {
"min": "2000",
"max": "2200",
"budget": "1000"
},
"value": "10",
"spread": "5"
}
where spread
is in percentage, and value
is the number of strategies to create.
- Create a new folder under
src/config
with the name of the network (ex: "polygon") - Copy paste the files from
src/config/ethereum
into your folder - Update the
common.ts
,production.ts
&development.ts
files with your config, pointing to the CarbonDeFi contracts in that network - Update the
src/config/index.ts
files to import your filesindex.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,
},
};
- 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 thecommon.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>
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.
The file common.ts
with type AppConfig
contains important configuration for the app and network. It includes the following:
appUrl
: The URL of the app.carbonApi
: The URL of the API.walletConnectProjectId
: The WalletConnect project ID If you wish to add walletConnect, make sure to add it toselectableConnectionTypes
as well.selectableConnectionTypes
: List of available connection types to be used in the wallet selection modal.isSimulatorEnabled
: Flag to enable the simulation page.network
name
: Network name.logoUrl
: Network logo URL.chainId
: Chain ID.gasToken
: Gas token name, symbol, decimals, address and logoURI.blockExplorer
: The name and URL of the block explorer to be used in the notifications and when the network is added to the injected wallet.rpcUrl
: The RPC URL of the network.
defaultTokenPair
: Default token pair to be used in the app when opening the trade and simulation pages.popularPairs
: List of popular pairs to be used in the app when opening the token selection modal.popularTokens
: List of popular tokens to be used in the app when opening the token selection modal.addresses
/carbon
andaddresses/utils
: CarbonController, Voucher and multicall contract addresses.tokenListOverride
: Token list override to be used in the app when fetching the token list. Tokens in the list will override any other token with the same address.tokenLists
: List of token lists including the uri and the parser to be used to parse the token list.
The file pairsToExchangeMapping.ts
contains the mapping of pair symbols to exchange symbol to be used in the TradingView chart.
The theme is defined in the tailwind.config.ts
file.
You can update these colors:
- background: used for surfaces
- primary: used for buttons and other actionable elements
- success: used for positive information like positive ROI.
- error: used for error messages & buttons
- warning: used for warning messages (mainly in forms)
- buy: used for any information related to buy operation
- sell: used for any information related to sell operation
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 shades are calculated based on hue and chroma. In tailwind.config.ts
you can specify hue
and chroma
of the background.
hue
: from 0 (pink) to 360 (pink).chroma
: It's recommended to use 0.01 or 0.02 depending on the hue.
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.
The application uses two fonts :
- BW Gradual for the titles
- Euclid Circle A for the text
You can change the font by changing the files under :
Use the same naming as the current files.
If you want to change the weight & format of the fonts you'll need to update the src/fonts.css
file.
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.
The license used is the MIT License. You can find it here.