From 8aae5130206e1d63f35001d24fd9d3b859740732 Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Tue, 7 Nov 2023 11:16:53 +0000 Subject: [PATCH 1/3] feat: add comment to config --- .../src/app/embedDialog/const.ts | 27 +++++++++++++ .../app/embedDialog/utils/formatParameters.ts | 40 +++++++++++++++++++ .../src/app/embedDialog/utils/reactExample.ts | 9 +++-- .../embedDialog/utils/sanitizeParameters.ts | 14 ++----- .../app/embedDialog/utils/vanilaNpmExample.ts | 9 +++-- .../embedDialog/utils/vanillaNoDepsExample.ts | 9 +++-- libs/widget-lib/docs/README.md | 36 ++++++++--------- 7 files changed, 104 insertions(+), 40 deletions(-) create mode 100644 apps/widget-configurator/src/app/embedDialog/const.ts create mode 100644 apps/widget-configurator/src/app/embedDialog/utils/formatParameters.ts diff --git a/apps/widget-configurator/src/app/embedDialog/const.ts b/apps/widget-configurator/src/app/embedDialog/const.ts new file mode 100644 index 0000000000..3a11c92eab --- /dev/null +++ b/apps/widget-configurator/src/app/embedDialog/const.ts @@ -0,0 +1,27 @@ +import { CowSwapWidgetParams } from '@cowprotocol/widget-lib' + +export const COMMENTS_BEFORE_PARAMS = ` Fill this form https://cowprotocol.typeform.com/to/rONXaxHV once you pick your "appKey"` + +export const COMMENTS_BY_PARAM_NAME: Record = { + appKey: 'Name of your app (max 50 characters, e.g. "Pig Swap")', + width: 'Width in pixels (or 100% to use all available space)', + provider: + 'Ethereum EIP-1193 provider. For a quick test, you can pass `window.ethereum`, but consider using something like https://web3modal.com', + 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)', + enabledTradeTypes: 'swap, limit and/or advanced', + partnerFeeBips: 'Fill the form above if you are interested', +} + +export const VALUES_BY_PARAM_NAME: Record = { + provider: 'window.ethereum', +} + +export const SANITIZE_PARAMS = { + provider: 'EIP-1271 Provider', + partnerFeeBips: '50', +} + +export const REMOVE_PARAMS: (keyof CowSwapWidgetParams)[] = ['env'] diff --git a/apps/widget-configurator/src/app/embedDialog/utils/formatParameters.ts b/apps/widget-configurator/src/app/embedDialog/utils/formatParameters.ts new file mode 100644 index 0000000000..54655917af --- /dev/null +++ b/apps/widget-configurator/src/app/embedDialog/utils/formatParameters.ts @@ -0,0 +1,40 @@ +import { CowSwapWidgetParams } from '@cowprotocol/widget-lib' + +import { sanitizeParameters } from './sanitizeParameters' + +import { COMMENTS_BY_PARAM_NAME, REMOVE_PARAMS, VALUES_BY_PARAM_NAME } from '../const' + +export function formatParameters(params: CowSwapWidgetParams, padLeft = 0): string { + const paramsSanitized = sanitizeParameters(params) + REMOVE_PARAMS.forEach((propName) => { + delete paramsSanitized[propName] + }) + const formattedParams = JSON.stringify(paramsSanitized, null, 4) + + // const formattedParams = JSON.stringify(sanitizeParameters(params), null, 4) + + // Add comments + const resultWithComments = Object.keys(COMMENTS_BY_PARAM_NAME).reduce((acc, propName) => { + return acc.replace(new RegExp(`"${propName}".*$`, 'gm'), `$& // ${COMMENTS_BY_PARAM_NAME[propName]}`) + }, formattedParams) + + // Add values + const resultWithValues = Object.keys(VALUES_BY_PARAM_NAME).reduce((acc, propName) => { + return acc.replace(new RegExp(`("${propName}".* )(".*")(.*)$`, 'gm'), `$1${VALUES_BY_PARAM_NAME[propName]}$3`) + }, resultWithComments) + + if (padLeft === 0) { + return resultWithValues + } + + // Add indentation + const lines = resultWithValues.split('\n') + return ( + lines[0] + + '\n' + + lines + .slice(1) + .map((line) => `${' '.repeat(padLeft)}${line}`) + .join('\n') + ) +} diff --git a/apps/widget-configurator/src/app/embedDialog/utils/reactExample.ts b/apps/widget-configurator/src/app/embedDialog/utils/reactExample.ts index 1fe3019724..302857e841 100644 --- a/apps/widget-configurator/src/app/embedDialog/utils/reactExample.ts +++ b/apps/widget-configurator/src/app/embedDialog/utils/reactExample.ts @@ -1,14 +1,15 @@ import type { CowSwapWidgetParams } from '@cowprotocol/widget-lib' -import { sanitizeParameters } from './sanitizeParameters' +import { formatParameters } from './formatParameters' -export function reactExample(params: CowSwapWidgetParams): string { - const paramsSanitized = sanitizeParameters(params) +import { COMMENTS_BEFORE_PARAMS } from '../const' +export function reactExample(params: CowSwapWidgetParams): string { return ` import { CowSwapWidget } from '@cowprotocol/widget-react' -const params: CowSwapWidgetParams = ${paramsSanitized} +// ${COMMENTS_BEFORE_PARAMS} +const params: CowSwapWidgetParams = ${formatParameters(params)} function App() { return ( diff --git a/apps/widget-configurator/src/app/embedDialog/utils/sanitizeParameters.ts b/apps/widget-configurator/src/app/embedDialog/utils/sanitizeParameters.ts index 8c61e391a9..72c0ba4f7f 100644 --- a/apps/widget-configurator/src/app/embedDialog/utils/sanitizeParameters.ts +++ b/apps/widget-configurator/src/app/embedDialog/utils/sanitizeParameters.ts @@ -1,16 +1,10 @@ import { CowSwapWidgetParams } from '@cowprotocol/widget-lib' -const PARTNER_FEE_COMMENT = 'Please contact https://cowprotocol.typeform.com/to/rONXaxHV to enable your partner fee.' +import { SANITIZE_PARAMS } from '../const' -export function sanitizeParameters(params: CowSwapWidgetParams): string { - const sanitizedParams = { +export function sanitizeParameters(params: CowSwapWidgetParams) { + return { ...params, - provider: ``, - partnerFeeBips: '50', + ...SANITIZE_PARAMS, } - - return JSON.stringify(sanitizedParams, null, 4).replace( - '"partnerFeeBips', - `// ${PARTNER_FEE_COMMENT}\n "partnerFeeBips` - ) } diff --git a/apps/widget-configurator/src/app/embedDialog/utils/vanilaNpmExample.ts b/apps/widget-configurator/src/app/embedDialog/utils/vanilaNpmExample.ts index 7fb339f9b9..a6916dab77 100644 --- a/apps/widget-configurator/src/app/embedDialog/utils/vanilaNpmExample.ts +++ b/apps/widget-configurator/src/app/embedDialog/utils/vanilaNpmExample.ts @@ -1,16 +1,17 @@ import type { CowSwapWidgetParams } from '@cowprotocol/widget-lib' -import { sanitizeParameters } from './sanitizeParameters' +import { formatParameters } from './formatParameters' -export function vanilaNpmExample(params: CowSwapWidgetParams): string { - const paramsSanitized = sanitizeParameters(params) +import { COMMENTS_BEFORE_PARAMS } from '../const' +export function vanilaNpmExample(params: CowSwapWidgetParams): string { return ` import { CowSwapWidgetParams, cowSwapWidget } from '@cowprotocol/widget-lib' const container = document.getElementById('') -const params: CowSwapWidgetParams = ${paramsSanitized} +// ${COMMENTS_BEFORE_PARAMS} +const params: CowSwapWidgetParams = ${formatParameters(params)} const updateWidget = cowSwapWidget(container, params) ` diff --git a/apps/widget-configurator/src/app/embedDialog/utils/vanillaNoDepsExample.ts b/apps/widget-configurator/src/app/embedDialog/utils/vanillaNoDepsExample.ts index ccebec8105..b59999f054 100644 --- a/apps/widget-configurator/src/app/embedDialog/utils/vanillaNoDepsExample.ts +++ b/apps/widget-configurator/src/app/embedDialog/utils/vanillaNoDepsExample.ts @@ -1,10 +1,10 @@ import type { CowSwapWidgetParams } from '@cowprotocol/widget-lib' -import { sanitizeParameters } from './sanitizeParameters' +import { formatParameters } from './formatParameters' -export function vanillaNoDepsExample(params: CowSwapWidgetParams): string { - const paramsSanitized = sanitizeParameters(params) +import { COMMENTS_BEFORE_PARAMS } from '../const' +export function vanillaNoDepsExample(params: CowSwapWidgetParams): string { return ` @@ -15,7 +15,8 @@ export function vanillaNoDepsExample(params: CowSwapWidgetParams): string {
diff --git a/libs/widget-lib/docs/README.md b/libs/widget-lib/docs/README.md index ce0a652173..6c9946b55e 100644 --- a/libs/widget-lib/docs/README.md +++ b/libs/widget-lib/docs/README.md @@ -61,7 +61,7 @@ const params: CowSwapWidgetParams = { cowSwapWidget(widgetContainer, params) ``` -> **Coming soon, please get in touch to sign up to the beta program: https://cowprotocol.typeform.com/to/rONXaxHV** +> **Coming soon! Fill [this form](https://cowprotocol.typeform.com/to/rONXaxHV) if you are interested** ## Wallet provider @@ -103,23 +103,23 @@ cowSwapWidget(document.getElementById('cowswap-widget'), { > All params are optional -| Parameter | Type | Default | Description | -| --------------------- | ---------------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `width` | `string` | 450px | The width of the widget in css values (px, vh, etc.). | -| `height` | `string` | 640px | The height of the widget in css values (px, vh, etc.). | -| `appKey` | `string` | 'DEFAULT_INJECTED_WIDGET' | The unique identifier of the widget consumer. Please fill the for to let us know a little about you: https://cowprotocol.typeform.com/to/rONXaxHV | -| `provider` | `EthereumProvider` | --- | The Ethereum provider to be used for interacting with a wallet. To connect, for example, to Rabby Wallet or Metamask, just set `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), 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' }` | -| `theme` | `CowSwapTheme` | 'light' | The theme of the widget (`'dark'` for dark theme or `'light'` for light theme). | -| `logoUrl` | `string` | --- | Allows to set a custom logo for the widget. | -| `hideLogo` | `boolean` | false | Option to hide 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` | --- | Using the palette you can customize the appearance of the widget. For example, you can change the main color of the background and text. | -| `partnerFeeBips` | `string` | --- | Coming soon! You can enable a fee for all trades in the widget. Please contact https://cowprotocol.typeform.com/to/rONXaxHV to enable your partner fee. | +| Parameter | Type | Default | Description | +| --------------------- | ---------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `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.). | +| `appKey` | `string` | 'DEFAULT_INJECTED_WIDGET' | Name of your app (max 50 characters, e.g. "Pig Swap"). Fill [this form](https://cowprotocol.typeform.com/to/rONXaxHV) after you pick yours | +| `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), 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' }` | +| `theme` | `CowSwapTheme` | 'light' | The theme of the widget (`'dark'` for dark theme or `'light'` for light theme). | +| `logoUrl` | `string` | --- | Allows to set a custom logo for the widget. | +| `hideLogo` | `boolean` | false | Option to hide 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` | --- | Using the palette you can customize 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 | ## Widget updating From 44de9c897fd649b69c831a7fc5721dd2967185d5 Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Tue, 7 Nov 2023 11:30:09 +0000 Subject: [PATCH 2/3] chore: remove dead code --- .../src/app/embedDialog/utils/formatParameters.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/widget-configurator/src/app/embedDialog/utils/formatParameters.ts b/apps/widget-configurator/src/app/embedDialog/utils/formatParameters.ts index 54655917af..3145602f4b 100644 --- a/apps/widget-configurator/src/app/embedDialog/utils/formatParameters.ts +++ b/apps/widget-configurator/src/app/embedDialog/utils/formatParameters.ts @@ -11,8 +11,6 @@ export function formatParameters(params: CowSwapWidgetParams, padLeft = 0): stri }) const formattedParams = JSON.stringify(paramsSanitized, null, 4) - // const formattedParams = JSON.stringify(sanitizeParameters(params), null, 4) - // Add comments const resultWithComments = Object.keys(COMMENTS_BY_PARAM_NAME).reduce((acc, propName) => { return acc.replace(new RegExp(`"${propName}".*$`, 'gm'), `$& // ${COMMENTS_BY_PARAM_NAME[propName]}`) From 534b1f3b5ca736cb6d4eb735fe09296e1c2b7ebd Mon Sep 17 00:00:00 2001 From: Anxo Rodriguez Date: Tue, 7 Nov 2023 11:57:36 +0000 Subject: [PATCH 3/3] chore: improve texts --- libs/widget-lib/docs/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/libs/widget-lib/docs/README.md b/libs/widget-lib/docs/README.md index 6c9946b55e..f4227198dc 100644 --- a/libs/widget-lib/docs/README.md +++ b/libs/widget-lib/docs/README.md @@ -113,12 +113,12 @@ cowSwapWidget(document.getElementById('cowswap-widget'), { | `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' }` | -| `theme` | `CowSwapTheme` | 'light' | The theme of the widget (`'dark'` for dark theme or `'light'` for light theme). | -| `logoUrl` | `string` | --- | Allows to set a custom logo for the widget. | -| `hideLogo` | `boolean` | false | Option to hide the logo in the widget. | +| `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` | --- | Using the palette you can customize the appearance of the widget. For example, you can change the main color of the background and text. | +| `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 | ## Widget updating