CoW Swap Widget Library

Integrate the power of CowSwap into your product! With the widget, you can create an incredible trading interface. Specify the required pair of currencies, customize the look and much more!

Live example

See the widget in action in the widget configurator

Docs

You can find a detailed description of all widget parameters in the documentation

Quick start

npm install @cowprotocol/widget-lib --save

yarn add @cowprotocol/widget-lib

Create a container somewhere in your website, the widget will be rendered inside it:

1<div id="cowswap-widget"></div>

Import the widget and initialise it:

1import { createCowSwapWidget, CowSwapWidgetParams } from '@cowprotocol/widget-lib'
2
3// Initialise the widget
4const widgetContainer = document.getElementById('cowswap-widget')
5
6// instantiate your own web3 provider
7const provider = window.ethereum
8
9const params: CowSwapWidgetParams = {
10  appCode: 'NAME-OF-YOU-APP', // Add here the name of your app. e.g. "Pig Swap"
11  sell: { asset: 'DAI' },
12  buy: { asset: 'USDC', amount: '0.1' },
13}
14
15const {updateParams} = createCowSwapWidget(
16  widgetContainer,
17  // Optionally, you can provide some additional params to customise your widget
18  {params, provider}
19)
20
21// You also can change widget configuration on the fly
22updateParams({ ...params, tradeType: 'limit' })

Developers

Test

nx test widget-lib

Build the library

nx build widget-lib