Skip to content

Commit

Permalink
chore: flatten tradeAssets
Browse files Browse the repository at this point in the history
  • Loading branch information
@anxolin
anxolin committed Nov 8, 2023
1 parent 99cc80a commit 94fcabb
Show file tree
Hide file tree
Showing 6 changed files with 67 additions and 53 deletions.
8 changes: 3 additions & 5 deletions apps/widget-configurator/src/app/configurator/hooks/useWidgetParamsAndSettings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,18 +31,16 @@ export function useWidgetParamsAndSettings(
} = configuratorState

const params: CowSwapWidgetProps['params'] = {
appCode: '<YOUR_APP_ID>',
appCode: 'CoW Widget: Configurator',
width: '450px',
height: '640px',
provider,
theme,
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',
Expand Down
7 changes: 4 additions & 3 deletions apps/widget-configurator/src/app/embedDialog/const.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,10 @@ export const COMMENTS_BY_PARAM_NAME: Record<string, string> = {
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<string, string> = {
Expand All @@ -21,7 +22,7 @@ export const VALUES_BY_PARAM_NAME: Record<string, string> = {

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

export const REMOVE_PARAMS: (keyof CowSwapWidgetParams)[] = ['env']
31 changes: 17 additions & 14 deletions libs/widget-lib/docs/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,42 +27,44 @@ 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'

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

## Widget updating

Expand Down
31 changes: 18 additions & 13 deletions libs/widget-lib/src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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.
*/
Expand All @@ -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<CowSwapWidgetConfig>
12 changes: 8 additions & 4 deletions libs/widget-lib/src/urlUtils.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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')
})
Expand Down
31 changes: 17 additions & 14 deletions libs/widget-lib/src/urlUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down

0 comments on commit 94fcabb

Please sign in to comment.