Skip to content

Commit

Permalink
feat: add comment to config
Browse files Browse the repository at this point in the history
  • Loading branch information
anxolin committed Nov 7, 2023
1 parent 7b56353 commit 8aae513
Show file tree
Hide file tree
Showing 7 changed files with 104 additions and 40 deletions.
27 changes: 27 additions & 0 deletions apps/widget-configurator/src/app/embedDialog/const.ts
Original file line number Diff line number Diff line change
@@ -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<string, string> = {
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<string, string> = {
provider: 'window.ethereum',
}

export const SANITIZE_PARAMS = {
provider: 'EIP-1271 Provider',
partnerFeeBips: '50',
}

export const REMOVE_PARAMS: (keyof CowSwapWidgetParams)[] = ['env']
Original file line number Diff line number Diff line change
@@ -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')
)
}
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down
Original file line number Diff line number Diff line change
@@ -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: `<eip-1193 provider>`,
partnerFeeBips: '50',
...SANITIZE_PARAMS,
}

return JSON.stringify(sanitizedParams, null, 4).replace(
'"partnerFeeBips',
`// ${PARTNER_FEE_COMMENT}\n "partnerFeeBips`
)
}
Original file line number Diff line number Diff line change
@@ -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('<YOUR_CONTAINER>')
const params: CowSwapWidgetParams = ${paramsSanitized}
// ${COMMENTS_BEFORE_PARAMS}
const params: CowSwapWidgetParams = ${formatParameters(params)}
const updateWidget = cowSwapWidget(container, params)
`
Expand Down
Original file line number Diff line number Diff line change
@@ -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 `
<html lang="en">
<head>
Expand All @@ -15,7 +15,8 @@ export function vanillaNoDepsExample(params: CowSwapWidgetParams): string {
<body style="display: flex; align-items: center; justify-content: center; background-color: #06172e; padding: 10px;">
<div id="app"></div>
<script>
const params = ${paramsSanitized}
// ${COMMENTS_BEFORE_PARAMS}
const params = ${formatParameters(params, 4)}
cowSwapWidget.cowSwapWidget(document.getElementById("app"), params)
</script>
Expand Down
36 changes: 18 additions & 18 deletions libs/widget-lib/docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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<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` | --- | 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<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` | --- | 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

Expand Down

0 comments on commit 8aae513

Please sign in to comment.