diff --git a/apps/cowswap-frontend-e2e/src/e2e/swapMod.test.ts b/apps/cowswap-frontend-e2e/src/e2e/swapMod.test.ts index eba70749e6..2e50f4ca76 100644 --- a/apps/cowswap-frontend-e2e/src/e2e/swapMod.test.ts +++ b/apps/cowswap-frontend-e2e/src/e2e/swapMod.test.ts @@ -1,4 +1,5 @@ const GNO = '0x02ABBDbAaa7b1BB64B5c878f7ac17f8DDa169532' +const ETH = '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee' describe('Swap (mod)', () => { beforeEach(() => { @@ -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') }) @@ -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', () => { diff --git a/apps/cowswap-frontend/src/common/pure/ConfirmedButton/ConfirmedButton.tsx b/apps/cowswap-frontend/src/common/pure/ConfirmedButton/ConfirmedButton.tsx index aed8a57be4..65aa356073 100644 --- a/apps/cowswap-frontend/src/common/pure/ConfirmedButton/ConfirmedButton.tsx +++ b/apps/cowswap-frontend/src/common/pure/ConfirmedButton/ConfirmedButton.tsx @@ -73,8 +73,14 @@ export function ConfirmedButton({ ) : ( Please click confirm to {action}. )} - {shouldShowInput && } - + {shouldShowInput && } + {children} diff --git a/apps/cowswap-frontend/src/modules/permit/hooks/usePermitCompatibleTokens.ts b/apps/cowswap-frontend/src/modules/permit/hooks/usePermitCompatibleTokens.ts index 4f0f3fa7d3..bbcdd4ca2b 100644 --- a/apps/cowswap-frontend/src/modules/permit/hooks/usePermitCompatibleTokens.ts +++ b/apps/cowswap-frontend/src/modules/permit/hooks/usePermitCompatibleTokens.ts @@ -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' @@ -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) @@ -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)) { @@ -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]) } 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 37b6580971..302857e841 100644 --- a/apps/widget-configurator/src/app/embedDialog/utils/reactExample.ts +++ b/apps/widget-configurator/src/app/embedDialog/utils/reactExample.ts @@ -1,15 +1,15 @@ import type { CowSwapWidgetParams } from '@cowprotocol/widget-lib' -export function reactExample(params: CowSwapWidgetParams): string { - const paramsSanitized = { - ...params, - 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 ( diff --git a/apps/widget-configurator/src/app/embedDialog/utils/sanitizeParameters.ts b/apps/widget-configurator/src/app/embedDialog/utils/sanitizeParameters.ts new file mode 100644 index 0000000000..72c0ba4f7f --- /dev/null +++ b/apps/widget-configurator/src/app/embedDialog/utils/sanitizeParameters.ts @@ -0,0 +1,10 @@ +import { CowSwapWidgetParams } from '@cowprotocol/widget-lib' + +import { SANITIZE_PARAMS } from '../const' + +export function sanitizeParameters(params: CowSwapWidgetParams) { + return { + ...params, + ...SANITIZE_PARAMS, + } +} diff --git a/apps/widget-configurator/src/app/embedDialog/utils/vanilaNpmExample.ts b/apps/widget-configurator/src/app/embedDialog/utils/vanilaNpmExample.ts index f92c1e680d..a6916dab77 100644 --- a/apps/widget-configurator/src/app/embedDialog/utils/vanilaNpmExample.ts +++ b/apps/widget-configurator/src/app/embedDialog/utils/vanilaNpmExample.ts @@ -1,17 +1,17 @@ import type { CowSwapWidgetParams } from '@cowprotocol/widget-lib' -export function vanilaNpmExample(params: CowSwapWidgetParams): string { - const paramsSanitized = { - ...params, - 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('') -const params: CowSwapWidgetParams = ${JSON.stringify(paramsSanitized, null, 4)} +// ${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 1be830a0cf..b59999f054 100644 --- a/apps/widget-configurator/src/app/embedDialog/utils/vanillaNoDepsExample.ts +++ b/apps/widget-configurator/src/app/embedDialog/utils/vanillaNoDepsExample.ts @@ -1,11 +1,10 @@ import type { CowSwapWidgetParams } from '@cowprotocol/widget-lib' -export function vanillaNoDepsExample(params: CowSwapWidgetParams): string { - const paramsSanitized = { - ...params, - provider: ``, - } +import { formatParameters } from './formatParameters' + +import { COMMENTS_BEFORE_PARAMS } from '../const' +export function vanillaNoDepsExample(params: CowSwapWidgetParams): string { return ` @@ -16,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 51de50bf48..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: TODO-TYPEFORM** +> **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: 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` | 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` | 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 diff --git a/libs/widget-lib/src/types.ts b/libs/widget-lib/src/types.ts index 022767247e..7d23fd4750 100644 --- a/libs/widget-lib/src/types.ts +++ b/libs/widget-lib/src/types.ts @@ -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: + * Please fill the for to let us know a little about you: https://cowprotocol.typeform.com/to/rONXaxHV */ appKey: string /** @@ -137,7 +137,7 @@ interface CowSwapWidgetConfig { /** * The partner fee in basis points. * For example: 1.5% = 150 bips - * Please contact to enable your partner fee. + * Please contact https://cowprotocol.typeform.com/to/rONXaxHV to enable your partner fee. */ partnerFeeBips: string }