Coder Social home page Coder Social logo

avsavsavs / cowswap Goto Github PK

View Code? Open in Web Editor NEW

This project forked from cowprotocol/cowswap

0.0 0.0 0.0 74.86 MB

๐Ÿฎ CowSwap: First CoW Protocol UI

Home Page: https://swap.cow.fi/

License: GNU General Public License v3.0

Shell 0.01% JavaScript 0.47% TypeScript 99.24% CSS 0.01% HTML 0.28%

cowswap's Introduction

Tests Styled With Prettier

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.

Please see the:

You can block an entire list of tokens by passing in a tokenlist like here or you can block specific tokens by adding them to unsupported.tokenlist.json.

Install Dependencies

yarn

Run

yarn start

Unit testing

yarn test

Integration test

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

Alternativelly, 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

Run cosmos

This will start a server on the http://localhost:5000/

yarn run cosmos

Configuring the environment

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.

What is the mandatory minimum to be able to run the application?

Your environment MUST have the following variables defined: REACT_APP_INFURA_KEY=YOUR_INFURA_KEY REACT_APP_NETWORK_URL_1=https://mainnet.infura.io/v3/{YOUR_INFURA_KEY} REACT_APP_NETWORK_URL_5=https://goerli.infura.io/v3/{YOUR_INFURA_KEY}

Additionally, to successfully run E2E / Integration tests locally you must have; INTEGRATION_TESTS_INFURA_KEY=YOUR_INFURA_KEY INTEGRATION_TESTS_PRIVATE_KEY=YOUR_TEST_WALLET_PRIVATE_KEY

Production configuration

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

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
CoW Protocol REACT_APP_PRICE_FEED_GP_ENABLED boolean (default = true) CoW Protocol price estimation. Used for all price estimation.
Paraswap REACT_APP_PRICE_FEED_PARASWAP_ENABLED boolean (default = true) Paraswap price estimation. Used for all price estimations.
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.
Coingecko REACT_APP_PRICE_FEED_COINGECKO_ENABLED boolean (default = true) Coingecko price estimation. Used only for USD estimations to calculate the slippage on the trade.

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.

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

For example, CoW Swap 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/utils/metadata.ts>

To set your own AppData, change REACT_APP_DOMAIN_REGEX_<environment> environment variable. Ask for yours at CoW Swap's Discord channel. 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,100,5"
REACT_APP_NETWORK_URL_1=https://mainnet.infura.io/v3/{YOUR_INFURA_KEY}
REACT_APP_NETWORK_URL_5=https://goerli.infura.io/v3/{YOUR_INFURA_KEY}
REACT_APP_NETWORK_URL_100=https://rpc.gnosischain.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 the API is gp-v2-services.

The API endpoint is configured using the environment variable {XDAI|GOERLI|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.

Sitemap

The sitemap can be found in <./public/sitemap.xml>

To update its content:

  1. Edit the list of pages in <./src/sitemap.js>
  2. Run yarn sitemap
  3. Commit the changes to git

Service worker

In case of problems with the service worker cache you force a reset using emergency.js The plan:

  1. const resetCacheInCaseOfEmergency = false - change false to true
  2. Deploy a new version to production

emergency.js is not cached by browser and loaded before all.

Documentation

  1. Oveall Architecture
  2. Amounts formatting

cowswap's People

Contributors

anxolin avatar moodysalem avatar crowdin-bot avatar alfetopito avatar w3stside avatar nenadv91 avatar shoom3301 avatar zzmp avatar noahzinsmeister avatar ianlapham avatar fairlighteth avatar haydenadams avatar jfrankfurt avatar chikeichan avatar matextrem avatar callil avatar tukantje avatar kennyt avatar lint-action avatar ramirotw avatar alongoni avatar avsavsavs avatar vm avatar github-actions[bot] avatar velenir avatar dependabot[bot] avatar lynnshaoyu avatar maria-vslvn avatar henrypalacios avatar willhennessy avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.