diff --git a/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts b/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts index 530e9499f2..e4d4dd0624 100644 --- a/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts +++ b/apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts @@ -31,7 +31,7 @@ export function useWidgetParamsAndSettings( } = configuratorState const params: CowSwapWidgetProps['params'] = { - appCode: '', + appCode: 'CoW Widget: Configurator', width: '450px', height: '640px', provider, @@ -39,10 +39,8 @@ export function useWidgetParamsAndSettings( chainId, env: getEnv(), tradeType: currentTradeType, - tradeAssets: { - sell: { asset: sellToken, amount: sellTokenAmount ? sellTokenAmount.toString() : undefined }, - buy: { asset: buyToken, amount: buyTokenAmount?.toString() }, - }, + sell: { asset: sellToken, amount: sellTokenAmount ? sellTokenAmount.toString() : undefined }, + buy: { asset: buyToken, amount: buyTokenAmount?.toString() }, enabledTradeTypes, // palette: { // primaryColor: '#d9258e', diff --git a/apps/widget-configurator/src/app/embedDialog/const.ts b/apps/widget-configurator/src/app/embedDialog/const.ts index a880a69e44..c66a189cf2 100644 --- a/apps/widget-configurator/src/app/embedDialog/const.ts +++ b/apps/widget-configurator/src/app/embedDialog/const.ts @@ -10,9 +10,10 @@ export const COMMENTS_BY_PARAM_NAME: Record = { chainId: '1 (Mainnet), 5 (Goerli), 100 (Gnosis)', theme: 'light or dark', tradeType: 'swap, limit or advanced', - tradeAssets: 'Selected assets and amounts (e.g. COW-USDC)', + sell: 'Sell token. Optionally add amount for sell orders', + buy: 'Buy token. Optionally add amount for buy orders', enabledTradeTypes: 'swap, limit and/or advanced', - partnerFeeBips: 'Fill the form above if you are interested', + interfaceFeeBips: 'Fill the form above if you are interested', } export const VALUES_BY_PARAM_NAME: Record = { @@ -21,7 +22,7 @@ export const VALUES_BY_PARAM_NAME: Record = { export const SANITIZE_PARAMS = { provider: 'EIP-1271 Provider', - partnerFeeBips: '50', + interfaceFeeBips: '50', } export const REMOVE_PARAMS: (keyof CowSwapWidgetParams)[] = ['env'] diff --git a/libs/widget-lib/docs/README.md b/libs/widget-lib/docs/README.md index ad18b54470..d20a4313a7 100644 --- a/libs/widget-lib/docs/README.md +++ b/libs/widget-lib/docs/README.md @@ -27,27 +27,31 @@ import { cowSwapWidget, CowSwapWidgetParams } from '@cowprotocol/widget-lib' const widgetContainer = document.getElementById('cowswap-widget') const params: CowSwapWidgetParams = { - appCode: 'YOUR_APP_ID', - width: 600, + appCode: 'YOUR_APP_ID', // Name of your app (max 50 characters, e.g. "Pig Swap") + width: 600, // Width in pixels (or 100% to use all available space) height: 640, - sell: { asset: 'DAI' }, - buy: { asset: 'USDC', amount: '0.1' }, + sell: { asset: 'DAI' }, // Sell token. Optionally add amount for sell orders + buy: { asset: 'USDC', amount: '0.1' }, // Buy token. Optionally add amount for buy orders } cowSwapWidget(widgetContainer, params) ``` -## App key +## App Code You must specify the `appCode` parameter when initializing the widget. This parameter is used to identify the source of -orders. -The key must be a UTF8 string of up to 50 chars. +orders. + +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 Docs](https://docs.cow.fi/front-end/creating-app-ids/create-the-order-meta-data-file/appcode). -## Partner fee +## Interface fee -If your business model involves charging a fee for trading, you can easily do this by adding just one parameter: +> **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: ```typescript import { cowSwapWidget, CowSwapWidgetParams } from '@cowprotocol/widget-lib' @@ -55,14 +59,12 @@ import { cowSwapWidget, CowSwapWidgetParams } from '@cowprotocol/widget-lib' const widgetContainer = document.getElementById('cowswap-widget') const params: CowSwapWidgetParams = { - partnerFeeBips: '50', // 0.5% + interfaceFeeBips: '50', // 0.5% } cowSwapWidget(widgetContainer, params) ``` -> **Coming soon! Fill [this form](https://cowprotocol.typeform.com/to/rONXaxHV) if you are interested** - ## Wallet provider You can pass the wallet provider from your application to seamlessly use the widget as part of your application. @@ -112,14 +114,15 @@ cowSwapWidget(document.getElementById('cowswap-widget'), { | `chainId` | `number` | 1 | The blockchain ID on which the trade will take place. Currently supported: 1 (Mainnet), 5 (Goerli), 100 (Gnosis chain) | | `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. | -| `tradeAssets` | `TradeAssets` | Same as in swap.cow.fi | An object containing information about the selling and buying assets. Example: `{ asset: 'WBTC', amount: 12 }` or `{ asset: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48' }` | +| `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` | 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. | -| `partnerFeeBips` | `string` | --- | Coming soon! Fill [this form](https://cowprotocol.typeform.com/to/rONXaxHV) if you are interested | +| `interfaceFeeBips` | `string` | --- | Coming soon! Fill [this form](https://cowprotocol.typeform.com/to/rONXaxHV) if you are interested | ## Widget updating diff --git a/libs/widget-lib/src/types.ts b/libs/widget-lib/src/types.ts index ddd001e5d6..69a99aa2e0 100644 --- a/libs/widget-lib/src/types.ts +++ b/libs/widget-lib/src/types.ts @@ -49,14 +49,6 @@ interface TradeAsset { amount?: string } -/** - * A pair of assets to trade. - */ -export interface TradeAssets { - sell: TradeAsset - buy: TradeAsset -} - export enum TradeType { SWAP = 'swap', LIMIT = 'limit', @@ -105,10 +97,17 @@ interface CowSwapWidgetConfig { * The environment of the widget. Default: prod */ env: CowSwapWidgetEnv + + /** + * Sell token, and optionally the amount. + */ + sell: TradeAsset + /** - * The assets to trade. + * Buy token, and optionally the amount. */ - tradeAssets: TradeAssets + buy: TradeAsset + /** * The theme of the widget UI. */ @@ -118,28 +117,34 @@ interface CowSwapWidgetConfig { * Allows to set a custom logo for the widget. */ logoUrl: string + /** * Option to hide the logo in the widget. */ hideLogo: boolean + /** * Option to hide the network selector in the widget. */ hideNetworkSelector: boolean + /** * Enables the ability to switch between trade types in the widget. */ enabledTradeTypes: TradeType[] + /** * Colors palette to customize the widget UI. */ palette: CowSwapWidgetPalette + /** - * The partner fee in basis points. + * The interface fee in basis points. * For example: 1.5% = 150 bips - * Please contact https://cowprotocol.typeform.com/to/rONXaxHV to enable your partner fee. + * + * Please contact https://cowprotocol.typeform.com/to/rONXaxHV */ - partnerFeeBips: string + interfaceFeeBips: string } export type CowSwapWidgetParams = Partial diff --git a/libs/widget-lib/src/urlUtils.spec.ts b/libs/widget-lib/src/urlUtils.spec.ts index 5e3d6fc425..844cb377ba 100644 --- a/libs/widget-lib/src/urlUtils.spec.ts +++ b/libs/widget-lib/src/urlUtils.spec.ts @@ -42,7 +42,8 @@ describe('buildWidgetUrl', () => { describe('trade assets', () => { it('without amounts', () => { const url = buildWidgetUrl({ - tradeAssets: { sell: { asset: 'WETH' }, buy: { asset: 'COW' } }, + sell: { asset: 'WETH' }, + buy: { asset: 'COW' }, chainId, tradeType, env: defaultEnv, @@ -52,7 +53,8 @@ describe('buildWidgetUrl', () => { it('with sell amount', () => { const url = buildWidgetUrl({ - tradeAssets: { sell: { asset: 'DAI', amount: '0.1' }, buy: { asset: 'USDC' } }, + sell: { asset: 'DAI', amount: '0.1' }, + buy: { asset: 'USDC' }, chainId, tradeType, env: defaultEnv, @@ -62,7 +64,8 @@ describe('buildWidgetUrl', () => { it('with buy amount', () => { const url = buildWidgetUrl({ - tradeAssets: { sell: { asset: 'DAI' }, buy: { asset: 'USDC', amount: '0.1' } }, + sell: { asset: 'DAI' }, + buy: { asset: 'USDC', amount: '0.1' }, chainId, tradeType, env: defaultEnv, @@ -78,7 +81,8 @@ describe('buildWidgetUrl', () => { chainId: 100, tradeType, theme: 'light', - tradeAssets: { sell: { asset: 'DAI', amount: '0.1' }, buy: { asset: 'USDC', amount: '0.1' } }, + sell: { asset: 'DAI', amount: '0.1' }, + buy: { asset: 'USDC', amount: '0.1' }, }) expect(url).toEqual('https://swap.cow.fi/#/100/widget/swap/DAI/USDC?sellAmount=0.1&buyAmount=0.1&theme=light') }) diff --git a/libs/widget-lib/src/urlUtils.ts b/libs/widget-lib/src/urlUtils.ts index 9669910eac..15a320e684 100644 --- a/libs/widget-lib/src/urlUtils.ts +++ b/libs/widget-lib/src/urlUtils.ts @@ -10,29 +10,32 @@ export function buildWidgetUrl(params: CowSwapWidgetParams): string { } export function buildWidgetPath(params: CowSwapWidgetParams): string { - const { chainId = 1, tradeAssets, tradeType = TradeType.SWAP } = params + const { chainId = 1, sell, buy, tradeType = TradeType.SWAP } = params - const assetsPath = tradeAssets - ? [tradeAssets.sell.asset, tradeAssets.buy.asset].map(encodeURIComponent).join('/') - : '' + const assets = [] + if (sell?.asset) { + assets.push(sell.asset) + } + + if (buy?.asset) { + assets.push(buy.asset) + } + + const assetsPath = assets.map(encodeURIComponent).join('/') return `/${chainId}/widget/${tradeType}/${assetsPath}` } export function buildTradeAmountsQuery(params: CowSwapWidgetParams): URLSearchParams { - const { tradeAssets, theme } = params + const { sell, buy, theme } = params const query = new URLSearchParams() - if (tradeAssets) { - const { sell, buy } = tradeAssets - - if (sell.amount) { - query.append('sellAmount', sell.amount) - } + if (sell?.amount) { + query.append('sellAmount', sell.amount) + } - if (buy.amount) { - query.append('buyAmount', buy.amount) - } + if (buy?.amount) { + query.append('buyAmount', buy.amount) } if (theme) {