CoW Swap is the first trading interface built on top of CoW Protocol.
It allows you to buy and sell tokens using gasless orders that are settled
peer-to-peer among its users or into any on-chain liquidity source while
providing MEV protection.
🐮 Run CoW Swap
First install Dependencies:
yarn
Run
Start CoW Swap on http://localhost:3000
yarn start
Build
Build the project. The static files will be generated in the build
folder.
yarn build
Unit testing
yarn test
🔎 Explorer
Start the Explorer on http://localhost:4200
Read more about the Explorer
Start
yarn start:explorer
Build
yarn build:explorer
🐄 cow.fi
Start CoW.fi on http://localhost:3001
Start
yarn start:cowfi
Build
yarn build:cowfi
🖼️ Widget Configurator
Start the Widget Configurator on http://127.0.0.1:4200/widget-configurator
# Start
yarn start:widget
# Build
yarn build:widget
🌌 Cosmos UI Library
Start the Cosmos UI Library on http://localhost:5000
yarn run cosmos
🤓 Development
Integration test
⚠️ To run the tests. Make sure you add the required environment varianbles to
your .env.local
file with:
INTEGRATION_TEST_PRIVATE_KEY=<your-private-key>
: Private key
INTEGRATION_TESTS_INFURA_KEY=<your-infura-key>
: Infura key
To launch it with our development server (so you have live-reloading):
yarn start
yarn cypress
Alternatively, you can build the project and launch the integration test.
yarn build
yarn integration-test
If we want to use the Cypress UI:
yarn build
yarn serve
yarn cypress
Build/test UI Library
CoW Swap has a library of reusable components.
yarn ui:build
yarn ui:test
Build
yarn build
Analyze CoW Swap bundle:
# Use one of the following templates: "sunburst" | "treemap" | "network" | "raw-data" | "list";
ANALYZE_BUNDLE=true ANALYZE_BUNDLE_TEMPLATE=sunburst yarn build
⚙️ Configuration
RPC Endpoints
You should set your own RPC endpoints.
One simple way to do this, is by defining your own REACT_APP_INFURA_KEY
environment var.
Alternatively you can define the RPC URLs directly with the following
environment variables:
REACT_APP_NETWORK_URL_1: https://...
REACT_APP_NETWORK_URL_11155111: https://...
REACT_APP_NETWORK_URL_100: https://...
REACT_APP_NETWORK_URL_42161: https://...
REACT_APP_NETWORK_URL_8453: https://...
Additionally, if you plan to run the integration tests locally you must define:
INTEGRATION_TESTS_INFURA_KEY: YOUR_INFURA_KEY
INTEGRATION_TESTS_PRIVATE_KEY: YOUR_TEST_WALLET_PRIVATE_KEY
Orderbook API Endpoints
Fee quote requests and posting orders are sent to the Orderbook API. This API
has the responsibility of collecting orders and handing them to the solvers.
The reference implementation of the API is
CoW Protocol Services.
The API endpoint is configured using the environment variable
REACT_APP_ORDER_BOOK_URLS
:
REACT_APP_ORDER_BOOK_URLS='{"1":"https://YOUR_HOST","100":"https://YOUR_HOST","5":"https://YOUR_HOST"}
BFF API Endpoints (Backend for Frontend)
The BFF API is a helper API that provides some additional data to the frontend.
It is a API that is used to enhance the frontend experience enabling some
features. It is not consider a required API for CoW Swap core functionality, the
app will still allow the user to place order and will have some fallback logics
in case this API is not available.
The reference implementation of the API is
BFF (Backend For Frontend).
The API endpoint is configured using the environment variable
REACT_APP_BFF_BASE_URL
:
REACT_APP_BFF_BASE_URL=https://bff.cow.fi
CMS API Endpoints (Content Management System)
The CMS API is a helper API that provides some additional content to the frontend.
It is not considered a required API for CoW Swap core functionality, the
app will still allow the user to place orders and will have some fallback logic
in case this API is not available.
The reference implementation of the API is
CMS API.
The API endpoint is configured using the environment variable
REACT_APP_CMS_BASE_URL
:
REACT_APP_CMS_BASE_URL=https://cms.cow.fi/api
Price feeds
CoW Swap tries to find the best price available on-chain using some price feeds.
All price feeds are enabled by default, but they can be individually disabled by
using an environment variable:
Name | Environment variable | Type | Description |
---|
1inch | REACT_APP_PRICE_FEED_1INCH_ENABLED | boolean (default = true ) | Paraswap price estimation. Used for all price estimations. |
0x | REACT_APP_PRICE_FEED_0X_ENABLED | boolean (default = true ) | 0x price estimation. Used for all price estimation. |
Metadata attached to orders (AppData)
The app will attach some metadata to all orders.
This metadata will be sent to the smart contract as a hexadecimal value in an
order field called AppData
. This value comes from hashing the content of a
metadata JSON containing some information about the trade (using keccak256
on
the UTF-8
bytes).
The format of the JSON follows the format defined in
@cowprotocol/app-data.
To set your own AppData
, change REACT_APP_FULL_APP_DATA_<environment>
environment variable. For more details, check out the environment file (<.env>)
🔎 SEO
Sitemap
The sitemap can be found in <./public/sitemap.xml>
To update its content:
- Edit the list of pages in <./src/sitemap.js>
- Run
yarn sitemap
- Commit the changes to git
🔫 Troubleshooting
Service worker
In case of problems with the service worker cache you force a reset using
emergency.js The plan:
const resetCacheInCaseOfEmergency = false
- change false
to true
- Deploy a new version to production
emergency.js
is not cached by browser and loaded before all.
📚 Technical Documentation
- Oveall Architecture
- Amounts formatting
- ABIs