feat: Introduce partner fee (cowprotocol#3913)

* feat: add partner fee in widget params

* chore: define type for the partner fee

* docs: add partner fee doc

* chore: change BIPS for BPS

* chore: rename fee fields

* chore: use fake address in example

apps/cowswap-frontend/src/legacy/components/TransactionSettings/TransactionSettingsMod.tsx

@@ -4,14 +4,14 @@ import { orderExpirationTimeAnalytics, slippageToleranceAnalytics } from '@cowpr
 import { DEFAULT_DEADLINE_FROM_NOW } from '@cowprotocol/common-const'
 import {
   DEFAULT_SLIPPAGE_BPS,
-  HIGH_ETH_FLOW_SLIPPAGE_BIPS,
+  HIGH_ETH_FLOW_SLIPPAGE_BPS,
   HIGH_SLIPPAGE_BPS,
   LOW_SLIPPAGE_BPS,
   MAX_SLIPPAGE_BPS,
   MIN_SLIPPAGE_BPS,
   MINIMUM_ETH_FLOW_DEADLINE_SECONDS,
   MINIMUM_ETH_FLOW_SLIPPAGE,
-  MINIMUM_ETH_FLOW_SLIPPAGE_BIPS,
+  MINIMUM_ETH_FLOW_SLIPPAGE_BPS,
   MINIMUM_ORDER_VALID_TO_TIME_SECONDS,
 } from '@cowprotocol/common-const'
 import { getWrappedToken } from '@cowprotocol/common-utils'
@@ -129,7 +129,7 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
     setSlippageError(false)
 
     if (value.length === 0) {
-      slippageToleranceAnalytics('Default', isEoaEthFlow ? MINIMUM_ETH_FLOW_SLIPPAGE_BIPS : DEFAULT_SLIPPAGE_BPS)
+      slippageToleranceAnalytics('Default', isEoaEthFlow ? MINIMUM_ETH_FLOW_SLIPPAGE_BPS : DEFAULT_SLIPPAGE_BPS)
       setUserSlippageTolerance(isEoaEthFlow ? MINIMUM_ETH_FLOW_SLIPPAGE : 'auto')
     } else {
       let v = value
@@ -146,10 +146,10 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
 
       if (
         !Number.isInteger(parsed) ||
-        parsed < (isEoaEthFlow ? MINIMUM_ETH_FLOW_SLIPPAGE_BIPS : MIN_SLIPPAGE_BPS) ||
+        parsed < (isEoaEthFlow ? MINIMUM_ETH_FLOW_SLIPPAGE_BPS : MIN_SLIPPAGE_BPS) ||
         parsed > MAX_SLIPPAGE_BPS
       ) {
-        slippageToleranceAnalytics('Default', isEoaEthFlow ? MINIMUM_ETH_FLOW_SLIPPAGE_BIPS : DEFAULT_SLIPPAGE_BPS)
+        slippageToleranceAnalytics('Default', isEoaEthFlow ? MINIMUM_ETH_FLOW_SLIPPAGE_BPS : DEFAULT_SLIPPAGE_BPS)
         setUserSlippageTolerance('auto')
         if (v !== '.') {
           setSlippageError(SlippageError.InvalidInput)
@@ -163,13 +163,11 @@ export default function TransactionSettings({ placeholderSlippage }: Transaction
 
   const tooLow =
     userSlippageTolerance !== 'auto' &&
-    userSlippageTolerance.lessThan(
-      new Percent(isEoaEthFlow ? MINIMUM_ETH_FLOW_SLIPPAGE_BIPS : LOW_SLIPPAGE_BPS, 10_000)
-    )
+    userSlippageTolerance.lessThan(new Percent(isEoaEthFlow ? MINIMUM_ETH_FLOW_SLIPPAGE_BPS : LOW_SLIPPAGE_BPS, 10_000))
   const tooHigh =
     userSlippageTolerance !== 'auto' &&
     userSlippageTolerance.greaterThan(
-      new Percent(isEoaEthFlow ? HIGH_ETH_FLOW_SLIPPAGE_BIPS : HIGH_SLIPPAGE_BPS, 10_000)
+      new Percent(isEoaEthFlow ? HIGH_ETH_FLOW_SLIPPAGE_BPS : HIGH_SLIPPAGE_BPS, 10_000)
     )
 
   function parseCustomDeadline(value: string) {

apps/cowswap-frontend/src/legacy/state/user/reducer.ts

@@ -31,7 +31,7 @@ export interface UserState {
   // hides closed (inactive) positions across the app
   userHideClosedPositions: boolean
 
-  // user defined slippage tolerance in bips, used in all txns
+  // user defined slippage tolerance in bps, used in all txns
   userSlippageTolerance: number | 'auto'
   userSlippageToleranceHasBeenMigratedToAuto: boolean // temporary flag for migration status
 

apps/cowswap-frontend/src/legacy/utils/prices.ts

@@ -30,7 +30,7 @@ export function warningSeverity(priceImpact: Percent | undefined): WarningSeveri
   return 0
 }
 
-// computes the minimum amount out and maximum amount in for a trade given a user specified allowed slippage in bips
+// computes the minimum amount out and maximum amount in for a trade given a user specified allowed slippage in bps
 export function computeSlippageAdjustedAmounts(
   //   trade: Trade | undefined,
   trade: TradeGp | undefined,

apps/cowswap-frontend/src/modules/appData/updater/AppDataInfoUpdater.ts

@@ -14,7 +14,7 @@ import { getAppData } from '../utils/fullAppData'
 export type UseAppDataParams = {
   appCodeWithWidgetMetadata: AppCodeWithWidgetMetadata | null
   chainId: SupportedChainId
-  slippageBips: string
+  slippageBips: number
   orderClass: AppDataOrderClass
   utm: UtmParams | undefined
   hooks?: AppDataHooks

apps/cowswap-frontend/src/modules/appData/updater/AppDataUpdater.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { percentToBips } from '@cowprotocol/common-utils'
+import { percentToBps } from '@cowprotocol/common-utils'
 import { useWalletInfo } from '@cowprotocol/wallet'
 import { Percent } from '@uniswap/sdk-core'
 
@@ -22,7 +22,7 @@ export const AppDataUpdater = React.memo(({ slippage, orderClass }: AppDataUpdat
   const { chainId } = useWalletInfo()
 
   const appCode = useAppCode()
-  const slippageBips = percentToBips(slippage)
+  const slippageBips = percentToBps(slippage)
   const utm = useUtm()
   const hooks = useAppDataHooks()
   const appCodeWithWidgetMetadata = useAppCodeWidgetAware(appCode)

apps/cowswap-frontend/src/modules/appData/utils/buildAppData.ts

@@ -12,7 +12,7 @@ export type BuildAppDataParams = {
   appCode: string
   environment?: string
   chainId: SupportedChainId
-  slippageBips: string
+  slippageBips: number
   orderClass: AppDataOrderClass
   referrerAccount?: string
   utm: UtmParams | undefined

apps/explorer/src/explorer/pages/AppData/config.tsx

@@ -127,7 +127,7 @@ export const uiSchema = {
     quote: {
       slippageBips: {
         'ui:field': 'cField',
-        tooltip: 'Set the slippage in BIPS (e.g. "0.3").',
+        tooltip: 'Set the slippage in BPS (e.g. 50).',
       },
     },
   },

apps/widget-configurator/src/app/embedDialog/const.ts

@@ -14,7 +14,8 @@ export const COMMENTS_BY_PARAM_NAME: Record<string, string> = {
   sell: 'Sell token. Optionally add amount for sell orders',
   buy: 'Buy token. Optionally add amount for buy orders',
   enabledTradeTypes: 'swap, limit and/or advanced',
-  interfaceFeeBips: '0.5% - COMING SOON! Fill the form above if you are interested',
+  partnerFee:
+    'Partner fee, in Basis Points (BPS) and a receiver address - COMING SOON! Fill the form above if you are interested',
 }
 
 export const COMMENTS_BY_PARAM_NAME_TYPESCRIPT: Record<string, string> = {
@@ -29,7 +30,7 @@ export const VALUES_BY_PARAM_NAME: Record<string, string> = {
 export const SANITIZE_PARAMS = {
   appCode: 'My Cool App',
   provider: 'EIP-1271 Provider',
-  interfaceFeeBips: '50',
+  partnerFee: { bps: 30, recipient: 'your-ethereum-account' },
 }
 
 export const REMOVE_PARAMS: (keyof CowSwapWidgetParams)[] = ['env']

libs/common-const/src/common.ts

@@ -89,9 +89,9 @@ export const GP_ORDER_UPDATE_INTERVAL = ms`30s` // 30s
 export const MINIMUM_ORDER_VALID_TO_TIME_SECONDS = 120
 // Minimum deadline for EthFlow orders. Like the default deadline, anything smaller will be replaced by this
 export const MINIMUM_ETH_FLOW_DEADLINE_SECONDS = 600 // 10 minutes in SECONDS
-export const MINIMUM_ETH_FLOW_SLIPPAGE_BIPS = 200 // 2%
-export const MINIMUM_ETH_FLOW_SLIPPAGE = new Percent(MINIMUM_ETH_FLOW_SLIPPAGE_BIPS, 10_000) // 2%
-export const HIGH_ETH_FLOW_SLIPPAGE_BIPS = 1_000 // 10%
+export const MINIMUM_ETH_FLOW_SLIPPAGE_BPS = 200 // 2%
+export const MINIMUM_ETH_FLOW_SLIPPAGE = new Percent(MINIMUM_ETH_FLOW_SLIPPAGE_BPS, 10_000) // 2%
+export const HIGH_ETH_FLOW_SLIPPAGE_BPS = 1_000 // 10%
 
 export const WETH_LOGO_URI =
   'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png'

libs/common-const/src/misc.ts

@@ -22,22 +22,22 @@ export const BIG_INT_SECONDS_IN_WEEK = JSBI.BigInt(60 * 60 * 24 * 7)
 export const BIG_INT_ZERO = JSBI.BigInt(0)
 
 // one basis JSBI.BigInt
-const BIPS_BASE = JSBI.BigInt(10000)
-export const ONE_BIPS = new Percent(JSBI.BigInt(1), BIPS_BASE)
+const BPS_BASE = JSBI.BigInt(10000)
+export const ONE_BPS = new Percent(JSBI.BigInt(1), BPS_BASE)
 
 // used for warning states
-export const ALLOWED_PRICE_IMPACT_LOW: Percent = new Percent(JSBI.BigInt(100), BIPS_BASE) // 1%
-export const ALLOWED_PRICE_IMPACT_MEDIUM: Percent = new Percent(JSBI.BigInt(300), BIPS_BASE) // 3%
-export const ALLOWED_PRICE_IMPACT_HIGH: Percent = new Percent(JSBI.BigInt(500), BIPS_BASE) // 5%
+export const ALLOWED_PRICE_IMPACT_LOW: Percent = new Percent(JSBI.BigInt(100), BPS_BASE) // 1%
+export const ALLOWED_PRICE_IMPACT_MEDIUM: Percent = new Percent(JSBI.BigInt(300), BPS_BASE) // 3%
+export const ALLOWED_PRICE_IMPACT_HIGH: Percent = new Percent(JSBI.BigInt(500), BPS_BASE) // 5%
 // if the price slippage exceeds this number, force the user to type 'confirm' to execute
-export const PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN: Percent = new Percent(JSBI.BigInt(1000), BIPS_BASE) // 10%
+export const PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN: Percent = new Percent(JSBI.BigInt(1000), BPS_BASE) // 10%
 // for non expert mode disable swaps above this
-export const BLOCKED_PRICE_IMPACT_NON_EXPERT: Percent = new Percent(JSBI.BigInt(1500), BIPS_BASE) // 15%
+export const BLOCKED_PRICE_IMPACT_NON_EXPERT: Percent = new Percent(JSBI.BigInt(1500), BPS_BASE) // 15%
 
-export const BETTER_TRADE_LESS_HOPS_THRESHOLD = new Percent(JSBI.BigInt(50), BIPS_BASE)
+export const BETTER_TRADE_LESS_HOPS_THRESHOLD = new Percent(JSBI.BigInt(50), BPS_BASE)
 
 export const ZERO_PERCENT = new Percent('0')
-export const TWO_PERCENT = new Percent(JSBI.BigInt(200), BIPS_BASE)
+export const TWO_PERCENT = new Percent(JSBI.BigInt(200), BPS_BASE)
 export const ONE_HUNDRED_PERCENT = new Percent('1')
 
 export const IS_SIDE_BANNER_VISIBLE_KEY = 'IS_SIDEBAR_BANNER_VISIBLE'

libs/common-utils/src/misc.ts

@@ -172,9 +172,9 @@ export function isRejectRequestProviderError(error: any) {
 }
 
 /**
- * Helper function that transforms a Percent instance into the correspondent BIPS value as a string
+ * Helper function that transforms a Percent instance into the correspondent BPS value as a string
  * @param percent
  */
-export function percentToBips(percent: Percent): string {
-  return percent.multiply('100').toSignificant()
+export function percentToBps(percent: Percent): number {
+  return Number(percent.multiply('100').toSignificant())
 }

libs/widget-lib/docs/README.md

@@ -47,19 +47,19 @@ The key must be a UTF8 string of up to `50 chars`.
 It will be a part of orders meta-data, see more in
 the [CoW Protocol Tutorial](https://learn.cow.fi/tutorial/simple-app-data).
 
-## Interface fee
+## Partner fee
 
 > **Coming soon! Fill [this form](https://cowprotocol.typeform.com/to/rONXaxHV) if you are interested**
 
-You can add a additional trading fee that will be displayed and applied to the quoted amounts:
+You can add an additional fee that will be displayed and applied to the quoted amounts:
 
 ```typescript
 import { cowSwapWidget, CowSwapWidgetParams } from '@cowprotocol/widget-lib'
 
 const widgetContainer = document.getElementById('cowswap-widget')
 
 const params: CowSwapWidgetParams = {
-  interfaceFeeBips: '50', // 0.5%
+  partnerFee: { bps: 30, recipient: '0x86e367465e2b7e8d26f4611d998bcbbe28e89679' }, // 0.3%
 }
 
 cowSwapWidget(widgetContainer, params)
@@ -105,24 +105,24 @@ cowSwapWidget(document.getElementById('cowswap-widget'), {
 
 > All params except `appCode` are optional:
 
-| Parameter             | Type                   | Default              | Description                                                                                                                                                                                    |
-| --------------------- | ---------------------- | -------------------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `appCode`             | `string`               | No default. Required | Name of your app (max 50 characters, e.g. "My Cool App"). Fill [this form](https://cowprotocol.typeform.com/to/rONXaxHV) after you pick yours                                                  |
-| `width`               | `string`               | 450px                | Width in pixels (or 100% to use all available space).                                                                                                                                          |
-| `height`              | `string`               | 640px                | Height of the widget in css values (px, vh, etc.).                                                                                                                                             |
-| `provider`            | `EthereumProvider`     | ---                  | Ethereum EIP-1193 provider to connect to the wallet. For a quick test, you can pass `window.ethereum`. You also might like to use https://web3modal.com                                        |
-| `chainId`             | `number`               | 1                    | The blockchain ID on which the trade will take place. Currently supported: 1 (Mainnet), 100 (Gnosis chain), 11155111 (Sepolia)                                                                 |
-| `tradeType`           | `TradeType`            | 'swap'               | The type of trade. Can be `swap` or `limit` or `advanced`.                                                                                                                                     |
-| `env`                 | `CowSwapWidgetEnv`     | 'prod'               | The environment of the widget (`local` , `prod` , `dev` , `pr`). See [`COWSWAP_URLS`](https://github.com/cowprotocol/cowswap/blob/develop/libs/widget-lib/src/consts.ts) const value for urls. |
-| `sell`                | `TradeAsset`           | undefined            | Sell token and optionally the sell order amount. Example: `{ asset: 'WBTC', amount: 12 }` or `{ asset: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48' }`                                         |
-| `buy`                 | `TradeAsset`           | undefined            | Buy token and optionally the buy order amount. Example: `{ asset: 'WBTC', amount: 12 }` or `{ asset: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48' }`                                           |
-| `theme`               | `CowSwapTheme`         | 'light'              | Theme of the widget (`'dark'` for dark theme or `'light'` for light theme).                                                                                                                    |
-| `logoUrl`             | `string`               | ---                  | Sets a custom logo for the widget.                                                                                                                                                             |
-| `hideLogo`            | `boolean`              | false                | Hides the logo in the widget.                                                                                                                                                                  |
-| `hideNetworkSelector` | `boolean`              | false                | Disables an opportunity to change the network from the widget UI.                                                                                                                              |
-| `enabledTradeTypes`   | `Array<TradeType>`     | All are enabled      | CoW Swap provides three trading widgets: `swap`, `limit` and `advanced` orders. Using this option you can narrow down the list of available trading widgets.                                   |
-| `palette`             | `CowSwapWidgetPalette` | ---                  | Customizes the appearance of the widget. For example, you can change the main color of the background and text.                                                                                |
-| `interfaceFeeBips`    | `string`               | ---                  | Coming soon! Fill [this form](https://cowprotocol.typeform.com/to/rONXaxHV) if you are interested                                                                                              |
+| Parameter             | Type                   | Default              | Description                                                                                                                                                                                        |
+| --------------------- | ---------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `appCode`             | `string`               | No default. Required | Name of your app (max 50 characters, e.g. "My Cool App"). Fill [this form](https://cowprotocol.typeform.com/to/rONXaxHV) after you pick yours                                                      |
+| `width`               | `string`               | 450px                | Width in pixels (or 100% to use all available space).                                                                                                                                              |
+| `height`              | `string`               | 640px                | Height of the widget in css values (px, vh, etc.).                                                                                                                                                 |
+| `provider`            | `EthereumProvider`     | ---                  | Ethereum EIP-1193 provider to connect to the wallet. For a quick test, you can pass `window.ethereum`. You also might like to use https://web3modal.com                                            |
+| `chainId`             | `number`               | 1                    | The blockchain ID on which the trade will take place. Currently supported: 1 (Mainnet), 100 (Gnosis chain), 11155111 (Sepolia)                                                                     |
+| `tradeType`           | `TradeType`            | 'swap'               | The type of trade. Can be `swap` or `limit` or `advanced`.                                                                                                                                         |
+| `env`                 | `CowSwapWidgetEnv`     | 'prod'               | The environment of the widget (`local` , `prod` , `dev` , `pr`). See [`COWSWAP_URLS`](https://github.com/cowprotocol/cowswap/blob/develop/libs/widget-lib/src/consts.ts) const value for urls.     |
+| `sell`                | `TradeAsset`           | undefined            | Sell token and optionally the sell order amount. Example: `{ asset: 'WBTC', amount: 12 }` or `{ asset: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48' }`                                             |
+| `buy`                 | `TradeAsset`           | undefined            | Buy token and optionally the buy order amount. Example: `{ asset: 'WBTC', amount: 12 }` or `{ asset: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48' }`                                               |
+| `theme`               | `CowSwapTheme`         | 'light'              | Theme of the widget (`'dark'` for dark theme or `'light'` for light theme).                                                                                                                        |
+| `logoUrl`             | `string`               | ---                  | Sets a custom logo for the widget.                                                                                                                                                                 |
+| `hideLogo`            | `boolean`              | false                | Hides the logo in the widget.                                                                                                                                                                      |
+| `hideNetworkSelector` | `boolean`              | false                | Disables an opportunity to change the network from the widget UI.                                                                                                                                  |
+| `enabledTradeTypes`   | `Array<TradeType>`     | All are enabled      | CoW Swap provides three trading widgets: `swap`, `limit` and `advanced` orders. Using this option you can narrow down the list of available trading widgets.                                       |
+| `palette`             | `CowSwapWidgetPalette` | ---                  | Customizes the appearance of the widget. For example, you can change the main color of the background and text.                                                                                    |
+| `partnerFee`          | `PartnerFee`           | ---                  | The partner fee. Example `{ bps: 30, recipient: '0x86e367465e2b7e8d26f4611d998bcbbe28e89679' }`. Coming soon! Fill [this form](https://cowprotocol.typeform.com/to/rONXaxHV) if you are interested |
 
 ## Widget updating