Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add comment to config #3345

Merged
merged 3 commits into from
Nov 7, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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,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)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this helps to solve the issue serialising the provider, see description of the PR


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' | 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. |
| `partnerFeeBips` | `string` | --- | Coming soon! Fill [this form](https://cowprotocol.typeform.com/to/rONXaxHV) if you are interested |

## Widget updating

Expand Down
Loading