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..3145602f4b --- /dev/null +++ b/apps/widget-configurator/src/app/embedDialog/utils/formatParameters.ts @@ -0,0 +1,38 @@ +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) + + // 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..f4227198dc 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' | 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 | ## Widget updating