gnosis/cowswap

🐮 CowSwap: First Gnosis Protocol v2 UI

CowSwap is the first trading interface built on top of CoW 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.

• 🐮Official Website🐮: https://cowswap.exchange/

  • ENS Website (alternative): https://cowswap.eth.link, or https://cowswap.eth/ if you have MetaMask or an ENS compatible browser.
  • The website can also be run locally, or from IPFS. Every release will have an IPFS hash associated, available in the Releases section.

• Docs: https://docs.cow.fi

• Stats: https://dune.xyz/gnosis.protocol/Gnosis-Protocol-V2

• Twitter: @gnosisPM

• Reddit: /r/gnosisPM

• Discord: https://chat.cowswap.exchange

Please see the:

• CoW Protocol: Smart contracts
• CoW Protocol: Services

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

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

Run cosmos

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

yarn run cosmos

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.

Price feeds

CowSwap tries to find the best price available onchain 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.
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 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 CoW 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.

Sitemap

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

To update its content:

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

cowswap's Issues

Fee endpoint error

There's a lot of errors like ^^^

I also see that we make an error querying the fee for ETH or xDAI. We use the wrong token address...

Handle negative slippage

The app breaks when handling negative slippage. I believe it happens also in the original Uniswap.

We should handle the error, but also probably allow negative slippage to allow to create market orders in a hacky way.

1. Click in the gear icon, for advanced settings
2. Input a negative slippage

Orders are pending forever

Reported by @fleupold

Hi, small gp-swap bug report: I’m not getting my pending orders confirmed on the Rinkeby web (despite them getting
matched by the solver on chain). They just stay in “pending” forever. I see my balance increase though.

Ideally, before solving it, it would be to have a cypress test to test there's no regression for this bug.

Probably we are not using the right version of the contracts (and with it, it's ethereum address).

---

Adding some screenshots:

I tried to trade WETH-DAI and DAI-WETH.
The trade happened in the contract

https://rinkeby.etherscan.io/tx/0xd90710f1ba733ae2a21a55ad25b483ebd6394217d0c5459f838443177ea1be3c

But the UI shows them as expired:

Do not include fee in the signed "sell amount"

"From" deducts fee in estimate but not in signed order

Assume the following order and a fee endpoint returinng a hardcoded 1 wxDAI:

The amount in To (estimated) is computed as if we were selling 1 wxDAI (From - fee). However the order that gets eventually signed and sent to the backend is for selling 2 wxDAI AND 1 wxDAI fee on top.

Given the current UX (which is under discussion in ) it should only be signed for a sell amount of 1 wxDAI. Otherwise the smart contract will take up 3 wxDAI from the User's balance and the user is signing a limit price that is way too pessimistic.

Cf this settlement where the fee was 0.1 wxDAI (and I typed in 2 in the From field): https://blockscout.com/poa/xdai/tx/0xd2a58cec3c5ea3a9a6780699a260d42021e49290f3a96e2b260c6874b138e34e/token-transfers

Implement cancelation of orders

Part of https://github.com/gnosis/gp-ui/issues/55

Add support for cancelation of orders

Hard/Soft/both cancelation?

Hard => SC
Soft => API

Workflow:

• close/trash/💣/ icon on pending meta-tx
• Popup with confirmation: Soft / Hard cancelation
  title: Cancel order
  content: make proposal explainning that one is free, one u pay, one u trust the operator, one u don't. Non of them gives u arantees of cancelation.
• Soft: DELETE "/orders/" call to the API
• Hard: Send tx to SC.

EDIT: Probably is best to start with soft cancelations. TBD how we authenticate the user. There must be some kind of authentication (include a signature in the deletion headers or sth)

Discussion:
https://gnosisinc.slack.com/archives/CPZA1AGKY/p1613139211144100

Specs:
It would be good to add the specs too
https://docs.google.com/document/d/1ko1oDAECz3Oy1g0MxdrBzEuUsMhKcRHr8mMH-yTCzfs/edit

Related:

• Effective balance and Effective Orders: #151
• Backend: Handle multiple orders for same user: https://github.com/gnosis/gp-v2-services#309

[Uni-v3.2.3] Blocked addresses

#160 introduced a feature, to prevent "Specially Designated Nationals and Blocked Persons Ethereum addresses" from using the site

<Blocklist />

Consult with legal, and see if this is useful.
Basically, allows you to prevent an user from using the UI if it's in your BLOCKED_ADDRESSES

[Uni-v3.2.3] Test service worker

Review service worker functionality brought in #160

Trade confirmation modal: Improve the message

Change this text: Input is estimated. You will sell at most 0.669872 ETH or the transaction will revert.

Our tx don't REVERT. They EXPIRE.

Input is estimated. You will sell at most 0.669872 ETH or the transaction will expire in XXXX min

Same for these other tooltips:

We shouldn't use the REVERT word.

Intercept transaction signature

Intercept transaction signature (mock it, we can provide implementation later)

Release stable swap

Address the open issues and close version in staging.

Version 1:

• Undefined PR review: @alfetopito @anxolin

Version 2: Try to have a version for the challenge

• List for xDAI
• Stability issue @W3stside

Version 3:

• Fee calculation?

Tokens by network

xDAI, Rinkeby, Mainnet have different tokens

If we want it to be really a multi-network app, we should allow to:

• Remember your selection for each network
• Have different lists depending on the network

It would be nice also to create our own list, specially for Rinkeby and xDAI

Explorer: Show pending transaction links

Now we can include the link for the pending transactions too (and for the old ones in recent activity)

Also, it would be good to review all the labels and not says etherscan always, just write a more generic message or be specific: GP Explorer / Blockscout / Etherscan

Kind of related to #147 and #139. This issue is for the pending things to adapt

[nice to have] Load open orders

The swap UI keeps track of the open orders, and notify when they are executed.

The open orders and recent orders are saved in the local storage.This implies that they won't be seen in a different browser.
One improvement could be to use the API to load the orders. This would allow a better UX and multi-browser experience

Ideally we would leverage what we have. It's nice to show the orders persisted in the browsers in case the API fails, or while the API is giving us the open/recent orders.

[specs] Mockups Swap UI

Part of https://github.com/gnosis/gp-ui/issues/55

• Functional mockup
• Internal/External feedback
• Are we in possition to design

Intercept approve calls

Approve a different contract (not Uniswap)

Intercept approve call, use another contract (OBA is not deployed, so we can use a mock)

[e2e] Race conditions: 🐎 Cancelations, and Fullfillment

[good to have]
End to End test for #165
To make it reproducible we can fake the REDUX triggered action (easier than faking the eth event)

Some other e2e already do this.

Handle issues with native ETH/xDAI

The issue is that for ETH it's requesting:

• https://protocol-xdai.dev.gnosisdev.com/api/v1/tokens/ETH/fee

in xDAI, it also request for ETH.
My understanding is that we should use the "special address"

This task would be:

• Handle ETH correctly for getting the fee for ETH
• Make sure in xDAI we also handle it correctly. Verify with backend https://gnosisinc.slack.com/archives/CPZA1AGKY/p1611740985044600
• Make sure the address is right when we sign the order (we use the special address). This should be already the case, but just in case. We use the special address when buying ETH
• Verify the same for xDAI ☝️. We use the special address when buying xDAI

Do not make unnecesary requests

We still have some hooks that make requests we don't need.
We should cleanup unnecesary logic, like the claiming logic.

example:

• Requested URL: https://gentle-frost-9e74.uniswap.workers.dev/100/0x424a46612794dbb8000194937834250Dc723fFa5
• https://github.com/gnosis/gp-swap-ui/blob/a25a95173927f30ee79e349886f3c49f330c8c18/src/state/claim/hooks.ts#L32

Create theme for dex-swap

Apply a new theme

Integrate front-end design into dex-uniswap (possibly incl. light mode)

Load token lists depending on the networks

https://github.com/gnosis/gp-v2-swap/pull/90/files?file-filters%5B%5D=.lock&file-filters%5B%5D=.ts&file-filters%5B%5D=.tsx#diff-9171c25f7ba5b4a7abeabffcf35c611b5f8c80e509a5f5ee7f13853e732f3341R4

Can't add a token by address if you are not connected

Maybe it could be argued is not an error (if we use the wallet to fetch the token info), but if that's the case, minimum we can show a message showing that you need to connect in order to add a token.

Cancelation of orders

Support for cancelation of orders

https://gnosisinc.slack.com/archives/CPZA1AGKY/p1613139211144100

It would be good to add the specs too https://docs.google.com/document/d/1ko1oDAECz3Oy1g0MxdrBzEuUsMhKcRHr8mMH-yTCzfs/edit

[Uni-v3.2.3] Review analytics

Uniswap uses google analytics. Also they were trying cloudflare one.
Add our own codes, at least for our development addresses? Review with legal

<script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "a141524a42594f028627f6004b23ff75"}'></script>

Intercept estimation tokens

Intercept estimation tokens
deduct a tip (hardcoded from a mock function --> get tip)

[e2e] Implement fee expiration using Cypress tick

From commented in PR: #119 (comment)

https://docs.cypress.io/api/commands/tick.html#Syntax

Also Re-fetched when it expires would be good to attempt to write in a more concise way

Broken integration tests

Right now a few integration test are broken:
See TODO in .github/workflows/tests.yml and this build https://github.com/gnosis/gp-swap-ui/pull/101/checks?check_run_id=1743869558#step:9:300

Easy to reproduce (visually) if you :

yarn build
yarn serve
yarn cypress

A browser will open, so we can visually see the failing test and why they’ve fail.

Fee and Price consideration discusions

There's no consensus in how to display the amounts, prices and fees.

There's several open questions we are reviewing.
This discussions are mainly in https://docs.google.com/document/d/1Vk9XcY2J33JIcyNaoRDh8YdQzjqt4kqhxRU9OrTmgzo/edit

xDAI support

Add xDAI support

Screen turns white: problem handling errors

It happens in current version of DEV:
https://gp-swap.dev.gnosisdev.com

Judging from the logs it may have to with getting the fee

I would say there's 2 issues:

• Error: maybe it is related to the endpoint using ETH instead of a token
• How we handle the error: No error should leave the UI in that state

How to reproduce

1. Go to https://gp-swap.dev.gnosisdev.com
2. Select xDAI-STAKE
3. input amount

Recent Activity shows wrong price

It's showing my trade executed for 1.89 STAKE received

In reality I got 1.90:

https://blockscout.com/poa/xdai/tx/0x97e136466533fd161999188ee8615ea14577307785e41e0bad481f728c01e0a4/token-transfers

Race conditions: 🐎 Cancelations, and Fullfillment

As you see in the image, my trade got both EXPIRED and FULFILLED.

This is obviously an error. The cancelation toast should have a small delay, giving chance to the potential fulfillment to arrive.

Fullfillement is dependent on events, that can have some latencies. Also, blocks are not EXACTLY mined at the time they claim. So it would be wise to give some time extra for the the fulfillment to arrive.

TIMELINE (now):

• 1. Send order
• 2. Filled but the event hasn't arrived yet
• 3. Expiration kicks in ---> we show toast of EXPIRED
• 4. [5 sec later] Receive event of "Filled" ---> we show toast of FILLED

TIMELINE (proposal):

• 1. Send order
• 2. Filled but the event hasn't arrived yet
• 3. Expiration kicks in ---> Delay (20s) and then check order if still exipred ---> we show toast of EXPIRED
• 4. [5 sec later] Receive event of "Filled" ---> we show toast of FILLED

QA Testing notes

• Verify we don't get notifications twice for trades
• We can try to reduce the expiration to 1min trying to reproduce this issue
  Testing URL https://pr269--gpswapui.review.gnosisdev.com/

[specs] Specs for the first wireframes of Swap UI

• Required API
• Add specification to implement #132

Tip: what to show to user on UI

TODO: GDoc for proposal on what to show on UI to users regarding tip

https://docs.google.com/document/d/16fr3ECgwbUCnza8s4p9TM5BFTa3ojX6CHMQZi-ym80M/edit#

Error in message: Undefined fullfilled

Show the fee

We should show the fee to the user

I would suggest to not overcomplicate this change. We could just replace the "liquidity provider fee" by:

• Protocol Fee
• Gas fee

Also, as a specific case. We should account the case where the user inputs to little tokens, so then after fees, he receives 0, and therefore he cannot trade.

It's good that he cannot trade in that case, but he should be able to understand why. The minimum, is to show the fees, so he get an idea:

• Minimum Received: 0
• Price Impact: XX
• Total fees: 1.000001 WXDAI
  • Protocol Fee: 0.000001 WXDAI
  • Gas Fee: 1 XWXDAI

@biocom what simple way you think we can show the fees. I thought maybe showing the total as "Protocol and Gas fees": 1.000001 WXDAI and the rest as a detail in the tooltip

App is Super sluggish in development

I blame this middleware.

At some point was fixed, but it's back.

I think it has to do with what I tried to do here: #38

[Uni-v3.2.3] Carefully check the new commits

Related to #160

Review code and take notes. Create new issues if needed. Try to test and leverage the new functionalities.

Stability and performance issues

The app is slow, and feels unreliable:

https://docs.google.com/document/d/1wb_ObYu-_3HRP5eRfVbybYwakUv3tJpjj2q_kuRIdQQ/edit

• Interface switches back and forth between "insufficient liquidity" and a price estimation
• In general slow: first load + selecting tokens + approve (Time from typing amount to seeing approve button)

Wallet name is wrong

It says, connected with Coinbase, even when your are connected with Metamask 🤷‍♂️

[Swap] Set Destination Address

Allow to set the destination of the tokens:

NOTE: The functionality was removed in #267 (comment), so we need to revert the commit first. Also, e2e were disabled for this functionality.

• Toggle for setting destination. We discussed that although now is "hidden" in the advances settings, maybe it would be better UX to have a toggle on it's own
• Make sure we provide this information to the signed transactions
• Works with URL: http://gp-swap.dev.gnosisdev.com/#/send?outputCurrency=ETH&recipient=bob.argent.xyz
• Verify it works. Note that we will need to update to the version of the contracts implementing this feature (under development now)
• Re-enable the skipped e2e tests #129

Remove banner for trading in Uniswap v1

remove v1Trade is better blah blah banner

[MVP] Priority 1 Tasks

Priority 1 tasks to complete

Operator and Tips

• Create Operator redux state #31 @Velenir
• Get (mock) TIP for token @W3stside #33 & #35

Price Estimation

• Sell Order: Calculate receiving tokens using the tip @W3stside #33 & #35
• Buy Order: Calculate sold tokens using the tip @W3stside #33 & #35
• Make sure hops are handle properly

Pending Transactions

• Model transactions
• Transactions global state: Pending, settled
• Pending transaction counter
• Notification of transactions
• Create OBA trades
• Handle exception signing a trade
• Handle success signing the trade
• Handle execution of trades

Logic for the counter of pending transaction

Logic for the counter of pending transaction: keeping the state

We should account for both meta-tx and transactions, so we need to override and enhance the state to take this into account

Review: Effective Balance and Effective Orders

Right now, the UI is stateless in the sense, the user can keep sending orders as long as he has a balance

Normally, in exchanges they deduct the balance from the limit orders from the effective balance.
The user would need to cancel orders in

gnosis/gp-v2-services#309

Related:

• Cancelation of orders: #130
• Backend: Handle multiple orders for same user: gnosis/gp-v2-services#309

Use price 0.1% better than Uniswap

Use price 0.1% better than uniswap, so when we apply the fee, then we have the same price.

Price calculation as discussed https://docs.google.com/document/d/16fr3ECgwbUCnza8s4p9TM5BFTa3ojX6CHMQZi-ym80M/edit?disco=AAAALb3dXSg&ts=601c53e0&usp_dm=true

[Uni-v3.2.3] Fix e2e tests

they are broken in #160

[epic] Specs for Swap UI

Some WIP notes in the specs for:

• Swap UI: https://docs.google.com/document/d/1ko1oDAECz3Oy1g0MxdrBzEuUsMhKcRHr8mMH-yTCzfs/edit
• Explorer: https://docs.google.com/document/d/1BPhbOyiTDaIg4BFAxeCgGraAXFp2CMC2A_eprkPLu5s/edit

Warning for orders that are unfillable

(price moved beyond slippage)
AFTER confirmation modal and price changes, maybe show warning in "Pending" order history

Confirmation modal will warn user when price changes before submitting, but once you send that order nothing will warn the user if the price changes after submitting and that it may not fill.

Could add a warning to the "pending" order notification in the toast or in the History Transactions comp

When cancellation is possible users can then leverage that option as to not have failing tx.

[wireframes] Swap UI

Wireframes for the Swap UI:

• Tailor it more to our needs
• Incorporate ideas from other successful UIs: 1inch? matcha? others?
• Validate the ideas, capture feedback

Update uni v3.0.8 to v3.2.3

Handle tasks in #160