Skip to content

Commit

Permalink
Merge pull request #3351 from cowprotocol/release/1.49.0
Browse files Browse the repository at this point in the history
chore: pull changes from 1.49.0 into develop
  • Loading branch information
anxolin authored Nov 7, 2023
2 parents c48e062 + 26631a7 commit 0ded27d
Show file tree
Hide file tree
Showing 11 changed files with 137 additions and 49 deletions.
14 changes: 6 additions & 8 deletions apps/cowswap-frontend-e2e/src/e2e/swapMod.test.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const GNO = '0x02ABBDbAaa7b1BB64B5c878f7ac17f8DDa169532'
const ETH = '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee'

describe('Swap (mod)', () => {
beforeEach(() => {
Expand Down Expand Up @@ -60,11 +61,10 @@ describe('Swap (mod)', () => {
})

it('can find GNO and swap Native for GNO', () => {
cy.get('#output-currency-input .open-currency-select-button').click()
cy.get('#token-search-input').type('GNO')
enterInputAmount(GNO, '0.5')
cy.swapEnterInputAmount(ETH, '0.5', true)
cy.swapSelectOutput(GNO)
cy.get('#output-currency-input .token-amount-input').should('not.equal', '')
cy.get('#swap-button').should('contain.text', 'Swap').click()
cy.get('#swap-button > button').should('contain.text', 'Swap').click()
cy.get('#confirm-swap-or-send').should('contain', 'Confirm Swap')
})

Expand All @@ -74,12 +74,10 @@ describe('Swap (mod)', () => {

describe('expert mode', () => {
beforeEach(() => {
cy.window().then((win) => {
cy.stub(win, 'prompt').returns('confirm')
})
cy.get('#open-settings-dialog-button').click()
cy.get('#toggle-expert-mode-button').click()
cy.get('#confirm-expert-mode').click()
cy.get('#confirm-modal-input').type('confirm')
cy.get('#confirm-modal-button').click()
})

it('Expert mode is ON', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,14 @@ export function ConfirmedButton({
) : (
<Instruction>Please click confirm to {action}.</Instruction>
)}
{shouldShowInput && <Input onChange={onInputChange} />}
<ButtonError error padding={'12px'} disabled={shouldButtonBeDisabled} onClick={onConfirm}>
{shouldShowInput && <Input id="confirm-modal-input" onChange={onInputChange} />}
<ButtonError
id="confirm-modal-button"
error
padding={'12px'}
disabled={shouldButtonBeDisabled}
onClick={onConfirm}
>
{children}
</ButtonError>
</Container>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { useMemo, useRef } from 'react'

import { useWalletInfo } from '@cowprotocol/wallet'

import { useIsPermitEnabled } from 'common/hooks/featureFlags/useIsPermitEnabled'

import { usePreGeneratedPermitInfo } from './usePreGeneratedPermitInfo'

import { permittableTokensAtom } from '../state/permittableTokensAtom'
Expand All @@ -13,6 +15,8 @@ export function usePermitCompatibleTokens(): PermitCompatibleTokens {
const localPermitInfo = useAtomValue(permittableTokensAtom)[chainId]
const { allPermitInfo } = usePreGeneratedPermitInfo()

const isPermitEnabled = useIsPermitEnabled()

const stableRef = JSON.stringify(Object.keys(localPermitInfo).concat(Object.keys(allPermitInfo)))

const localPermitInfoRef = useRef(localPermitInfo)
Expand All @@ -21,6 +25,11 @@ export function usePermitCompatibleTokens(): PermitCompatibleTokens {
preGeneratedPermitInfoRef.current = allPermitInfo

return useMemo(() => {
// Don't deal with permit when it's not enabled
if (!isPermitEnabled) {
return {}
}

const permitCompatibleTokens: PermitCompatibleTokens = {}

for (const address of Object.keys(preGeneratedPermitInfoRef.current)) {
Expand All @@ -34,5 +43,5 @@ export function usePermitCompatibleTokens(): PermitCompatibleTokens {
return permitCompatibleTokens
// Reducing unnecessary re-renders
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [stableRef])
}, [stableRef, isPermitEnabled])
}
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)

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,15 +1,15 @@
import type { CowSwapWidgetParams } from '@cowprotocol/widget-lib'

export function reactExample(params: CowSwapWidgetParams): string {
const paramsSanitized = {
...params,
provider: `<eip-1193 provider>`,
}
import { formatParameters } from './formatParameters'

import { COMMENTS_BEFORE_PARAMS } from '../const'

export function reactExample(params: CowSwapWidgetParams): string {
return `
import { CowSwapWidget } from '@cowprotocol/widget-react'
const params: CowSwapWidgetParams = ${JSON.stringify(paramsSanitized, null, 4)}
// ${COMMENTS_BEFORE_PARAMS}
const params: CowSwapWidgetParams = ${formatParameters(params)}
function App() {
return (
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { CowSwapWidgetParams } from '@cowprotocol/widget-lib'

import { SANITIZE_PARAMS } from '../const'

export function sanitizeParameters(params: CowSwapWidgetParams) {
return {
...params,
...SANITIZE_PARAMS,
}
}
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import type { CowSwapWidgetParams } from '@cowprotocol/widget-lib'

export function vanilaNpmExample(params: CowSwapWidgetParams): string {
const paramsSanitized = {
...params,
provider: `<eip-1193 provider>`,
}
import { formatParameters } from './formatParameters'

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 = ${JSON.stringify(paramsSanitized, null, 4)}
// ${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,11 +1,10 @@
import type { CowSwapWidgetParams } from '@cowprotocol/widget-lib'

export function vanillaNoDepsExample(params: CowSwapWidgetParams): string {
const paramsSanitized = {
...params,
provider: `<eip-1193 provider>`,
}
import { formatParameters } from './formatParameters'

import { COMMENTS_BEFORE_PARAMS } from '../const'

export function vanillaNoDepsExample(params: CowSwapWidgetParams): string {
return `
<html lang="en">
<head>
Expand All @@ -16,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 = ${JSON.stringify(paramsSanitized, null, 4)}
// ${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: TODO-TYPEFORM**
> **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: TODO-TYPEFORM |
| `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 TODO-TYPEFORM 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
4 changes: 2 additions & 2 deletions libs/widget-lib/src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ interface CowSwapWidgetConfig {
height: string
/**
* The unique identifier of the widget consumer.
* Please fill the for to let us know a little about you: <TODO-TYPEFORM>
* Please fill the for to let us know a little about you: https://cowprotocol.typeform.com/to/rONXaxHV
*/
appKey: string
/**
Expand Down Expand Up @@ -137,7 +137,7 @@ interface CowSwapWidgetConfig {
/**
* The partner fee in basis points.
* For example: 1.5% = 150 bips
* Please contact <TODO-TYPEFORM> to enable your partner fee.
* Please contact https://cowprotocol.typeform.com/to/rONXaxHV to enable your partner fee.
*/
partnerFeeBips: string
}
Expand Down

0 comments on commit 0ded27d

Please sign in to comment.