/cowswap

🐮 CowSwap: First Gnosis Protocol v2 UI

Primary LanguageTypeScriptGNU General Public License v3.0GPL-3.0

Gitpod ready-to-code

Lint Tests Styled With Prettier

CowSwap is the first trading interface built on top of Gnosis Protocol v2.

It allows you to buy and sell tokens using gas-less orders that are settled peer-to-peer among its users or into any on-chain liquidity source while providing MEV protection.

Please see the:

Development

Install Dependencies

yarn

Run

yarn start

Unit testing

yarn test

Integration test

Normally:

yarn build
yarn integration-test

If we want to use the Cypress UI:

yarn build
yarn serve
yarn cypress

If we want to use the Cypress UI, and live reloading on the web app:

yarn start:default
yarn cypress

Configuring the environment (optional)

The app has some default configuration, but it's highly encouraged to define your own.

Local configuration

Make a copy of .env named .env.local, this will allow you to set your own configuration only in your local environment.

Production configuration

Modify the environment variables in .env.production, or override them in build time.

Metadata attached to orders (AppData)

The app will attach some metadata to all orders.

This metadata will be sent to the smart contract as an 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.

Any web app or client using Gnosis Protocol can upload to IPFS a metadata JSON and use the digest hex to attach that information to the order.

For example, CowSwap uploaded the file https://cloudflare-ipfs.com/ipfs/QmTDarZ47oek1miuRd8uuNCy5AFfjzQbWJ7348izx9N8wQ which has the hexadecimal digest 0x487B02C558D729ABAF3ECF17881A4181E5BC2446429A0995142297E897B6EB37 (See CID Explorer for more details).

The format of the JSON follows this typescript format: <src/custom/utils/metadata.ts>

To set your own AppData, change REACT_APP_DOMAIN_REGEX_<environment> environment variable. Ask for yours at chat.cowswap.exchange/. For more details, check out the environment file (<.env>)

Supported networks

You can change the supported networks and their RPC endpoint.

To have the interface default to a different network when a wallet is not connected:

  1. Change REACT_APP_NETWORK_ID to "{YOUR_NETWORK_ID}". This will be your default network id
  2. Define your own list of supported networks:
REACT_APP_SUPPORTED_CHAIN_IDS="1,4,100"
REACT_APP_NETWORK_URL_1=https://mainnet.infura.io/v3/{YOUR_INFURA_KEY}
REACT_APP_NETWORK_URL_4=https://rinkeby.infura.io/v3/{YOUR_INFURA_KEY}
REACT_APP_NETWORK_URL_100=https://rpc.xdaichain.com

API endpoints

Fee quote requests and posting orders are sent to an API. This API has the responsibility of collecting orders and handing them to the solvers.

The reference implementation of th API is gp-v2-services.

The API endpoint is configured using the environment variable {XDAI|RINKEBY|MAINNET} to e.g. "http://localhost:8080/api" when running the services locally.

Wallet Connect bridge

Wallet Connect allows to connect the app to any Wallet Connect supported wallet.

In order to do so, it uses a Websocket, that can be configured using: the env var WALLET_CONNECT_BRIDGE.